From 72c02729350943ea76929964a0cb7a323d09ca08 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 10 May 2023 16:16:54 +0500
Subject: [PATCH 001/179] WIP

---
 src/common/app.tsx                           |   2 +
 src/common/components/chat-box/index.scss    | 354 +++++++++++++++
 src/common/components/chat-box/index.tsx     | 438 +++++++++++++++++++
 src/common/components/search-user/index.scss |  13 +
 src/common/components/search-user/index.tsx  |  51 +++
 src/common/i18n/locales/en-US.json           |  11 +
 src/common/img/svg.tsx                       |  88 ++++
 7 files changed, 957 insertions(+)
 create mode 100644 src/common/components/chat-box/index.scss
 create mode 100644 src/common/components/chat-box/index.tsx
 create mode 100644 src/common/components/search-user/index.scss
 create mode 100644 src/common/components/search-user/index.tsx

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 59ac9581bab..367d9a17914 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -24,6 +24,7 @@ import { connect } from "react-redux";
 import loadable from "@loadable/component";
 import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
+import ChatBox from "./components/chat-box";
 import { useMappedStore } from "./store/use-mapped-store";
 
 // Define lazy pages
@@ -157,6 +158,7 @@ const App = (props: any) => {
 
       <Announcement activeUser={props.activeUser} />
       <FloatingFAQ />
+      <ChatBox activeUser={props.activeUser} />
     </>
   );
 };
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
new file mode 100644
index 00000000000..fb6b1cd90f7
--- /dev/null
+++ b/src/common/components/chat-box/index.scss
@@ -0,0 +1,354 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
+.chatbox-container {
+  position: fixed;
+  z-index: 99;
+  right: 15rem;
+  bottom: 0rem;
+  height: 53px;
+  width: 400px;
+
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+
+  transition: height 0.5s ease;
+
+  @include themify(day) {
+    box-shadow: rgb(101 119 134 / 20%) 0px 0px 15px, rgb(101 119 134 / 15%) 0px 0px 3px 1px;
+    background: $white;
+  }
+
+  @include themify(night) {
+    background: $dark;
+    box-shadow: rgb(255 255 255 / 20%) 0px 0px 15px, rgb(255 255 255 / 15%) 0px 0px 3px 1px;
+  }
+
+  &.expanded {
+    height: 530px;
+  }
+
+  .chat-header {
+    border-bottom: 1px solid $white-four;
+    padding-left: 16px;
+    padding-right: 16px;
+    cursor: pointer;
+    height: 53px;
+    display: flex;
+    justify-content: space-between;
+    @include themify(day) {
+      border-bottom: 1px solid $white-four;
+    }
+
+    @include themify(night) {
+      border-bottom: 1px solid $dark-indigo;
+    }
+
+    .back-arrow-image {
+      margin: 1.1rem 1rem 0 0;
+      .back-arrow-svg {
+        border-radius: 50%;
+        padding: 8px 6px 10px 6px;
+      }
+    }
+
+    .back-arrow-svg:hover {
+      background: rgba(29, 155, 240, 0.1);
+    }
+    .message-title {
+      width: 288px;
+    }
+
+    .message-content {
+      margin-top: 1rem;
+      font-weight: 700;
+      line-height: 24px;
+      font-size: 20px;
+      font-family: $font-family-sans-serif;
+
+      @include themify(day) {
+        color: $charcoal-grey;
+      }
+
+      @include themify(night) {
+        color: $white-two;
+      }
+    }
+
+    .actionable-imgs {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 13px;
+      .message-image {
+        margin: 0.4rem 0.3rem 0 0;
+
+        .message-svg {
+          width: 40px;
+          height: 40px;
+          justify-content: center;
+          text-align: center;
+          border-radius: 50%;
+          padding-top: 13px;
+          display: flex;
+
+          svg {
+            height: 20px;
+            width: 20px;
+          }
+        }
+        .message-svg:hover {
+          background: rgba(29, 155, 240, 0.1);
+        }
+      }
+      .arrow-image {
+        margin: 0.4rem 0.3rem 0 0;
+        .arrow-svg {
+          display: flex;
+          justify-content: center;
+          text-align: center;
+          padding-top: 7px;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .arrow-svg:hover {
+          background: rgba(29, 155, 240, 0.1);
+        }
+      }
+    }
+  }
+
+  .chat-body {
+    position: relative;
+    height: 470px;
+    overflow-y: auto;
+
+    &.current-user {
+      height: 412px;
+      margin-bottom: 8px;
+      @include themify(day) {
+        border-bottom: 1px solid $white-three;
+      }
+      @include themify(night) {
+        border-bottom: 1px solid #172b44;
+      }
+    }
+
+    .chat-content {
+      display: flex;
+
+      .user-img {
+        padding: 18px 16px;
+      }
+      .user-title {
+        padding-top: 18px;
+        width: -webkit-fill-available;
+        cursor: pointer;
+        .username {
+          @include themify(day) {
+            color: $charcoal-grey;
+          }
+
+          @include themify(night) {
+            color: $white-two;
+          }
+
+          font-size: 16px;
+
+          font-weight: 700;
+          margin-bottom: 0.2rem !important;
+        }
+        .last-message {
+          font-size: 15px;
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+
+    .chat-content:hover {
+      @include themify(day) {
+        background: $light-powder-blue;
+      }
+      @include themify(night) {
+        background: $gunmetal;
+      }
+    }
+    .user-profile {
+      border-bottom-right-radius: 20px;
+      border-bottom-left-radius: 20px;
+      @include themify(day) {
+        background: $white-three;
+      }
+      @include themify(night) {
+        background: #172b44;
+      }
+
+      padding: 0 16px 16px 16px;
+      margin: 0 16px 16px 16px;
+
+      .user-logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 16px;
+      }
+      .user-name {
+        font-size: 20px;
+        font-weight: 700;
+        @include themify(day) {
+          color: $charcoal-grey;
+        }
+        @include themify(night) {
+          color: $white;
+        }
+      }
+      .about {
+        text-align: center;
+        padding: 4px 0;
+        @include themify(day) {
+          color: $charcoal-grey;
+        }
+        @include themify(night) {
+          color: $white;
+        }
+      }
+      .joining-info {
+        justify-content: space-evenly;
+      }
+      .created-date {
+        padding-top: 8px;
+        font-size: 14px;
+        @include themify(day) {
+          color: $charcoal-grey;
+        }
+        @include themify(night) {
+          color: $white;
+        }
+      }
+      .followers {
+        font-size: 14px;
+        padding-top: 4px !important;
+        font-family: New Century Schoolbook;
+      }
+    }
+
+    .user-profile:hover {
+      @include themify(day) {
+        background: $white-four;
+      }
+      @include themify(night) {
+        background: #0f223a;
+      }
+    }
+
+    .scroller {
+      position: sticky;
+      margin-left: 83%;
+      width: 33px;
+      height: 33px;
+      box-shadow: $box-shadow;
+      background: $dark-sky-blue;
+      color: $white;
+      border-radius: 50%;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .chats {
+      .date-time-detail {
+        .date-time {
+          margin: 1rem 0;
+          text-align: center;
+          font-size: 13px;
+        }
+      }
+      .message {
+        display: flex;
+        .user-img {
+          padding: 18px 16px;
+        }
+        .user-info {
+          .receiver-message-content {
+            @include themify(day) {
+              background: #e4e6eb;
+            }
+            @include themify(night) {
+              background: #cee2ff;
+   
+            }
+            color: #050505;
+            max-width: 280px;
+            margin-top: 17px;
+            padding: 8px 12px 8px 12px;
+            border-radius: 18px 18px 18px 18px;
+          }
+        }
+      }
+      .sender {
+        display: flex;
+        margin-bottom: 0.17rem;
+        .sender-message {
+          border-radius: 18px 18px 18px 18px;
+          max-width: 280px;
+          margin-left: auto;
+          background-color: rgb(0, 132, 255);
+          display: flex;
+          justify-content: flex-end;
+          margin-right: 15px;
+          .sender-message-time {
+            color: $white;
+            margin-right: 30px;
+            font-size: 12px;
+            margin-top: 3px;
+          }
+          .sender-message-content {
+            margin-bottom: 0;
+            color: $white;
+            font-size: 16px;
+            font-weight: 400;
+            padding: 8px 12px 8px 12px;
+          }
+        }
+      }
+    }
+  }
+  .chat {
+    margin: 4px 4px;
+    padding: 4px;
+
+    .chat-input-group {
+      width: 112%;
+      .chat-input {
+        height: 45px;
+        border-radius: 12px !important;
+      }
+      .msg-svg {
+        padding: 6px 8px 4px 5px;
+        position: inherit;
+        right: 41px;
+        border-radius: 50%;
+        margin: 4px 0;
+        margin-right: 11px;
+        z-index: 10;
+        &.active {
+          cursor: pointer;
+        }
+        &.active:hover {
+          background: rgba(29, 155, 240, 0.1);
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
new file mode 100644
index 00000000000..e083e80bad3
--- /dev/null
+++ b/src/common/components/chat-box/index.tsx
@@ -0,0 +1,438 @@
+import React, { useEffect, useState } from "react";
+import { Button, Form, FormControl, InputGroup } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+import { Account } from "../../store/accounts/types";
+import { ActiveUser } from "../../store/active-user/types";
+
+import Tooltip from "../tooltip";
+import UserAvatar from "../user-avatar";
+import SeachUser from "../search-user";
+
+import {
+  addMessageSVG,
+  expandArrow,
+  collapseArrow,
+  arrowBackSvg,
+  messageSendSvg,
+  chevronUpSvg,
+  chevronDownSvgForSlider
+} from "../../img/svg";
+import { dateToFormatted } from "../../helper/parse-date";
+import { _t } from "../../i18n";
+import { getAccountFull } from "../../api/hive";
+
+import "./index.scss";
+
+export interface profileData {
+  joiningData: string;
+  about: string | undefined;
+  followers: number | undefined;
+}
+
+interface Props {
+  activeUser: ActiveUser | null;
+}
+
+export default function ChatBox({ activeUser }: Props) {
+  const chatBodyDivRef = React.createRef<HTMLDivElement>();
+  const [expanded, setExpanded] = useState(false);
+  const [currentUser, setCurrentUser] = useState("");
+  const [isCurrentUser, setIsCurrentUser] = useState(false);
+  const [message, setMessage] = useState("");
+  const [isMessageText, setIsMessageText] = useState(false);
+  const [currentUserAccount, setCurrentUserAccount] = useState<Account>();
+  const [profileData, setProfileData] = useState<profileData>();
+  const [isScrollToTop, setIsScrollToTop] = useState(false);
+  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const [showSearchUser, setShowSearchUser] = useState(false);
+
+  useEffect(() => {
+    if (currentUser) {
+      fetchAccountData();
+    }
+  }, [currentUser]);
+
+  const contentList = [
+    {
+      username: "good-karma",
+      lastMessage: "Hy Hope so you are doing well"
+    },
+    {
+      username: "ecency",
+      lastMessage: "Hy"
+    },
+    {
+      username: "demo.com",
+      lastMessage: "Whats Up"
+    },
+    {
+      username: "hive-189310",
+      lastMessage: "Hello"
+    },
+    {
+      username: "hispapro",
+      lastMessage: "Hy Hope so you are doing well"
+    },
+    {
+      username: "galenkp",
+      lastMessage: "How are you?"
+    },
+    {
+      username: "deanliu",
+      lastMessage: "Bro"
+    },
+    {
+      username: "demo123",
+      lastMessage: "What are you doing"
+    },
+    {
+      username: "fastchrisuk",
+      lastMessage: "Hy Hope so you are doing well"
+    },
+    {
+      username: "incublus",
+      lastMessage: "Hy Hope so you are doing well"
+    },
+    {
+      username: "ipexito",
+      lastMessage: "Hello"
+    },
+    {
+      username: "belemo",
+      lastMessage: "Hy Hope so you are doing well"
+    },
+    {
+      username: "foodchunk",
+      lastMessage: "How are you?"
+    },
+    {
+      username: "macro1997",
+      lastMessage: "Bro"
+    },
+    {
+      username: "gelenkp",
+      lastMessage: "What are you doing"
+    },
+    {
+      username: "der-prophet",
+      lastMessage: "Hy Hope so you are doing well"
+    }
+  ];
+
+  const messageList = [
+    {
+      username: "demo.com",
+      time: "4.27 pm",
+      message: "Hy How are you.",
+      date: "4/9/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.44 pm",
+      message: "I am fine",
+      date: "6/9/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.44 pm",
+      message: "What's about you",
+      date: "6/9/2022"
+    },
+    {
+      username: "demo.com",
+      time: "4.45 pm",
+      message: "Looks good",
+      date: "12/9/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.46 pm",
+      message: "Thanks for asking",
+      date: "12/9/2022"
+    },
+    {
+      username: "demo.com",
+      time: "4.48 pm",
+      message: "What are you doing Nowadays",
+      date: "14/9/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.49 pm",
+      message:
+        "He was educated at the Aitchison College and Cathedral School in Lahore, and then the Royal Grammar School Worcester in England, where he excelled at cricket. In 1972, he enrolled in Keble College, Oxford where he studied Philosophy, Politics and Economics, graduating in 1975.",
+      date: "24/9/2022"
+    },
+    {
+      username: "demo.com",
+      time: "4.50 pm",
+      message: "Seems good",
+      date: "4/10/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.50 pm",
+      message: "Excellent",
+      date: "4/10/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.52 pm",
+      message: "Thanks",
+      date: "4/11/2022"
+    }
+  ];
+
+  const fetchAccountData = async () => {
+    const response = await getAccountFull(currentUser);
+    setCurrentUserAccount(response);
+    setProfileData({
+      joiningData: response.created,
+      about: response.profile?.about,
+      followers: response.follow_stats?.follower_count
+    });
+    console.log(response);
+  };
+
+  const userClicked = (username: string) => {
+    setIsCurrentUser(true);
+    setCurrentUser(username);
+  };
+
+  const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    setMessage(e.target.value);
+    setIsMessageText(e.target.value.length !== 0);
+  };
+
+  const sendMessage = () => {
+    if (message.length !== 0) {
+      setMessage("");
+      setIsMessageText(false);
+    }
+  };
+
+  useEffect(() => {
+    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
+  }, [isCurrentUser]);
+
+  const formatFollowers = (count: number | undefined) => {
+    if (count) {
+      return count >= 1e6
+        ? (count / 1e6).toLocaleString() + "M"
+        : count >= 1e3
+        ? (count / 1e3).toLocaleString() + "K"
+        : count.toLocaleString();
+    }
+    return count;
+  };
+
+  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    var element = event.currentTarget;
+    let srollHeight: number = (element.scrollHeight / 100) * 25;
+    if (!isCurrentUser) {
+      if (element.scrollTop >= srollHeight) {
+        setIsScrollToTop(true);
+        return;
+      }
+      setIsScrollToTop(false);
+    } else {
+      if (element.scrollTop <= (element.scrollHeight / 100) * 40 && element.scrollHeight > 700) {
+        setIsScrollToBottom(true);
+        return;
+      }
+      setIsScrollToBottom(false);
+    }
+  };
+
+  const ScrollerClicked = () => {
+    chatBodyDivRef?.current?.scrollTo({
+      top: isCurrentUser ? chatBodyDivRef?.current?.scrollHeight : 0,
+      behavior: "smooth"
+    });
+  };
+
+  const handleMessageSvgClick = () => {
+    setShowSearchUser(true);
+    console.log("i am clicked");
+  };
+
+  const setSearchUser = (d: boolean) => {
+    setShowSearchUser(d);
+  };
+
+  return (
+    <>
+      <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
+        <div className="chat-header">
+          {currentUser && expanded && (
+            <div className="back-arrow-image">
+              <span
+                className="back-arrow-svg"
+                onClick={() => {
+                  setCurrentUser("");
+                  setIsCurrentUser(false);
+                }}
+              >
+                {" "}
+                {arrowBackSvg}
+              </span>
+            </div>
+          )}
+          <div className="message-title" onClick={() => setExpanded(!expanded)}>
+            <p className="message-content">{currentUser ? currentUser : _t("chat.messages")}</p>
+          </div>
+          <div className="actionable-imgs">
+            {!currentUser && (
+              <div className="message-image" onClick={handleMessageSvgClick}>
+                <Tooltip content={_t("chat.new-message")}>
+                  <p className="message-svg">{addMessageSVG}</p>
+                </Tooltip>
+              </div>
+            )}
+            <div className="arrow-image">
+              <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+                <p className="arrow-svg" onClick={() => setExpanded(!expanded)}>
+                  {expanded ? expandArrow : collapseArrow}
+                </p>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={`chat-body ${currentUser ? "current-user" : ""}`}
+          ref={chatBodyDivRef}
+          onScroll={handleScroll}
+        >
+          {currentUser.length !== 0 ? (
+            <>
+              <Link to={`/@${currentUser}`}>
+                {profileData?.joiningData && (
+                  <div className="user-profile">
+                    <span className="user-logo">
+                      <UserAvatar username={currentUser} size="large" />
+                    </span>
+                    <h4 className="user-name user-logo ">{currentUser}</h4>
+                    {profileData.about && <p className="about user-logo ">{profileData.about}</p>}
+
+                    <div className="created-date user-logo joining-info">
+                      <p>
+                        {" "}
+                        {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
+                      </p>
+                      <p className="followers">
+                        {" "}
+                        {formatFollowers(profileData!.followers)} {_t("chat.followers")}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </Link>
+              <div className="chats">
+                {messageList.map((msg) => {
+                  if (msg.username !== activeUser?.username) {
+                    return (
+                      <>
+                        <div key={msg.username} className="date-time-detail">
+                          <p className="date-time">
+                            {msg.date}, {msg.time}
+                          </p>
+                        </div>
+                        <div key={msg.time} className="message">
+                          <div className="user-img">
+                            <span>
+                              <UserAvatar username={msg.username} size="medium" />
+                            </span>
+                          </div>
+                          <div className="user-info">
+                            <p className="receiver-message-content">{msg.message}</p>
+                          </div>
+                        </div>
+                      </>
+                    );
+                  } else {
+                    return (
+                      <div className="sender">
+                        <div className="sender-message">
+                          {/* <span className="sender-message-time">{msg.time}</span> */}
+                          <p className="sender-message-content">{msg.message}</p>
+                        </div>
+                      </div>
+                    );
+                  }
+                })}
+              </div>
+            </>
+          ) : (
+            <>
+              {contentList.map((user) => {
+                return (
+                  <div key={user.username} className="chat-content">
+                    <Link to={`/@${user.username}`}>
+                      <div className="user-img">
+                        <span>
+                          <UserAvatar username={user.username} size="medium" />
+                        </span>
+                      </div>
+                    </Link>
+
+                    <div className="user-title" onClick={() => userClicked(user.username)}>
+                      <p className="username">{user.username}</p>
+                      <p className="last-message">{user.lastMessage}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {((isScrollToTop && !isCurrentUser) || (isCurrentUser && isScrollToBottom)) && (
+            <Tooltip
+              content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
+            >
+              <div
+                className="scroller"
+                style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
+                onClick={ScrollerClicked}
+              >
+                {isCurrentUser ? chevronDownSvgForSlider : chevronUpSvg}
+              </div>
+            </Tooltip>
+          )}
+        </div>
+
+        {currentUser && (
+          <div className="chat">
+            <Form
+              onSubmit={(e: React.FormEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+                sendMessage();
+              }}
+            >
+              <InputGroup className="chat-input-group">
+                <Form.Control
+                  value={message}
+                  onChange={handleMessage}
+                  required={true}
+                  type="text"
+                  placeholder={_t("chat.start-chat-placeholder")}
+                  autoComplete="off"
+                  className="chat-input"
+                />
+                <InputGroup.Append
+                  className={`msg-svg ${isMessageText ? "active" : ""}`}
+                  onClick={sendMessage}
+                >
+                  {messageSendSvg}
+                </InputGroup.Append>
+              </InputGroup>
+            </Form>
+          </div>
+        )}
+      </div>
+      {showSearchUser && <SeachUser setSearchUser={setSearchUser} />}
+    </>
+  );
+}
diff --git a/src/common/components/search-user/index.scss b/src/common/components/search-user/index.scss
new file mode 100644
index 00000000000..0c5396a34f5
--- /dev/null
+++ b/src/common/components/search-user/index.scss
@@ -0,0 +1,13 @@
+.search-user-dialog {
+  .search-header {
+    padding-left: 5px;
+  }
+  .modal-content {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .modal-body {
+    padding: 0 0 10px 0;
+  }
+}
diff --git a/src/common/components/search-user/index.tsx b/src/common/components/search-user/index.tsx
new file mode 100644
index 00000000000..aac0764a9ec
--- /dev/null
+++ b/src/common/components/search-user/index.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import { Modal, Form, FormControl } from "react-bootstrap";
+
+import { _t } from "../../i18n";
+import "./index.scss";
+
+interface Props {
+  setSearchUser: (d: boolean) => void;
+}
+
+export default function SeachUser(props: Props) {
+  const [searchtext, setSearchText] = useState("");
+
+  const setStep = () => {
+    const { setSearchUser } = props;
+    setSearchUser(false);
+  };
+  return (
+    <Modal
+      animation={false}
+      show={true}
+      centered={true}
+      onHide={setStep}
+      keyboard={false}
+      className="search-user-dialog"
+      size="lg"
+    >
+      <Modal.Header closeButton={true} className="search-header">
+        <Modal.Title>New message</Modal.Title>
+      </Modal.Header>
+      <Form.Group className="w-100 mb-3">
+        <Form.Control
+          type="text"
+          placeholder={_t("chat.search")}
+          value={searchtext}
+          onChange={(e) => {
+            setSearchText(e.target.value);
+          }}
+        />
+      </Form.Group>
+      <Modal.Body>
+        {/* <ProposalVotesDetail
+          {...this.props}
+          searchText={searchText}
+          getVotesCount={this.getVotesCount}
+          checkIsMoreData={this.checkIsMoreData}
+        /> */}
+      </Modal.Body>
+    </Modal>
+  );
+}
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 1114e28031f..14b2868ddac 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1612,6 +1612,17 @@
     "update-successful": "Update successful",
     "update-success-message": "Your Recovery email has been updated successfully"
   },
+  "chat": {
+    "messages": "Messages",
+    "new-message": "New Message",
+    "collapse": "Collapse",
+    "expand": "Expand",
+    "scroll-to-bottom": "scroll to Bottom",
+    "joined": "Joined",
+    "followers": "Followers",
+    "start-chat-placeholder": "Start a new message",
+    "search": "Search people"
+  },
   "add-image": {
     "title": "Add Image",
     "text-label": "Image Text",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 98a0114b70b..0f9c502ed05 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -1983,3 +1983,91 @@ export const dragSvg = (
     />
   </svg>
 );
+
+export const addMessageSVG = (
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    mirror-in-rtl="true"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M24 3v4a1 1 0 0 1 -2 0V3a1 1 0 0 0 -0.9 -0.99c-0.05 0 -0.08 -0.01 -0.11 -0.01H3a1.016 1.016 0 0 0 -1 1v10a1.016 1.016 0 0 0 1 1h2v2.81l2.69 -2.32 0.57 -0.49h6.74a1 1 0 0 1 0 2h-6l-4.35 3.76a0.969 0.969 0 0 1 -0.65 0.241 1.059 1.059 0 0 1 -0.42 -0.09 1 1 0 0 1 -0.58 -0.91v-3A3.009 3.009 0 0 1 0 13V3A3.009 3.009 0 0 1 3 0h18a2.832 2.832 0 0 1 0.3 0.02A3 3 0 0 1 24 3z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M24 11a1 1 0 0 1 -1 1h-3v3a1 1 0 0 1 -2 0V12h-3a1 1 0 0 1 0 -2h3V7a1 1 0 0 1 2 0v3h3A1 1 0 0 1 24 10.999z"
+    />
+  </svg>
+);
+
+export const expandArrow = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);
+
+export const collapseArrow = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M18 15l-6-6-6 6" />
+  </svg>
+);
+
+export const arrowBackSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M19 12H6M12 5l-7 7 7 7" />
+  </svg>
+);
+
+export const messageSendSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon icon-tabler icon-tabler-send"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="#3c4449"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 14l11 -11" />
+    <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" />
+  </svg>
+);

From b95a6505cd88f9f7b36e3e5fff6873ca97f7dd95 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 12 May 2023 10:48:04 +0500
Subject: [PATCH 002/179] Design User search Modal

---
 src/common/components/chat-box/index.tsx     | 15 ++++-
 src/common/components/search-user/index.scss | 29 ++++++++++
 src/common/components/search-user/index.tsx  | 61 +++++++++++++++++---
 3 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index e083e80bad3..0e7b7c2b0d7 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -192,7 +192,6 @@ export default function ChatBox({ activeUser }: Props) {
       about: response.profile?.about,
       followers: response.follow_stats?.follower_count
     });
-    console.log(response);
   };
 
   const userClicked = (username: string) => {
@@ -200,6 +199,12 @@ export default function ChatBox({ activeUser }: Props) {
     setCurrentUser(username);
   };
 
+  const setCurrentUserFromSearch = (username: string) => {
+    setCurrentUser(username);
+    setExpanded(true);
+    setIsCurrentUser(true);
+  };
+
   const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
     setMessage(e.target.value);
     setIsMessageText(e.target.value.length !== 0);
@@ -254,7 +259,6 @@ export default function ChatBox({ activeUser }: Props) {
 
   const handleMessageSvgClick = () => {
     setShowSearchUser(true);
-    console.log("i am clicked");
   };
 
   const setSearchUser = (d: boolean) => {
@@ -432,7 +436,12 @@ export default function ChatBox({ activeUser }: Props) {
           </div>
         )}
       </div>
-      {showSearchUser && <SeachUser setSearchUser={setSearchUser} />}
+      {showSearchUser && (
+        <SeachUser
+          setSearchUser={setSearchUser}
+          setCurrentUserFromSearch={setCurrentUserFromSearch}
+        />
+      )}
     </>
   );
 }
diff --git a/src/common/components/search-user/index.scss b/src/common/components/search-user/index.scss
index 0c5396a34f5..b840aa65d54 100644
--- a/src/common/components/search-user/index.scss
+++ b/src/common/components/search-user/index.scss
@@ -10,4 +10,33 @@
   .modal-body {
     padding: 0 0 10px 0;
   }
+
+  .search-content {
+    padding: 0.7rem;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    margin-bottom: 1rem;
+
+    .search-user-img {
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      margin-left: 10px;
+    }
+
+    .search-user-title {
+      margin-left: 1rem;
+      .search-username {
+        margin-top: 7px;
+        margin-bottom: 0;
+        font-size: 20px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .search-content:hover {
+    background: #e7e7e7;
+  }
 }
diff --git a/src/common/components/search-user/index.tsx b/src/common/components/search-user/index.tsx
index aac0764a9ec..1b3cf3dede3 100644
--- a/src/common/components/search-user/index.tsx
+++ b/src/common/components/search-user/index.tsx
@@ -1,26 +1,59 @@
 import React, { useEffect, useState } from "react";
 import { Modal, Form, FormControl } from "react-bootstrap";
+import useDebounce from "react-use/lib/useDebounce";
+import { lookupAccounts } from "../../api/hive";
 
+import UserAvatar from "../user-avatar";
 import { _t } from "../../i18n";
 import "./index.scss";
 
 interface Props {
   setSearchUser: (d: boolean) => void;
+  setCurrentUserFromSearch: (username: string) => void;
 }
 
 export default function SeachUser(props: Props) {
   const [searchtext, setSearchText] = useState("");
+  const [userList, setUserList] = useState<string[]>([]);
+  const [showModal, setShowModal] = useState(true);
 
-  const setStep = () => {
+  // const setStep = () => {
+  //   const { setSearchUser } = props;
+  //   setSearchUser(false);
+  // };
+
+  useDebounce(
+    async () => {
+      const resp = await lookupAccounts(searchtext, 7);
+      setUserList(resp);
+    },
+    500,
+    [searchtext]
+  );
+
+  useEffect(() => {
+    setUserList(["good-karma", "good-akai", "good-ali", "good-angle", "good-bad"]);
+  }, []);
+
+  const searchUserClicked = (username: string) => {
+    const { setCurrentUserFromSearch, setSearchUser } = props;
+    setCurrentUserFromSearch(username);
+    setSearchUser(false);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    console.log("Close run");
     const { setSearchUser } = props;
     setSearchUser(false);
   };
+
   return (
     <Modal
       animation={false}
-      show={true}
+      show={showModal}
       centered={true}
-      onHide={setStep}
+      onHide={handleCloseModal}
       keyboard={false}
       className="search-user-dialog"
       size="lg"
@@ -39,12 +72,22 @@ export default function SeachUser(props: Props) {
         />
       </Form.Group>
       <Modal.Body>
-        {/* <ProposalVotesDetail
-          {...this.props}
-          searchText={searchText}
-          getVotesCount={this.getVotesCount}
-          checkIsMoreData={this.checkIsMoreData}
-        /> */}
+        {userList.map((user) => {
+          return (
+            <div key={user} className="search-content" onClick={() => searchUserClicked(user)}>
+              <div className="search-user-img">
+                <span>
+                  <UserAvatar username={user} size="medium" />
+                </span>
+              </div>
+
+              <div className="search-user-title">
+                <p className="search-username">{user}</p>
+                {/* <p className="searc-last-message">{user}</p> */}
+              </div>
+            </div>
+          );
+        })}
       </Modal.Body>
     </Modal>
   );

From 4803cb721eabf2d7e0a2f7e1b23314c5cdf3f9f5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 15 May 2023 17:44:23 +0500
Subject: [PATCH 003/179] Add join Chat button

---
 src/common/components/chat-box/index.scss    |  58 +++--
 src/common/components/chat-box/index.tsx     | 243 ++++++++++++-------
 src/common/components/search-user/index.scss |  17 +-
 src/common/components/search-user/index.tsx  |  41 ++--
 src/common/i18n/locales/en-US.json           |   3 +-
 5 files changed, 230 insertions(+), 132 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index fb6b1cd90f7..3161780b957 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -47,10 +47,13 @@
     }
 
     .back-arrow-image {
-      margin: 1.1rem 1rem 0 0;
+      justify-content: center;
+      display: flex;
+      align-items: center;
       .back-arrow-svg {
         border-radius: 50%;
-        padding: 8px 6px 10px 6px;
+        padding: 6px;
+        // padding: 8px 6px 10px 6px;
       }
     }
 
@@ -58,11 +61,16 @@
       background: rgba(29, 155, 240, 0.1);
     }
     .message-title {
+      display: flex;
       width: 288px;
+      margin-left: 0.8rem;
+      .user-icon {
+        margin: 14px 11px 0 0;
+      }
     }
 
     .message-content {
-      margin-top: 1rem;
+      margin-top: 0.8rem;
       font-weight: 700;
       line-height: 24px;
       font-size: 20px;
@@ -81,9 +89,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-top: 13px;
+      margin-top: 1.1rem;
       .message-image {
-        margin: 0.4rem 0.3rem 0 0;
+        margin: 0.2rem 0.3rem 0 0;
 
         .message-svg {
           width: 40px;
@@ -91,7 +99,7 @@
           justify-content: center;
           text-align: center;
           border-radius: 50%;
-          padding-top: 13px;
+          padding-top: 11px;
           display: flex;
 
           svg {
@@ -104,12 +112,12 @@
         }
       }
       .arrow-image {
-        margin: 0.4rem 0.3rem 0 0;
+        margin: 1.5 0.3rem 0 0;
         .arrow-svg {
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 7px;
+          padding-top: 6px;
           width: 40px;
           height: 40px;
           border-radius: 50%;
@@ -138,6 +146,12 @@
       }
     }
 
+    &.join-chat {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
     .chat-content {
       display: flex;
 
@@ -195,6 +209,7 @@
         justify-content: center;
         align-items: center;
         padding-top: 16px;
+        cursor: pointer;
       }
       .user-name {
         font-size: 20px;
@@ -247,19 +262,31 @@
 
     .scroller {
       position: sticky;
-      margin-left: 83%;
+      margin-left: 89%;
       width: 33px;
       height: 33px;
-      box-shadow: $box-shadow;
-      background: $dark-sky-blue;
-      color: $white;
       border-radius: 50%;
       z-index: 10;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      @include themify(day) {
+        background: #e4e6eb;
+        border: 1px solid $white-five;
+      }
+      @include themify(night) {
+        background: #0f223a;
+      }
+
       svg {
+        @include themify(day) {
+          color: $dark-sky-blue;
+        }
+        @include themify(night) {
+          color: $white;
+        }
+
         width: 20px;
         height: 20px;
       }
@@ -276,7 +303,7 @@
       .message {
         display: flex;
         .user-img {
-          padding: 18px 16px;
+          padding: 18px 8px 18px 16px;
         }
         .user-info {
           .receiver-message-content {
@@ -285,11 +312,10 @@
             }
             @include themify(night) {
               background: #cee2ff;
-   
             }
             color: #050505;
             max-width: 280px;
-            margin-top: 17px;
+            margin-top: 19px;
             padding: 8px 12px 8px 12px;
             border-radius: 18px 18px 18px 18px;
           }
@@ -336,7 +362,7 @@
       .msg-svg {
         padding: 6px 8px 4px 5px;
         position: inherit;
-        right: 41px;
+        right: 44px;
         border-radius: 50%;
         margin: 4px 0;
         margin-right: 11px;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 0e7b7c2b0d7..476e02f0d8c 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, Form, FormControl, InputGroup } from "react-bootstrap";
+import { Button, Form, FormControl, InputGroup, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 import { Account } from "../../store/accounts/types";
@@ -23,6 +23,7 @@ import { _t } from "../../i18n";
 import { getAccountFull } from "../../api/hive";
 
 import "./index.scss";
+import { updateProfile } from "../../api/operations";
 
 export interface profileData {
   joiningData: string;
@@ -41,15 +42,27 @@ export default function ChatBox({ activeUser }: Props) {
   const [isCurrentUser, setIsCurrentUser] = useState(false);
   const [message, setMessage] = useState("");
   const [isMessageText, setIsMessageText] = useState(false);
-  const [currentUserAccount, setCurrentUserAccount] = useState<Account>();
+  const [accountData, setAccountData] = useState<Account>();
   const [profileData, setProfileData] = useState<profileData>();
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
+  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
+  const [inProgress, setInProgress] = useState(false);
+
+  useEffect(() => {
+    fetchProfileData();
+  }, []);
+
+  useEffect(() => {
+    fetchProfileData();
+    setCurrentUser("");
+    setIsCurrentUser(false);
+  }, [activeUser]);
 
   useEffect(() => {
     if (currentUser) {
-      fetchAccountData();
+      fetchCurrentUserData();
     }
   }, [currentUser]);
 
@@ -179,14 +192,19 @@ export default function ChatBox({ activeUser }: Props) {
     {
       username: "mtsaeed",
       time: "4.52 pm",
-      message: "Thanks",
+      message: "Thanks. I am very grateful to you.",
       date: "4/11/2022"
+    },
+    {
+      username: "mtsaeed",
+      time: "4.54 pm",
+      message: "Bundle of thanks.",
+      date: "5/11/2022"
     }
   ];
 
-  const fetchAccountData = async () => {
+  const fetchCurrentUserData = async () => {
     const response = await getAccountFull(currentUser);
-    setCurrentUserAccount(response);
     setProfileData({
       joiningData: response.created,
       about: response.profile?.about,
@@ -194,6 +212,16 @@ export default function ChatBox({ activeUser }: Props) {
     });
   };
 
+  const fetchProfileData = async () => {
+    const response = await getAccountFull(activeUser?.username!);
+    setAccountData(response);
+    const { posting_json_metadata } = response;
+    const profile = JSON.parse(posting_json_metadata!).profile;
+
+    const hasNoStrKey = !!profile.noStrKey && profile.noStrKey.trim() !== "";
+    setHasUserJoinedChat(hasNoStrKey);
+  };
+
   const userClicked = (username: string) => {
     setIsCurrentUser(true);
     setCurrentUser(username);
@@ -235,19 +263,14 @@ export default function ChatBox({ activeUser }: Props) {
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     let srollHeight: number = (element.scrollHeight / 100) * 25;
-    if (!isCurrentUser) {
-      if (element.scrollTop >= srollHeight) {
-        setIsScrollToTop(true);
-        return;
-      }
-      setIsScrollToTop(false);
-    } else {
-      if (element.scrollTop <= (element.scrollHeight / 100) * 40 && element.scrollHeight > 700) {
-        setIsScrollToBottom(true);
-        return;
-      }
-      setIsScrollToBottom(false);
-    }
+    const isScrollToTop = !isCurrentUser && element.scrollTop >= srollHeight;
+    const isScrollToBottom =
+      isCurrentUser &&
+      element.scrollTop <= (element.scrollHeight / 100) * 50 &&
+      element.scrollHeight > 700;
+
+    setIsScrollToTop(isScrollToTop);
+    setIsScrollToBottom(isScrollToBottom);
   };
 
   const ScrollerClicked = () => {
@@ -265,6 +288,27 @@ export default function ChatBox({ activeUser }: Props) {
     setShowSearchUser(d);
   };
 
+  const handleJoinChat = () => {
+    setInProgress(true);
+    setTimeout(() => {
+      setInProgress(false);
+      setHasUserJoinedChat(true);
+    }, 4000);
+
+    // const { profile } = response;
+
+    // const newProfile = {
+    //   noStrKey: "nsec1mefplh7mwup68r84x6gxkqn4w0ymj5q8cr0frj0lgflx8vrwvw7sdxh3ew"
+    // };
+
+    // const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+    // console.log(updatedProfile);
+  };
+
+  const chatButtonSpinner = (
+    <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
+  );
+
   return (
     <>
       <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
@@ -284,10 +328,16 @@ export default function ChatBox({ activeUser }: Props) {
             </div>
           )}
           <div className="message-title" onClick={() => setExpanded(!expanded)}>
+            {currentUser && (
+              <p className="user-icon">
+                <UserAvatar username={currentUser} size="small" />
+              </p>
+            )}
+
             <p className="message-content">{currentUser ? currentUser : _t("chat.messages")}</p>
           </div>
           <div className="actionable-imgs">
-            {!currentUser && (
+            {!currentUser && hasUserJoinedChat && (
               <div className="message-image" onClick={handleMessageSvgClick}>
                 <Tooltip content={_t("chat.new-message")}>
                   <p className="message-svg">{addMessageSVG}</p>
@@ -305,90 +355,105 @@ export default function ChatBox({ activeUser }: Props) {
         </div>
 
         <div
-          className={`chat-body ${currentUser ? "current-user" : ""}`}
+          className={`chat-body ${currentUser ? "current-user" : ""} ${
+            !hasUserJoinedChat ? "join-chat" : ""
+          }`}
           ref={chatBodyDivRef}
           onScroll={handleScroll}
         >
-          {currentUser.length !== 0 ? (
+          {hasUserJoinedChat ? (
             <>
-              <Link to={`/@${currentUser}`}>
-                {profileData?.joiningData && (
-                  <div className="user-profile">
-                    <span className="user-logo">
-                      <UserAvatar username={currentUser} size="large" />
-                    </span>
-                    <h4 className="user-name user-logo ">{currentUser}</h4>
-                    {profileData.about && <p className="about user-logo ">{profileData.about}</p>}
-
-                    <div className="created-date user-logo joining-info">
-                      <p>
-                        {" "}
-                        {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
-                      </p>
-                      <p className="followers">
-                        {" "}
-                        {formatFollowers(profileData!.followers)} {_t("chat.followers")}
-                      </p>
-                    </div>
-                  </div>
-                )}
-              </Link>
-              <div className="chats">
-                {messageList.map((msg) => {
-                  if (msg.username !== activeUser?.username) {
-                    return (
-                      <>
-                        <div key={msg.username} className="date-time-detail">
-                          <p className="date-time">
-                            {msg.date}, {msg.time}
+              {currentUser.length !== 0 ? (
+                <>
+                  <Link to={`/@${currentUser}`}>
+                    {profileData?.joiningData && (
+                      <div className="user-profile">
+                        <span className="user-logo">
+                          <UserAvatar username={currentUser} size="large" />
+                        </span>
+                        <h4 className="user-name user-logo ">{currentUser}</h4>
+                        {profileData.about && (
+                          <p className="about user-logo ">{profileData.about}</p>
+                        )}
+
+                        <div className="created-date user-logo joining-info">
+                          <p>
+                            {" "}
+                            {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
+                          </p>
+                          <p className="followers">
+                            {" "}
+                            {formatFollowers(profileData!.followers)} {_t("chat.followers")}
                           </p>
                         </div>
-                        <div key={msg.time} className="message">
+                      </div>
+                    )}
+                  </Link>
+                  <div className="chats">
+                    {messageList.map((msg) => {
+                      if (msg.username !== activeUser?.username) {
+                        return (
+                          <>
+                            <div key={msg.username} className="date-time-detail">
+                              <p className="date-time">
+                                {msg.date}, {msg.time}
+                              </p>
+                            </div>
+                            <div key={msg.time} className="message">
+                              <div className="user-img">
+                                <Link to={`/@${msg.username}`}>
+                                  <span>
+                                    <UserAvatar username={msg.username} size="medium" />
+                                  </span>
+                                </Link>
+                              </div>
+                              <div className="user-info">
+                                <p className="receiver-message-content">{msg.message}</p>
+                              </div>
+                            </div>
+                          </>
+                        );
+                      } else {
+                        return (
+                          <div key={msg.message} className="sender">
+                            <div className="sender-message">
+                              {/* <span className="sender-message-time">{msg.time}</span> */}
+                              <p className="sender-message-content">{msg.message}</p>
+                            </div>
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                </>
+              ) : (
+                <>
+                  {contentList.map((user) => {
+                    return (
+                      <div key={user.username} className="chat-content">
+                        <Link to={`/@${user.username}`}>
                           <div className="user-img">
                             <span>
-                              <UserAvatar username={msg.username} size="medium" />
+                              <UserAvatar username={user.username} size="medium" />
                             </span>
                           </div>
-                          <div className="user-info">
-                            <p className="receiver-message-content">{msg.message}</p>
-                          </div>
-                        </div>
-                      </>
-                    );
-                  } else {
-                    return (
-                      <div className="sender">
-                        <div className="sender-message">
-                          {/* <span className="sender-message-time">{msg.time}</span> */}
-                          <p className="sender-message-content">{msg.message}</p>
+                        </Link>
+
+                        <div className="user-title" onClick={() => userClicked(user.username)}>
+                          <p className="username">{user.username}</p>
+                          <p className="last-message">{user.lastMessage}</p>
                         </div>
                       </div>
                     );
-                  }
-                })}
-              </div>
+                  })}
+                </>
+              )}
             </>
           ) : (
-            <>
-              {contentList.map((user) => {
-                return (
-                  <div key={user.username} className="chat-content">
-                    <Link to={`/@${user.username}`}>
-                      <div className="user-img">
-                        <span>
-                          <UserAvatar username={user.username} size="medium" />
-                        </span>
-                      </div>
-                    </Link>
-
-                    <div className="user-title" onClick={() => userClicked(user.username)}>
-                      <p className="username">{user.username}</p>
-                      <p className="last-message">{user.lastMessage}</p>
-                    </div>
-                  </div>
-                );
-              })}
-            </>
+            <Button className="join-chat-btn" onClick={handleJoinChat}>
+              {inProgress && chatButtonSpinner}
+              {_t("chat.join-chat")}
+            </Button>
           )}
 
           {((isScrollToTop && !isCurrentUser) || (isCurrentUser && isScrollToBottom)) && (
diff --git a/src/common/components/search-user/index.scss b/src/common/components/search-user/index.scss
index b840aa65d54..a107eccbf8f 100644
--- a/src/common/components/search-user/index.scss
+++ b/src/common/components/search-user/index.scss
@@ -1,3 +1,8 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
 .search-user-dialog {
   .search-header {
     padding-left: 5px;
@@ -34,9 +39,13 @@
         font-weight: 700;
       }
     }
-  }
-
-  .search-content:hover {
-    background: #e7e7e7;
+    &:hover {
+      @include themify(day) {
+        background: $white-four;
+      }
+      @include themify(night) {
+        background: $charcoal-grey;
+      }
+    }
   }
 }
diff --git a/src/common/components/search-user/index.tsx b/src/common/components/search-user/index.tsx
index 1b3cf3dede3..7e830be65a8 100644
--- a/src/common/components/search-user/index.tsx
+++ b/src/common/components/search-user/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Modal, Form, FormControl } from "react-bootstrap";
+import { Modal, Form } from "react-bootstrap";
 import useDebounce from "react-use/lib/useDebounce";
 import { lookupAccounts } from "../../api/hive";
 
@@ -17,11 +17,6 @@ export default function SeachUser(props: Props) {
   const [userList, setUserList] = useState<string[]>([]);
   const [showModal, setShowModal] = useState(true);
 
-  // const setStep = () => {
-  //   const { setSearchUser } = props;
-  //   setSearchUser(false);
-  // };
-
   useDebounce(
     async () => {
       const resp = await lookupAccounts(searchtext, 7);
@@ -43,7 +38,6 @@ export default function SeachUser(props: Props) {
 
   const handleCloseModal = () => {
     setShowModal(false);
-    console.log("Close run");
     const { setSearchUser } = props;
     setSearchUser(false);
   };
@@ -59,35 +53,38 @@ export default function SeachUser(props: Props) {
       size="lg"
     >
       <Modal.Header closeButton={true} className="search-header">
-        <Modal.Title>New message</Modal.Title>
+        <Modal.Title>{_t("chat.new-message")}</Modal.Title>
       </Modal.Header>
       <Form.Group className="w-100 mb-3">
         <Form.Control
           type="text"
           placeholder={_t("chat.search")}
           value={searchtext}
+          autoFocus={true}
           onChange={(e) => {
             setSearchText(e.target.value);
           }}
         />
       </Form.Group>
       <Modal.Body>
-        {userList.map((user) => {
-          return (
-            <div key={user} className="search-content" onClick={() => searchUserClicked(user)}>
-              <div className="search-user-img">
-                <span>
-                  <UserAvatar username={user} size="medium" />
-                </span>
-              </div>
+        <div className="user-search-suggestion-list">
+          {userList.map((user, index) => {
+            return (
+              <div key={index} className="search-content" onClick={() => searchUserClicked(user)}>
+                <div className="search-user-img">
+                  <span>
+                    <UserAvatar username={user} size="medium" />
+                  </span>
+                </div>
 
-              <div className="search-user-title">
-                <p className="search-username">{user}</p>
-                {/* <p className="searc-last-message">{user}</p> */}
+                <div className="search-user-title">
+                  <p className="search-username">{user}</p>
+                  {/* <p className="searc-last-message">{user}</p> */}
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </Modal.Body>
     </Modal>
   );
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 14b2868ddac..c7504507a75 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1621,7 +1621,8 @@
     "joined": "Joined",
     "followers": "Followers",
     "start-chat-placeholder": "Start a new message",
-    "search": "Search people"
+    "search": "Search people",
+    "join-chat": "Join chat"
   },
   "add-image": {
     "title": "Add Image",

From e6a709e9bfccb3ded5b6af701e41628dae633603 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 17 May 2023 14:29:35 +0500
Subject: [PATCH 004/179] Show chat-box just for active user

---
 src/common/components/chat-box/index.tsx | 347 ++++++++++++-----------
 1 file changed, 177 insertions(+), 170 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 476e02f0d8c..a3366cb061c 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -49,15 +49,19 @@ export default function ChatBox({ activeUser }: Props) {
   const [showSearchUser, setShowSearchUser] = useState(false);
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
+  const [show, setShow] = useState(false);
 
   useEffect(() => {
     fetchProfileData();
+    setShow(!!activeUser?.username);
   }, []);
 
   useEffect(() => {
     fetchProfileData();
     setCurrentUser("");
     setIsCurrentUser(false);
+    setShow(!!activeUser?.username);
+    setExpanded(false);
   }, [activeUser]);
 
   useEffect(() => {
@@ -311,196 +315,199 @@ export default function ChatBox({ activeUser }: Props) {
 
   return (
     <>
-      <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
-        <div className="chat-header">
-          {currentUser && expanded && (
-            <div className="back-arrow-image">
-              <span
-                className="back-arrow-svg"
-                onClick={() => {
-                  setCurrentUser("");
-                  setIsCurrentUser(false);
-                }}
-              >
-                {" "}
-                {arrowBackSvg}
-              </span>
-            </div>
-          )}
-          <div className="message-title" onClick={() => setExpanded(!expanded)}>
-            {currentUser && (
-              <p className="user-icon">
-                <UserAvatar username={currentUser} size="small" />
-              </p>
+      {show && (
+        <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
+          <div className="chat-header">
+            {currentUser && expanded && (
+              <div className="back-arrow-image">
+                <span
+                  className="back-arrow-svg"
+                  onClick={() => {
+                    setCurrentUser("");
+                    setIsCurrentUser(false);
+                  }}
+                >
+                  {" "}
+                  {arrowBackSvg}
+                </span>
+              </div>
             )}
+            <div className="message-title" onClick={() => setExpanded(!expanded)}>
+              {currentUser && (
+                <p className="user-icon">
+                  <UserAvatar username={currentUser} size="small" />
+                </p>
+              )}
 
-            <p className="message-content">{currentUser ? currentUser : _t("chat.messages")}</p>
-          </div>
-          <div className="actionable-imgs">
-            {!currentUser && hasUserJoinedChat && (
-              <div className="message-image" onClick={handleMessageSvgClick}>
-                <Tooltip content={_t("chat.new-message")}>
-                  <p className="message-svg">{addMessageSVG}</p>
+              <p className="message-content">{currentUser ? currentUser : _t("chat.messages")}</p>
+            </div>
+            <div className="actionable-imgs">
+              {!currentUser && hasUserJoinedChat && (
+                <div className="message-image" onClick={handleMessageSvgClick}>
+                  <Tooltip content={_t("chat.new-message")}>
+                    <p className="message-svg">{addMessageSVG}</p>
+                  </Tooltip>
+                </div>
+              )}
+              <div className="arrow-image">
+                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+                  <p className="arrow-svg" onClick={() => setExpanded(!expanded)}>
+                    {expanded ? expandArrow : collapseArrow}
+                  </p>
                 </Tooltip>
               </div>
-            )}
-            <div className="arrow-image">
-              <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                <p className="arrow-svg" onClick={() => setExpanded(!expanded)}>
-                  {expanded ? expandArrow : collapseArrow}
-                </p>
-              </Tooltip>
             </div>
           </div>
-        </div>
 
-        <div
-          className={`chat-body ${currentUser ? "current-user" : ""} ${
-            !hasUserJoinedChat ? "join-chat" : ""
-          }`}
-          ref={chatBodyDivRef}
-          onScroll={handleScroll}
-        >
-          {hasUserJoinedChat ? (
-            <>
-              {currentUser.length !== 0 ? (
-                <>
-                  <Link to={`/@${currentUser}`}>
-                    {profileData?.joiningData && (
-                      <div className="user-profile">
-                        <span className="user-logo">
-                          <UserAvatar username={currentUser} size="large" />
-                        </span>
-                        <h4 className="user-name user-logo ">{currentUser}</h4>
-                        {profileData.about && (
-                          <p className="about user-logo ">{profileData.about}</p>
-                        )}
-
-                        <div className="created-date user-logo joining-info">
-                          <p>
-                            {" "}
-                            {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
-                          </p>
-                          <p className="followers">
-                            {" "}
-                            {formatFollowers(profileData!.followers)} {_t("chat.followers")}
-                          </p>
+          <div
+            className={`chat-body ${currentUser ? "current-user" : ""} ${
+              !hasUserJoinedChat ? "join-chat" : ""
+            }`}
+            ref={chatBodyDivRef}
+            onScroll={handleScroll}
+          >
+            {hasUserJoinedChat ? (
+              <>
+                {currentUser.length !== 0 ? (
+                  <>
+                    <Link to={`/@${currentUser}`}>
+                      {profileData?.joiningData && (
+                        <div className="user-profile">
+                          <span className="user-logo">
+                            <UserAvatar username={currentUser} size="large" />
+                          </span>
+                          <h4 className="user-name user-logo ">{currentUser}</h4>
+                          {profileData.about && (
+                            <p className="about user-logo ">{profileData.about}</p>
+                          )}
+
+                          <div className="created-date user-logo joining-info">
+                            <p>
+                              {" "}
+                              {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
+                            </p>
+                            <p className="followers">
+                              {" "}
+                              {formatFollowers(profileData!.followers)} {_t("chat.followers")}
+                            </p>
+                          </div>
                         </div>
-                      </div>
-                    )}
-                  </Link>
-                  <div className="chats">
-                    {messageList.map((msg) => {
-                      if (msg.username !== activeUser?.username) {
-                        return (
-                          <>
-                            <div key={msg.username} className="date-time-detail">
-                              <p className="date-time">
-                                {msg.date}, {msg.time}
-                              </p>
-                            </div>
-                            <div key={msg.time} className="message">
-                              <div className="user-img">
-                                <Link to={`/@${msg.username}`}>
-                                  <span>
-                                    <UserAvatar username={msg.username} size="medium" />
-                                  </span>
-                                </Link>
+                      )}
+                    </Link>
+                    <div className="chats">
+                      {messageList.map((msg) => {
+                        if (msg.username !== activeUser?.username) {
+                          return (
+                            <>
+                              <div key={msg.username} className="date-time-detail">
+                                <p className="date-time">
+                                  {msg.date}, {msg.time}
+                                </p>
+                              </div>
+                              <div key={msg.time} className="message">
+                                <div className="user-img">
+                                  <Link to={`/@${msg.username}`}>
+                                    <span>
+                                      <UserAvatar username={msg.username} size="medium" />
+                                    </span>
+                                  </Link>
+                                </div>
+                                <div className="user-info">
+                                  <p className="receiver-message-content">{msg.message}</p>
+                                </div>
                               </div>
-                              <div className="user-info">
-                                <p className="receiver-message-content">{msg.message}</p>
+                            </>
+                          );
+                        } else {
+                          return (
+                            <div key={msg.message} className="sender">
+                              <div className="sender-message">
+                                {/* <span className="sender-message-time">{msg.time}</span> */}
+                                <p className="sender-message-content">{msg.message}</p>
                               </div>
                             </div>
-                          </>
-                        );
-                      } else {
-                        return (
-                          <div key={msg.message} className="sender">
-                            <div className="sender-message">
-                              {/* <span className="sender-message-time">{msg.time}</span> */}
-                              <p className="sender-message-content">{msg.message}</p>
+                          );
+                        }
+                      })}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    {contentList.map((user) => {
+                      return (
+                        <div key={user.username} className="chat-content">
+                          <Link to={`/@${user.username}`}>
+                            <div className="user-img">
+                              <span>
+                                <UserAvatar username={user.username} size="medium" />
+                              </span>
                             </div>
+                          </Link>
+
+                          <div className="user-title" onClick={() => userClicked(user.username)}>
+                            <p className="username">{user.username}</p>
+                            <p className="last-message">{user.lastMessage}</p>
                           </div>
-                        );
-                      }
+                        </div>
+                      );
                     })}
-                  </div>
-                </>
-              ) : (
-                <>
-                  {contentList.map((user) => {
-                    return (
-                      <div key={user.username} className="chat-content">
-                        <Link to={`/@${user.username}`}>
-                          <div className="user-img">
-                            <span>
-                              <UserAvatar username={user.username} size="medium" />
-                            </span>
-                          </div>
-                        </Link>
+                  </>
+                )}
+              </>
+            ) : (
+              <Button className="join-chat-btn" onClick={handleJoinChat}>
+                {inProgress && chatButtonSpinner}
+                {_t("chat.join-chat")}
+              </Button>
+            )}
 
-                        <div className="user-title" onClick={() => userClicked(user.username)}>
-                          <p className="username">{user.username}</p>
-                          <p className="last-message">{user.lastMessage}</p>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </>
-              )}
-            </>
-          ) : (
-            <Button className="join-chat-btn" onClick={handleJoinChat}>
-              {inProgress && chatButtonSpinner}
-              {_t("chat.join-chat")}
-            </Button>
-          )}
+            {((isScrollToTop && !isCurrentUser) || (isCurrentUser && isScrollToBottom)) && (
+              <Tooltip
+                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
+              >
+                <div
+                  className="scroller"
+                  style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
+                  onClick={ScrollerClicked}
+                >
+                  {isCurrentUser ? chevronDownSvgForSlider : chevronUpSvg}
+                </div>
+              </Tooltip>
+            )}
+          </div>
 
-          {((isScrollToTop && !isCurrentUser) || (isCurrentUser && isScrollToBottom)) && (
-            <Tooltip
-              content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
-            >
-              <div
-                className="scroller"
-                style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
-                onClick={ScrollerClicked}
+          {currentUser && (
+            <div className="chat">
+              <Form
+                onSubmit={(e: React.FormEvent) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  sendMessage();
+                }}
               >
-                {isCurrentUser ? chevronDownSvgForSlider : chevronUpSvg}
-              </div>
-            </Tooltip>
+                <InputGroup className="chat-input-group">
+                  <Form.Control
+                    value={message}
+                    onChange={handleMessage}
+                    required={true}
+                    type="text"
+                    placeholder={_t("chat.start-chat-placeholder")}
+                    autoComplete="off"
+                    className="chat-input"
+                  />
+                  <InputGroup.Append
+                    className={`msg-svg ${isMessageText ? "active" : ""}`}
+                    onClick={sendMessage}
+                  >
+                    {messageSendSvg}
+                  </InputGroup.Append>
+                </InputGroup>
+              </Form>
+            </div>
           )}
         </div>
+      )}
 
-        {currentUser && (
-          <div className="chat">
-            <Form
-              onSubmit={(e: React.FormEvent) => {
-                e.preventDefault();
-                e.stopPropagation();
-                sendMessage();
-              }}
-            >
-              <InputGroup className="chat-input-group">
-                <Form.Control
-                  value={message}
-                  onChange={handleMessage}
-                  required={true}
-                  type="text"
-                  placeholder={_t("chat.start-chat-placeholder")}
-                  autoComplete="off"
-                  className="chat-input"
-                />
-                <InputGroup.Append
-                  className={`msg-svg ${isMessageText ? "active" : ""}`}
-                  onClick={sendMessage}
-                >
-                  {messageSendSvg}
-                </InputGroup.Append>
-              </InputGroup>
-            </Form>
-          </div>
-        )}
-      </div>
       {showSearchUser && (
         <SeachUser
           setSearchUser={setSearchUser}

From 83a463e5c8ec7e4b2b5f59f75d41efef1eff805a Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 18 May 2023 16:48:58 +0500
Subject: [PATCH 005/179] Make chat-utils

---
 src/common/helper/chat-utils.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/common/helper/chat-utils.ts

diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
new file mode 100644
index 00000000000..4cfd38e3771
--- /dev/null
+++ b/src/common/helper/chat-utils.ts
@@ -0,0 +1,31 @@
+import { generatePrivateKey, getPublicKey } from "nostr-tools";
+import { getAccountFull } from "../api/hive";
+import { updateProfile } from "../api/operations";
+import { ActiveUser } from "../store/active-user/types";
+
+export const getProfileMetaData = async (activeUser: ActiveUser | null) => {
+  const response = await getAccountFull(activeUser?.username!);
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+
+  return profile;
+};
+
+export const setProfileMetaData = async (activeUser: ActiveUser | null, key: string) => {
+  const response = await getAccountFull(activeUser?.username!);
+
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+  const newProfile = {
+    noStrKey: key
+  };
+
+  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+  return updatedProfile;
+};
+
+export const createNoStrAccount = () => {
+  const privKey = generatePrivateKey();
+  const pubKey = getPublicKey(privKey);
+  return { pubKey, privKey };
+};

From 5bd88206a9c8b7d3f1435dcf5a1694f482d1a2e5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 19 May 2023 14:14:28 +0500
Subject: [PATCH 006/179] Add noStr

---
 package.json |  1 +
 yarn.lock    | 45 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/package.json b/package.json
index a0635653191..55c5e20fd30 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
+    "nostr-tools": "^1.11.1",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
diff --git a/yarn.lock b/yarn.lock
index b52c005c9d0..924dbe5cca8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1717,6 +1717,18 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@noble/curves@1.0.0", "@noble/curves@~1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
+  integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
+  dependencies:
+    "@noble/hashes" "1.3.0"
+
+"@noble/hashes@1.3.0", "@noble/hashes@~1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
+  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1785,6 +1797,28 @@
   dependencies:
     dequal "^2.0.2"
 
+"@scure/base@1.1.1", "@scure/base@~1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@scure/bip32@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
+  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
+  dependencies:
+    "@noble/curves" "~1.0.0"
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
+"@scure/bip39@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.0.tgz#a207e2ef96de354de7d0002292ba1503538fc77b"
+  integrity sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==
+  dependencies:
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -8380,6 +8414,17 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nostr-tools@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.11.1.tgz#7f479f86dc25ef4625747a33f8430f464aa225e5"
+  integrity sha512-b8BpCiD3wxjBZwrn0wc+CkVj6/7s4sQxp+Az7UkCG80mJu7xTspZsOoUP/geBNwZVYETzEwj+CPBvW8WIP8mBQ==
+  dependencies:
+    "@noble/curves" "1.0.0"
+    "@noble/hashes" "1.3.0"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.0"
+    "@scure/bip39" "1.2.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"

From 4b802e4f43e03f727c3f679a92559a872d667dde Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 26 May 2023 11:13:34 +0500
Subject: [PATCH 007/179] Error in build

---
 package.json                 |   6 +-
 razzle.config.js             |  24 +
 src/common/pages/sign-up.tsx |   3 +
 yarn.lock                    | 994 +++++++++++++++++++++++++++++++++--
 4 files changed, 996 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index bea263593aa..6d3044d1a49 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-modules": "^0.1.5",
     "@ecency/render-helper": "^2.2.24",
     "@ecency/render-helper-amp": "^1.1.0",
     "@firebase/analytics": "^0.8.0",
@@ -24,6 +27,7 @@
     "@loadable/server": "^5.15.2",
     "@webscopeio/react-textarea-autocomplete": "^4.8.1",
     "axios": "^0.21.2",
+    "babel-loader": "8.2.5",
     "bs58": "^4.0.1",
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
@@ -45,7 +49,7 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
-    "nostr-tools": "^1.11.1",
+    "nostr-tools": "1.10.1",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
diff --git a/razzle.config.js b/razzle.config.js
index fcc4629bbc4..cced0f2490b 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -8,6 +8,7 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPl
 module.exports = {
   plugins: ["typescript", "scss"],
   resolve: {
+    extensions: [".js", ".jsx", ".json", ".ts", ".tsx", ".mjs"],
     alias: {
       styles: path.join(__dirname, "src/style/")
     }
@@ -41,6 +42,29 @@ module.exports = {
           writeToDisk: { filename }
         })
       );
+
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        exclude: /node_modules\/(?!(nostr-tools)\/).*/,
+        // test: /\.mjs$/,
+        // include: /node_modules\/nostr-tools\//,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              [
+                "@babel/preset-env",
+                {
+                  targets: {
+                    node: "current"
+                  }
+                }
+              ]
+            ]
+          }
+        }
+      });
+      console.log(webpackConfig.module.rules);
     }
 
     // Enable SSR lazy-loading
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index af3e34cc53c..8fa1a1cd4ff 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -22,6 +22,7 @@ import { Tsx } from "../i18n/helper";
 import { handleInvalid, handleOnInput } from "../util/input-util";
 import { getAccount } from "../api/hive";
 import "./sign-up.scss";
+import { createNoStrAccount } from "../helper/chat-utils";
 
 type FormChangeEvent = React.ChangeEvent<typeof FormControl & HTMLInputElement>;
 
@@ -120,6 +121,8 @@ export const SignUp = (props: PageProps) => {
   }, [username, usernameTouched]);
 
   const regularRegister = async () => {
+    const key = createNoStrAccount();
+    console.log(key);
     setInProgress(true);
     try {
       const response = await signUp(username, email, referral);
diff --git a/yarn.lock b/yarn.lock
index 2a41b17bb1c..eb7b9538a4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,6 +10,14 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@ampproject/toolbox-core@2.8.0", "@ampproject/toolbox-core@^2.8.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.8.0.tgz#4c291c470fa30c0c2f3c7952dbcd6df2a4ec0df9"
@@ -88,6 +96,13 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
@@ -98,6 +113,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.7.tgz#7b047d7a3a89a67d2258dc61f604f098f1bc7e08"
   integrity sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==
 
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.5":
+  version "7.21.9"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.9.tgz#10a2e7fda4e51742c907938ac3b7229426515514"
+  integrity sha512-FUGed8kfhyWvbYug/Un/VPJD41rDIgoVVcR+FuzhzOYyRz5uED+Gd3SLZml0Uw2l2aHFb7ZgdW5mGA3G2cCCnQ==
+
 "@babel/core@^7.1.0", "@babel/core@^7.7.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.8.tgz#20cdf7c84b5d86d83fac8710a8bc605a7ba3f010"
@@ -140,6 +160,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.21.8":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.8.tgz#2a8c7f0f53d60100ba4c32470ba0281c92aa9aa4"
+  integrity sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helpers" "^7.21.5"
+    "@babel/parser" "^7.21.8"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.8.tgz#bf86fd6af96cf3b74395a8ca409515f89423e070"
@@ -158,6 +199,16 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.21.5":
+  version "7.21.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.9.tgz#3a1b706e07d836e204aee0650e8ee878d3aaa241"
+  integrity sha512-F3fZga2uv09wFdEjEQIJxXALXfz0+JaOb7SabvVMmjHxeVTuGW8wgE8Vp1Hd7O+zMTYtcfEISGRzPkeiaPPsvg==
+  dependencies:
+    "@babel/types" "^7.21.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -165,6 +216,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
@@ -173,6 +231,13 @@
     "@babel/helper-explode-assignable-expression" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.21.5.tgz#817f73b6c59726ab39f6ba18c234268a519e5abb"
+  integrity sha512-uNrjKztPLkUk7bpCNC0jEKDJzzkvel/W+HguzbN8krA+LPfC1CEobJEvAvGka2A/M+ViOqXdcRL0GqPUJSjx9g==
+  dependencies:
+    "@babel/types" "^7.21.5"
+
 "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe"
@@ -193,6 +258,17 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz#631e6cc784c7b660417421349aac304c94115366"
+  integrity sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==
+  dependencies:
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
@@ -206,6 +282,21 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz#205b26330258625ef8869672ebca1e0dee5a0f02"
+  integrity sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.5"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.21.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    semver "^6.3.0"
+
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
@@ -214,6 +305,15 @@
     "@babel/helper-annotate-as-pure" "^7.16.7"
     regexpu-core "^5.0.1"
 
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz#a7886f61c2e29e21fd4aaeaf1e473deba6b571dc"
+  integrity sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.3.1"
+    semver "^6.3.0"
+
 "@babel/helper-define-polyfill-provider@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
@@ -228,6 +328,18 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/helper-define-polyfill-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
+  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
 "@babel/helper-environment-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
@@ -235,6 +347,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
+  integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -259,6 +376,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -280,6 +405,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-member-expression-to-functions@^7.14.5":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz#97e56244beb94211fe277bd818e3a329c66f7970"
@@ -294,6 +426,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-member-expression-to-functions@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz#3b1a009af932e586af77c1030fba9ee0bde396c0"
+  integrity sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==
+  dependencies:
+    "@babel/types" "^7.21.5"
+
 "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
@@ -308,6 +447,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
+  dependencies:
+    "@babel/types" "^7.21.4"
+
 "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz#d4279f7e3fd5f4d5d342d833af36d4dd87d7dc49"
@@ -336,6 +482,20 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz#d937c82e9af68d31ab49039136a222b17ac0b420"
+  integrity sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-module-imports" "^7.21.4"
+    "@babel/helper-simple-access" "^7.21.5"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
+
 "@babel/helper-optimise-call-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
@@ -350,6 +510,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
@@ -360,6 +527,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
+"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
+  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -369,6 +541,16 @@
     "@babel/helper-wrap-function" "^7.16.8"
     "@babel/types" "^7.16.8"
 
+"@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
 "@babel/helper-replace-supers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94"
@@ -390,6 +572,18 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz#a6ad005ba1c7d9bc2973dfde05a1bba7065dde3c"
+  integrity sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-member-expression-to-functions" "^7.21.5"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
+
 "@babel/helper-simple-access@^7.14.5", "@babel/helper-simple-access@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz#82e1fec0644a7e775c74d305f212c39f8fe73924"
@@ -404,6 +598,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-simple-access@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz#d697a7971a5c39eac32c7e63c0921c06c8a249ee"
+  integrity sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==
+  dependencies:
+    "@babel/types" "^7.21.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -411,6 +612,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
+  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
+  dependencies:
+    "@babel/types" "^7.20.0"
+
 "@babel/helper-split-export-declaration@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
@@ -425,6 +633,18 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
+  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
+
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
@@ -435,6 +655,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -445,6 +670,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
   integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
 
+"@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
+
 "@babel/helper-wrap-function@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
@@ -455,6 +685,16 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
+  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
+  dependencies:
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
+
 "@babel/helpers@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.8.tgz#839f88f463025886cff7f85a35297007e2da1b77"
@@ -473,6 +713,15 @@
     "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
 
+"@babel/helpers@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.5.tgz#5bac66e084d7a4d2d9696bdf0175a93f7fb63c08"
+  integrity sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5", "@babel/highlight@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -491,6 +740,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.5", "@babel/parser@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
@@ -501,6 +759,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
   integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
 
+"@babel/parser@^7.21.5", "@babel/parser@^7.21.8", "@babel/parser@^7.21.9":
+  version "7.21.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.9.tgz#ab18ea3b85b4bc33ba98a8d4c2032c557d23cf14"
+  integrity sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -508,6 +771,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
@@ -517,6 +787,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-proposal-optional-chaining" "^7.16.7"
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+
 "@babel/plugin-proposal-async-generator-functions@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
@@ -526,6 +805,16 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-proposal-class-properties@^7.16.7", "@babel/plugin-proposal-class-properties@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
@@ -534,6 +823,14 @@
     "@babel/helper-create-class-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-proposal-class-static-block@^7.17.6":
   version "7.17.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
@@ -543,6 +840,15 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
 "@babel/plugin-proposal-dynamic-import@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
@@ -551,6 +857,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
 "@babel/plugin-proposal-export-namespace-from@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
@@ -559,6 +873,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-json-strings@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
@@ -567,6 +889,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
 "@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
@@ -575,6 +905,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
@@ -583,6 +921,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-proposal-numeric-separator@^7.10.4", "@babel/plugin-proposal-numeric-separator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
@@ -591,6 +937,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.17.3", "@babel/plugin-proposal-object-rest-spread@^7.9.5":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
@@ -602,6 +956,17 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.16.7"
 
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.20.7"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
@@ -610,6 +975,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
 "@babel/plugin-proposal-optional-chaining@^7.11.0", "@babel/plugin-proposal-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
@@ -619,6 +992,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
+"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-proposal-private-methods@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
@@ -627,6 +1009,14 @@
     "@babel/helper-create-class-features-plugin" "^7.16.10"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-proposal-private-property-in-object@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
@@ -637,6 +1027,16 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
@@ -645,6 +1045,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -687,7 +1095,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-assertions@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
+  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -778,6 +1193,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-arrow-functions@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
+  integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.21.5"
+
 "@babel/plugin-transform-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
@@ -787,6 +1209,15 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-remap-async-to-generator" "^7.16.8"
 
+"@babel/plugin-transform-async-to-generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+
 "@babel/plugin-transform-block-scoped-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
@@ -794,6 +1225,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-block-scoping@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
@@ -801,6 +1239,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-transform-classes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
@@ -815,6 +1260,21 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
@@ -822,6 +1282,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-computed-properties@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
+  integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/template" "^7.20.7"
+
 "@babel/plugin-transform-destructuring@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
@@ -829,6 +1297,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-destructuring@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
@@ -837,6 +1312,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-dotall-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-duplicate-keys@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
@@ -844,6 +1327,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-duplicate-keys@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-exponentiation-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
@@ -852,6 +1342,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-for-of@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
@@ -859,6 +1357,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-for-of@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
+  integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.21.5"
+
 "@babel/plugin-transform-function-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
@@ -868,6 +1373,15 @@
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
@@ -875,6 +1389,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-member-expression-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
@@ -882,6 +1403,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-modules-amd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
@@ -891,6 +1419,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-amd@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-transform-modules-commonjs@^7.10.4", "@babel/plugin-transform-modules-commonjs@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz#274be1a2087beec0254d4abd4d86e52442e1e5b6"
@@ -911,6 +1447,15 @@
     "@babel/helper-simple-access" "^7.14.5"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
+  integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-simple-access" "^7.21.5"
+
 "@babel/plugin-transform-modules-systemjs@^7.17.8":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
@@ -922,6 +1467,16 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-identifier" "^7.19.1"
+
 "@babel/plugin-transform-modules-umd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
@@ -930,6 +1485,14 @@
     "@babel/helper-module-transforms" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.10.tgz#715dbcfafdb54ce8bccd3d12e8917296a4ba66a4"
@@ -937,6 +1500,14 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.17.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-transform-new-target@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
@@ -944,6 +1515,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-object-super@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
@@ -952,6 +1530,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-replace-supers" "^7.16.7"
 
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+
 "@babel/plugin-transform-parameters@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
@@ -959,6 +1545,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-transform-property-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
@@ -966,6 +1559,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-react-display-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
@@ -1006,6 +1606,14 @@
   dependencies:
     regenerator-transform "^0.15.0"
 
+"@babel/plugin-transform-regenerator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
+  integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.21.5"
+    regenerator-transform "^0.15.1"
+
 "@babel/plugin-transform-reserved-words@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
@@ -1013,6 +1621,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-runtime@^7.9.0":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz#b89d821c55d61b5e3d3c3d1d636d8d5a81040ae1"
@@ -1032,6 +1647,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-spread@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
@@ -1040,6 +1662,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
 
+"@babel/plugin-transform-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+
 "@babel/plugin-transform-sticky-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
@@ -1047,6 +1677,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-template-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
@@ -1054,6 +1691,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-typeof-symbol@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
@@ -1061,6 +1705,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-typescript@^7.16.7":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
@@ -1077,6 +1728,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-unicode-escapes@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
+  integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.21.5"
+
 "@babel/plugin-transform-unicode-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
@@ -1085,6 +1743,96 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/preset-env@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.5.tgz#db2089d99efd2297716f018aeead815ac3decffb"
+  integrity sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==
+  dependencies:
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.21.5"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.21.5"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.21.5"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.21.3"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.21.5"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.20.7"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.21.5"
+    babel-plugin-polyfill-corejs2 "^0.3.3"
+    babel-plugin-polyfill-corejs3 "^0.6.0"
+    babel-plugin-polyfill-regenerator "^0.4.1"
+    core-js-compat "^3.25.1"
+    semver "^6.3.0"
+
 "@babel/preset-env@^7.9.5":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.17.10.tgz#a81b093669e3eb6541bb81a23173c5963c5de69c"
@@ -1197,6 +1945,11 @@
     "@babel/helper-validator-option" "^7.16.7"
     "@babel/plugin-transform-typescript" "^7.16.7"
 
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.8", "@babel/runtime@^7.13.9", "@babel/runtime@^7.14.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
@@ -1243,6 +1996,15 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/template@^7.18.10", "@babel/template@^7.20.7":
+  version "7.21.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
+  integrity sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    "@babel/parser" "^7.21.9"
+    "@babel/types" "^7.21.5"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.8.tgz#c0253f02677c5de1a8ff9df6b0aacbec7da1a8ce"
@@ -1274,6 +2036,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.20.5", "@babel/traverse@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133"
+  integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.5"
+    "@babel/types" "^7.21.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.8.tgz#38109de8fcadc06415fbd9b74df0065d4d41c728"
@@ -1290,6 +2068,15 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.5", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
+  integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.21.5"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1670,6 +2457,20 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
@@ -1680,11 +2481,29 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
   integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
 
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -1724,17 +2543,15 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@noble/curves@1.0.0", "@noble/curves@~1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
-  integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
-  dependencies:
-    "@noble/hashes" "1.3.0"
+"@noble/hashes@1.2.0", "@noble/hashes@~1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.2.0.tgz#a3150eeb09cc7ab207ebf6d7b9ad311a9bdbed12"
+  integrity sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ==
 
-"@noble/hashes@1.3.0", "@noble/hashes@~1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
-  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+"@noble/secp256k1@1.7.1", "@noble/secp256k1@~1.7.0":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1809,21 +2626,21 @@
   resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
   integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
 
-"@scure/bip32@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
-  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
+"@scure/bip32@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.1.4.tgz#2c91a7be0156b15f26dd0c843a06a1917f129efd"
+  integrity sha512-m925ACYK0wPELsF7Z/VdLGmKj1StIeHraPMYB9xiAFiq/PnvqWd/99I0TQ2OZhjjlMDsDJeZlyXMWi0beaA7NA==
   dependencies:
-    "@noble/curves" "~1.0.0"
-    "@noble/hashes" "~1.3.0"
+    "@noble/hashes" "~1.2.0"
+    "@noble/secp256k1" "~1.7.0"
     "@scure/base" "~1.1.0"
 
-"@scure/bip39@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.0.tgz#a207e2ef96de354de7d0002292ba1503538fc77b"
-  integrity sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==
+"@scure/bip39@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.1.1.tgz#b54557b2e86214319405db819c4b6a370cf340c5"
+  integrity sha512-t+wDck2rVkh65Hmv280fYdVdY25J9YeEUIgn2LG1WM6gxFkGzcksoDiUkWVpVp3Oex9xGC68JU2dSbUfwZ2jPg==
   dependencies:
-    "@noble/hashes" "~1.3.0"
+    "@noble/hashes" "~1.2.0"
     "@scure/base" "~1.1.0"
 
 "@sinonjs/commons@^1.7.0":
@@ -2932,6 +3749,16 @@ babel-jest@^26.3.0, babel-jest@^26.6.3:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-loader@8.2.5:
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
 babel-loader@^8.0.6:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -2979,6 +3806,15 @@ babel-plugin-polyfill-corejs2@^0.3.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     semver "^6.1.1"
 
+babel-plugin-polyfill-corejs2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
+  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    semver "^6.1.1"
+
 babel-plugin-polyfill-corejs3@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
@@ -2987,6 +3823,14 @@ babel-plugin-polyfill-corejs3@^0.5.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     core-js-compat "^3.21.0"
 
+babel-plugin-polyfill-corejs3@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
+  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    core-js-compat "^3.25.1"
+
 babel-plugin-polyfill-regenerator@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
@@ -2994,6 +3838,13 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
+babel-plugin-polyfill-regenerator@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
+  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -3328,6 +4179,16 @@ browserslist@^4.20.2, browserslist@^4.20.3:
     node-releases "^2.0.3"
     picocolors "^1.0.0"
 
+browserslist@^4.21.3, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -3566,6 +4427,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001023, caniuse-lite@^1.0.30001125, can
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
   integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
 
+caniuse-lite@^1.0.30001449:
+  version "1.0.30001489"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz#ca82ee2d4e4dbf2bd2589c9360d3fcc2c7ba3bd8"
+  integrity sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -4128,6 +4994,13 @@ core-js-compat@^3.21.0, core-js-compat@^3.22.1:
     browserslist "^4.20.3"
     semver "7.0.0"
 
+core-js-compat@^3.25.1:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.2.tgz#83f136e375babdb8c80ad3c22d67c69098c1dd8b"
+  integrity sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==
+  dependencies:
+    browserslist "^4.21.5"
+
 core-js@^3.6.4:
   version "3.15.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.2.tgz#740660d2ff55ef34ce664d7e2455119c5bdd3d61"
@@ -4991,6 +5864,11 @@ electron-to-chromium@^1.4.118:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f"
   integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==
 
+electron-to-chromium@^1.4.284:
+  version "1.4.407"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.407.tgz#087e2ab97b3eb092aa6217c05986086b7dd370cc"
+  integrity sha512-5smEvFSFYMv90tICOzRVP7Opp98DAC4KW7RRipg3BuNpGbbV3N+x24Zh3sbLb1T5haGtOSy/hrBfXsWnIM9aCg==
+
 elliptic@^6.5.2, elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -7484,6 +8362,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -8374,6 +9257,11 @@ node-releases@^2.0.3:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
   integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
 
+node-releases@^2.0.8:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039"
+  integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
+
 normalize-html-whitespace@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz#5e3c8e192f1b06c3b9eee4b7e7f28854c7601e34"
@@ -8421,16 +9309,16 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-nostr-tools@^1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.11.1.tgz#7f479f86dc25ef4625747a33f8430f464aa225e5"
-  integrity sha512-b8BpCiD3wxjBZwrn0wc+CkVj6/7s4sQxp+Az7UkCG80mJu7xTspZsOoUP/geBNwZVYETzEwj+CPBvW8WIP8mBQ==
+nostr-tools@1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.10.1.tgz#b52043b3031f4314478d0a3bfaa8ffb9cc4f98a0"
+  integrity sha512-zgTYJeuZQ3CDASsmBEcB5i6V6l0IaA6cjnll6OVik3FoZcvbCaL7yP8I40hYnOIi3KlJykV7jEF9fn8h1NzMnA==
   dependencies:
-    "@noble/curves" "1.0.0"
-    "@noble/hashes" "1.3.0"
+    "@noble/hashes" "1.2.0"
+    "@noble/secp256k1" "1.7.1"
     "@scure/base" "1.1.1"
-    "@scure/bip32" "1.3.0"
-    "@scure/bip39" "1.2.0"
+    "@scure/bip32" "1.1.4"
+    "@scure/bip39" "1.1.1"
 
 npm-run-path@^2.0.0:
   version "2.0.2"
@@ -10332,6 +11220,13 @@ regenerate-unicode-properties@^10.0.1:
   dependencies:
     regenerate "^1.4.2"
 
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
+  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  dependencies:
+    regenerate "^1.4.2"
+
 regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
@@ -10354,6 +11249,13 @@ regenerator-transform@^0.15.0:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -10387,6 +11289,18 @@ regexpu-core@^5.0.1:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+  dependencies:
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
 regjsgen@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
@@ -10399,6 +11313,13 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+  dependencies:
+    jsesc "~0.5.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -12157,6 +13078,11 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
@@ -12229,6 +13155,14 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+update-browserslist-db@^1.0.10:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
+  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

From d14401cd632bf0149e65493a398a29e1505a3402 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 29 May 2023 12:07:57 +0500
Subject: [PATCH 008/179] WIP

---
 package.json                             |  4 +-
 razzle.config.js                         |  2 +-
 src/common/components/chat-box/index.tsx | 22 ++++---
 src/common/pages/sign-up.tsx             |  4 +-
 yarn.lock                                | 84 ++++++++++++++++++++----
 5 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 60459d8702c..7404970bdab 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@loadable/server": "^5.15.2",
     "@webscopeio/react-textarea-autocomplete": "^4.8.1",
     "axios": "^0.21.2",
-    "babel-loader": "8.2.5",
+    "babel-loader": "^9.1.2",
     "bs58": "^4.0.1",
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
@@ -49,7 +49,7 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
-    "nostr-tools": "1.10.1",
+    "nostr-tools": "1.10.0",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
diff --git a/razzle.config.js b/razzle.config.js
index cced0f2490b..fde7e864b1c 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -45,7 +45,7 @@ module.exports = {
 
       webpackConfig.module.rules.push({
         test: /\.mjs$/,
-        exclude: /node_modules\/(?!(nostr-tools)\/).*/,
+        include: /node_modules\/nostr-tools\//,
         // test: /\.mjs$/,
         // include: /node_modules\/nostr-tools\//,
         use: {
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index a3366cb061c..601676da57c 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -52,12 +52,12 @@ export default function ChatBox({ activeUser }: Props) {
   const [show, setShow] = useState(false);
 
   useEffect(() => {
-    fetchProfileData();
+    // fetchProfileData();
     setShow(!!activeUser?.username);
   }, []);
 
   useEffect(() => {
-    fetchProfileData();
+    // fetchProfileData();
     setCurrentUser("");
     setIsCurrentUser(false);
     setShow(!!activeUser?.username);
@@ -208,6 +208,7 @@ export default function ChatBox({ activeUser }: Props) {
   ];
 
   const fetchCurrentUserData = async () => {
+    console.log("Fetch Current data called");
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
@@ -216,15 +217,16 @@ export default function ChatBox({ activeUser }: Props) {
     });
   };
 
-  const fetchProfileData = async () => {
-    const response = await getAccountFull(activeUser?.username!);
-    setAccountData(response);
-    const { posting_json_metadata } = response;
-    const profile = JSON.parse(posting_json_metadata!).profile;
+  // const fetchProfileData = async () => {
+  //   console.log("Fetch profile data called");
+  //   const response = await getAccountFull(activeUser?.username!);
+  //   setAccountData(response);
+  //   const { posting_json_metadata } = response;
+  //   const profile = JSON.parse(posting_json_metadata!).profile;
 
-    const hasNoStrKey = !!profile.noStrKey && profile.noStrKey.trim() !== "";
-    setHasUserJoinedChat(hasNoStrKey);
-  };
+  //   const hasNoStrKey = !!profile.noStrKey && profile.noStrKey.trim() !== "";
+  //   setHasUserJoinedChat(hasNoStrKey);
+  // };
 
   const userClicked = (username: string) => {
     setIsCurrentUser(true);
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 8fa1a1cd4ff..532ad15a83b 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -121,8 +121,8 @@ export const SignUp = (props: PageProps) => {
   }, [username, usernameTouched]);
 
   const regularRegister = async () => {
-    const key = createNoStrAccount();
-    console.log(key);
+    // const key = createNoStrAccount();
+    // console.log(key);
     setInProgress(true);
     try {
       const response = await signUp(username, email, referral);
diff --git a/yarn.lock b/yarn.lock
index ca5c2dde9d0..0f7ba36ffa9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2851,6 +2851,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
   integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
 
+"@types/json-schema@^7.0.9":
+  version "7.0.12"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
+  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+
 "@types/loadable__component@^5.13.4":
   version "5.13.4"
   resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.13.4.tgz#a4646b2406b1283efac1a9d9485824a905b33d4a"
@@ -3443,11 +3448,25 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
+ajv-formats@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
 ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
+ajv-keywords@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -3458,6 +3477,16 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.0.0, ajv@^8.9.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -3749,16 +3778,6 @@ babel-jest@^26.3.0, babel-jest@^26.6.3:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-loader@8.2.5:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
 babel-loader@^8.0.6:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@@ -3769,6 +3788,14 @@ babel-loader@^8.0.6:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-loader@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
+  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
+  dependencies:
+    find-cache-dir "^3.3.2"
+    schema-utils "^4.0.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -6489,6 +6516,15 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-cache-dir@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -8345,6 +8381,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -9309,10 +9350,10 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-nostr-tools@1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.10.1.tgz#b52043b3031f4314478d0a3bfaa8ffb9cc4f98a0"
-  integrity sha512-zgTYJeuZQ3CDASsmBEcB5i6V6l0IaA6cjnll6OVik3FoZcvbCaL7yP8I40hYnOIi3KlJykV7jEF9fn8h1NzMnA==
+nostr-tools@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.10.0.tgz#58d4b713c3d499c177612e9ac66f73f36c9fb654"
+  integrity sha512-Bbkucv25M69TaV+slqz1Vfce8G5O3dqSQOqqOZd/LwhooBJp62qt5V3JvlCV55OUqxaucC2brggeIER5Wliy1w==
   dependencies:
     "@noble/hashes" "1.2.0"
     "@noble/secp256k1" "1.7.1"
@@ -11379,6 +11420,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -11722,6 +11768,16 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.1.tgz#eb2d042df8b01f4b5c276a2dfd41ba0faab72e8d"
+  integrity sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
 screenfull@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"

From b13669b2a89bfc67d94a7c7122ed6d62dd310ffc Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 5 Jun 2023 12:07:44 +0500
Subject: [PATCH 009/179] Removing dependencies

---
 package.json     |    5 -
 razzle.config.js |   24 --
 yarn.lock        | 1037 +---------------------------------------------
 3 files changed, 1 insertion(+), 1065 deletions(-)

diff --git a/package.json b/package.json
index 7404970bdab..942d5475b83 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,6 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-modules": "^0.1.5",
     "@ecency/render-helper": "^2.2.24",
     "@ecency/render-helper-amp": "^1.1.0",
     "@firebase/analytics": "^0.8.0",
@@ -27,7 +24,6 @@
     "@loadable/server": "^5.15.2",
     "@webscopeio/react-textarea-autocomplete": "^4.8.1",
     "axios": "^0.21.2",
-    "babel-loader": "^9.1.2",
     "bs58": "^4.0.1",
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
@@ -49,7 +45,6 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
-    "nostr-tools": "1.10.0",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
diff --git a/razzle.config.js b/razzle.config.js
index fde7e864b1c..fcc4629bbc4 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -8,7 +8,6 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPl
 module.exports = {
   plugins: ["typescript", "scss"],
   resolve: {
-    extensions: [".js", ".jsx", ".json", ".ts", ".tsx", ".mjs"],
     alias: {
       styles: path.join(__dirname, "src/style/")
     }
@@ -42,29 +41,6 @@ module.exports = {
           writeToDisk: { filename }
         })
       );
-
-      webpackConfig.module.rules.push({
-        test: /\.mjs$/,
-        include: /node_modules\/nostr-tools\//,
-        // test: /\.mjs$/,
-        // include: /node_modules\/nostr-tools\//,
-        use: {
-          loader: "babel-loader",
-          options: {
-            presets: [
-              [
-                "@babel/preset-env",
-                {
-                  targets: {
-                    node: "current"
-                  }
-                }
-              ]
-            ]
-          }
-        }
-      });
-      console.log(webpackConfig.module.rules);
     }
 
     // Enable SSR lazy-loading
diff --git a/yarn.lock b/yarn.lock
index 0f7ba36ffa9..b3c36272843 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,14 +10,6 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@ampproject/remapping@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
-  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
 "@ampproject/toolbox-core@2.8.0", "@ampproject/toolbox-core@^2.8.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.8.0.tgz#4c291c470fa30c0c2f3c7952dbcd6df2a4ec0df9"
@@ -96,13 +88,6 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/code-frame@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
-  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
-  dependencies:
-    "@babel/highlight" "^7.18.6"
-
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab"
@@ -113,11 +98,6 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.7.tgz#7b047d7a3a89a67d2258dc61f604f098f1bc7e08"
   integrity sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.5":
-  version "7.21.9"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.9.tgz#10a2e7fda4e51742c907938ac3b7229426515514"
-  integrity sha512-FUGed8kfhyWvbYug/Un/VPJD41rDIgoVVcR+FuzhzOYyRz5uED+Gd3SLZml0Uw2l2aHFb7ZgdW5mGA3G2cCCnQ==
-
 "@babel/core@^7.1.0", "@babel/core@^7.7.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.8.tgz#20cdf7c84b5d86d83fac8710a8bc605a7ba3f010"
@@ -160,27 +140,6 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/core@^7.21.8":
-  version "7.21.8"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.8.tgz#2a8c7f0f53d60100ba4c32470ba0281c92aa9aa4"
-  integrity sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==
-  dependencies:
-    "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.21.4"
-    "@babel/generator" "^7.21.5"
-    "@babel/helper-compilation-targets" "^7.21.5"
-    "@babel/helper-module-transforms" "^7.21.5"
-    "@babel/helpers" "^7.21.5"
-    "@babel/parser" "^7.21.8"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.5"
-    "@babel/types" "^7.21.5"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
-
 "@babel/generator@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.8.tgz#bf86fd6af96cf3b74395a8ca409515f89423e070"
@@ -199,16 +158,6 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.21.5":
-  version "7.21.9"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.9.tgz#3a1b706e07d836e204aee0650e8ee878d3aaa241"
-  integrity sha512-F3fZga2uv09wFdEjEQIJxXALXfz0+JaOb7SabvVMmjHxeVTuGW8wgE8Vp1Hd7O+zMTYtcfEISGRzPkeiaPPsvg==
-  dependencies:
-    "@babel/types" "^7.21.5"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -216,13 +165,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
-  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
@@ -231,13 +173,6 @@
     "@babel/helper-explode-assignable-expression" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.21.5.tgz#817f73b6c59726ab39f6ba18c234268a519e5abb"
-  integrity sha512-uNrjKztPLkUk7bpCNC0jEKDJzzkvel/W+HguzbN8krA+LPfC1CEobJEvAvGka2A/M+ViOqXdcRL0GqPUJSjx9g==
-  dependencies:
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe"
@@ -258,17 +193,6 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz#631e6cc784c7b660417421349aac304c94115366"
-  integrity sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==
-  dependencies:
-    "@babel/compat-data" "^7.21.5"
-    "@babel/helper-validator-option" "^7.21.0"
-    browserslist "^4.21.3"
-    lru-cache "^5.1.1"
-    semver "^6.3.0"
-
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz#71835d7fb9f38bd9f1378e40a4c0902fdc2ea49d"
@@ -282,21 +206,6 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
-  version "7.21.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz#205b26330258625ef8869672ebca1e0dee5a0f02"
-  integrity sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.21.5"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-member-expression-to-functions" "^7.21.5"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.21.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    semver "^6.3.0"
-
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.0":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
@@ -305,15 +214,6 @@
     "@babel/helper-annotate-as-pure" "^7.16.7"
     regexpu-core "^5.0.1"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
-  version "7.21.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz#a7886f61c2e29e21fd4aaeaf1e473deba6b571dc"
-  integrity sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.3.1"
-    semver "^6.3.0"
-
 "@babel/helper-define-polyfill-provider@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
@@ -328,18 +228,6 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-define-polyfill-provider@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
-  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-    semver "^6.1.2"
-
 "@babel/helper-environment-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
@@ -347,11 +235,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
-  integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
-
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
@@ -376,14 +259,6 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.17.0"
 
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
-  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/types" "^7.21.0"
-
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -405,13 +280,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-hoist-variables@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
-  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-member-expression-to-functions@^7.14.5":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz#97e56244beb94211fe277bd818e3a329c66f7970"
@@ -426,13 +294,6 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-member-expression-to-functions@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz#3b1a009af932e586af77c1030fba9ee0bde396c0"
-  integrity sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==
-  dependencies:
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
@@ -447,13 +308,6 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
-  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
-  dependencies:
-    "@babel/types" "^7.21.4"
-
 "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz#d4279f7e3fd5f4d5d342d833af36d4dd87d7dc49"
@@ -482,20 +336,6 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz#d937c82e9af68d31ab49039136a222b17ac0b420"
-  integrity sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.21.5"
-    "@babel/helper-module-imports" "^7.21.4"
-    "@babel/helper-simple-access" "^7.21.5"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.5"
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-optimise-call-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
@@ -510,13 +350,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-optimise-call-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
-  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
@@ -527,11 +360,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
-  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
-
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -541,16 +369,6 @@
     "@babel/helper-wrap-function" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
-
 "@babel/helper-replace-supers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94"
@@ -572,18 +390,6 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz#a6ad005ba1c7d9bc2973dfde05a1bba7065dde3c"
-  integrity sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.21.5"
-    "@babel/helper-member-expression-to-functions" "^7.21.5"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.5"
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-simple-access@^7.14.5", "@babel/helper-simple-access@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz#82e1fec0644a7e775c74d305f212c39f8fe73924"
@@ -598,13 +404,6 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-simple-access@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz#d697a7971a5c39eac32c7e63c0921c06c8a249ee"
-  integrity sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==
-  dependencies:
-    "@babel/types" "^7.21.5"
-
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
@@ -612,13 +411,6 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
-  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
-  dependencies:
-    "@babel/types" "^7.20.0"
-
 "@babel/helper-split-export-declaration@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
@@ -633,18 +425,6 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-split-export-declaration@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
-  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-string-parser@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
-  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
-
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
@@ -655,11 +435,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
-"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
-  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
-
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -670,11 +445,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
   integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
 
-"@babel/helper-validator-option@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
-  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
-
 "@babel/helper-wrap-function@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
@@ -685,16 +455,6 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helper-wrap-function@^7.18.9":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
-  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
-  dependencies:
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.5"
-    "@babel/types" "^7.20.5"
-
 "@babel/helpers@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.8.tgz#839f88f463025886cff7f85a35297007e2da1b77"
@@ -713,15 +473,6 @@
     "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
 
-"@babel/helpers@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.5.tgz#5bac66e084d7a4d2d9696bdf0175a93f7fb63c08"
-  integrity sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.5"
-    "@babel/types" "^7.21.5"
-
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5", "@babel/highlight@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -740,15 +491,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
-  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.5", "@babel/parser@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
@@ -759,11 +501,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
   integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
 
-"@babel/parser@^7.21.5", "@babel/parser@^7.21.8", "@babel/parser@^7.21.9":
-  version "7.21.9"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.9.tgz#ab18ea3b85b4bc33ba98a8d4c2032c557d23cf14"
-  integrity sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g==
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -771,13 +508,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
-  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
@@ -787,15 +517,6 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-proposal-optional-chaining" "^7.16.7"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
-  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
-
 "@babel/plugin-proposal-async-generator-functions@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
@@ -805,16 +526,6 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
-  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
 "@babel/plugin-proposal-class-properties@^7.16.7", "@babel/plugin-proposal-class-properties@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
@@ -823,14 +534,6 @@
     "@babel/helper-create-class-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-proposal-class-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
-  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-proposal-class-static-block@^7.17.6":
   version "7.17.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
@@ -840,15 +543,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-proposal-class-static-block@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
-  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
 "@babel/plugin-proposal-dynamic-import@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
@@ -857,14 +551,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-dynamic-import@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
-  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
 "@babel/plugin-proposal-export-namespace-from@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
@@ -873,14 +559,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
-  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
 "@babel/plugin-proposal-json-strings@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
@@ -889,14 +567,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
-  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
 "@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
@@ -905,14 +575,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
-  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
@@ -921,14 +583,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
-  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
 "@babel/plugin-proposal-numeric-separator@^7.10.4", "@babel/plugin-proposal-numeric-separator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
@@ -937,14 +591,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-numeric-separator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
 "@babel/plugin-proposal-object-rest-spread@^7.17.3", "@babel/plugin-proposal-object-rest-spread@^7.9.5":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
@@ -956,17 +602,6 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.16.7"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-  dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
-
 "@babel/plugin-proposal-optional-catch-binding@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
@@ -975,14 +610,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
 "@babel/plugin-proposal-optional-chaining@^7.11.0", "@babel/plugin-proposal-optional-chaining@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
@@ -992,15 +619,6 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
-  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
 "@babel/plugin-proposal-private-methods@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
@@ -1009,14 +627,6 @@
     "@babel/helper-create-class-features-plugin" "^7.16.10"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-proposal-private-methods@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
-  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-proposal-private-property-in-object@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
@@ -1027,16 +637,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-private-property-in-object@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
-  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
@@ -1045,14 +645,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
-  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -1095,14 +687,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
-  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-
-"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -1193,13 +778,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-arrow-functions@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
-  integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
@@ -1209,15 +787,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-remap-async-to-generator" "^7.16.8"
 
-"@babel/plugin-transform-async-to-generator@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
-  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
-  dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-
 "@babel/plugin-transform-block-scoped-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
@@ -1225,13 +794,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
-  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-block-scoping@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
@@ -1239,13 +801,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-block-scoping@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
-  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-classes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
@@ -1260,21 +815,6 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
     globals "^11.1.0"
 
-"@babel/plugin-transform-classes@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
-  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-computed-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
@@ -1282,14 +822,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-computed-properties@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
-  integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/template" "^7.20.7"
-
 "@babel/plugin-transform-destructuring@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
@@ -1297,13 +829,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-destructuring@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
-  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
@@ -1312,14 +837,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
-  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-duplicate-keys@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
@@ -1327,13 +844,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
-  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-exponentiation-operator@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
@@ -1342,14 +852,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
-  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-for-of@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
@@ -1357,13 +859,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-for-of@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
-  integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-function-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
@@ -1373,15 +868,6 @@
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
-  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
@@ -1389,13 +875,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
-  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-member-expression-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
@@ -1403,13 +882,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
-  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-modules-amd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
@@ -1419,14 +891,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-amd@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
-  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-modules-commonjs@^7.10.4", "@babel/plugin-transform-modules-commonjs@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz#274be1a2087beec0254d4abd4d86e52442e1e5b6"
@@ -1447,15 +911,6 @@
     "@babel/helper-simple-access" "^7.14.5"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
-  integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.21.5"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-simple-access" "^7.21.5"
-
 "@babel/plugin-transform-modules-systemjs@^7.17.8":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
@@ -1467,16 +922,6 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
-  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-identifier" "^7.19.1"
-
 "@babel/plugin-transform-modules-umd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
@@ -1485,14 +930,6 @@
     "@babel/helper-module-transforms" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
-  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.17.10":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.10.tgz#715dbcfafdb54ce8bccd3d12e8917296a4ba66a4"
@@ -1500,14 +937,6 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.17.0"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
-  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-new-target@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
@@ -1515,13 +944,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-new-target@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
-  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-object-super@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
@@ -1530,14 +952,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-replace-supers" "^7.16.7"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
-  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
-
 "@babel/plugin-transform-parameters@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
@@ -1545,13 +959,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
-  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
 "@babel/plugin-transform-property-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
@@ -1559,13 +966,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
-  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-react-display-name@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
@@ -1606,14 +1006,6 @@
   dependencies:
     regenerator-transform "^0.15.0"
 
-"@babel/plugin-transform-regenerator@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
-  integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-    regenerator-transform "^0.15.1"
-
 "@babel/plugin-transform-reserved-words@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
@@ -1621,13 +1013,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
-  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-runtime@^7.9.0":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz#b89d821c55d61b5e3d3c3d1d636d8d5a81040ae1"
@@ -1647,13 +1032,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
-  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-spread@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
@@ -1662,14 +1040,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
 
-"@babel/plugin-transform-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
-  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-
 "@babel/plugin-transform-sticky-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
@@ -1677,13 +1047,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
-  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-template-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
@@ -1691,13 +1054,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
-  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-typeof-symbol@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
@@ -1705,13 +1061,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
-  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
 "@babel/plugin-transform-typescript@^7.16.7":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
@@ -1728,13 +1077,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-unicode-escapes@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
-  integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.21.5"
-
 "@babel/plugin-transform-unicode-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
@@ -1743,96 +1085,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
-  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/preset-env@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.5.tgz#db2089d99efd2297716f018aeead815ac3decffb"
-  integrity sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==
-  dependencies:
-    "@babel/compat-data" "^7.21.5"
-    "@babel/helper-compilation-targets" "^7.21.5"
-    "@babel/helper-plugin-utils" "^7.21.5"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.21.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.21.5"
-    "@babel/plugin-transform-async-to-generator" "^7.20.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.21.0"
-    "@babel/plugin-transform-classes" "^7.21.0"
-    "@babel/plugin-transform-computed-properties" "^7.21.5"
-    "@babel/plugin-transform-destructuring" "^7.21.3"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.21.5"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.20.11"
-    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.21.3"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.21.5"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.20.7"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.21.5"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
 "@babel/preset-env@^7.9.5":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.17.10.tgz#a81b093669e3eb6541bb81a23173c5963c5de69c"
@@ -1945,11 +1197,6 @@
     "@babel/helper-validator-option" "^7.16.7"
     "@babel/plugin-transform-typescript" "^7.16.7"
 
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.8", "@babel/runtime@^7.13.9", "@babel/runtime@^7.14.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
@@ -1996,15 +1243,6 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/template@^7.18.10", "@babel/template@^7.20.7":
-  version "7.21.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
-  integrity sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==
-  dependencies:
-    "@babel/code-frame" "^7.21.4"
-    "@babel/parser" "^7.21.9"
-    "@babel/types" "^7.21.5"
-
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.14.5", "@babel/traverse@^7.14.8":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.8.tgz#c0253f02677c5de1a8ff9df6b0aacbec7da1a8ce"
@@ -2036,22 +1274,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.20.5", "@babel/traverse@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133"
-  integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==
-  dependencies:
-    "@babel/code-frame" "^7.21.4"
-    "@babel/generator" "^7.21.5"
-    "@babel/helper-environment-visitor" "^7.21.5"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.21.5"
-    "@babel/types" "^7.21.5"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.8.tgz#38109de8fcadc06415fbd9b74df0065d4d41c728"
@@ -2068,15 +1290,6 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.5", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5":
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
-  integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
-  dependencies:
-    "@babel/helper-string-parser" "^7.21.5"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
-
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2457,20 +1670,6 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
-  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.1"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
-"@jridgewell/resolve-uri@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
-  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
-
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
@@ -2481,29 +1680,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
   integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
 
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
-
-"@jridgewell/sourcemap-codec@1.4.14":
-  version "1.4.14"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
-  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
-
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
-"@jridgewell/trace-mapping@^0.3.17":
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
-  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
-  dependencies:
-    "@jridgewell/resolve-uri" "3.1.0"
-    "@jridgewell/sourcemap-codec" "1.4.14"
-
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -2543,16 +1724,6 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@noble/hashes@1.2.0", "@noble/hashes@~1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.2.0.tgz#a3150eeb09cc7ab207ebf6d7b9ad311a9bdbed12"
-  integrity sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ==
-
-"@noble/secp256k1@1.7.1", "@noble/secp256k1@~1.7.0":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
-  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2621,28 +1792,6 @@
   dependencies:
     dequal "^2.0.2"
 
-"@scure/base@1.1.1", "@scure/base@~1.1.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
-  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
-
-"@scure/bip32@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.1.4.tgz#2c91a7be0156b15f26dd0c843a06a1917f129efd"
-  integrity sha512-m925ACYK0wPELsF7Z/VdLGmKj1StIeHraPMYB9xiAFiq/PnvqWd/99I0TQ2OZhjjlMDsDJeZlyXMWi0beaA7NA==
-  dependencies:
-    "@noble/hashes" "~1.2.0"
-    "@noble/secp256k1" "~1.7.0"
-    "@scure/base" "~1.1.0"
-
-"@scure/bip39@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.1.1.tgz#b54557b2e86214319405db819c4b6a370cf340c5"
-  integrity sha512-t+wDck2rVkh65Hmv280fYdVdY25J9YeEUIgn2LG1WM6gxFkGzcksoDiUkWVpVp3Oex9xGC68JU2dSbUfwZ2jPg==
-  dependencies:
-    "@noble/hashes" "~1.2.0"
-    "@scure/base" "~1.1.0"
-
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -2851,11 +2000,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
   integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
 
-"@types/json-schema@^7.0.9":
-  version "7.0.12"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
-  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
-
 "@types/loadable__component@^5.13.4":
   version "5.13.4"
   resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.13.4.tgz#a4646b2406b1283efac1a9d9485824a905b33d4a"
@@ -3448,25 +2592,11 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-formats@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
-  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
-  dependencies:
-    ajv "^8.0.0"
-
 ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv-keywords@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
-  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-
 ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -3477,16 +2607,6 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.9.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
-  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -3788,14 +2908,6 @@ babel-loader@^8.0.6:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
-  dependencies:
-    find-cache-dir "^3.3.2"
-    schema-utils "^4.0.0"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -3833,15 +2945,6 @@ babel-plugin-polyfill-corejs2@^0.3.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     semver "^6.1.1"
 
-babel-plugin-polyfill-corejs2@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
-  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
-  dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    semver "^6.1.1"
-
 babel-plugin-polyfill-corejs3@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
@@ -3850,14 +2953,6 @@ babel-plugin-polyfill-corejs3@^0.5.0:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     core-js-compat "^3.21.0"
 
-babel-plugin-polyfill-corejs3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
-  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    core-js-compat "^3.25.1"
-
 babel-plugin-polyfill-regenerator@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
@@ -3865,13 +2960,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-polyfill-regenerator@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
-  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -4206,16 +3294,6 @@ browserslist@^4.20.2, browserslist@^4.20.3:
     node-releases "^2.0.3"
     picocolors "^1.0.0"
 
-browserslist@^4.21.3, browserslist@^4.21.5:
-  version "4.21.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
-  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
-  dependencies:
-    caniuse-lite "^1.0.30001449"
-    electron-to-chromium "^1.4.284"
-    node-releases "^2.0.8"
-    update-browserslist-db "^1.0.10"
-
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -4454,11 +3532,6 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001023, caniuse-lite@^1.0.30001125, can
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz"
   integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
 
-caniuse-lite@^1.0.30001449:
-  version "1.0.30001489"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz#ca82ee2d4e4dbf2bd2589c9360d3fcc2c7ba3bd8"
-  integrity sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==
-
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -5021,13 +4094,6 @@ core-js-compat@^3.21.0, core-js-compat@^3.22.1:
     browserslist "^4.20.3"
     semver "7.0.0"
 
-core-js-compat@^3.25.1:
-  version "3.30.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.2.tgz#83f136e375babdb8c80ad3c22d67c69098c1dd8b"
-  integrity sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==
-  dependencies:
-    browserslist "^4.21.5"
-
 core-js@^3.6.4:
   version "3.15.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.2.tgz#740660d2ff55ef34ce664d7e2455119c5bdd3d61"
@@ -5891,11 +4957,6 @@ electron-to-chromium@^1.4.118:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f"
   integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==
 
-electron-to-chromium@^1.4.284:
-  version "1.4.407"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.407.tgz#087e2ab97b3eb092aa6217c05986086b7dd370cc"
-  integrity sha512-5smEvFSFYMv90tICOzRVP7Opp98DAC4KW7RRipg3BuNpGbbV3N+x24Zh3sbLb1T5haGtOSy/hrBfXsWnIM9aCg==
-
 elliptic@^6.5.2, elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -6516,15 +5577,6 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-cache-dir@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
-
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -8381,11 +7433,6 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
-json-schema-traverse@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
-  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -8403,11 +7450,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
-
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -9298,11 +8340,6 @@ node-releases@^2.0.3:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
   integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
 
-node-releases@^2.0.8:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039"
-  integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==
-
 normalize-html-whitespace@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz#5e3c8e192f1b06c3b9eee4b7e7f28854c7601e34"
@@ -9350,17 +8387,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-nostr-tools@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.10.0.tgz#58d4b713c3d499c177612e9ac66f73f36c9fb654"
-  integrity sha512-Bbkucv25M69TaV+slqz1Vfce8G5O3dqSQOqqOZd/LwhooBJp62qt5V3JvlCV55OUqxaucC2brggeIER5Wliy1w==
-  dependencies:
-    "@noble/hashes" "1.2.0"
-    "@noble/secp256k1" "1.7.1"
-    "@scure/base" "1.1.1"
-    "@scure/bip32" "1.1.4"
-    "@scure/bip39" "1.1.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -11268,13 +10294,6 @@ regenerate-unicode-properties@^10.0.1:
   dependencies:
     regenerate "^1.4.2"
 
-regenerate-unicode-properties@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
-  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
-  dependencies:
-    regenerate "^1.4.2"
-
 regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
@@ -11297,13 +10316,6 @@ regenerator-transform@^0.15.0:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regenerator-transform@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
-  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -11337,18 +10349,6 @@ regexpu-core@^5.0.1:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
-  dependencies:
-    "@babel/regjsgen" "^0.8.0"
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.1.0"
-
 regjsgen@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
@@ -11361,13 +10361,6 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
-  dependencies:
-    jsesc "~0.5.0"
-
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -11420,11 +10413,6 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -11768,16 +10756,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.1.tgz#eb2d042df8b01f4b5c276a2dfd41ba0faab72e8d"
-  integrity sha512-lELhBAAly9NowEsX0yZBlw9ahZG+sK/1RJ21EpzdYHKEs13Vku3LJ+MIPhh4sMs0oCCeufZQEQbMekiA4vuVIQ==
-  dependencies:
-    "@types/json-schema" "^7.0.9"
-    ajv "^8.9.0"
-    ajv-formats "^2.1.1"
-    ajv-keywords "^5.1.0"
-
 screenfull@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
@@ -13141,11 +12119,6 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
-unicode-match-property-value-ecmascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
-  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
-
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
@@ -13218,14 +12191,6 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.10:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
-  dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

From 035a0d64fac19367764ef8a8ad60e830a2905b91 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 15 Jun 2023 16:54:50 +0500
Subject: [PATCH 010/179] WIP

---
 package.json                               |   2 +
 src/client/index.tsx                       |   5 +
 src/common/app.tsx                         |   4 +-
 src/common/components/chat-box/index.scss  |   5 +-
 src/common/components/chat-box/index.tsx   | 335 ++++-----
 src/common/helper/chat-utils.ts            |  50 +-
 src/common/helper/message-event-emitter.ts | 112 +++
 src/common/helper/message-global.ts        |  16 +
 src/common/helper/message-helper.ts        | 798 +++++++++++++++++++++
 src/common/pages/sign-up.tsx               |   2 -
 src/common/store/actions.ts                |   5 +-
 src/common/store/chat/index.ts             |  63 ++
 src/common/store/chat/types.ts             |  41 ++
 src/common/store/index.ts                  |   4 +-
 src/common/store/initial-state.ts          |   4 +-
 src/lib/nostr-tools/.eslintrc.json         | 145 ++++
 src/lib/nostr-tools/.gitignore             |   7 +
 src/lib/nostr-tools/.prettierrc.yaml       |  10 +
 src/lib/nostr-tools/README.md              | 192 +++++
 src/lib/nostr-tools/build.js               |  41 ++
 src/lib/nostr-tools/event.ts               |  98 +++
 src/lib/nostr-tools/filter.ts              |  45 ++
 src/lib/nostr-tools/index.ts               |  21 +
 src/lib/nostr-tools/keys.ts                |   9 +
 src/lib/nostr-tools/nip04.ts               |  42 ++
 src/lib/nostr-tools/nip05.ts               |  48 ++
 src/lib/nostr-tools/nip06.ts               |  19 +
 src/lib/nostr-tools/nip19.ts               | 127 ++++
 src/lib/nostr-tools/nip26.ts               |  71 ++
 src/lib/nostr-tools/nip42.ts               |  46 ++
 src/lib/nostr-tools/package.json           |  40 ++
 src/lib/nostr-tools/path.ts                | 223 ++++++
 src/lib/nostr-tools/pool.ts                | 206 ++++++
 src/lib/nostr-tools/relay.ts               | 584 +++++++++++++++
 src/lib/nostr-tools/tsconfig.json          |  15 +
 src/lib/nostr-tools/utils.ts               |   2 +
 src/providers/message-provider-types.ts    |  55 ++
 src/providers/message-provider.tsx         | 300 ++++++++
 yarn.lock                                  | 107 +++
 39 files changed, 3681 insertions(+), 218 deletions(-)
 create mode 100644 src/common/helper/message-event-emitter.ts
 create mode 100644 src/common/helper/message-global.ts
 create mode 100644 src/common/helper/message-helper.ts
 create mode 100644 src/common/store/chat/index.ts
 create mode 100644 src/common/store/chat/types.ts
 create mode 100644 src/lib/nostr-tools/.eslintrc.json
 create mode 100644 src/lib/nostr-tools/.gitignore
 create mode 100644 src/lib/nostr-tools/.prettierrc.yaml
 create mode 100644 src/lib/nostr-tools/README.md
 create mode 100755 src/lib/nostr-tools/build.js
 create mode 100644 src/lib/nostr-tools/event.ts
 create mode 100644 src/lib/nostr-tools/filter.ts
 create mode 100644 src/lib/nostr-tools/index.ts
 create mode 100644 src/lib/nostr-tools/keys.ts
 create mode 100644 src/lib/nostr-tools/nip04.ts
 create mode 100644 src/lib/nostr-tools/nip05.ts
 create mode 100644 src/lib/nostr-tools/nip06.ts
 create mode 100644 src/lib/nostr-tools/nip19.ts
 create mode 100644 src/lib/nostr-tools/nip26.ts
 create mode 100644 src/lib/nostr-tools/nip42.ts
 create mode 100644 src/lib/nostr-tools/package.json
 create mode 100644 src/lib/nostr-tools/path.ts
 create mode 100644 src/lib/nostr-tools/pool.ts
 create mode 100644 src/lib/nostr-tools/relay.ts
 create mode 100644 src/lib/nostr-tools/tsconfig.json
 create mode 100644 src/lib/nostr-tools/utils.ts
 create mode 100644 src/providers/message-provider-types.ts
 create mode 100644 src/providers/message-provider.tsx

diff --git a/package.json b/package.json
index 942d5475b83..74181fe6f40 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@hiveio/hivescript": "^1.2.7",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
+    "@noble/secp256k1": "^1.7.1",
     "@webscopeio/react-textarea-autocomplete": "^4.8.1",
     "axios": "^0.21.2",
     "bs58": "^4.0.1",
@@ -45,6 +46,7 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
+    "nostr-relaypool": "^0.6.28",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
diff --git a/src/client/index.tsx b/src/client/index.tsx
index 9d6a1e938e9..0bb65188059 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -11,6 +11,7 @@ import { AppWindow } from "./window";
 import "../style/style.scss";
 import "./base-handlers";
 import { loadableReady } from "@loadable/component";
+import MessageProvider from "../providers/message-provider";
 
 declare var window: AppWindow;
 
@@ -39,7 +40,9 @@ loadableReady().then(() => {
   hydrate(
     <Provider store={store}>
       <ConnectedRouter history={history!}>
+        {/* <MessageProvider> */}
         <App />
+        {/* </MessageProvider> */}
       </ConnectedRouter>
     </Provider>,
     document.getElementById("root")
@@ -64,7 +67,9 @@ if (module.hot) {
     hydrate(
       <Provider store={store}>
         <ConnectedRouter history={history!}>
+          {/* <MessageProvider> */}
           <App />
+          {/* </MessageProvider> */}
         </ConnectedRouter>
       </Provider>,
       document.getElementById("root")
diff --git a/src/common/app.tsx b/src/common/app.tsx
index 367d9a17914..bac75ef9a54 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -4,6 +4,7 @@ import EntryIndexContainer from "./pages/index";
 import EntryContainer from "./pages/entry";
 import { SearchPageContainer, SearchMorePageContainer } from "./pages/search";
 import { ProposalsIndexContainer, ProposalDetailContainer } from "./pages/proposals";
+import MessageProvider from "../providers/message-provider";
 import NotFound from "./components/404";
 import Tracker from "./tracker";
 import {
@@ -158,7 +159,8 @@ const App = (props: any) => {
 
       <Announcement activeUser={props.activeUser} />
       <FloatingFAQ />
-      <ChatBox activeUser={props.activeUser} />
+      <MessageProvider {...props} />
+      <ChatBox {...props} />
     </>
   );
 };
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 3161780b957..410f21e63f9 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -154,6 +154,7 @@
 
     .chat-content {
       display: flex;
+      cursor: pointer;
 
       .user-img {
         padding: 18px 16px;
@@ -161,7 +162,7 @@
       .user-title {
         padding-top: 18px;
         width: -webkit-fill-available;
-        cursor: pointer;
+
         .username {
           @include themify(day) {
             color: $charcoal-grey;
@@ -339,6 +340,8 @@
             margin-top: 3px;
           }
           .sender-message-content {
+            max-width: 280px;
+            word-wrap: break-word;
             margin-bottom: 0;
             color: $white;
             font-size: 16px;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 601676da57c..2c4fbc9ff44 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -4,10 +4,13 @@ import { Link } from "react-router-dom";
 
 import { Account } from "../../store/accounts/types";
 import { ActiveUser } from "../../store/active-user/types";
+import { DirectContactsType } from "../../store/chat/types";
+import { DirectMessage, Keys } from "../../../providers/message-provider-types";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
 import SeachUser from "../search-user";
+import { setNostrkeys } from "../../../providers/message-provider";
 
 import {
   addMessageSVG,
@@ -19,11 +22,19 @@ import {
   chevronDownSvgForSlider
 } from "../../img/svg";
 import { dateToFormatted } from "../../helper/parse-date";
+import {
+  createNoStrAccount,
+  getDirectMessages,
+  getProfileMetaData,
+  setProfileMetaData
+} from "../../helper/chat-utils";
 import { _t } from "../../i18n";
 import { getAccountFull } from "../../api/hive";
 
 import "./index.scss";
-import { updateProfile } from "../../api/operations";
+import { RavenEvents } from "../../helper/message-helper";
+import { Chat } from "../../store/chat/types";
+import { useMappedStore } from "../../store/use-mapped-store";
 
 export interface profileData {
   joiningData: string;
@@ -33,9 +44,10 @@ export interface profileData {
 
 interface Props {
   activeUser: ActiveUser | null;
+  chat: Chat;
 }
 
-export default function ChatBox({ activeUser }: Props) {
+export default function ChatBox(props: Props) {
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
@@ -50,183 +62,108 @@ export default function ChatBox({ activeUser }: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
+  const [senderPubKey, setSenderPubKey] = useState("");
+  const [receiverPubKey, setReceiverPubKey] = useState("");
+  const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
+
+  const { chat } = useMappedStore();
 
   useEffect(() => {
-    // fetchProfileData();
-    setShow(!!activeUser?.username);
+    fetchProfileData();
+    setShow(!!props.activeUser?.username);
   }, []);
 
   useEffect(() => {
-    // fetchProfileData();
-    setCurrentUser("");
-    setIsCurrentUser(false);
-    setShow(!!activeUser?.username);
-    setExpanded(false);
-  }, [activeUser]);
+    const msgsList = getDirectMessages(chat.directMessages, receiverPubKey!);
+    setMessagesList(msgsList);
+  }, [chat.directMessages]);
+
+  useEffect(() => {
+    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
+    console.log(chatBodyDivRef?.current?.scrollHeight, "ref");
+  }, [isCurrentUser]);
+
+  // useEffect(() => {
+  //   fetchProfileData();
+  //   setCurrentUser("");
+  //   // setIsCurrentUser(false);
+  //   setShow(!!props.activeUser?.username);
+  //   // setExpanded(false);
+  // }, [props.activeUser]);
+
+  // useEffect(() => {
+  //   currentUser ? fetchCurrentUserData() : setMessage("");
+  // }, [currentUser]);
 
   useEffect(() => {
     if (currentUser) {
       fetchCurrentUserData();
+      const peer = chat.directContacts.find((x) => x.name === currentUser)?.creator ?? null;
+      setReceiverPubKey(peer!);
+      const msgsList = getDirectMessages(chat.directMessages, peer!);
+      setMessagesList(msgsList);
+    } else {
+      setMessage("");
     }
   }, [currentUser]);
 
-  const contentList = [
-    {
-      username: "good-karma",
-      lastMessage: "Hy Hope so you are doing well"
-    },
-    {
-      username: "ecency",
-      lastMessage: "Hy"
-    },
-    {
-      username: "demo.com",
-      lastMessage: "Whats Up"
-    },
-    {
-      username: "hive-189310",
-      lastMessage: "Hello"
-    },
-    {
-      username: "hispapro",
-      lastMessage: "Hy Hope so you are doing well"
-    },
-    {
-      username: "galenkp",
-      lastMessage: "How are you?"
-    },
-    {
-      username: "deanliu",
-      lastMessage: "Bro"
-    },
-    {
-      username: "demo123",
-      lastMessage: "What are you doing"
-    },
-    {
-      username: "fastchrisuk",
-      lastMessage: "Hy Hope so you are doing well"
-    },
-    {
-      username: "incublus",
-      lastMessage: "Hy Hope so you are doing well"
-    },
-    {
-      username: "ipexito",
-      lastMessage: "Hello"
-    },
-    {
-      username: "belemo",
-      lastMessage: "Hy Hope so you are doing well"
-    },
-    {
-      username: "foodchunk",
-      lastMessage: "How are you?"
-    },
-    {
-      username: "macro1997",
-      lastMessage: "Bro"
-    },
-    {
-      username: "gelenkp",
-      lastMessage: "What are you doing"
-    },
-    {
-      username: "der-prophet",
-      lastMessage: "Hy Hope so you are doing well"
-    }
-  ];
-
-  const messageList = [
-    {
-      username: "demo.com",
-      time: "4.27 pm",
-      message: "Hy How are you.",
-      date: "4/9/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.44 pm",
-      message: "I am fine",
-      date: "6/9/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.44 pm",
-      message: "What's about you",
-      date: "6/9/2022"
-    },
-    {
-      username: "demo.com",
-      time: "4.45 pm",
-      message: "Looks good",
-      date: "12/9/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.46 pm",
-      message: "Thanks for asking",
-      date: "12/9/2022"
-    },
-    {
-      username: "demo.com",
-      time: "4.48 pm",
-      message: "What are you doing Nowadays",
-      date: "14/9/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.49 pm",
-      message:
-        "He was educated at the Aitchison College and Cathedral School in Lahore, and then the Royal Grammar School Worcester in England, where he excelled at cricket. In 1972, he enrolled in Keble College, Oxford where he studied Philosophy, Politics and Economics, graduating in 1975.",
-      date: "24/9/2022"
-    },
-    {
-      username: "demo.com",
-      time: "4.50 pm",
-      message: "Seems good",
-      date: "4/10/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.50 pm",
-      message: "Excellent",
-      date: "4/10/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.52 pm",
-      message: "Thanks. I am very grateful to you.",
-      date: "4/11/2022"
-    },
-    {
-      username: "mtsaeed",
-      time: "4.54 pm",
-      message: "Bundle of thanks.",
-      date: "5/11/2022"
+  useEffect(() => {
+    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
+  }, [isCurrentUser]);
+
+  const formatFollowers = (count: number | undefined) => {
+    if (count) {
+      return count >= 1e6
+        ? (count / 1e6).toLocaleString() + "M"
+        : count >= 1e3
+        ? (count / 1e3).toLocaleString() + "K"
+        : count.toLocaleString();
     }
-  ];
+    return count;
+  };
+
+  //Event listening
+
+  // const handleDirectMessage = (data: DirectMessage[]) => {
+  //   console.log("handleDirectMessage in chat compoenent", data);
+  //   // const append = data.filter((x) => directMessages.find((y) => y.id === x.id) === undefined);
+  //   // raven?.loadProfiles(append.map((x) => x.peer));
+  //   // setDirectMessages([...directMessages, ...append]);
+  // };
+
+  // useEffect(() => {
+  //   if (window.raven) {
+  //     window.raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+  //     window.raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
+  //   }
+
+  //   return () => {
+  //     if (window.raven) {
+  //       window.raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+  //     }
+  //   };
+  // }, []);
 
   const fetchCurrentUserData = async () => {
-    console.log("Fetch Current data called");
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
       about: response.profile?.about,
       followers: response.follow_stats?.follower_count
     });
+    const currentUserProfile = await getProfileMetaData(currentUser);
+    // console.log(currentUserProfile.noStrKey);
+    setReceiverPubKey(currentUserProfile.noStrKey.pub);
   };
 
-  // const fetchProfileData = async () => {
-  //   console.log("Fetch profile data called");
-  //   const response = await getAccountFull(activeUser?.username!);
-  //   setAccountData(response);
-  //   const { posting_json_metadata } = response;
-  //   const profile = JSON.parse(posting_json_metadata!).profile;
-
-  //   const hasNoStrKey = !!profile.noStrKey && profile.noStrKey.trim() !== "";
-  //   setHasUserJoinedChat(hasNoStrKey);
-  // };
+  const fetchProfileData = async () => {
+    const profileData = await getProfileMetaData(props.activeUser?.username!);
+    console.log(profileData, "keys");
+    setSenderPubKey(profileData?.noStrKey.pub);
+    const hasNoStrKey = "noStrKey" in profileData;
+    setHasUserJoinedChat(hasNoStrKey);
+    setShow(!!props.activeUser?.username);
+  };
 
   const userClicked = (username: string) => {
     setIsCurrentUser(true);
@@ -248,24 +185,10 @@ export default function ChatBox({ activeUser }: Props) {
     if (message.length !== 0) {
       setMessage("");
       setIsMessageText(false);
+      window.raven?.sendDirectMessage(receiverPubKey, message);
     }
   };
 
-  useEffect(() => {
-    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
-  }, [isCurrentUser]);
-
-  const formatFollowers = (count: number | undefined) => {
-    if (count) {
-      return count >= 1e6
-        ? (count / 1e6).toLocaleString() + "M"
-        : count >= 1e3
-        ? (count / 1e3).toLocaleString() + "K"
-        : count.toLocaleString();
-    }
-    return count;
-  };
-
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     let srollHeight: number = (element.scrollHeight / 100) * 25;
@@ -286,6 +209,22 @@ export default function ChatBox({ activeUser }: Props) {
     });
   };
 
+  // const scrollToBottomClicked = () => {
+  //   console.log("Scroll to bottom clicked");
+  //   chatBodyDivRef?.current?.scrollTo({
+  //     top: chatBodyDivRef?.current?.scrollHeight+10,
+  //     behavior: "smooth"
+  //   });
+  // };
+
+  // const scrollToTopClicked = () => {
+  //   console.log("Scroll to top clicked");
+  //   chatBodyDivRef?.current?.scrollTo({
+  //     top: 0,
+  //     behavior: "smooth"
+  //   });
+  // };
+
   const handleMessageSvgClick = () => {
     setShowSearchUser(true);
   };
@@ -296,19 +235,12 @@ export default function ChatBox({ activeUser }: Props) {
 
   const handleJoinChat = () => {
     setInProgress(true);
-    setTimeout(() => {
-      setInProgress(false);
-      setHasUserJoinedChat(true);
-    }, 4000);
-
-    // const { profile } = response;
-
-    // const newProfile = {
-    //   noStrKey: "nsec1mefplh7mwup68r84x6gxkqn4w0ymj5q8cr0frj0lgflx8vrwvw7sdxh3ew"
-    // };
-
-    // const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-    // console.log(updatedProfile);
+    const keys = createNoStrAccount();
+    setProfileMetaData(props.activeUser, keys);
+    setInProgress(false);
+    setHasUserJoinedChat(true);
+    setNostrkeys(keys);
+    // window.raven?.updateProfile({ name: activeUser?.username!, about: "", picture: "" });
   };
 
   const chatButtonSpinner = (
@@ -397,35 +329,35 @@ export default function ChatBox({ activeUser }: Props) {
                       )}
                     </Link>
                     <div className="chats">
-                      {messageList.map((msg) => {
-                        if (msg.username !== activeUser?.username) {
+                      {messagesList.map((msg) => {
+                        if (msg.creator !== senderPubKey) {
                           return (
                             <>
-                              <div key={msg.username} className="date-time-detail">
+                              {/* <div key={msg.username} className="date-time-detail">
                                 <p className="date-time">
                                   {msg.date}, {msg.time}
                                 </p>
-                              </div>
-                              <div key={msg.time} className="message">
+                              </div> */}
+                              <div key={msg.id} className="message">
                                 <div className="user-img">
-                                  <Link to={`/@${msg.username}`}>
+                                  <Link to={`/@${currentUser}`}>
                                     <span>
-                                      <UserAvatar username={msg.username} size="medium" />
+                                      <UserAvatar username={currentUser} size="medium" />
                                     </span>
                                   </Link>
                                 </div>
                                 <div className="user-info">
-                                  <p className="receiver-message-content">{msg.message}</p>
+                                  <p className="receiver-message-content">{msg.content}</p>
                                 </div>
                               </div>
                             </>
                           );
                         } else {
                           return (
-                            <div key={msg.message} className="sender">
+                            <div key={msg.id} className="sender">
                               <div className="sender-message">
                                 {/* <span className="sender-message-time">{msg.time}</span> */}
-                                <p className="sender-message-content">{msg.message}</p>
+                                <p className="sender-message-content">{msg.content}</p>
                               </div>
                             </div>
                           );
@@ -435,20 +367,20 @@ export default function ChatBox({ activeUser }: Props) {
                   </>
                 ) : (
                   <>
-                    {contentList.map((user) => {
+                    {chat.directContacts.map((user: DirectContactsType) => {
                       return (
-                        <div key={user.username} className="chat-content">
-                          <Link to={`/@${user.username}`}>
+                        <div key={user.creator} className="chat-content">
+                          <Link to={`/@${user.name}`}>
                             <div className="user-img">
                               <span>
-                                <UserAvatar username={user.username} size="medium" />
+                                <UserAvatar username={user.name} size="medium" />
                               </span>
                             </div>
                           </Link>
 
-                          <div className="user-title" onClick={() => userClicked(user.username)}>
-                            <p className="username">{user.username}</p>
-                            <p className="last-message">{user.lastMessage}</p>
+                          <div className="user-title" onClick={() => userClicked(user.name)}>
+                            <p className="username">{user.name}</p>
+                            {/* <p className="last-message">{user.lastMessage}</p> */}
                           </div>
                         </div>
                       );
@@ -489,6 +421,7 @@ export default function ChatBox({ activeUser }: Props) {
               >
                 <InputGroup className="chat-input-group">
                   <Form.Control
+                    as="textarea"
                     value={message}
                     onChange={handleMessage}
                     required={true}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 4cfd38e3771..591115b9e03 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -1,23 +1,32 @@
-import { generatePrivateKey, getPublicKey } from "nostr-tools";
+import { useMemo } from "react";
+import { generatePrivateKey, getPublicKey } from "../../lib/nostr-tools/keys";
+import { Channel, DirectMessage } from "../../providers/message-provider-types";
 import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
 import { ActiveUser } from "../store/active-user/types";
 
-export const getProfileMetaData = async (activeUser: ActiveUser | null) => {
-  const response = await getAccountFull(activeUser?.username!);
+export interface NostrKeys {
+  pub: string;
+  priv: string;
+}
+
+export const getProfileMetaData = async (username: string) => {
+  const response = await getAccountFull(username);
   const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
+  if (posting_json_metadata) {
+    const profile = JSON.parse(posting_json_metadata!).profile;
 
-  return profile;
+    return profile;
+  }
 };
 
-export const setProfileMetaData = async (activeUser: ActiveUser | null, key: string) => {
+export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: NostrKeys) => {
   const response = await getAccountFull(activeUser?.username!);
 
   const { posting_json_metadata } = response;
   const profile = JSON.parse(posting_json_metadata!).profile;
   const newProfile = {
-    noStrKey: key
+    noStrKey: keys
   };
 
   const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
@@ -25,7 +34,28 @@ export const setProfileMetaData = async (activeUser: ActiveUser | null, key: str
 };
 
 export const createNoStrAccount = () => {
-  const privKey = generatePrivateKey();
-  const pubKey = getPublicKey(privKey);
-  return { pubKey, privKey };
+  const priv = generatePrivateKey();
+  const pub = getPublicKey(priv);
+  return { pub, priv };
+};
+
+export function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+  return value !== null && value !== undefined;
+}
+
+export const GLOBAL_CHAT: Channel = {
+  id: "f412192fdc846952c75058e911d37a7392aa7fd2e727330f4344badc92fb8a22",
+  name: "Global Chat",
+  about: "Whatever you want it to be, just be nice",
+  picture: "",
+  creator: "aea59833635dd0868bc7cf923926e51df936405d8e6a753b78038981c75c4a74",
+  created: 1678198928
+};
+
+export const getDirectMessages = (messages: DirectMessage[], peer?: string) => {
+  const clean = messages.filter((x) => x.peer === peer).sort((a, b) => a.created - b.created);
+
+  return clean
+    .map((c) => ({ ...c, children: clean.filter((x) => x.root === c.id) }))
+    .filter((x) => !x.root);
 };
diff --git a/src/common/helper/message-event-emitter.ts b/src/common/helper/message-event-emitter.ts
new file mode 100644
index 00000000000..e4b97f13ea6
--- /dev/null
+++ b/src/common/helper/message-event-emitter.ts
@@ -0,0 +1,112 @@
+import { EventEmitter } from "events";
+
+export enum EventEmitterEvents {
+  NewListener = "newListener",
+  RemoveListener = "removeListener",
+  Error = "error"
+}
+
+type AnyListener = (...args: any) => any;
+export type ListenerMap<E extends string> = { [eventName in E]: AnyListener };
+type EventEmitterEventListener = (eventName: string, listener: AnyListener) => void;
+type EventEmitterErrorListener = (error: Error) => void;
+
+export type Listener<
+  E extends string,
+  A extends ListenerMap<E>,
+  T extends E | EventEmitterEvents
+> = T extends E
+  ? A[T]
+  : T extends EventEmitterEvents
+  ? EventEmitterErrorListener
+  : EventEmitterEventListener;
+
+/**
+ * Typed Event Emitter class which can act as a Base Model for all our model
+ * and communication events.
+ * This makes it much easier for us to distinguish between events, as we now need
+ * to properly type this, so that our events are not stringly-based and prone
+ * to silly typos.
+ */
+export class TypedEventEmitter<
+  Events extends string,
+  Arguments extends ListenerMap<Events>,
+  SuperclassArguments extends ListenerMap<any> = Arguments
+> extends EventEmitter {
+  public addListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.addListener(event, listener);
+  }
+
+  public emit<T extends Events>(event: T, ...args: Parameters<SuperclassArguments[T]>): boolean;
+  public emit<T extends Events>(event: T, ...args: Parameters<Arguments[T]>): boolean;
+  public emit<T extends Events>(event: T, ...args: any[]): boolean {
+    return super.emit(event, ...args);
+  }
+
+  public eventNames(): (Events | EventEmitterEvents)[] {
+    return super.eventNames() as Array<Events | EventEmitterEvents>;
+  }
+
+  public listenerCount(event: Events | EventEmitterEvents): number {
+    return super.listenerCount(event);
+  }
+
+  public listeners(event: Events | EventEmitterEvents): ReturnType<EventEmitter["listeners"]> {
+    return super.listeners(event);
+  }
+
+  public off<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.off(event, listener);
+  }
+
+  public on<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.on(event, listener);
+  }
+
+  public once<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.once(event, listener);
+  }
+
+  public prependListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.prependListener(event, listener);
+  }
+
+  public prependOnceListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.prependOnceListener(event, listener);
+  }
+
+  public removeAllListeners(event?: Events | EventEmitterEvents): this {
+    return super.removeAllListeners(event);
+  }
+
+  public removeListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.removeListener(event, listener);
+  }
+
+  public rawListeners(
+    event: Events | EventEmitterEvents
+  ): ReturnType<EventEmitter["rawListeners"]> {
+    return super.rawListeners(event);
+  }
+}
diff --git a/src/common/helper/message-global.ts b/src/common/helper/message-global.ts
new file mode 100644
index 00000000000..c0981223bcb
--- /dev/null
+++ b/src/common/helper/message-global.ts
@@ -0,0 +1,16 @@
+import Raven from "./message-helper";
+import { Event } from "../../lib/nostr-tools/event";
+
+declare global {
+  interface Window {
+    raven?: Raven;
+    nostr?: {
+      getPublicKey: () => Promise<string>;
+      signEvent: (event: Event) => Promise<Event>;
+      nip04: {
+        encrypt: (pubkey: string, content: string) => Promise<string>;
+        decrypt: (pubkey: string, content: string) => Promise<string>;
+      };
+    };
+  }
+}
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
new file mode 100644
index 00000000000..48ceb9362d6
--- /dev/null
+++ b/src/common/helper/message-helper.ts
@@ -0,0 +1,798 @@
+import { useMappedStore } from "./../store/use-mapped-store";
+// import { Event, Filter, getEventHash, Kind, nip04, signEvent, SimplePool, Sub } from "nostr-tools";
+// import { TypedEventEmitter } from "raven/helper/event-emitter";
+// import {
+//   Channel,
+//   ChannelMessageHide,
+//   ChannelUpdate,
+//   ChannelUserMute,
+//   DirectMessage,
+//   EventDeletion,
+//   Keys,
+//   Metadata,
+//   MuteList,
+//   Profile,
+//   PublicMessage
+// } from "types";
+// import chunk from 'lodash.chunk';
+// import uniq from 'lodash.uniq';
+// import {getRelays} from 'helper';
+// import {GLOBAL_CHAT, MESSAGE_PER_PAGE} from 'const';
+// import {notEmpty} from 'util/misc';
+
+import { Sub } from "../../lib/nostr-tools/relay";
+import { Kind } from "../../lib/nostr-tools/event";
+import { Filter } from "../../lib/nostr-tools/filter";
+import { TypedEventEmitter } from "./message-event-emitter";
+import uniq from "lodash";
+import chunk from "lodash";
+import {
+  Channel,
+  ChannelMessageHide,
+  ChannelUpdate,
+  ChannelUserMute,
+  DirectMessage,
+  EventDeletion,
+  Keys,
+  Metadata,
+  MuteList,
+  Profile,
+  PublicMessage
+} from "../../providers/message-provider-types";
+import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
+import SimplePool from "../../lib/nostr-tools/pool";
+import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
+import { getDirectMessages, GLOBAL_CHAT, notEmpty } from "./chat-utils";
+import * as ls from "../util/local-storage";
+// import { addDirectContacts } from "../store/chat";
+
+const relays = {
+  "wss://relay1.nostrchat.io": { read: true, write: true },
+  "wss://relay2.nostrchat.io": { read: true, write: true },
+  "wss://relay.damus.io": { read: true, write: true },
+  "wss://relay.snort.social": { read: true, write: true },
+  "wss://nos.lol": { read: true, write: true }
+};
+
+enum NewKinds {
+  MuteList = 10000
+}
+
+export enum RavenEvents {
+  Ready = "ready",
+  ProfileUpdate = "profile_update",
+  ChannelCreation = "channel_creation",
+  ChannelUpdate = "channel_update",
+  EventDeletion = "event_deletion",
+  PublicMessage = "public_message",
+  DirectMessage = "direct_message",
+  ChannelMessageHide = "channel_message_hide",
+  ChannelUserMute = "channel_user_mute",
+  MuteList = "mute_list"
+}
+
+type EventHandlerMap = {
+  [RavenEvents.Ready]: () => void;
+  [RavenEvents.ProfileUpdate]: (data: Profile[]) => void;
+  [RavenEvents.ChannelCreation]: (data: Channel[]) => void;
+  [RavenEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
+  [RavenEvents.EventDeletion]: (data: EventDeletion[]) => void;
+  [RavenEvents.PublicMessage]: (data: PublicMessage[]) => void;
+  [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
+  [RavenEvents.ChannelMessageHide]: (data: ChannelMessageHide[]) => void;
+  [RavenEvents.ChannelUserMute]: (data: ChannelUserMute[]) => void;
+  [RavenEvents.MuteList]: (data: MuteList) => void;
+};
+
+class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
+  private pool: SimplePool;
+  private poolL: SimplePool;
+
+  private readonly priv: string | "nip07";
+  private readonly pub: string;
+
+  private readonly readRelays = Object.keys(relays).filter((r) => relays[r].read);
+  private readonly writeRelays = Object.keys(relays).filter((r) => relays[r].write);
+
+  private eventQueue: Event[] = [];
+  private eventQueueTimer: any;
+  private eventQueueFlag = true;
+  private eventQueueBuffer: Event[] = [];
+
+  private nameCache: Record<string, number> = {};
+
+  listenerSub: Sub | null = null;
+  messageListenerSub: Sub | null = null;
+
+  constructor(priv: string, pub: string) {
+    super();
+
+    this.priv = priv;
+    this.pub = pub;
+
+    this.pool = new SimplePool();
+    this.poolL = new SimplePool({ eoseSubTimeout: 10000 });
+
+    this.init().then();
+  }
+
+  private async init() {
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.Metadata],
+        authors: [this.pub]
+      },
+      // {
+      //   kinds: [Kind.ChannelHideMessage, Kind.ChannelMuteUser],
+      //   authors: [this.pub]
+      // },
+      // {
+      //   kinds: [NewKinds.MuteList],
+      //   authors: [this.pub]
+      // },
+      // {
+      //   kinds: [Kind.ChannelMessage],
+      //   authors: [this.pub]
+      // },
+      {
+        kinds: [Kind.EncryptedDirectMessage],
+        authors: [this.pub]
+      },
+      {
+        kinds: [Kind.EncryptedDirectMessage],
+        "#p": [this.pub]
+      }
+    ];
+    this.fetchP(filters).then((resp) => {
+      console.log("Init called", resp);
+      // console.log("ddd", addDirectContacts);
+      // // const deletions = resp
+      //   .filter((x) => x.kind === Kind.EventDeletion)
+      //   .map((x) => Raven.findTagValue(x, "e"));
+      const events = resp.sort((a, b) => b.created_at - a.created_at);
+      const profile = events.find((x) => x.kind === Kind.Metadata);
+      console.log(profile, "profile in init");
+      if (profile) this.pushToEventBuffer(profile, "init");
+      // const muteList = events.find((x) => x.kind.toString() === NewKinds.MuteList.toString());
+      // if (muteList) this.pushToEventBuffer(muteList, "init");
+      // for (const e of events.filter((x) =>
+      //   [Kind.ChannelHideMessage, Kind.ChannelMuteUser].includes(x.kind)
+      // )) {
+      //   this.pushToEventBuffer(e, "init");
+      // }
+      // const channels = uniq(
+      //   events
+      //     .map((x) => {
+      //       if (x.kind === Kind.ChannelCreation) {
+      //         return x.id;
+      //       }
+      //       if (x.kind === Kind.ChannelMessage) {
+      //         return Raven.findTagValue(x, "e");
+      //       }
+      //       return undefined;
+      //     })
+      //     .filter((x) => !deletions.includes(x))
+      //     .filter(notEmpty)
+      // );
+      // if (!channels.includes(GLOBAL_CHAT.id)) {
+      //   channels.push(GLOBAL_CHAT.id);
+      // }
+      // console.log(events, "Events");
+      const directContacts = Array.from(
+        new Set(
+          events.map((x) => {
+            if (x.kind === Kind.EncryptedDirectMessage) {
+              const receiver = Raven.findTagValue(x, "p");
+              if (!receiver) return undefined;
+              return receiver === this.pub ? x.pubkey : receiver;
+            }
+            return undefined;
+          })
+        )
+      ).filter(notEmpty);
+
+      // directContacts.map((p)=> {
+      //   console.log("p",p);
+      //   const profile =
+      // })
+      // directContacts.map(p => {
+      //   console.log(p)
+      //   // .filter((x) => x.kind === Kind.Metadata)
+      //   // const profile = profiles.find(x => x.creator === p.pub);
+      //   // const label = profile?.name || truncateMiddle(p.npub, 28, ':');
+      //   // const isSelected = p.pub === directMessage && location.pathname.startsWith('/dm/');
+      // )}
+
+      console.log("directContacts", directContacts);
+      // ls.set("direct_contacts", directContacts);
+
+      // addDirectContacts([
+      //   "0be16d2d36570b96080c0f9c351feb6be515a182b8b75b90738ae0180c27c6d5",
+      //   "1331c42d27e2a043ea5f478301a41ff4bab6c70bbb73f4edbf82a6756a7f51dd"
+      // ]);
+
+      // this.fetch([
+      //   {
+      //     kinds: [Kind.Metadata],
+      //     authors: directContacts
+      //   }
+      // ]);
+      const filters: Filter[] = [
+        {
+          kinds: [Kind.Metadata],
+          authors: directContacts
+        },
+        ...directContacts.map((x) => ({
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [this.pub],
+          authors: [x]
+        })),
+        ...directContacts.map((x) => ({
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [x],
+          authors: [this.pub]
+        }))
+      ];
+      filters.forEach((c) => {
+        this.fetch([c]);
+      });
+      this.emit(RavenEvents.Ready);
+
+      // let directMessages = getDirectMessages(events as DirectMessage[],)
+    });
+  }
+
+  // public fetchPrevMessages(channel: string, until: number) {
+  //   return this.fetchP(
+  //     [
+  //       {
+  //         kinds: [Kind.ChannelMessage],
+  //         "#e": [channel],
+  //         until,
+  //         limit: MESSAGE_PER_PAGE
+  //       }
+  //     ],
+  //     true
+  //   ).then((events) => {
+  //     events.forEach((ev) => {
+  //       this.pushToEventBuffer(ev);
+  //     });
+
+  //     return events.length;
+  //   });
+  // }
+
+  private fetch(filters: Filter[], unsub: boolean = true) {
+    console.log("Fetch Calledd", filters);
+
+    const sub = this.pool.sub(this.readRelays, filters);
+
+    sub.on("event", (event: Event) => {
+      this.pushToEventBuffer(event, "fetch");
+    });
+
+    sub.on("eose", () => {
+      if (unsub) {
+        sub.unsub();
+      }
+    });
+
+    return sub;
+  }
+
+  private fetchP(filters: Filter[], lowLatencyPool: boolean = false): Promise<Event[]> {
+    return new Promise((resolve) => {
+      const sub = (lowLatencyPool ? this.poolL : this.pool).sub(this.readRelays, filters);
+      const events: Event[] = [];
+
+      sub.on("event", (event: Event) => {
+        events.push(event);
+      });
+
+      sub.on("eose", () => {
+        sub.unsub();
+        resolve(events);
+      });
+    });
+  }
+
+  public loadChannel(id: string) {
+    // console.log("Load channel called");
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.ChannelCreation],
+        ids: [id]
+      },
+      {
+        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
+        "#e": [id]
+      },
+      {
+        kinds: [Kind.ChannelMessage],
+        "#e": [id],
+        limit: 30
+      }
+    ];
+
+    this.fetch(filters);
+  }
+
+  // public loadProfiles(pubs: string[]) {
+  //   console.log("pubs", pubs);
+  //   const authors = Array.from(new Set(pubs)).filter((p) => this.nameCache[p] === undefined);
+  //   console.log(authors, "authors");
+  //   if (authors.length === 0) {
+  //     return;
+  //   }
+  //   authors.forEach((a) => (this.nameCache[a] = Date.now()));
+
+  //   const batchSize = 20; // Number of authors to process in each batch
+
+  //   for (let i = 0; i < authors.length; i += batchSize) {
+  //     const batch = authors.slice(i, i + batchSize);
+
+  //     this.fetch([
+  //       {
+  //         kinds: [Kind.Metadata],
+  //         authors: batch
+  //       }
+  //     ]);
+  //   }
+
+  // }
+
+  // public loadProfiles(pubs: string[]) {
+  //   console.log(pubs, "pubs");
+  //   const authors = Array.from(new Set(pubs)).filter((p) => this.nameCache[p] === undefined);
+  //   console.log(authors, "authors");
+  //   if (authors.length === 0) {
+  //     return;
+  //   }
+  //   authors.forEach((a) => (this.nameCache[a] = Date.now()));
+
+  //   authors.forEach((a) => {
+  //     this.fetch([
+  //       {
+  //         kinds: [Kind.Metadata],
+  //         authors: [a]
+  //       }
+  //     ]);
+  //   });
+  // }
+
+  public listen(since: number) {
+    if (this.listenerSub) {
+      this.listenerSub.unsub();
+    }
+
+    this.listenerSub = this.fetch(
+      [
+        {
+          authors: [this.pub],
+          since
+        },
+        {
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [this.pub],
+          since
+        }
+      ],
+      false
+    );
+  }
+
+  listenMessages = (ids: string[]) => {
+    // console.log("Listen messages called");
+    if (this.messageListenerSub) {
+      this.messageListenerSub.unsub();
+    }
+
+    this.messageListenerSub = this.fetch(
+      [
+        {
+          kinds: [Kind.EventDeletion, Kind.ChannelMessage, Kind.Reaction],
+          "#e": ids
+        }
+      ],
+      false
+    );
+  };
+
+  private async findHealthyRelay(relays: string[]) {
+    for (const relay of relays) {
+      try {
+        await this.pool.ensureRelay(relay);
+        return relay;
+      } catch (e) {}
+    }
+
+    throw new Error("Couldn't find a working relay");
+  }
+
+  public async updateProfile(profile: Metadata) {
+    // console.log("Update profile run", profile);
+    return this.publish(Kind.Metadata, [], JSON.stringify(profile));
+  }
+
+  // public async createChannel(meta: Metadata) {
+  //   return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
+  // }
+
+  // public async updateChannel(channel: Channel, meta: Metadata) {
+  //   return this.findHealthyRelay(this.pool.seenOn(channel.id)).then((relay) => {
+  //     return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
+  //   });
+  // }
+
+  // public async deleteEvents(ids: string[], why: string = "") {
+  //   return this.publish(Kind.EventDeletion, [...ids.map((id) => ["e", id])], why);
+  // }
+
+  // public async sendPublicMessage(
+  //   channel: Channel,
+  //   message: string,
+  //   mentions?: string[],
+  //   parent?: string
+  // ) {
+  //   const root = parent || channel.id;
+  //   const relay = await this.findHealthyRelay(this.pool.seenOn(root));
+  //   const tags = [["e", root, relay, "root"]];
+  //   if (mentions) {
+  //     mentions.forEach((m) => tags.push(["p", m]));
+  //   }
+  //   return this.publish(Kind.ChannelMessage, tags, message);
+  // }
+
+  public async sendDirectMessage(toPubkey: string, message: string, parent?: string) {
+    const encrypted = await (this.priv === "nip07"
+      ? window.nostr!.nip04.encrypt(toPubkey, message)
+      : encrypt(this.priv, toPubkey, message));
+    const tags = [["p", toPubkey]];
+    if (parent) {
+      const relay = await this.findHealthyRelay(this.pool.seenOn(parent) as string[]);
+      tags.push(["e", parent, relay, "root"]);
+    }
+    // this.emit(RavenEvents.DirectMessage, [
+    //   {
+    //     id: "7a6c0db898ee043045f21fa49c5fd4b0765b506d84cb8d71539ba4cb37292040",
+    //     content: "HYYYYYyyyy",
+    //     peer: "1331c42d27e2a043ea5f478301a41ff4bab6c70bbb73f4edbf82a6756a7f51dd",
+    //     creator: "7379e436f673358cdbf4f0d52ef5240c82d802755295b53182b107f41e9f43e5",
+    //     created: 1686567232,
+    //     decrypted: true
+    //   }
+    // ]);
+    // console.log("Event is emitted");
+    return this.publish(Kind.EncryptedDirectMessage, tags, encrypted);
+  }
+
+  // public async recommendRelay(relay: string) {
+  //   return this.publish(Kind.RecommendRelay, [], relay);
+  // }
+
+  // public async hideChannelMessage(id: string, reason: string) {
+  //   return this.publish(Kind.ChannelHideMessage, [["e", id]], JSON.stringify({ reason }));
+  // }
+
+  // public async muteChannelUser(pubkey: string, reason: string) {
+  //   return this.publish(Kind.ChannelMuteUser, [["p", pubkey]], JSON.stringify({ reason }));
+  // }
+
+  // public async updateMuteList(userIds: string[]) {
+  //   const list = [...userIds.map((id) => ["p", id])];
+  //   const content = await (this.priv === "nip07"
+  //     ? window.nostr!.nip04.encrypt(this.pub, JSON.stringify(list))
+  //     : nip04.encrypt(this.priv, this.pub, JSON.stringify(list)));
+  //   return this.publish(NewKinds.MuteList, [], content);
+  // }
+
+  private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
+    return new Promise((resolve, reject) => {
+      this.signEvent({
+        kind,
+        tags,
+        pubkey: this.pub,
+        content,
+        created_at: Math.floor(Date.now() / 1000),
+        id: "",
+        sig: ""
+      })
+        .then((event) => {
+          if (!event) {
+            reject("Couldn't sign event!");
+            return;
+          }
+          const pub = this.pool.publish(this.writeRelays, event);
+          pub.on("ok", () => {
+            console.log("My event is okkkkkkkkkkkkkkkkkkkkkkk", event);
+            resolve(event);
+          });
+
+          pub.on("failed", () => {
+            reject("Couldn't sign event!");
+          });
+        })
+        .catch(() => {
+          reject("Couldn't sign event!");
+        });
+    });
+  }
+
+  private async signEvent(event: Event): Promise<Event | undefined> {
+    if (this.priv === "nip07") {
+      return window.nostr?.signEvent(event);
+    } else {
+      return {
+        ...event,
+        id: getEventHash(event),
+        sig: await signEvent(event, this.priv)
+      };
+    }
+  }
+
+  pushToEventBuffer(event: Event, from: string) {
+    console.log("Push to event buffer called frommmmmmmmmm", from);
+    const cacheKey = `${event.id}_emitted`;
+    if (this.nameCache[cacheKey] === undefined) {
+      if (this.eventQueueFlag) {
+        if (this.eventQueueBuffer.length > 0) {
+          this.eventQueue.push(...this.eventQueueBuffer);
+          this.eventQueueBuffer = [];
+        }
+        clearTimeout(this.eventQueueTimer);
+        this.eventQueue.push(event);
+        this.eventQueueTimer = setTimeout(() => {
+          this.processEventQueue().then();
+        }, 50);
+      } else {
+        this.eventQueueBuffer.push(event);
+      }
+
+      this.nameCache[cacheKey] = 1;
+    }
+  }
+
+  async processEventQueue() {
+    this.eventQueueFlag = false;
+
+    const profileUpdates: Profile[] = this.eventQueue
+      .filter((x) => x.kind === Kind.Metadata)
+      .map((ev) => {
+        const content = Raven.parseJson(ev.content);
+        return content
+          ? {
+              id: ev.id,
+              creator: ev.pubkey,
+              created: ev.created_at,
+              ...Raven.normalizeMetadata(content)
+            }
+          : null;
+      })
+      .filter(notEmpty);
+    if (profileUpdates.length > 0) {
+      this.emit(RavenEvents.ProfileUpdate, profileUpdates);
+    }
+
+    // const channelCreations: Channel[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.ChannelCreation)
+    //   .map((ev) => {
+    //     const content = Raven.parseJson(ev.content);
+    //     return content
+    //       ? {
+    //           id: ev.id,
+    //           creator: ev.pubkey,
+    //           created: ev.created_at,
+    //           ...Raven.normalizeMetadata(content)
+    //         }
+    //       : null;
+    //   })
+    //   .filter(notEmpty);
+    // if (channelCreations.length > 0) {
+    //   this.emit(RavenEvents.ChannelCreation, channelCreations);
+    // }
+
+    // const channelUpdates: ChannelUpdate[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.ChannelMetadata)
+    //   .map((ev) => {
+    //     const content = Raven.parseJson(ev.content);
+    //     const channelId = Raven.findTagValue(ev, "e");
+    //     if (!channelId) return null;
+    //     return content
+    //       ? {
+    //           id: ev.id,
+    //           creator: ev.pubkey,
+    //           created: ev.created_at,
+    //           channelId,
+    //           ...Raven.normalizeMetadata(content)
+    //         }
+    //       : null;
+    //   })
+    //   .filter(notEmpty);
+    // if (channelUpdates.length > 0) {
+    //   this.emit(RavenEvents.ChannelUpdate, channelUpdates);
+    // }
+
+    // const deletions: EventDeletion[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.EventDeletion)
+    //   .map((ev) => {
+    //     const eventId = Raven.findTagValue(ev, "e");
+    //     if (!eventId) return null;
+    //     return {
+    //       eventId,
+    //       why: ev.content || ""
+    //     };
+    //   })
+    //   .filter(notEmpty)
+    //   .flat();
+    // if (deletions.length > 0) {
+    //   this.emit(RavenEvents.EventDeletion, deletions);
+    // }
+
+    // const publicMessages: PublicMessage[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.ChannelMessage)
+    //   .map((ev) => {
+    //     const eTags = Raven.filterTagValue(ev, "e");
+    //     const root = eTags.find((x) => x[3] === "root")?.[1];
+    //     const mentions = Raven.filterTagValue(ev, "p")
+    //       .map((x) => x?.[1])
+    //       .filter(notEmpty);
+    //     if (!root) return null;
+    //     return ev.content
+    //       ? {
+    //           id: ev.id,
+    //           root,
+    //           content: ev.content,
+    //           creator: ev.pubkey,
+    //           mentions,
+    //           created: ev.created_at
+    //         }
+    //       : null;
+    //   })
+    //   .filter(notEmpty);
+    // if (publicMessages.length > 0) {
+    //   this.emit(RavenEvents.PublicMessage, publicMessages);
+    // }
+
+    Promise.all(
+      this.eventQueue
+        .filter((x) => x.kind === Kind.EncryptedDirectMessage)
+        .map((ev) => {
+          const receiver = Raven.findTagValue(ev, "p");
+          if (!receiver) return null;
+          const eTags = Raven.filterTagValue(ev, "e");
+          const root = eTags.find((x) => x[3] === "root")?.[1];
+
+          const peer = receiver === this.pub ? ev.pubkey : receiver;
+          const msg = {
+            id: ev.id,
+            root,
+            content: ev.content,
+            peer,
+            creator: ev.pubkey,
+            created: ev.created_at,
+            decrypted: false
+          };
+
+          if (this.priv === "nip07") {
+            return msg;
+          }
+
+          return decrypt(this.priv, peer, ev.content).then((content) => {
+            return {
+              ...msg,
+              content,
+              decrypted: true
+            };
+          });
+        })
+        .filter(notEmpty)
+    ).then((directMessages: DirectMessage[]) => {
+      this.emit(RavenEvents.DirectMessage, directMessages);
+    });
+
+    // const channelMessageHides: ChannelMessageHide[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.ChannelHideMessage)
+    //   .map((ev) => {
+    //     const content = Raven.parseJson(ev.content);
+    //     const id = Raven.findTagValue(ev, "e");
+    //     if (!id) return null;
+    //     return {
+    //       id,
+    //       reason: content?.reason || ""
+    //     };
+    //   })
+    //   .filter(notEmpty);
+    // if (channelMessageHides.length > 0) {
+    //   this.emit(RavenEvents.ChannelMessageHide, channelMessageHides);
+    // }
+
+    // const channelUserMutes: ChannelUserMute[] = this.eventQueue
+    //   .filter((x) => x.kind === Kind.ChannelMuteUser)
+    //   .map((ev) => {
+    //     const content = Raven.parseJson(ev.content);
+    //     const pubkey = Raven.findTagValue(ev, "p");
+    //     if (!pubkey) return null;
+    //     return {
+    //       pubkey,
+    //       reason: content?.reason || ""
+    //     };
+    //   })
+    //   .filter(notEmpty);
+    // if (channelUserMutes.length > 0) {
+    //   this.emit(RavenEvents.ChannelUserMute, channelUserMutes);
+    // }
+
+    // const muteListEv = this.eventQueue
+    //   .filter((x) => x.kind.toString() === NewKinds.MuteList.toString())
+    //   .sort((a, b) => b.created_at - a.created_at)[0];
+
+    // if (muteListEv) {
+    //   const visiblePubkeys = Raven.filterTagValue(muteListEv, "p").map((x) => x?.[1]);
+
+    //   if (muteListEv.content !== "" && this.priv !== "nip07") {
+    //     decrypt(this.priv, this.pub, muteListEv.content)
+    //       .then((e) => JSON.parse(e))
+    //       .then((resp) => {
+    //         const allPubkeys = [...visiblePubkeys, ...resp.map((x: any) => x?.[1])];
+    //         this.emit(RavenEvents.MuteList, {
+    //           pubkeys: uniq(allPubkeys),
+    //           encrypted: ""
+    //         });
+    //       });
+    //   } else {
+    //     this.emit(RavenEvents.MuteList, {
+    //       pubkeys: visiblePubkeys,
+    //       encrypted: muteListEv.content.trim()
+    //     });
+    //   }
+    // }
+
+    this.eventQueue = [];
+    this.eventQueueFlag = true;
+  }
+
+  close = () => {
+    this.pool.close(this.readRelays);
+    this.removeAllListeners();
+  };
+
+  static normalizeMetadata(meta: Metadata) {
+    return {
+      name: meta.name || "",
+      about: meta.about || "",
+      picture: meta.picture || ""
+    };
+  }
+
+  static parseJson(d: string) {
+    try {
+      return JSON.parse(d);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  static findTagValue(ev: Event, tag: "e" | "p") {
+    return ev.tags.find(([t]) => t === tag)?.[1];
+  }
+
+  static filterTagValue(ev: Event, tag: "e" | "p") {
+    return ev.tags.filter(([t]) => t === tag);
+  }
+}
+
+export default Raven;
+
+export const initRaven = (keys: Keys): Raven | undefined => {
+  console.log("Init raven run");
+  if (window.raven) {
+    window.raven.close();
+    window.raven = undefined;
+  }
+
+  if (keys) {
+    window.raven = new Raven(keys.priv, keys.pub);
+  }
+
+  return window.raven;
+};
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 532ad15a83b..a9516486cbe 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -121,8 +121,6 @@ export const SignUp = (props: PageProps) => {
   }, [username, usernameTouched]);
 
   const regularRegister = async () => {
-    // const key = createNoStrAccount();
-    // console.log(key);
     setInProgress(true);
     try {
       const response = await signUp(username, email, referral);
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index c6f7fd2f075..dd2d391c865 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -41,6 +41,7 @@ import { fetchPoints, resetPoints } from "./points";
 import { setSigningKey } from "./signing-key";
 import { setEntryPin, trackEntryPin } from "./entry-pin-tracker";
 import { savePageScroll } from "./persistent-page-scroll";
+import { addDirectContacts, addDirectMessages } from "./chat";
 
 // @note Do not use it directly
 export const ACTIONS = {
@@ -89,7 +90,9 @@ export const ACTIONS = {
   setEntryPin,
   updateNotificationsSettings,
   fetchNotificationsSettings,
-  setNotificationsSettingsItem
+  setNotificationsSettingsItem,
+  addDirectContacts,
+  addDirectMessages
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
new file mode 100644
index 00000000000..be2fa23e0f0
--- /dev/null
+++ b/src/common/store/chat/index.ts
@@ -0,0 +1,63 @@
+import { DirectMessage } from "./../../../providers/message-provider-types";
+import { Dispatch } from "redux";
+
+import {
+  Chat,
+  Actions,
+  ActionTypes,
+  DirectContactsAction,
+  DirectContactsType,
+  DirectMessagesAction
+} from "./types";
+
+export const initialState: Chat = {
+  directContacts: [],
+  directMessages: []
+};
+
+export default (state: Chat = initialState, action: Actions): Chat => {
+  switch (action.type) {
+    case ActionTypes.DIRECTCONTACTS: {
+      const { data } = action;
+      return {
+        ...state,
+        directContacts: [...state.directContacts, ...data]
+      };
+    }
+    case ActionTypes.DIRECTMESSAGES: {
+      const { data } = action;
+      return {
+        ...state,
+        directMessages: [...state.directMessages, ...data]
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+/* Actions */
+export const addDirectContacts = (data: DirectContactsType[]) => (dispatch: Dispatch) => {
+  dispatch(addDirectContactsAct(data));
+};
+
+export const addDirectMessages = (data: DirectMessage[]) => (dispatch: Dispatch) => {
+  console.log("data in store", data);
+  dispatch(addDirectMessagesAct(data));
+};
+
+/* Action Creators */
+
+export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
+  return {
+    type: ActionTypes.DIRECTCONTACTS,
+    data
+  };
+};
+
+export const addDirectMessagesAct = (data: DirectMessage[]): DirectMessagesAction => {
+  return {
+    type: ActionTypes.DIRECTMESSAGES,
+    data
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
new file mode 100644
index 00000000000..ddfc443cf4a
--- /dev/null
+++ b/src/common/store/chat/types.ts
@@ -0,0 +1,41 @@
+import { DirectMessage } from "./../../../providers/message-provider-types";
+import { Account } from "../accounts/types";
+
+export interface DirectContactsType {
+  name: string;
+  creator: string;
+}
+
+export interface Chat {
+  directContacts: DirectContactsType[];
+  directMessages: DirectMessage[];
+  // points: UserPoints;
+}
+
+export enum ActionTypes {
+  DIRECTCONTACTS = "@chat/DIRECTCONTACTS",
+  DIRECTMESSAGES = "@chat/DIRECTMESSAGES"
+  // LOGOUT = "@active-user/LOGOUT",
+  // UPDATE = "@active-user/UPDATE"
+}
+
+export interface DirectContactsAction {
+  type: ActionTypes.DIRECTCONTACTS;
+  data: DirectContactsType[];
+}
+
+export interface DirectMessagesAction {
+  type: ActionTypes.DIRECTMESSAGES;
+  data: DirectMessage[];
+}
+// export interface LogoutAction {
+//   type: ActionTypes.LOGOUT;
+// }
+
+// export interface UpdateAction {
+//   type: ActionTypes.UPDATE;
+//   data: Account;
+//   points: UserPoints;
+// }
+
+export type Actions = DirectContactsAction | DirectMessagesAction;
diff --git a/src/common/store/index.ts b/src/common/store/index.ts
index a55ca8e763e..39e97e8472c 100644
--- a/src/common/store/index.ts
+++ b/src/common/store/index.ts
@@ -24,6 +24,7 @@ import entryPinTracker from "./entry-pin-tracker";
 import persistentPageScroll from "./persistent-page-scroll";
 
 import filterTagExtract from "../helper/filter-tag-extract";
+import chat from "./chat";
 
 let reducers = {
   global,
@@ -43,7 +44,8 @@ let reducers = {
   points,
   signingKey,
   entryPinTracker,
-  persistentPageScroll
+  persistentPageScroll,
+  chat
 };
 
 export let history: History | undefined;
diff --git a/src/common/store/initial-state.ts b/src/common/store/initial-state.ts
index dc14065e2b7..a6152a49dde 100644
--- a/src/common/store/initial-state.ts
+++ b/src/common/store/initial-state.ts
@@ -18,6 +18,7 @@ import { initialState as pointsInitialState } from "./points";
 import { initialState as signingKeyInitialState } from "./signing-key";
 import { initialState as entryPinTrackerInitialState } from "./entry-pin-tracker";
 import { initialState as persistentPageScrollInitialState } from "./persistent-page-scroll";
+import { initialState as chatInitialState } from "./chat";
 
 const initialState: AppState = {
   global: globalInitialState,
@@ -37,7 +38,8 @@ const initialState: AppState = {
   points: pointsInitialState,
   signingKey: signingKeyInitialState,
   entryPinTracker: entryPinTrackerInitialState,
-  persistentPageScroll: persistentPageScrollInitialState
+  persistentPageScroll: persistentPageScrollInitialState,
+  chat: chatInitialState
 };
 
 export default initialState;
diff --git a/src/lib/nostr-tools/.eslintrc.json b/src/lib/nostr-tools/.eslintrc.json
new file mode 100644
index 00000000000..faca633c5e0
--- /dev/null
+++ b/src/lib/nostr-tools/.eslintrc.json
@@ -0,0 +1,145 @@
+{
+  "root": true,
+
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+
+  "parserOptions": {
+    "ecmaVersion": 9,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module",
+    "allowImportExportEverywhere": false
+  },
+
+  "env": {
+    "es6": true,
+    "node": true
+  },
+
+  "plugins": ["babel"],
+
+  "globals": {
+    "document": false,
+    "navigator": false,
+    "window": false,
+    "location": false,
+    "URL": false,
+    "URLSearchParams": false,
+    "fetch": false,
+    "EventSource": false,
+    "localStorage": false,
+    "sessionStorage": false
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "comma-dangle": 0,
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "constructor-super": 2,
+    "curly": [0, "multi-line"],
+    "dot-location": [2, "property"],
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "handle-callback-err": [2, "^(err|error)$"],
+    "indent": 0,
+    "jsx-quotes": [2, "prefer-double"],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "new-cap": 0,
+    "new-parens": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-control-regex": 0,
+    "no-debugger": 0,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 0,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [0, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 2 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 0,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 0,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": 0,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unused-vars": [2, { "vars": "local", "args": "none", "varsIgnorePattern": "^_" }],
+    "no-useless-call": 2,
+    "no-useless-constructor": 2,
+    "no-with": 2,
+    "one-var": [0, { "initialized": "never" }],
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": [2, "never"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "semi": [2, "never"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": 0,
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": 0,
+    "template-curly-spacing": [2, "never"],
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "wrap-iife": [2, "any"],
+    "yield-star-spacing": [2, "both"],
+    "yoda": [0]
+  }
+}
diff --git a/src/lib/nostr-tools/.gitignore b/src/lib/nostr-tools/.gitignore
new file mode 100644
index 00000000000..f9940ed24f0
--- /dev/null
+++ b/src/lib/nostr-tools/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+yarn.lock
+package-lock.json
+.envrc
+lib
+test.html
diff --git a/src/lib/nostr-tools/.prettierrc.yaml b/src/lib/nostr-tools/.prettierrc.yaml
new file mode 100644
index 00000000000..16c878ec925
--- /dev/null
+++ b/src/lib/nostr-tools/.prettierrc.yaml
@@ -0,0 +1,10 @@
+semi: false
+arrowParens: avoid
+insertPragma: false
+printWidth: 80
+proseWrap: preserve
+singleQuote: true
+trailingComma: none
+useTabs: false
+jsxBracketSameLine: false
+bracketSpacing: false
diff --git a/src/lib/nostr-tools/README.md b/src/lib/nostr-tools/README.md
new file mode 100644
index 00000000000..df60942d4d4
--- /dev/null
+++ b/src/lib/nostr-tools/README.md
@@ -0,0 +1,192 @@
+# nostr-tools
+
+Tools for developing [Nostr](https://github.com/fiatjaf/nostr) clients.
+
+## Usage
+
+### Generating a private key and a public key
+
+```js
+import { generatePrivateKey, getPublicKey } from "nostr-tools";
+
+let sk = generatePrivateKey(); // `sk` is a hex string
+let pk = getPublicKey(sk); // `pk` is a hex string
+```
+
+### Creating, signing and verifying events
+
+```js
+import { validateEvent, verifySignature, signEvent, getEventHash, getPublicKey } from "nostr-tools";
+
+let event = {
+  kind: 1,
+  created_at: Math.floor(Date.now() / 1000),
+  tags: [],
+  content: "hello"
+};
+
+event.id = getEventHash(event.id);
+event.pubkey = getPublicKey(privateKey);
+event.sig = await signEvent(event, privateKey);
+
+let ok = validateEvent(event);
+let veryOk = await verifySignature(event);
+```
+
+### Interacting with a relay
+
+```js
+import { relayInit, generatePrivateKey, getPublicKey, getEventHash, signEvent } from "nostr-tools";
+
+const relay = relayInit("wss://relay.example.com");
+relay.connect();
+
+relay.on("connect", () => {
+  console.log(`connected to ${relay.url}`);
+});
+relay.on("error", () => {
+  console.log(`failed to connect to ${relay.url}`);
+});
+
+// let's query for an event that exists
+let sub = relay.sub([
+  {
+    ids: ["d7dd5eb3ab747e16f8d0212d53032ea2a7cadef53837e5a6c66d42849fcb9027"]
+  }
+]);
+sub.on("event", (event) => {
+  console.log("we got the event we wanted:", event);
+});
+sub.on("eose", () => {
+  sub.unsub();
+});
+
+// let's publish a new event while simultaneously monitoring the relay for it
+let sk = generatePrivateKey();
+let pk = getPublicKey(sk);
+
+let sub = relay.sub([
+  {
+    kinds: [1],
+    authors: [pk]
+  }
+]);
+
+sub.on("event", (event) => {
+  console.log("got event:", event);
+});
+
+let event = {
+  kind: 1,
+  pubkey: pk,
+  created_at: Math.floor(Date.now() / 1000),
+  tags: [],
+  content: "hello world"
+};
+event.id = getEventHash(event);
+event.sig = await signEvent(event, sk);
+
+let pub = relay.publish(event);
+pub.on("ok", () => {
+  console.log(`{relay.url} has accepted our event`);
+});
+pub.on("seen", () => {
+  console.log(`we saw the event on {relay.url}`);
+});
+pub.on("failed", (reason) => {
+  console.log(`failed to publish to {relay.url}: ${reason}`);
+});
+
+await relay.close();
+```
+
+### Querying profile data from a NIP-05 address
+
+```js
+import { nip05 } from "nostr-tools";
+
+let profile = await nip05.queryProfile("jb55.com");
+console.log(profile.pubkey);
+// prints: 32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245
+console.log(profile.relays);
+// prints: [wss://relay.damus.io]
+
+// on nodejs, install node-fetch@2 and call this first:
+nip05.useFetchImplementation(require("node-fetch"));
+```
+
+### Encoding and decoding NIP-19 codes
+
+```js
+import { nip19, generatePrivateKey, getPublicKey } from "nostr-tools";
+
+let sk = generatePrivateKey();
+let nsec = nip19.nsecEncode(sk);
+let { type, data } = nip19.decode(nsec);
+assert(type === "nsec");
+assert(data === sk);
+
+let pk = getPublicKey(generatePrivateKey());
+let npub = nip19.npubEncode(pk);
+let { type, data } = nip19.decode(npub);
+assert(type === "npub");
+assert(data === pk);
+
+let pk = getPublicKey(generatePrivateKey());
+let relays = ["wss://relay.nostr.example.mydomain.example.com", "wss://nostr.banana.com"];
+let nprofile = nip19.nprofileEncode({ pubkey: pk, relays });
+let { type, data } = nip19.decode(nprofile);
+assert(type === "nprofile");
+assert(data.pubkey === pk);
+assert(data.relays.length === 2);
+```
+
+### Encrypting and decrypting direct messages
+
+```js
+import {nip04, getPublicKey, generatePrivateKey} from 'nostr-tools'
+
+// sender
+let sk1 = generatePrivateKey()
+let pk1 = getPublicKey(sk1)
+
+// receiver
+let sk2 = generatePrivateKey()
+let pk2 = getPublicKey(sk2)
+
+// on the sender side
+let message = 'hello'
+let ciphertext = nip04.encrypt(sk1, pk2, 'hello')
+
+let event = {
+  kind: 4,
+  pubkey: pk1,
+  tags: [['p', pk2]],
+  content: ciphertext,
+  ...otherProperties
+}
+
+sendEvent(event)
+
+// on the receiver side
+sub.on('event', (event) => {
+  let sender = event.tags.find(([k, v]) => k === 'p' && && v && v !== '')[1]
+  pk1 === sender
+  let plaintext = nip04.decrypt(sk2, pk1, event.content)
+})
+```
+
+Please consult the tests or [the source code](https://github.com/fiatjaf/nostr-tools) for more information that isn't available here.
+
+### Using from the browser (if you don't want to use a bundler)
+
+```html
+<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
+<script>
+  window.NostrTools.generatePrivateKey("..."); // and so on
+</script>
+```
+
+## License
+
+Public domain.
diff --git a/src/lib/nostr-tools/build.js b/src/lib/nostr-tools/build.js
new file mode 100755
index 00000000000..31d53470d82
--- /dev/null
+++ b/src/lib/nostr-tools/build.js
@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+const esbuild = require("esbuild");
+
+let common = {
+  entryPoints: ["index.ts"],
+  bundle: true,
+  sourcemap: "external"
+};
+
+esbuild
+  .build({
+    ...common,
+    outfile: "lib/nostr.esm.js",
+    format: "esm",
+    packages: "external"
+  })
+  .then(() => console.log("esm build success."));
+
+esbuild
+  .build({
+    ...common,
+    outfile: "lib/nostr.cjs.js",
+    format: "cjs",
+    packages: "external"
+  })
+  .then(() => console.log("cjs build success."));
+
+esbuild
+  .build({
+    ...common,
+    outfile: "lib/nostr.bundle.js",
+    format: "iife",
+    globalName: "NostrTools",
+    define: {
+      window: "self",
+      global: "self",
+      process: '{"env": {}}'
+    }
+  })
+  .then(() => console.log("standalone build success."));
diff --git a/src/lib/nostr-tools/event.ts b/src/lib/nostr-tools/event.ts
new file mode 100644
index 00000000000..1945a4195f8
--- /dev/null
+++ b/src/lib/nostr-tools/event.ts
@@ -0,0 +1,98 @@
+import * as secp256k1 from "@noble/secp256k1";
+import { sha256 } from "@noble/hashes/sha256";
+
+import { utf8Encoder } from "./utils";
+
+/* eslint-disable no-unused-vars */
+
+export enum Kind {
+  Metadata = 0,
+  Text = 1,
+  RecommendRelay = 2,
+  Contacts = 3,
+  EncryptedDirectMessage = 4,
+  EventDeletion = 5,
+  Repost = 6,
+  Reaction = 7,
+  BadgeAward = 8,
+  ChannelCreation = 40,
+  ChannelMetadata = 41,
+  ChannelMessage = 42,
+  ChannelHideMessage = 43,
+  ChannelMuteUser = 44,
+  Report = 1984,
+  ZapRequest = 9734,
+  Zap = 9735,
+  RelayList = 10002,
+  BlockList = 16462,
+  FlagList = 16463,
+  ClientAuth = 22242,
+  ReplaceableByTag = 30000,
+  BadgeDefinition = 30008,
+  ProfileBadge = 30009,
+  Article = 30023
+}
+
+export type EventTemplate = {
+  kind: Kind;
+  tags: string[][];
+  content: string;
+  created_at: number;
+};
+
+export type UnsignedEvent = EventTemplate & {
+  pubkey: string;
+};
+
+export type Event = UnsignedEvent & {
+  id: string;
+  sig: string;
+};
+
+export function getBlankEvent(): EventTemplate {
+  return {
+    kind: 255,
+    content: "",
+    tags: [],
+    created_at: 0
+  };
+}
+
+export function serializeEvent(evt: Event): string {
+  if (!validateEvent(evt))
+    throw new Error("can't serialize event with wrong or missing properties");
+
+  return JSON.stringify([0, evt.pubkey, evt.created_at, evt.kind, evt.tags, evt.content]);
+}
+
+export function getEventHash(event: Event): string {
+  let eventHash = sha256(utf8Encoder.encode(serializeEvent(event)));
+  return secp256k1.utils.bytesToHex(eventHash);
+}
+
+export function validateEvent(event: Event): boolean {
+  if (typeof event.content !== "string") return false;
+  if (typeof event.created_at !== "number") return false;
+  if (typeof event.pubkey !== "string") return false;
+  if (!event.pubkey.match(/^[a-f0-9]{64}$/)) return false;
+
+  if (!Array.isArray(event.tags)) return false;
+  for (let i = 0; i < event.tags.length; i++) {
+    let tag = event.tags[i];
+    if (!Array.isArray(tag)) return false;
+    for (let j = 0; j < tag.length; j++) {
+      if (typeof tag[j] === "object") return false;
+    }
+  }
+
+  return true;
+}
+
+export async function verifySignature(event: Event & { sig: string }): Promise<boolean> {
+  return await secp256k1.schnorr.verify(event.sig, getEventHash(event), event.pubkey);
+}
+
+export async function signEvent(event: Event, key: string): Promise<string> {
+  const encrypted = await secp256k1.schnorr.sign(getEventHash(event), key);
+  return secp256k1.utils.bytesToHex(encrypted);
+}
diff --git a/src/lib/nostr-tools/filter.ts b/src/lib/nostr-tools/filter.ts
new file mode 100644
index 00000000000..b995c795391
--- /dev/null
+++ b/src/lib/nostr-tools/filter.ts
@@ -0,0 +1,45 @@
+import { Event } from "./event";
+
+export type Filter = {
+  ids?: string[];
+  kinds?: number[];
+  authors?: string[];
+  keywords?: string[];
+  since?: number;
+  until?: number;
+  limit?: number;
+  [key: `#${string}`]: string[];
+};
+
+export function matchFilter(filter: Filter, event: Event & { id: string }): boolean {
+  if (filter.ids && filter.ids.indexOf(event.id) === -1) return false;
+  if (filter.kinds && filter.kinds.indexOf(event.kind) === -1) return false;
+  if (filter.keywords) {
+    const lowercase = event.content?.toLowerCase();
+    for (let i = 0; i < filter.keywords.length; i++) {
+      if (lowercase?.indexOf(filter.keywords[i].toLowerCase()) === -1) return false;
+    }
+  }
+  if (filter.authors && filter.authors.indexOf(event.pubkey) === -1) return false;
+
+  for (let f in filter) {
+    if (f[0] === "#") {
+      let tagName = f.slice(1);
+      let values = filter[`#${tagName}`];
+      if (values && !event.tags?.find(([t, v]) => t === f.slice(1) && values.indexOf(v) !== -1))
+        return false;
+    }
+  }
+
+  if (filter.since && event.created_at < filter.since) return false;
+  if (filter.until && event.created_at >= filter.until) return false;
+
+  return true;
+}
+
+export function matchFilters(filters: Filter[], event: Event & { id: string }): boolean {
+  for (let i = 0; i < filters.length; i++) {
+    if (matchFilter(filters[i], event)) return true;
+  }
+  return false;
+}
diff --git a/src/lib/nostr-tools/index.ts b/src/lib/nostr-tools/index.ts
new file mode 100644
index 00000000000..62ed810120c
--- /dev/null
+++ b/src/lib/nostr-tools/index.ts
@@ -0,0 +1,21 @@
+// import * as keys from './keys'
+// import * as relay from './relay'
+// import * as event from './event'
+// import * as filter from './filter'
+// import * as path from './path'
+
+// export {keys, relay, event, filter, path}
+
+// export * as nip04 from './nip04'
+export * as nip05 from "./nip05";
+export * as nip06 from "./nip06";
+export * as nip19 from "./nip19";
+export * as nip26 from "./nip26";
+
+// monkey patch secp256k1
+import * as secp256k1 from "@noble/secp256k1";
+import { hmac } from "@noble/hashes/hmac";
+import { sha256 } from "@noble/hashes/sha256";
+secp256k1.utils.hmacSha256Sync = (key, ...msgs) =>
+  hmac(sha256, key, secp256k1.utils.concatBytes(...msgs));
+secp256k1.utils.sha256Sync = (...msgs) => sha256(secp256k1.utils.concatBytes(...msgs));
diff --git a/src/lib/nostr-tools/keys.ts b/src/lib/nostr-tools/keys.ts
new file mode 100644
index 00000000000..f373133a7a4
--- /dev/null
+++ b/src/lib/nostr-tools/keys.ts
@@ -0,0 +1,9 @@
+import * as secp256k1 from "@noble/secp256k1";
+
+export function generatePrivateKey(): string {
+  return secp256k1.utils.bytesToHex(secp256k1.utils.randomPrivateKey());
+}
+
+export function getPublicKey(privateKey: string): string {
+  return secp256k1.utils.bytesToHex(secp256k1.schnorr.getPublicKey(privateKey));
+}
diff --git a/src/lib/nostr-tools/nip04.ts b/src/lib/nostr-tools/nip04.ts
new file mode 100644
index 00000000000..6d8a088bdd1
--- /dev/null
+++ b/src/lib/nostr-tools/nip04.ts
@@ -0,0 +1,42 @@
+import { randomBytes } from "@noble/hashes/utils";
+import * as secp256k1 from "@noble/secp256k1";
+import { base64 } from "@scure/base";
+
+import { utf8Decoder, utf8Encoder } from "./utils";
+
+export async function encrypt(privkey: string, pubkey: string, text: string): Promise<string> {
+  const key = secp256k1.getSharedSecret(privkey, "02" + pubkey);
+  const normalizedKey = getNormalizedX(key);
+
+  let iv = Uint8Array.from(randomBytes(16));
+  let plaintext = utf8Encoder.encode(text);
+  let cryptoKey = await crypto.subtle.importKey("raw", normalizedKey, { name: "AES-CBC" }, false, [
+    "encrypt"
+  ]);
+  let ciphertext = await crypto.subtle.encrypt({ name: "AES-CBC", iv }, cryptoKey, plaintext);
+  let ctb64 = base64.encode(new Uint8Array(ciphertext));
+  let ivb64 = base64.encode(new Uint8Array(iv.buffer));
+
+  return `${ctb64}?iv=${ivb64}`;
+}
+
+export async function decrypt(privkey: string, pubkey: string, data: string): Promise<string> {
+  let [ctb64, ivb64] = data.split("?iv=");
+  let key = secp256k1.getSharedSecret(privkey, "02" + pubkey);
+  let normalizedKey = getNormalizedX(key);
+
+  let cryptoKey = await crypto.subtle.importKey("raw", normalizedKey, { name: "AES-CBC" }, false, [
+    "decrypt"
+  ]);
+  let ciphertext = base64.decode(ctb64);
+  let iv = base64.decode(ivb64);
+
+  let plaintext = await crypto.subtle.decrypt({ name: "AES-CBC", iv }, cryptoKey, ciphertext);
+
+  let text = utf8Decoder.decode(plaintext);
+  return text;
+}
+
+function getNormalizedX(key: Uint8Array): Uint8Array {
+  return key.slice(1, 33);
+}
diff --git a/src/lib/nostr-tools/nip05.ts b/src/lib/nostr-tools/nip05.ts
new file mode 100644
index 00000000000..410fbb969d4
--- /dev/null
+++ b/src/lib/nostr-tools/nip05.ts
@@ -0,0 +1,48 @@
+import { ProfilePointer } from "./nip19";
+
+var _fetch: any;
+
+try {
+  _fetch = fetch;
+} catch {}
+
+export function useFetchImplementation(fetchImplementation: any) {
+  _fetch = fetchImplementation;
+}
+
+export async function searchDomain(
+  domain: string,
+  query = ""
+): Promise<{ [name: string]: string }> {
+  try {
+    let res = await (await _fetch(`https://${domain}/.well-known/nostr.json?name=${query}`)).json();
+
+    return res.names;
+  } catch (_) {
+    return {};
+  }
+}
+
+export async function queryProfile(fullname: string): Promise<ProfilePointer | null> {
+  let [name, domain] = fullname.split("@");
+
+  if (!domain) {
+    // if there is no @, it is because it is just a domain, so assume the name is "_"
+    domain = name;
+    name = "_";
+  }
+
+  if (!name.match(/^[a-z0-9-_]+$/)) return null;
+
+  let res = await (await _fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)).json();
+
+  if (!res?.names?.[name]) return null;
+
+  let pubkey = res.names[name] as string;
+  let relays = (res.relays?.[pubkey] || []) as string[]; // nip35
+
+  return {
+    pubkey,
+    relays
+  };
+}
diff --git a/src/lib/nostr-tools/nip06.ts b/src/lib/nostr-tools/nip06.ts
new file mode 100644
index 00000000000..5b28b939780
--- /dev/null
+++ b/src/lib/nostr-tools/nip06.ts
@@ -0,0 +1,19 @@
+import * as secp256k1 from "@noble/secp256k1";
+import { wordlist } from "@scure/bip39/wordlists/english.js";
+import { generateMnemonic, mnemonicToSeedSync, validateMnemonic } from "@scure/bip39";
+import { HDKey } from "@scure/bip32";
+
+export function privateKeyFromSeedWords(mnemonic: string, passphrase?: string): string {
+  let root = HDKey.fromMasterSeed(mnemonicToSeedSync(mnemonic, passphrase));
+  let privateKey = root.derive(`m/44'/1237'/0'/0/0`).privateKey;
+  if (!privateKey) throw new Error("could not derive private key");
+  return secp256k1.utils.bytesToHex(privateKey);
+}
+
+export function generateSeedWords(): string {
+  return generateMnemonic(wordlist);
+}
+
+export function validateWords(words: string): boolean {
+  return validateMnemonic(words, wordlist);
+}
diff --git a/src/lib/nostr-tools/nip19.ts b/src/lib/nostr-tools/nip19.ts
new file mode 100644
index 00000000000..0fb945a06e1
--- /dev/null
+++ b/src/lib/nostr-tools/nip19.ts
@@ -0,0 +1,127 @@
+import * as secp256k1 from "@noble/secp256k1";
+import { bech32 } from "@scure/base";
+
+import { utf8Decoder, utf8Encoder } from "./utils";
+
+const Bech32MaxSize = 5000;
+
+export type ProfilePointer = {
+  pubkey: string; // hex
+  relays?: string[];
+};
+
+export type EventPointer = {
+  id: string; // hex
+  relays?: string[];
+};
+
+export function decode(nip19: string): {
+  type: string;
+  data: ProfilePointer | EventPointer | string;
+} {
+  let { prefix, words } = bech32.decode(nip19, Bech32MaxSize);
+  let data = new Uint8Array(bech32.fromWords(words));
+
+  if (prefix === "nprofile") {
+    let tlv = parseTLV(data);
+    if (!tlv[0]?.[0]) throw new Error("missing TLV 0 for nprofile");
+    if (tlv[0][0].length !== 32) throw new Error("TLV 0 should be 32 bytes");
+
+    return {
+      type: "nprofile",
+      data: {
+        pubkey: secp256k1.utils.bytesToHex(tlv[0][0]),
+        relays: tlv[1].map((d) => utf8Decoder.decode(d))
+      }
+    };
+  }
+
+  if (prefix === "nevent") {
+    let tlv = parseTLV(data);
+    if (!tlv[0]?.[0]) throw new Error("missing TLV 0 for nevent");
+    if (tlv[0][0].length !== 32) throw new Error("TLV 0 should be 32 bytes");
+
+    return {
+      type: "nevent",
+      data: {
+        id: secp256k1.utils.bytesToHex(tlv[0][0]),
+        relays: tlv[1].map((d) => utf8Decoder.decode(d))
+      }
+    };
+  }
+
+  if (prefix === "nsec" || prefix === "npub" || prefix === "note") {
+    return { type: prefix, data: secp256k1.utils.bytesToHex(data) };
+  }
+
+  throw new Error(`unknown prefix ${prefix}`);
+}
+
+type TLV = { [t: number]: Uint8Array[] };
+
+function parseTLV(data: Uint8Array): TLV {
+  let result: TLV = {};
+  let rest = data;
+  while (rest.length > 0) {
+    let t = rest[0];
+    let l = rest[1];
+    let v = rest.slice(2, 2 + l);
+    rest = rest.slice(2 + l);
+    if (v.length < l) continue;
+    result[t] = result[t] || [];
+    result[t].push(v);
+  }
+  return result;
+}
+
+export function nsecEncode(hex: string): string {
+  return encodeBytes("nsec", hex);
+}
+
+export function npubEncode(hex: string): string {
+  return encodeBytes("npub", hex);
+}
+
+export function noteEncode(hex: string): string {
+  return encodeBytes("note", hex);
+}
+
+function encodeBytes(prefix: string, hex: string): string {
+  let data = secp256k1.utils.hexToBytes(hex);
+  let words = bech32.toWords(data);
+  return bech32.encode(prefix, words, Bech32MaxSize);
+}
+
+export function nprofileEncode(profile: ProfilePointer): string {
+  let data = encodeTLV({
+    0: [secp256k1.utils.hexToBytes(profile.pubkey)],
+    1: (profile.relays || []).map((url) => utf8Encoder.encode(url))
+  });
+  let words = bech32.toWords(data);
+  return bech32.encode("nprofile", words, Bech32MaxSize);
+}
+
+export function neventEncode(event: EventPointer): string {
+  let data = encodeTLV({
+    0: [secp256k1.utils.hexToBytes(event.id)],
+    1: (event.relays || []).map((url) => utf8Encoder.encode(url))
+  });
+  let words = bech32.toWords(data);
+  return bech32.encode("nevent", words, Bech32MaxSize);
+}
+
+function encodeTLV(tlv: TLV): Uint8Array {
+  let entries: Uint8Array[] = [];
+
+  Object.entries(tlv).forEach(([t, vs]) => {
+    vs.forEach((v) => {
+      let entry = new Uint8Array(v.length + 2);
+      entry.set([parseInt(t)], 0);
+      entry.set([v.length], 1);
+      entry.set(v, 2);
+      entries.push(entry);
+    });
+  });
+
+  return secp256k1.utils.concatBytes(...entries);
+}
diff --git a/src/lib/nostr-tools/nip26.ts b/src/lib/nostr-tools/nip26.ts
new file mode 100644
index 00000000000..bdaed49e65b
--- /dev/null
+++ b/src/lib/nostr-tools/nip26.ts
@@ -0,0 +1,71 @@
+import * as secp256k1 from "@noble/secp256k1";
+import { sha256 } from "@noble/hashes/sha256";
+
+import { Event } from "./event";
+import { utf8Encoder } from "./utils";
+import { getPublicKey } from "./keys";
+
+export type Parameters = {
+  pubkey: string; // the key to whom the delegation will be given
+  kind: number | undefined;
+  until: number | undefined; // delegation will only be valid until this date
+  since: number | undefined; // delegation will be valid from this date on
+};
+
+export type Delegation = {
+  from: string; // the pubkey who signed the delegation
+  to: string; // the pubkey that is allowed to use the delegation
+  cond: string; // the string of conditions as they should be included in the event tag
+  sig: string;
+};
+
+export function createDelegation(privateKey: string, parameters: Parameters): Delegation {
+  let conditions = [];
+  if ((parameters.kind || -1) >= 0) conditions.push(`kind=${parameters.kind}`);
+  if (parameters.until) conditions.push(`created_at<${parameters.until}`);
+  if (parameters.since) conditions.push(`created_at>${parameters.since}`);
+  let cond = conditions.join("&");
+
+  if (cond === "") throw new Error("refusing to create a delegation without any conditions");
+
+  let sighash = sha256(utf8Encoder.encode(`nostr:delegation:${parameters.pubkey}:${cond}`));
+
+  let sig = secp256k1.utils.bytesToHex(secp256k1.schnorr.signSync(sighash, privateKey));
+
+  return {
+    from: getPublicKey(privateKey),
+    to: parameters.pubkey,
+    cond,
+    sig
+  };
+}
+
+export function getDelegator(event: Event): string | null {
+  // find delegation tag
+  let tag = event.tags.find((tag) => tag[0] === "delegation" && tag.length >= 4);
+  if (!tag) return null;
+
+  let pubkey = tag[1];
+  let cond = tag[2];
+  let sig = tag[3];
+
+  // check conditions
+  let conditions = cond.split("&");
+  for (let i = 0; i < conditions.length; i++) {
+    let [key, operator, value] = conditions[i].split(/\b/);
+
+    // the supported conditions are just 'kind' and 'created_at' for now
+    if (key === "kind" && operator === "=" && event.kind === parseInt(value)) continue;
+    else if (key === "created_at" && operator === "<" && event.created_at < parseInt(value))
+      continue;
+    else if (key === "created_at" && operator === ">" && event.created_at > parseInt(value))
+      continue;
+    else return null; // invalid condition
+  }
+
+  // check signature
+  let sighash = sha256(utf8Encoder.encode(`nostr:delegation:${event.pubkey}:${cond}`));
+  if (!secp256k1.schnorr.verifySync(sig, sighash, pubkey)) return null;
+
+  return pubkey;
+}
diff --git a/src/lib/nostr-tools/nip42.ts b/src/lib/nostr-tools/nip42.ts
new file mode 100644
index 00000000000..07b25b47a39
--- /dev/null
+++ b/src/lib/nostr-tools/nip42.ts
@@ -0,0 +1,46 @@
+import { Event, Kind } from "./event";
+import { Relay } from "./relay";
+
+/**
+ * Authenticate via NIP-42 flow.
+ *
+ * @example
+ * const sign = window.nostr.signEvent
+ * relay.on('auth', challenge =>
+ *   authenticate({ relay, sign, challenge })
+ * )
+ */
+export const authenticate = async ({
+  challenge,
+  relay,
+  sign
+}: {
+  challenge: string;
+  relay: Relay;
+  sign: (e: Partial<Event>) => Promise<Event>;
+}): Promise<void> => {
+  const e: Partial<Event> = {
+    kind: Kind.ClientAuth,
+    created_at: Math.floor(Date.now() / 1000),
+    tags: [
+      ["relay", relay.url],
+      ["challenge", challenge]
+    ],
+    content: ""
+  };
+  const signed = await sign(e);
+  if (!signed.sig) {
+    throw new Error("Canceled signing");
+  }
+  const pub = relay.auth(signed);
+  return new Promise((resolve, reject) => {
+    pub.on("ok", function ok() {
+      pub.off("ok", ok);
+      resolve();
+    });
+    pub.on("failed", function fail(reason: string) {
+      pub.off("failed", fail);
+      reject(reason);
+    });
+  });
+};
diff --git a/src/lib/nostr-tools/package.json b/src/lib/nostr-tools/package.json
new file mode 100644
index 00000000000..6ca9bd9153e
--- /dev/null
+++ b/src/lib/nostr-tools/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "nostr-tools",
+  "version": "1.1.2",
+  "description": "Tools for making a Nostr client.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fiatjaf/nostr-tools.git"
+  },
+  "main": "lib/nostr.cjs.js",
+  "module": "lib/nostr.esm.js",
+  "dependencies": {},
+  "keywords": [
+    "decentralization",
+    "social",
+    "censorship-resistance",
+    "client",
+    "nostr"
+  ],
+  "devDependencies": {
+    "@types/node": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "esbuild": "0.16.9",
+    "esbuild-plugin-alias": "^0.2.1",
+    "eslint": "^8.30.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "esm-loader-typescript": "^1.0.1",
+    "events": "^3.3.0",
+    "jest": "^29.3.1",
+    "node-fetch": "2",
+    "ts-jest": "^29.0.3",
+    "tsd": "^0.22.0",
+    "typescript": "^4.9.4"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "pretest": "node build.js",
+    "test": "jest"
+  }
+}
diff --git a/src/lib/nostr-tools/path.ts b/src/lib/nostr-tools/path.ts
new file mode 100644
index 00000000000..e6be6596d1f
--- /dev/null
+++ b/src/lib/nostr-tools/path.ts
@@ -0,0 +1,223 @@
+/**
+Path API for Nostr, built on NIP33 replaceable-by-tag events of kind 30000.
+
+```
+const path = new Path(myPublishFn, mySubscribeFn, myUnsubscribeFn, { authors: [myPubKey} })
+path.set('reactions/[noteID]', '😎')
+path.get('reactions/[noteID]', (value, path, event) => console.log(event.pubkey, 'reacted with', value))
+```
+
+TODO:
+```
+path.list('reactions', (value, path, event) => {
+    console.log(
+      event.pubkey, 'reacted to', path.slice('/')[1], 'with', value
+    )
+  }, { authors: myFollows }
+)
+```
+
+In-memory caches the most recent event for the subscribed path, and only calls back with the most recent value.
+
+This API allows us to build all kinds of applications on top of Nostr (github replacement for example) without having to
+specify new event kinds all the time and implement them in all applications and relays.
+
+NIP33: https://github.com/nostr-protocol/nips/blob/master/33.md
+ */
+import { Filter, matchFilter } from "./filter";
+import { Event } from "./event";
+
+const EVENT_KIND = 30000;
+
+type CompleteEvent = Event & { id: string };
+type PathCallback = (value: any, path: string, event: Event) => void;
+type Listener = {
+  filter: Filter;
+  callback: PathCallback;
+  subscription?: string;
+  off: () => void;
+};
+type Publish = (event: Partial<Event>) => Promise<Event>;
+type Subscribe = (filters: Filter[], callback: (event: Event) => void) => string;
+type Unsubscribe = (id: string) => void;
+type Encrypt = (content: string) => Promise<string>;
+type Decrypt = (content: string) => Promise<string>;
+
+export function getEventPath(event: Event): string | undefined {
+  return event.tags?.find(([t]) => t === "d")?.[1];
+}
+
+export function getFilterPath(filter: Filter): string | undefined {
+  return filter["#d"]?.[0];
+}
+
+// We can later add other storages like IndexedDB or localStorage
+class MemoryStorage {
+  eventsByPathAndAuthor = new Map<string, Map<string, Event>>();
+
+  // returns a boolean indicating whether the event was added (newer than existing)
+  set(event: Event): boolean {
+    const path = getEventPath(event);
+    if (!path) {
+      //throw new Error(`event has no d tag: ${JSON.stringify(event)}`)
+      return false;
+    }
+    if (!this.eventsByPathAndAuthor.has(path)) {
+      this.eventsByPathAndAuthor.set(path, new Map());
+    }
+    let valuesByAuthor = this.eventsByPathAndAuthor.get(path);
+    if (!valuesByAuthor) {
+      valuesByAuthor = new Map();
+      this.eventsByPathAndAuthor.set(path, valuesByAuthor);
+    }
+    const existing = valuesByAuthor?.get(event.pubkey);
+    if (existing && existing.created_at > event.created_at) {
+      return false;
+    }
+    valuesByAuthor.set(event.pubkey, event);
+    return true;
+  }
+
+  get(filter: Filter, callback: (event: Event) => void) {
+    const path = getFilterPath(filter);
+    if (!path) {
+      throw new Error(`filter has no #d tag: ${JSON.stringify(filter)}`);
+    }
+    const valuesByAuthor = this.eventsByPathAndAuthor.get(path);
+    if (!valuesByAuthor) {
+      return;
+    }
+    for (let [author, event] of valuesByAuthor) {
+      if (!filter.authors || filter.authors.indexOf(author) !== -1) {
+        callback(event);
+      }
+    }
+  }
+}
+
+export class Path {
+  store: MemoryStorage;
+  listeners: Map<string, Listener>;
+  publish: Publish;
+  subscribe: Subscribe;
+  unsubscribe: Unsubscribe;
+  filter: Filter;
+  encrypt?: Encrypt;
+  decrypt?: Decrypt;
+
+  constructor(
+    publish: Publish,
+    subscribe: Subscribe,
+    unsubscribe: Unsubscribe,
+    filter: Filter,
+    encrypt?: Encrypt,
+    decrypt?: Decrypt
+  ) {
+    this.publish = publish;
+    this.subscribe = subscribe;
+    this.unsubscribe = unsubscribe;
+    this.filter = filter;
+    this.encrypt = encrypt;
+    this.decrypt = decrypt;
+    this.store = new MemoryStorage();
+    this.listeners = new Map<string, Listener>();
+  }
+
+  async publishSetEvent(path: string, value: any): Promise<Event> {
+    let content: string;
+    if (this.encrypt) {
+      // TODO: path should be deterministically encrypted hash(path + secret) but NIP07 provides no way for that
+      const contentStr = JSON.stringify(value);
+      content = await this.encrypt(contentStr);
+      if (contentStr === content) {
+        throw new Error(`Encryption failed: ${contentStr} === ${content}`);
+      }
+    } else {
+      content = JSON.stringify(value);
+    }
+    return this.publish({
+      kind: EVENT_KIND,
+      tags: [["d", path]],
+      content,
+      created_at: Math.floor(Date.now() / 1000)
+    });
+  }
+
+  async set(path: string, value: any): Promise<boolean> {
+    try {
+      const event = await this.publishSetEvent(path, value);
+      if (event) {
+        if (this.store.set(event)) {
+          this.notifyListeners(event as CompleteEvent);
+        }
+        return true;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return false;
+  }
+
+  async getEventValue(event: Event): Promise<any> {
+    let value = this.decrypt ? await this.decrypt(event.content) : event.content;
+    try {
+      value = JSON.parse(value);
+    } catch (e) {
+      throw new Error(`Failed to parse event content: ${value}`);
+    }
+    return value;
+  }
+
+  get(path: string, callback: PathCallback, filter = {}): Listener {
+    filter = Object.assign({}, filter, this.filter, { "#d": [path], kinds: [EVENT_KIND] });
+    const listener = this.addListener(filter, callback);
+    this.store.get(filter, (event) => this.callbackFromEvent(event, callback));
+    this.subscribe([filter], async (event) => {
+      if (this.store.set(event)) {
+        this.notifyListeners(event as CompleteEvent);
+      }
+    });
+    return listener;
+  }
+
+  addListener(filter: Filter, callback: PathCallback): Listener {
+    const id = Math.random().toString(36).substr(2, 9);
+    const listener: Listener = {
+      filter,
+      callback,
+      off: () => {
+        this.listeners.delete(id);
+        if (listener.subscription) {
+          this.unsubscribe(listener.subscription);
+        }
+      }
+    };
+    this.listeners.set(id, listener);
+    return listener;
+  }
+
+  removeListener(id: string) {
+    const listener = this.listeners.get(id);
+    if (listener) {
+      listener.off();
+    }
+  }
+
+  callbackFromEvent(event: Event, callback: PathCallback) {
+    const path = getEventPath(event);
+    if (!path) {
+      throw new Error(`event has no d tag: ${JSON.stringify(event)}`);
+    }
+    this.getEventValue(event).then((value) => {
+      callback(value, path, event);
+    });
+  }
+
+  async notifyListeners(event: CompleteEvent) {
+    for (let listener of this.listeners.values()) {
+      if (matchFilter(listener.filter, event)) {
+        this.callbackFromEvent(event, listener.callback);
+      }
+    }
+  }
+}
diff --git a/src/lib/nostr-tools/pool.ts b/src/lib/nostr-tools/pool.ts
new file mode 100644
index 00000000000..72ac0882777
--- /dev/null
+++ b/src/lib/nostr-tools/pool.ts
@@ -0,0 +1,206 @@
+import { Relay, relayInit } from "./relay";
+import { Filter } from "./filter";
+import { Event } from "./event";
+
+// interface SimplePoolTypes {
+//   private _conn
+//   private _seenOn
+//   private eoseSubTimeout
+//   private getTimeout
+//   constructor(options?: {eoseSubTimeout?: number; getTimeout?: number})
+//   close(relays: string[]): void
+//   ensureRelay(url: string): Promise<Relay>
+//   sub(relays: string[], filters: Filter[], opts?: SubscriptionOptions): Sub
+//   get(
+//     relays: string[],
+//     filter: Filter,
+//     opts?: SubscriptionOptions
+//   ): Promise<Event | null>
+//   list(
+//     relays: string[],
+//     filters: Filter[],
+//     opts?: SubscriptionOptions
+//   ): Promise<Event[]>
+//   publish(relays: string[], event: Event): Pub
+//   seenOn(id: string): string[]
+// }
+
+export interface SimplePoolOptions {
+  eoseSubTimeout?: number;
+  getTimeout?: number;
+  listTimeout?: number;
+}
+
+function normalizeURL(url) {
+  let p = new URL(url);
+  p.pathname = p.pathname.replace(/\/+/g, "/");
+  if (p.pathname.endsWith("/")) p.pathname = p.pathname.slice(0, -1);
+  if ((p.port === "80" && p.protocol === "ws:") || (p.port === "443" && p.protocol === "wss:"))
+    p.port = "";
+  p.searchParams.sort();
+  p.hash = "";
+  return p.toString();
+}
+
+export default class SimplePool {
+  _conn;
+  _seenOn = {};
+  eoseSubTimeout;
+  getTimeout;
+  constructor(options = {}) {
+    this._conn = {};
+    this.eoseSubTimeout = options.eoseSubTimeout || 3400;
+    this.getTimeout = options.getTimeout || 3400;
+  }
+
+  close(relays) {
+    relays.forEach((url) => {
+      let relay = this._conn[normalizeURL(url)];
+      if (relay) relay.close();
+    });
+  }
+  async ensureRelay(url) {
+    const nm = normalizeURL(url);
+    if (!this._conn[nm]) {
+      this._conn[nm] = relayInit(nm, {
+        getTimeout: this.getTimeout * 0.9,
+        listTimeout: this.getTimeout * 0.9
+      });
+    }
+    const relay = this._conn[nm];
+    await relay.connect();
+    return relay;
+  }
+  sub(relays, filters, opts?) {
+    let _knownIds = /* @__PURE__ */ new Set();
+    let modifiedOpts = { ...(opts || {}) };
+    modifiedOpts.alreadyHaveEvent = (id, url) => {
+      if (opts?.alreadyHaveEvent?.(id, url)) {
+        return true;
+      }
+      let set = this._seenOn[id] || /* @__PURE__ */ new Set();
+      set.add(url);
+      this._seenOn[id] = set;
+      return _knownIds.has(id);
+    };
+    let subs = [];
+    let eventListeners = /* @__PURE__ */ new Set();
+    let eoseListeners = /* @__PURE__ */ new Set();
+    let eosesMissing = relays.length;
+    let eoseSent = false;
+    let eoseTimeout = setTimeout(() => {
+      eoseSent = true;
+      for (let cb of eoseListeners.values()) cb();
+    }, this.eoseSubTimeout);
+    relays.forEach(async (relay) => {
+      let r;
+      try {
+        r = await this.ensureRelay(relay);
+      } catch (err) {
+        handleEose();
+        return;
+      }
+      if (!r) return;
+      let s = r.sub(filters, modifiedOpts);
+      s.on("event", (event) => {
+        _knownIds.add(event.id);
+        for (let cb of eventListeners.values()) cb(event);
+      });
+      s.on("eose", () => {
+        if (eoseSent) return;
+        handleEose();
+      });
+      subs.push(s);
+      function handleEose() {
+        eosesMissing--;
+        if (eosesMissing === 0) {
+          clearTimeout(eoseTimeout);
+          for (let cb of eoseListeners.values()) cb();
+        }
+      }
+    });
+    let greaterSub = {
+      sub(filters2, opts2) {
+        subs.forEach((sub) => sub.sub(filters2, opts2));
+        return greaterSub;
+      },
+      unsub() {
+        subs.forEach((sub) => sub.unsub());
+      },
+      on(type, cb) {
+        if (type === "event") {
+          eventListeners.add(cb);
+        } else if (type === "eose") {
+          eoseListeners.add(cb);
+        }
+      },
+      off(type, cb) {
+        if (type === "event") {
+          eventListeners.delete(cb);
+        } else if (type === "eose") eoseListeners.delete(cb);
+      }
+    };
+    return greaterSub;
+  }
+  get(relays, filter, opts) {
+    return new Promise((resolve) => {
+      let sub = this.sub(relays, [filter], opts);
+      let timeout = setTimeout(() => {
+        sub.unsub();
+        resolve(null);
+      }, this.getTimeout);
+      sub.on("event", (event) => {
+        resolve(event);
+        clearTimeout(timeout);
+        sub.unsub();
+      });
+    });
+  }
+  list(relays, filters, opts) {
+    return new Promise((resolve) => {
+      let events = [];
+      let sub = this.sub(relays, filters, opts);
+      sub.on("event", (event) => {
+        events.push(event);
+      });
+      sub.on("eose", () => {
+        sub.unsub();
+        resolve(events);
+      });
+    });
+  }
+  publish(relays, event) {
+    const pubPromises = relays.map(async (relay) => {
+      let r;
+      try {
+        r = await this.ensureRelay(relay);
+        return r.publish(event);
+      } catch (_) {
+        return { on() {}, off() {} };
+      }
+    });
+    const callbackMap = /* @__PURE__ */ new Map();
+    return {
+      on(type, cb) {
+        relays.forEach(async (relay, i) => {
+          let pub = await pubPromises[i];
+          let callback = () => cb(relay);
+          callbackMap.set(cb, callback);
+          pub.on(type, callback);
+        });
+      },
+      off(type, cb) {
+        relays.forEach(async (_, i) => {
+          let callback = callbackMap.get(cb);
+          if (callback) {
+            let pub = await pubPromises[i];
+            pub.off(type, callback);
+          }
+        });
+      }
+    };
+  }
+  seenOn(id) {
+    return Array.from(this._seenOn[id]?.values?.() || []);
+  }
+}
diff --git a/src/lib/nostr-tools/relay.ts b/src/lib/nostr-tools/relay.ts
new file mode 100644
index 00000000000..af55a6aa166
--- /dev/null
+++ b/src/lib/nostr-tools/relay.ts
@@ -0,0 +1,584 @@
+/* global WebSocket */
+
+import { Event, verifySignature, validateEvent } from "./event";
+import { Filter } from "./filter";
+import { SimplePoolOptions } from "./pool";
+
+type RelayEvent = "connect" | "disconnect" | "error" | "notice" | "auth";
+
+export type Relay = {
+  enabled?: any;
+  url: string;
+  status: number;
+  connect: () => Promise<void>;
+  close: () => Promise<void>;
+  sub: (filters: Filter[], opts?: SubscriptionOptions) => Sub;
+  publish: (event: Event) => Pub;
+  auth: (event: Event) => Pub;
+  on: (type: RelayEvent, cb: any) => void;
+  off: (type: RelayEvent, cb: any) => void;
+};
+export type Pub = {
+  on: (type: "ok" | "seen" | "failed", cb: any) => void;
+  off: (type: "ok" | "seen" | "failed", cb: any) => void;
+};
+export type Sub = {
+  sub: (filters: Filter[], opts: SubscriptionOptions) => Sub;
+  unsub: () => void;
+  on: (type: "event" | "eose", cb: any) => void;
+  off: (type: "event" | "eose", cb: any) => void;
+};
+
+type SubscriptionOptions = {
+  skipVerification?: boolean;
+  id?: string;
+  alreadyHaveEvent?: any;
+};
+
+// TODO allowAuthor fn so we can skip JSON.parse and sig verify if we won't allow the author anyway
+// export function relayInit(
+//   url: string,
+//   alreadyHaveEvent?: (id: string) => boolean
+// ): Relay {
+//   var ws: WebSocket
+//   var resolveClose: () => void
+//   var resolveOpen: (value: PromiseLike<void> | void) => void
+//   var untilOpen = new Promise<void>(resolve => {
+//     resolveOpen = resolve
+//   })
+//   var openSubs: {[id: string]: {filters: Filter[]} & SubscriptionOptions} = {}
+//   var listeners: {
+//     connect: Array<() => void>
+//     disconnect: Array<() => void>
+//     error: Array<() => void>
+//     notice: Array<(msg: string) => void>
+//     auth: Array<(challenge: string) => void>
+//   } = {
+//     connect: [],
+//     disconnect: [],
+//     error: [],
+//     notice: [],
+//     auth: []
+//   }
+//   var subListeners: {
+//     [subid: string]: {
+//       event: Array<(event: Event) => void>
+//       eose: Array<() => void>
+//     }
+//   } = {}
+//   var pubListeners: {
+//     [eventid: string]: {
+//       ok: Array<() => void>
+//       seen: Array<() => void>
+//       failed: Array<(reason: string) => void>
+//     }
+//   } = {}
+//   let idRegex = /"id":"([a-fA-F0-9]+)"/
+
+//   async function connectRelay(): Promise<void> {
+//     return new Promise((resolve, reject) => {
+//       ws = new WebSocket(url)
+
+//       ws.onopen = () => {
+//         listeners.connect.forEach(cb => cb())
+//         resolveOpen()
+//         resolve()
+//       }
+//       ws.onerror = () => {
+//         listeners.error.forEach(cb => cb())
+//         reject()
+//       }
+//       ws.onclose = async () => {
+//         listeners.disconnect.forEach(cb => cb())
+//         resolveClose && resolveClose()
+//       }
+
+//       let incomingMessageQueue: any[] = []
+//       let handleNextInterval: any
+
+//       const handleNext = () => {
+//         if (incomingMessageQueue.length === 0) {
+//           clearInterval(handleNextInterval)
+//           handleNextInterval = null
+//           return
+//         }
+
+//         var data = incomingMessageQueue.shift()
+//         if (data && alreadyHaveEvent !== undefined) {
+//           const match = idRegex.exec(data)
+//           if (match) {
+//             const id = match[1]
+//             if (alreadyHaveEvent(id)) {
+//               //console.log(`already have`);
+//               return
+//             }
+//           }
+//         }
+//         try {
+//           data = JSON.parse(data)
+//         } catch (err) {}
+
+//         if (data.length >= 1) {
+//           switch (data[0]) {
+//             case 'EVENT':
+//               if (data.length !== 3) return // ignore empty or malformed EVENT
+
+//               let id = data[1]
+//               let event = data[2]
+//               if (
+//                 validateEvent(event) &&
+//                 openSubs[id] &&
+//                 (openSubs[id].skipVerification || verifySignature(event)) &&
+//                 matchFilters(openSubs[id].filters, event)
+//               ) {
+//                 openSubs[id]
+//                 ;(subListeners[id]?.event || []).forEach(cb => cb(event))
+//               }
+//               return
+//             case 'EOSE': {
+//               if (data.length !== 2) return // ignore empty or malformed EOSE
+//               let id = data[1]
+//               ;(subListeners[id]?.eose || []).forEach(cb => cb())
+//               return
+//             }
+//             case 'OK': {
+//               if (data.length < 3) return // ignore empty or malformed OK
+//               let id: string = data[1]
+//               let ok: boolean = data[2]
+//               let reason: string = data[3] || ''
+//               if (ok) pubListeners[id]?.ok.forEach(cb => cb())
+//               else pubListeners[id]?.failed.forEach(cb => cb(reason))
+//               return
+//             }
+//             case 'NOTICE':
+//               if (data.length !== 2) return // ignore empty or malformed NOTICE
+//               let notice = data[1]
+//               listeners.notice.forEach(cb => cb(notice))
+//               return
+//             case 'AUTH': {
+//               let challenge = data[1]
+//               listeners.auth?.forEach(cb => cb(challenge))
+//               return
+//             }
+//           }
+//         }
+//       }
+
+//       ws.onmessage = e => {
+//         incomingMessageQueue.push(e.data)
+//         if (!handleNextInterval) {
+//           handleNextInterval = setInterval(handleNext, 0)
+//         }
+//       }
+//     })
+//   }
+
+//   async function connect(): Promise<void> {
+//     if (ws?.readyState && ws.readyState === 1) return // ws already open
+//     await connectRelay()
+//   }
+
+//   async function trySend(params: [string, ...any]) {
+//     let msg = JSON.stringify(params)
+
+//     await untilOpen
+//     try {
+//       ws.send(msg)
+//     } catch (err) {
+//       console.log(err)
+//     }
+//   }
+
+//   const sub = (
+//     filters: Filter[],
+//     {
+//       skipVerification = false,
+//       id = Math.random().toString().slice(2)
+//     }: SubscriptionOptions = {}
+//   ): Sub => {
+//     let subid = id
+
+//     openSubs[subid] = {
+//       id: subid,
+//       filters,
+//       skipVerification
+//     }
+//     trySend(['REQ', subid, ...filters])
+
+//     return {
+//       sub: (newFilters, newOpts = {}) =>
+//         sub(newFilters || filters, {
+//           skipVerification: newOpts.skipVerification || skipVerification,
+//           id: subid
+//         }),
+//       unsub: () => {
+//         delete openSubs[subid]
+//         delete subListeners[subid]
+//         trySend(['CLOSE', subid])
+//       },
+//       on: (type: 'event' | 'eose', cb: any): void => {
+//         subListeners[subid] = subListeners[subid] || {
+//           event: [],
+//           eose: []
+//         }
+//         subListeners[subid][type].push(cb)
+//       },
+//       off: (type: 'event' | 'eose', cb: any): void => {
+//         let listeners = subListeners[subid]
+//         let idx = listeners[type].indexOf(cb)
+//         if (idx >= 0) listeners[type].splice(idx, 1)
+//       }
+//     }
+//   }
+
+//   function _publishEvent(event: Event, type: string) {
+//     if (!event.id) throw new Error(`event ${event} has no id`)
+//     let id = event.id
+
+//     var sent = false
+//     var mustMonitor = false
+
+//     trySend([type, event])
+//       .then(() => {
+//         sent = true
+//         if (mustMonitor) {
+//           startMonitoring()
+//           mustMonitor = false
+//         }
+//       })
+//       .catch(() => {})
+
+//     const startMonitoring = () => {
+//       let monitor = sub([{ids: [id]}], {
+//         id: `monitor-${id.slice(0, 5)}`
+//       })
+//       let willUnsub = setTimeout(() => {
+//         ;(pubListeners[id]?.failed || []).forEach(cb =>
+//           cb('event not seen after 5 seconds')
+//         )
+//         monitor.unsub()
+//       }, 5000)
+//       monitor.on('event', () => {
+//         clearTimeout(willUnsub)
+//         ;(pubListeners[id]?.seen || []).forEach(cb => cb())
+//       })
+//     }
+
+//     return {
+//       on: (type: 'ok' | 'seen' | 'failed', cb: any) => {
+//         pubListeners[id] = pubListeners[id] || {
+//           ok: [],
+//           seen: [],
+//           failed: []
+//         }
+//         pubListeners[id][type].push(cb)
+
+//         if (type === 'seen') {
+//           if (sent) startMonitoring()
+//           else mustMonitor = true
+//         }
+//       },
+//       off: (type: 'ok' | 'seen' | 'failed', cb: any) => {
+//         let listeners = pubListeners[id]
+//         if (!listeners) return
+//         let idx = listeners[type].indexOf(cb)
+//         if (idx >= 0) listeners[type].splice(idx, 1)
+//       }
+//     }
+//   }
+
+//   return {
+//     url,
+//     sub,
+//     on: (type: RelayEvent, cb: any): void => {
+//       listeners[type].push(cb)
+//       if (type === 'connect' && ws?.readyState === 1) {
+//         cb()
+//       }
+//     },
+//     off: (type: RelayEvent, cb: any): void => {
+//       let index = listeners[type].indexOf(cb)
+//       if (index !== -1) listeners[type].splice(index, 1)
+//     },
+//     publish(event: Event): Pub {
+//       return _publishEvent(event, 'EVENT')
+//     },
+//     auth(event: Event): Pub {
+//       return _publishEvent(event, 'AUTH')
+//     },
+//     connect,
+//     close(): Promise<void> {
+//       ws.close()
+//       return new Promise<void>(resolve => {
+//         resolveClose = resolve
+//       })
+//     },
+//     get status() {
+//       return ws?.readyState ?? 3
+//     }
+//   }
+// }
+
+function getSubscriptionId(json) {
+  let idx = json.slice(0, 22).indexOf(`"EVENT"`);
+  if (idx === -1) return null;
+  let pstart = json.slice(idx + 7 + 1).indexOf(`"`);
+  if (pstart === -1) return null;
+  let start = idx + 7 + 1 + pstart;
+  let pend = json.slice(start + 1, 80).indexOf(`"`);
+  if (pend === -1) return null;
+  let end = start + 1 + pend;
+  return json.slice(start + 1, end);
+}
+
+function getHex64(json, field) {
+  let len = field.length + 3;
+  let idx = json.indexOf(`"${field}":`) + len;
+  let s = json.slice(idx).indexOf(`"`) + idx + 1;
+  return json.slice(s, s + 64);
+}
+
+export function relayInit(url: string, options: SimplePoolOptions = {}) {
+  let { listTimeout = 3e3, getTimeout = 3e3 } = options;
+  var ws;
+  var openSubs = {};
+  var listeners = {
+    connect: [],
+    disconnect: [],
+    error: [],
+    notice: []
+  };
+  var subListeners = {};
+  var pubListeners = {};
+  var connectionPromise;
+  async function connectRelay() {
+    if (connectionPromise) return connectionPromise;
+    connectionPromise = new Promise<void>((resolve, reject) => {
+      try {
+        ws = new WebSocket(url);
+      } catch (err) {
+        reject(err);
+      }
+      ws.onopen = () => {
+        listeners.connect.forEach((cb) => cb());
+        resolve();
+      };
+      ws.onerror = () => {
+        connectionPromise = void 0;
+        listeners.error.forEach((cb) => cb());
+        reject();
+      };
+      ws.onclose = async () => {
+        connectionPromise = void 0;
+        listeners.disconnect.forEach((cb) => cb());
+      };
+      let incomingMessageQueue = [];
+      let handleNextInterval;
+      ws.onmessage = (e) => {
+        incomingMessageQueue.push(e.data);
+        if (!handleNextInterval) {
+          handleNextInterval = setInterval(handleNext, 0);
+        }
+      };
+      async function handleNext() {
+        if (incomingMessageQueue.length === 0) {
+          clearInterval(handleNextInterval);
+          handleNextInterval = null;
+          return;
+        }
+        var json = incomingMessageQueue.shift();
+        if (!json) return;
+        let subid = getSubscriptionId(json);
+        if (subid) {
+          let so = openSubs[subid];
+          if (so && so.alreadyHaveEvent && so.alreadyHaveEvent(getHex64(json, "id"), url)) {
+            return;
+          }
+        }
+        try {
+          let data = JSON.parse(json);
+          switch (data[0]) {
+            case "EVENT":
+              let id = data[1];
+              let event = data[2];
+              if (
+                validateEvent(event) &&
+                openSubs[id] &&
+                (openSubs[id].skipVerification || (await verifySignature(event)))
+              ) {
+                openSubs[id];
+                (subListeners[id]?.event || []).forEach((cb) => cb(event));
+              }
+              return;
+            case "EOSE": {
+              let id2 = data[1];
+              if (id2 in subListeners) {
+                subListeners[id2].eose.forEach((cb) => cb());
+                subListeners[id2].eose = [];
+              }
+              return;
+            }
+            case "OK": {
+              let id2 = data[1];
+              let ok = data[2];
+              let reason = data[3] || "";
+              if (id2 in pubListeners) {
+                if (ok) pubListeners[id2].ok.forEach((cb) => cb());
+                else pubListeners[id2].failed.forEach((cb) => cb(reason));
+                pubListeners[id2].ok = [];
+                pubListeners[id2].failed = [];
+              }
+              return;
+            }
+            case "NOTICE":
+              let notice = data[1];
+              listeners.notice.forEach((cb) => cb(notice));
+              return;
+          }
+        } catch (err) {
+          return;
+        }
+      }
+    });
+    return connectionPromise;
+  }
+  function connected() {
+    return ws?.readyState === 1;
+  }
+  async function connect() {
+    if (connected()) return;
+    await connectRelay();
+  }
+  async function trySend(params) {
+    let msg = JSON.stringify(params);
+    if (!connected()) {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      if (!connected()) {
+        return;
+      }
+    }
+    try {
+      ws.send(msg);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+  const sub = (
+    filters,
+    {
+      skipVerification = false,
+      alreadyHaveEvent = null,
+      id = Math.random().toString().slice(2)
+    } = {}
+  ) => {
+    let subid = id;
+    openSubs[subid] = {
+      id: subid,
+      filters,
+      skipVerification,
+      alreadyHaveEvent
+    };
+    trySend(["REQ", subid, ...filters]);
+    return {
+      sub: (newFilters, newOpts: SubscriptionOptions = {}) =>
+        sub(newFilters || filters, {
+          skipVerification: newOpts.skipVerification || skipVerification,
+          alreadyHaveEvent: newOpts.alreadyHaveEvent || alreadyHaveEvent,
+          id: subid
+        }),
+      unsub: () => {
+        delete openSubs[subid];
+        delete subListeners[subid];
+        trySend(["CLOSE", subid]);
+      },
+      on: (type, cb) => {
+        subListeners[subid] = subListeners[subid] || {
+          event: [],
+          eose: []
+        };
+        subListeners[subid][type].push(cb);
+      },
+      off: (type, cb) => {
+        let listeners2 = subListeners[subid];
+        let idx = listeners2[type].indexOf(cb);
+        if (idx >= 0) listeners2[type].splice(idx, 1);
+      }
+    };
+  };
+  return {
+    url,
+    sub,
+    on: (type, cb) => {
+      listeners[type].push(cb);
+      if (type === "connect" && ws?.readyState === 1) {
+        cb();
+      }
+    },
+    off: (type, cb) => {
+      let index = listeners[type].indexOf(cb);
+      if (index !== -1) listeners[type].splice(index, 1);
+    },
+    list: (filters, opts) =>
+      new Promise((resolve) => {
+        let s = sub(filters, opts);
+        let events = [];
+        let timeout = setTimeout(() => {
+          s.unsub();
+          resolve(events);
+        }, listTimeout);
+        s.on("eose", () => {
+          s.unsub();
+          clearTimeout(timeout);
+          resolve(events);
+        });
+        s.on("event", (event) => {
+          events.push(event);
+        });
+      }),
+    get: (filter, opts) =>
+      new Promise((resolve) => {
+        let s = sub([filter], opts);
+        let timeout = setTimeout(() => {
+          s.unsub();
+          resolve(null);
+        }, getTimeout);
+        s.on("event", (event) => {
+          s.unsub();
+          clearTimeout(timeout);
+          resolve(event);
+        });
+      }),
+    publish(event) {
+      if (!event.id) throw new Error(`event ${event} has no id`);
+      let id = event.id;
+      trySend(["EVENT", event]);
+      return {
+        on: (type, cb) => {
+          pubListeners[id] = pubListeners[id] || {
+            ok: [],
+            failed: []
+          };
+          pubListeners[id][type].push(cb);
+        },
+        off: (type, cb) => {
+          let listeners2 = pubListeners[id];
+          if (!listeners2) return;
+          let idx = listeners2[type].indexOf(cb);
+          if (idx >= 0) listeners2[type].splice(idx, 1);
+        }
+      };
+    },
+    connect,
+    close() {
+      listeners = { connect: [], disconnect: [], error: [], notice: [] };
+      subListeners = {};
+      pubListeners = {};
+      if (ws.readyState === WebSocket.OPEN) {
+        ws?.close();
+      }
+    },
+    status() {
+      return ws?.readyState ?? 3;
+    }
+  };
+}
diff --git a/src/lib/nostr-tools/tsconfig.json b/src/lib/nostr-tools/tsconfig.json
new file mode 100644
index 00000000000..22bbdb23d4d
--- /dev/null
+++ b/src/lib/nostr-tools/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "."
+  }
+}
diff --git a/src/lib/nostr-tools/utils.ts b/src/lib/nostr-tools/utils.ts
new file mode 100644
index 00000000000..e3a9712883e
--- /dev/null
+++ b/src/lib/nostr-tools/utils.ts
@@ -0,0 +1,2 @@
+export const utf8Decoder = new TextDecoder("utf-8");
+export const utf8Encoder = new TextEncoder();
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
new file mode 100644
index 00000000000..a553c7d16c2
--- /dev/null
+++ b/src/providers/message-provider-types.ts
@@ -0,0 +1,55 @@
+export type Keys =
+  | {
+      pub: string;
+      priv: string;
+    }
+  | {
+      pub: string;
+      priv: "nip07";
+    }
+  | null;
+
+export type Metadata = {
+  name: string;
+  about: string;
+  picture: string;
+};
+
+export type Profile = { id: string; creator: string; created: number } & Metadata;
+
+export type Channel = { id: string; creator: string; created: number } & Metadata;
+
+export type ChannelUpdate = { channelId: string } & Channel;
+
+export type EventDeletion = { eventId: string; why: string };
+
+export type PublicMessage = {
+  id: string;
+  root: string;
+  content: string;
+  creator: string;
+  created: number;
+  children?: PublicMessage[];
+  mentions: string[];
+};
+
+export type DirectMessage = {
+  id: string;
+  root?: string;
+  content: string;
+  peer: string;
+  creator: string;
+  created: number;
+  children?: DirectMessage[];
+  decrypted: boolean;
+};
+
+export type Message = PublicMessage | DirectMessage;
+
+export type ChannelMessageHide = { id: string; reason: string };
+
+export type ChannelUserMute = { pubkey: string; reason: string };
+
+export type RelayDict = Record<string, { read: boolean; write: boolean }>;
+
+export type MuteList = { pubkeys: string[]; encrypted: string };
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
new file mode 100644
index 00000000000..e5b823a0ea5
--- /dev/null
+++ b/src/providers/message-provider.tsx
@@ -0,0 +1,300 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { getProfileMetaData, GLOBAL_CHAT, NostrKeys } from "../common/helper/chat-utils";
+import { ActiveUser } from "../common/store/active-user/types";
+// import uniq from 'lodash.uniq';
+// import {nip19} from 'nostr-tools';
+
+// import {
+//     channelsAtom,
+//     channelUpdatesAtom,
+//     directContactsAtom,
+//     directMessagesAtom,
+//     eventDeletionsAtom,
+//     keysAtom,
+//     profileAtom,
+//     profilesAtom,
+//     publicMessagesAtom,
+//     ravenAtom,
+//     ravenReadyAtom,
+//     channelMessageHidesAtom,
+//     channelUserMutesAtom,
+//     muteListAtom, directMessageAtom
+// } from 'store';
+import { initRaven, RavenEvents } from "../common/helper/message-helper";
+import {
+  Channel,
+  ChannelUpdate,
+  DirectMessage,
+  EventDeletion,
+  Profile,
+  PublicMessage,
+  ChannelMessageHide,
+  ChannelUserMute,
+  MuteList,
+  Keys
+} from "./message-provider-types";
+import { useMappedStore } from "../common/store/use-mapped-store";
+import { Account } from "../common/store/accounts/types";
+import { Chat, DirectContactsType } from "../common/store/chat/types";
+
+// import {createLogger} from 'logger';
+
+// const logger = createLogger('RavenProvider');
+
+export const setNostrkeys = (keys: NostrKeys) => {
+  const detail: NostrKeys = {
+    pub: keys.pub,
+    priv: keys.priv
+  };
+  const ev = new CustomEvent("keysCreated", { detail });
+  window.dispatchEvent(ev);
+};
+
+interface Props {
+  activeUser: ActiveUser;
+  chat: Chat;
+  addDirectContacts: (data?: DirectContactsType[]) => void;
+  addDirectMessages: (data?: DirectMessage[]) => void;
+}
+
+const MessageProvider = (props: Props) => {
+  // console.log(props.addDirectMessages, "MessageProvider")
+  const { activeUser } = useMappedStore();
+  const [ravenReady, setRavenReady] = useState(false);
+  // const [profile, setProfile] = useAtom(profileAtom);
+  // const [profiles, setProfiles] = useAtom(profilesAtom);
+  // const [channels, setChannels] = useAtom(channelsAtom);
+  // const [channelUpdates, setChannelUpdates] = useAtom(channelUpdatesAtom);
+  // const [eventDeletions, setEventDeletions] = useAtom(eventDeletionsAtom);
+  // const [publicMessages, setPublicMessages] = useAtom(publicMessagesAtom);
+  // const [directMessages, setDirectMessages] = useAtom(directMessagesAtom);
+  // const [directMessage,] = useAtom(directMessageAtom);
+  // const [channelMessageHides, setChannelMessageHides] = useAtom(channelMessageHidesAtom);
+  // const [channelUserMutes, setChannelUserMutes] = useAtom(channelUserMutesAtom);
+  // const [muteList, setMuteList] = useAtom(muteListAtom);
+  // const [, setDirectContacts] = useAtom(directContactsAtom);
+  const [since, setSince] = useState<number>(0);
+  const [keys, setKeys] = useState<Keys>();
+  const [raven, setRaven] = useState<any>();
+
+  // const ravenInstance = useMemo(() => initRaven(keys!), [keys]);
+  // setRaven(ravenInstance);
+
+  useEffect(() => {
+    window.addEventListener("keysCreated", createRavenInstance);
+
+    return () => {
+      window.removeEventListener("keysCreated", createRavenInstance);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!window.raven && keys) {
+      const ravenInstance = initRaven(keys);
+      setRaven(ravenInstance);
+    }
+  }, [keys]);
+
+  // useEffect(() => {
+  //   console.log(raven);
+  //   if(raven){
+  //     raven?.updateProfile({name:activeUser?.username, about: "", picture: ""});
+  //   }
+  // }, [raven]);
+
+  useEffect(() => {
+    if (activeUser) {
+      getNostrKeys(activeUser);
+    }
+  }, [activeUser]);
+
+  const createRavenInstance = (e: Event) => {
+    const detail = (e as CustomEvent).detail as NostrKeys;
+    const ravenInstance = initRaven(detail);
+    setRaven(ravenInstance);
+  };
+
+  const getNostrKeys = async (activeUser: ActiveUser) => {
+    const profile = await getProfileMetaData(activeUser.username);
+    setKeys(profile.noStrKey);
+  };
+
+  //Listen for events in an interval.
+  useEffect(() => {
+    if (!ravenReady) return;
+
+    const timer = setTimeout(
+      () => {
+        raven?.listen(Math.floor((since || Date.now()) / 1000));
+        setSince(Date.now());
+      },
+      since === 0 ? 500 : 10000
+    );
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [since, ravenReady, raven]);
+
+  // // Trigger listen once the window visibility changes.
+  // const visibilityChange = () => {
+  //   if (document.visibilityState === "visible") {
+  //     raven?.listen(
+  //       channels.map((x) => x.id),
+  //       Math.floor((since || Date.now()) / 1000)
+  //     );
+  //     setSince(Date.now());
+  //   }
+  // };
+  // useEffect(() => {
+  //   document.addEventListener("visibilitychange", visibilityChange);
+
+  //   return () => {
+  //     document.removeEventListener("visibilitychange", visibilityChange);
+  //   };
+  // }, [since, ravenReady, raven, channels]);
+
+  // useEffect(() => {
+  //   setDirectContacts(
+  //     [...new Set(directMessages.map((x) => x.peer))].map((p) => ({
+  //       pub: p,
+  //       npub: nip19.npubEncode(p)
+  //     }))
+  //   );
+  // }, [directMessages]);
+
+  // // Ready state handler
+  const handleReadyState = () => {
+    setRavenReady(true);
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.Ready, handleReadyState);
+    raven?.addListener(RavenEvents.Ready, handleReadyState);
+
+    return () => {
+      raven?.removeListener(RavenEvents.Ready, handleReadyState);
+    };
+  }, [ravenReady, raven]);
+
+  // // Event deletion handler
+  // const handleEventDeletion = (data: EventDeletion[]) => {
+  //   logger.info("handleEventDeletion", data);
+  //   const append = data.filter(
+  //     (x) => eventDeletions.find((y) => y.eventId === x.eventId) === undefined
+  //   );
+  //   setEventDeletions([...eventDeletions, ...append]);
+  // };
+
+  // useEffect(() => {
+  //   raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
+  //   raven?.addListener(RavenEvents.EventDeletion, handleEventDeletion);
+
+  //   return () => {
+  //     raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
+  //   };
+  // }, [raven, eventDeletions]);
+
+  // // Direct message handler
+  const handleDirectMessage = (data: DirectMessage[]) => {
+    console.log("handleDirectMessage", data);
+    console.log(props.chat.directMessages);
+    const append = data.filter(
+      (x) => props.chat.directMessages.find((y) => y.id === x.id) === undefined
+    );
+    // console.log("append", [...props.chat.directMessages, ...append]);
+
+    const result = [...props.chat.directMessages, ...append];
+    // console.log(result, 'result')
+    // raven?.loadProfiles(data.map((x) => x.peer));
+    props.addDirectMessages(result);
+    // const clean = data
+    //   .filter((x) => x.peer === "ad2b87073a67f664621c92dbc925f3d1be3e4df64968fdeb4d15c6736ef42300")
+    //   .sort((a, b) => a.created - b.created);
+
+    // console.log(clean, "clean");
+    // const finalData = clean
+    //   .map((c) => ({ ...c, children: clean.filter((x) => x.root === c.id) }))
+    //   .filter((x) => !x.root);
+
+    // console.log(finalData, "finalData");
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+    raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
+    return () => {
+      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+    };
+  }, [raven]);
+
+  const handleProfileUpdate = (data: Profile[]) => {
+    // console.log("handleProfileData", data);
+    // console.log("Store state", props.chat.directContacts);
+
+    const result = [...props.chat.directContacts];
+    const activeUserName = props.activeUser?.username;
+
+    data.forEach(({ name, creator }) => {
+      const isPresent = props.chat.directContacts.some(
+        (obj) => obj.name === name && obj.creator === creator
+      );
+      const isCurrentUser = name === activeUserName;
+      if (!isPresent && !isCurrentUser) {
+        // Add the object to the result array if it's not already present in store state.
+        result.push({ name, creator });
+      }
+    });
+
+    // console.log("result", result);
+    props.addDirectContacts(result);
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    raven?.addListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    return () => {
+      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    };
+  }, [raven]);
+
+  // // decrypt direct messages one by one to avoid show nip7 wallet dialog many times.
+  // useEffect(() => {
+  //   if (directMessage) {
+  //     const decrypted = directMessages
+  //       .filter((m) => m.peer === directMessage)
+  //       .find((x) => !x.decrypted);
+  //     if (decrypted) {
+  //       window.nostr?.nip04.decrypt(decrypted.peer, decrypted.content).then((content) => {
+  //         setDirectMessages(
+  //           directMessages.map((m) => {
+  //             if (m.id === decrypted.id) {
+  //               return {
+  //                 ...m,
+  //                 content,
+  //                 decrypted: true
+  //               };
+  //             }
+  //             return m;
+  //           })
+  //         );
+  //       });
+  //     }
+  //   }
+  // }, [directMessages, directMessage]);
+
+  // Init raven
+  // useEffect(() => {
+  //   return () => {
+  //     raven?.removeListener(RavenEvents.Ready, handleReadyState);
+
+  //     // raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
+
+  //     raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+  //   };
+  // }, [raven]);
+
+  return <>{}</>;
+};
+
+export default MessageProvider;
diff --git a/yarn.lock b/yarn.lock
index b3c36272843..512618b73ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1591,6 +1591,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.4.3.tgz#ff8d05cbfff875d4a791ab679b4333df47951d20"
+  integrity sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -1670,6 +1679,11 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
@@ -1680,11 +1694,24 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
   integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
 
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
+"@jridgewell/trace-mapping@^0.3.15":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -1724,6 +1751,28 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@noble/curves@1.0.0", "@noble/curves@~1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
+  integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
+  dependencies:
+    "@noble/hashes" "1.3.0"
+
+"@noble/hashes@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
+  integrity sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg==
+
+"@noble/hashes@~1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@noble/secp256k1@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1792,6 +1841,28 @@
   dependencies:
     dequal "^2.0.2"
 
+"@scure/base@1.1.1", "@scure/base@~1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@scure/bip32@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
+  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
+  dependencies:
+    "@noble/curves" "~1.0.0"
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
+"@scure/bip39@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.0.tgz#a207e2ef96de354de7d0002292ba1503538fc77b"
+  integrity sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==
+  dependencies:
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -5890,6 +5961,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6911,6 +6987,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-ws@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
+  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -8387,6 +8468,27 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nostr-relaypool@^0.6.28:
+  version "0.6.28"
+  resolved "https://registry.yarnpkg.com/nostr-relaypool/-/nostr-relaypool-0.6.28.tgz#50f1dc21c11bda1fca2a6d785d78fd6f6ead9a57"
+  integrity sha512-kyLChBunf6IB2O3MSPHBe9iSokBGyqZHvAJXZ5+eh9C4znAu7iY8L/yh0V4Ta/P9TtzDna3QTEgFWVan4m0vBA==
+  dependencies:
+    "@jest/source-map" "^29.4.3"
+    isomorphic-ws "^5.0.0"
+    nostr-tools "^1.10.0"
+    safe-stable-stringify "^2.4.2"
+
+nostr-tools@^1.10.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.12.0.tgz#ec3618fc2298e029941b7db3bbe95187777c488f"
+  integrity sha512-fsIXaNJPKaSrO9MxsCEWbhI4tG4pToQK4D4sgLRD0fRDfZ6ocCg8CLlh9lcNx0o8pVErCMLVASxbJ+w4WNK0MA==
+  dependencies:
+    "@noble/curves" "1.0.0"
+    "@noble/hashes" "1.3.0"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.0"
+    "@scure/bip39" "1.2.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10662,6 +10764,11 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
+safe-stable-stringify@^2.4.2:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"

From fd6875cd9aba7ee304c1de372c1aac9c327868b4 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 20 Jun 2023 14:43:30 +0500
Subject: [PATCH 011/179] create new instance when active user changes

---
 src/common/components/chat-box/index.scss | 115 ++++--
 src/common/components/chat-box/index.tsx  | 325 ++++++++--------
 src/common/components/login/index.tsx     |  16 +-
 src/common/helper/chat-utils.ts           |  17 +-
 src/common/helper/message-helper.ts       | 438 ++--------------------
 src/common/i18n/locales/en-US.json        |   6 +-
 src/common/store/actions.ts               |   5 +-
 src/common/store/chat/index.ts            |  22 +-
 src/common/store/chat/types.ts            |  22 +-
 src/providers/message-provider.tsx        | 180 +--------
 10 files changed, 350 insertions(+), 796 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 410f21e63f9..1d952569261 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -53,7 +53,6 @@
       .back-arrow-svg {
         border-radius: 50%;
         padding: 6px;
-        // padding: 8px 6px 10px 6px;
       }
     }
 
@@ -136,6 +135,7 @@
     overflow-y: auto;
 
     &.current-user {
+      padding-bottom: 10px;
       height: 412px;
       margin-bottom: 8px;
       @include themify(day) {
@@ -151,16 +151,28 @@
       justify-content: center;
       align-items: center;
     }
+    .no-chat {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20%;
+    }
+    .start-chat-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
     .chat-content {
       display: flex;
       cursor: pointer;
+      border-bottom: 0.5px solid rgba(134, 150, 160, 0.15);
 
       .user-img {
         padding: 18px 16px;
       }
       .user-title {
-        padding-top: 18px;
+        padding-top: 26px;
         width: -webkit-fill-available;
 
         .username {
@@ -186,7 +198,7 @@
 
     .chat-content:hover {
       @include themify(day) {
-        background: $light-powder-blue;
+        background: #eeeeee;
       }
       @include themify(night) {
         background: $gunmetal;
@@ -195,6 +207,8 @@
     .user-profile {
       border-bottom-right-radius: 20px;
       border-bottom-left-radius: 20px;
+      min-height: 266px;
+
       @include themify(day) {
         background: $white-three;
       }
@@ -294,19 +308,43 @@
     }
 
     .chats {
-      .date-time-detail {
-        .date-time {
-          margin: 1rem 0;
-          text-align: center;
-          font-size: 13px;
+      .not-joined {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 14%;
+      }
+      .custom-divider {
+        margin: 0 24px;
+        font-size: 0.7em;
+        color: $dark;
+        .line {
+          flex-grow: 1;
+          height: 1px;
+          background-color: black;
+          margin: 0 10px;
+        }
+        .custom-divider-text {
+          display: flex;
+          justify-content: center;
+          padding: 0 8px;
         }
       }
       .message {
         display: flex;
         .user-img {
-          padding: 18px 8px 18px 16px;
+          padding: 18px 8px 8px 16px;
         }
         .user-info {
+          padding-top: 8px;
+          .user-msg-time {
+            margin: 0;
+            color: rgb(138, 141, 145);
+            font-weight: 400;
+            font-size: 12px;
+            margin-left: 9px;
+            margin-bottom: 2px;
+          }
           .receiver-message-content {
             @include themify(day) {
               background: #e4e6eb;
@@ -316,31 +354,36 @@
             }
             color: #050505;
             max-width: 280px;
-            margin-top: 19px;
-            padding: 8px 12px 8px 12px;
-            border-radius: 18px 18px 18px 18px;
+            word-wrap: break-word;
+            padding: 10px;
+            border-radius: 0px 10px 10px;
           }
         }
       }
       .sender {
-        display: flex;
         margin-bottom: 0.17rem;
+        .sender-message-time {
+          color: rgb(138, 141, 145);
+          display: flex;
+          font-weight: 400;
+          justify-content: flex-end;
+          font-size: 12px;
+          margin: 0;
+          margin-right: 18px;
+          margin-bottom: 2px;
+        }
         .sender-message {
-          border-radius: 18px 18px 18px 18px;
           max-width: 280px;
           margin-left: auto;
-          background-color: rgb(0, 132, 255);
+
           display: flex;
           justify-content: flex-end;
           margin-right: 15px;
-          .sender-message-time {
-            color: $white;
-            margin-right: 30px;
-            font-size: 12px;
-            margin-top: 3px;
-          }
+
           .sender-message-content {
+            border-radius: 10px 10px 0px;
             max-width: 280px;
+            background-color: rgb(0, 132, 255);
             word-wrap: break-word;
             margin-bottom: 0;
             color: $white;
@@ -353,23 +396,31 @@
     }
   }
   .chat {
-    margin: 4px 4px;
+    margin: 4px 8px;
     padding: 4px;
+    min-height: 45px;
+    border-radius: 20px;
+    @include themify(day) {
+      background: #e4e6eb;
+    }
+    @include themify(night) {
+      background: #cee2ff;
+    }
 
     .chat-input-group {
-      width: 112%;
       .chat-input {
-        height: 45px;
-        border-radius: 12px !important;
+        padding-top: 13px;
+        border: none;
+        @include themify(day) {
+          background: #e4e6eb;
+        }
+        @include themify(night) {
+          background: #cee2ff;
+        }
       }
       .msg-svg {
-        padding: 6px 8px 4px 5px;
-        position: inherit;
-        right: 44px;
-        border-radius: 50%;
-        margin: 4px 0;
-        margin-right: 11px;
-        z-index: 10;
+        padding: 8px;
+
         &.active {
           cursor: pointer;
         }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 2c4fbc9ff44..5a338be1d45 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -2,14 +2,15 @@ import React, { useEffect, useState } from "react";
 import { Button, Form, FormControl, InputGroup, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
-import { Account } from "../../store/accounts/types";
 import { ActiveUser } from "../../store/active-user/types";
 import { DirectContactsType } from "../../store/chat/types";
-import { DirectMessage, Keys } from "../../../providers/message-provider-types";
+import { DirectMessage } from "../../../providers/message-provider-types";
+import { useMappedStore } from "../../store/use-mapped-store";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
 import SeachUser from "../search-user";
+import LinearProgress from "../linear-progress";
 import { setNostrkeys } from "../../../providers/message-provider";
 
 import {
@@ -24,17 +25,17 @@ import {
 import { dateToFormatted } from "../../helper/parse-date";
 import {
   createNoStrAccount,
+  formatMessageDate,
+  formatMessageTime,
   getDirectMessages,
   getProfileMetaData,
+  NostrKeys,
   setProfileMetaData
 } from "../../helper/chat-utils";
 import { _t } from "../../i18n";
 import { getAccountFull } from "../../api/hive";
 
 import "./index.scss";
-import { RavenEvents } from "../../helper/message-helper";
-import { Chat } from "../../store/chat/types";
-import { useMappedStore } from "../../store/use-mapped-store";
 
 export interface profileData {
   joiningData: string;
@@ -44,7 +45,6 @@ export interface profileData {
 
 interface Props {
   activeUser: ActiveUser | null;
-  chat: Chat;
 }
 
 export default function ChatBox(props: Props) {
@@ -54,7 +54,6 @@ export default function ChatBox(props: Props) {
   const [isCurrentUser, setIsCurrentUser] = useState(false);
   const [message, setMessage] = useState("");
   const [isMessageText, setIsMessageText] = useState(false);
-  const [accountData, setAccountData] = useState<Account>();
   const [profileData, setProfileData] = useState<profileData>();
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
@@ -62,9 +61,11 @@ export default function ChatBox(props: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
-  const [senderPubKey, setSenderPubKey] = useState("");
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeys>();
   const [receiverPubKey, setReceiverPubKey] = useState("");
+  const [showSpinner, setShowSpinner] = useState(false);
   const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
+  const [isUserFromSearch, setIsUserFromSearch] = useState(false);
 
   const { chat } = useMappedStore();
 
@@ -79,21 +80,21 @@ export default function ChatBox(props: Props) {
   }, [chat.directMessages]);
 
   useEffect(() => {
-    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
-    console.log(chatBodyDivRef?.current?.scrollHeight, "ref");
-  }, [isCurrentUser]);
+    scrollToBottom();
+  }, [messagesList]);
 
-  // useEffect(() => {
-  //   fetchProfileData();
-  //   setCurrentUser("");
-  //   // setIsCurrentUser(false);
-  //   setShow(!!props.activeUser?.username);
-  //   // setExpanded(false);
-  // }, [props.activeUser]);
+  useEffect(() => {
+    if (isCurrentUser) {
+      scrollToBottom();
+    }
+  }, [isCurrentUser]);
 
-  // useEffect(() => {
-  //   currentUser ? fetchCurrentUserData() : setMessage("");
-  // }, [currentUser]);
+  useEffect(() => {
+    fetchProfileData();
+    setShow(!!props.activeUser?.username);
+    const msgsList = getDirectMessages(chat.directMessages, receiverPubKey!);
+    setMessagesList(msgsList);
+  }, [props.activeUser]);
 
   useEffect(() => {
     if (currentUser) {
@@ -102,15 +103,15 @@ export default function ChatBox(props: Props) {
       setReceiverPubKey(peer!);
       const msgsList = getDirectMessages(chat.directMessages, peer!);
       setMessagesList(msgsList);
+      if (!window.raven) {
+        setNostrkeys(activeUserKeys!);
+      }
     } else {
       setMessage("");
+      setShowSpinner(false);
     }
   }, [currentUser]);
 
-  useEffect(() => {
-    chatBodyDivRef?.current?.scrollTo(0, isCurrentUser ? chatBodyDivRef.current.scrollHeight : 0);
-  }, [isCurrentUser]);
-
   const formatFollowers = (count: number | undefined) => {
     if (count) {
       return count >= 1e6
@@ -122,29 +123,8 @@ export default function ChatBox(props: Props) {
     return count;
   };
 
-  //Event listening
-
-  // const handleDirectMessage = (data: DirectMessage[]) => {
-  //   console.log("handleDirectMessage in chat compoenent", data);
-  //   // const append = data.filter((x) => directMessages.find((y) => y.id === x.id) === undefined);
-  //   // raven?.loadProfiles(append.map((x) => x.peer));
-  //   // setDirectMessages([...directMessages, ...append]);
-  // };
-
-  // useEffect(() => {
-  //   if (window.raven) {
-  //     window.raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
-  //     window.raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
-  //   }
-
-  //   return () => {
-  //     if (window.raven) {
-  //       window.raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
-  //     }
-  //   };
-  // }, []);
-
   const fetchCurrentUserData = async () => {
+    setShowSpinner(true);
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
@@ -152,14 +132,13 @@ export default function ChatBox(props: Props) {
       followers: response.follow_stats?.follower_count
     });
     const currentUserProfile = await getProfileMetaData(currentUser);
-    // console.log(currentUserProfile.noStrKey);
-    setReceiverPubKey(currentUserProfile.noStrKey.pub);
+    setReceiverPubKey(currentUserProfile.noStrKey?.pub);
+    setShowSpinner(false);
   };
 
   const fetchProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
-    console.log(profileData, "keys");
-    setSenderPubKey(profileData?.noStrKey.pub);
+    setActiveUserKeys(profileData?.noStrKey);
     const hasNoStrKey = "noStrKey" in profileData;
     setHasUserJoinedChat(hasNoStrKey);
     setShow(!!props.activeUser?.username);
@@ -171,9 +150,12 @@ export default function ChatBox(props: Props) {
   };
 
   const setCurrentUserFromSearch = (username: string) => {
+    setShowSpinner(true);
     setCurrentUser(username);
     setExpanded(true);
     setIsCurrentUser(true);
+    fetchCurrentUserData();
+    setIsUserFromSearch(true);
   };
 
   const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
@@ -187,6 +169,10 @@ export default function ChatBox(props: Props) {
       setIsMessageText(false);
       window.raven?.sendDirectMessage(receiverPubKey, message);
     }
+    if (isUserFromSearch && receiverPubKey) {
+      window.raven?.addDirectContact(receiverPubKey);
+      setIsUserFromSearch(false);
+    }
   };
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
@@ -202,28 +188,18 @@ export default function ChatBox(props: Props) {
     setIsScrollToBottom(isScrollToBottom);
   };
 
-  const ScrollerClicked = () => {
+  const scrollerClicked = () => {
     chatBodyDivRef?.current?.scrollTo({
       top: isCurrentUser ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "smooth"
     });
   };
 
-  // const scrollToBottomClicked = () => {
-  //   console.log("Scroll to bottom clicked");
-  //   chatBodyDivRef?.current?.scrollTo({
-  //     top: chatBodyDivRef?.current?.scrollHeight+10,
-  //     behavior: "smooth"
-  //   });
-  // };
-
-  // const scrollToTopClicked = () => {
-  //   console.log("Scroll to top clicked");
-  //   chatBodyDivRef?.current?.scrollTo({
-  //     top: 0,
-  //     behavior: "smooth"
-  //   });
-  // };
+  const scrollToBottom = () => {
+    chatBodyDivRef?.current?.scrollTo({
+      top: chatBodyDivRef?.current?.scrollHeight
+    });
+  };
 
   const handleMessageSvgClick = () => {
     setShowSearchUser(true);
@@ -240,31 +216,49 @@ export default function ChatBox(props: Props) {
     setInProgress(false);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    // window.raven?.updateProfile({ name: activeUser?.username!, about: "", picture: "" });
+    window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
   };
 
   const chatButtonSpinner = (
     <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
   );
 
+  const getFormattedDateAndDay = (msg: DirectMessage, i: number) => {
+    const prevMsg = messagesList[i - 1];
+    const msgDate = formatMessageDate(msg.created);
+    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+    if (msgDate !== prevMsgDate) {
+      return (
+        <div className="custom-divider">
+          <span className="line"></span>
+          <span className="custom-divider-text">{msgDate}</span>
+          <span className="line"></span>
+        </div>
+      );
+    }
+    return <></>;
+  };
+
   return (
     <>
       {show && (
         <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
           <div className="chat-header">
             {currentUser && expanded && (
-              <div className="back-arrow-image">
-                <span
-                  className="back-arrow-svg"
-                  onClick={() => {
-                    setCurrentUser("");
-                    setIsCurrentUser(false);
-                  }}
-                >
-                  {" "}
-                  {arrowBackSvg}
-                </span>
-              </div>
+              <Tooltip content={_t("chat.back")}>
+                <div className="back-arrow-image">
+                  <span
+                    className="back-arrow-svg"
+                    onClick={() => {
+                      setCurrentUser("");
+                      setIsCurrentUser(false);
+                    }}
+                  >
+                    {" "}
+                    {arrowBackSvg}
+                  </span>
+                </div>
+              </Tooltip>
             )}
             <div className="message-title" onClick={() => setExpanded(!expanded)}>
               {currentUser && (
@@ -305,86 +299,108 @@ export default function ChatBox(props: Props) {
                 {currentUser.length !== 0 ? (
                   <>
                     <Link to={`/@${currentUser}`}>
-                      {profileData?.joiningData && (
-                        <div className="user-profile">
-                          <span className="user-logo">
-                            <UserAvatar username={currentUser} size="large" />
-                          </span>
-                          <h4 className="user-name user-logo ">{currentUser}</h4>
-                          {profileData.about && (
-                            <p className="about user-logo ">{profileData.about}</p>
-                          )}
-
-                          <div className="created-date user-logo joining-info">
-                            <p>
-                              {" "}
-                              {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
-                            </p>
-                            <p className="followers">
-                              {" "}
-                              {formatFollowers(profileData!.followers)} {_t("chat.followers")}
-                            </p>
+                      <div className="user-profile">
+                        {profileData?.joiningData && (
+                          <div className="user-profile-data">
+                            <span className="user-logo">
+                              <UserAvatar username={currentUser} size="large" />
+                            </span>
+                            <h4 className="user-name user-logo ">{currentUser}</h4>
+                            {profileData.about && (
+                              <p className="about user-logo ">{profileData.about}</p>
+                            )}
+
+                            <div className="created-date user-logo joining-info">
+                              <p>
+                                {" "}
+                                {_t("chat.joined")}{" "}
+                                {dateToFormatted(profileData!.joiningData, "LL")}
+                              </p>
+                              <p className="followers">
+                                {" "}
+                                {formatFollowers(profileData!.followers)} {_t("chat.followers")}
+                              </p>
+                            </div>
                           </div>
-                        </div>
-                      )}
+                        )}
+                      </div>
                     </Link>
                     <div className="chats">
-                      {messagesList.map((msg) => {
-                        if (msg.creator !== senderPubKey) {
+                      {receiverPubKey === null || receiverPubKey === undefined ? (
+                        <p className="not-joined">{_t("chat.not-joined")}</p>
+                      ) : (
+                        <>
+                          {messagesList.map((msg, i) => {
+                            const dayAndMonth = getFormattedDateAndDay(msg, i);
+
+                            return (
+                              <React.Fragment key={msg.id}>
+                                {dayAndMonth}
+                                {msg.creator !== activeUserKeys?.pub ? (
+                                  <div key={msg.id} className="message">
+                                    <div className="user-img">
+                                      <Link to={`/@${currentUser}`}>
+                                        <span>
+                                          <UserAvatar username={currentUser} size="medium" />
+                                        </span>
+                                      </Link>
+                                    </div>
+                                    <div className="user-info">
+                                      <p className="user-msg-time">
+                                        {formatMessageTime(msg.created)}
+                                      </p>
+                                      <p className="receiver-message-content">{msg.content}</p>
+                                    </div>
+                                  </div>
+                                ) : (
+                                  <div key={msg.id} className="sender">
+                                    <p className="sender-message-time">
+                                      {formatMessageTime(msg.created)}
+                                    </p>
+                                    <div className="sender-message">
+                                      <p className="sender-message-content">{msg.content}</p>
+                                    </div>
+                                  </div>
+                                )}
+                              </React.Fragment>
+                            );
+                          })}
+                        </>
+                      )}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    {chat.directContacts.length !== 0 ? (
+                      <React.Fragment>
+                        {chat.directContacts.map((user: DirectContactsType) => {
                           return (
-                            <>
-                              {/* <div key={msg.username} className="date-time-detail">
-                                <p className="date-time">
-                                  {msg.date}, {msg.time}
-                                </p>
-                              </div> */}
-                              <div key={msg.id} className="message">
+                            <div key={user.creator} className="chat-content">
+                              <Link to={`/@${user.name}`}>
                                 <div className="user-img">
-                                  <Link to={`/@${currentUser}`}>
-                                    <span>
-                                      <UserAvatar username={currentUser} size="medium" />
-                                    </span>
-                                  </Link>
+                                  <span>
+                                    <UserAvatar username={user.name} size="medium" />
+                                  </span>
                                 </div>
-                                <div className="user-info">
-                                  <p className="receiver-message-content">{msg.content}</p>
-                                </div>
-                              </div>
-                            </>
-                          );
-                        } else {
-                          return (
-                            <div key={msg.id} className="sender">
-                              <div className="sender-message">
-                                {/* <span className="sender-message-time">{msg.time}</span> */}
-                                <p className="sender-message-content">{msg.content}</p>
+                              </Link>
+
+                              <div className="user-title" onClick={() => userClicked(user.name)}>
+                                <p className="username">{user.name}</p>
                               </div>
                             </div>
                           );
-                        }
-                      })}
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {chat.directContacts.map((user: DirectContactsType) => {
-                      return (
-                        <div key={user.creator} className="chat-content">
-                          <Link to={`/@${user.name}`}>
-                            <div className="user-img">
-                              <span>
-                                <UserAvatar username={user.name} size="medium" />
-                              </span>
-                            </div>
-                          </Link>
-
-                          <div className="user-title" onClick={() => userClicked(user.name)}>
-                            <p className="username">{user.name}</p>
-                            {/* <p className="last-message">{user.lastMessage}</p> */}
-                          </div>
+                        })}
+                      </React.Fragment>
+                    ) : (
+                      <React.Fragment>
+                        <p className="no-chat">{_t("chat.no-chat")}</p>
+                        <div className="start-chat-btn">
+                          <Button variant="primary" onClick={() => setShowSearchUser(true)}>
+                            {_t("chat.start-chat")}
+                          </Button>
                         </div>
-                      );
-                    })}
+                      </React.Fragment>
+                    )}
                   </>
                 )}
               </>
@@ -402,14 +418,14 @@ export default function ChatBox(props: Props) {
                 <div
                   className="scroller"
                   style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
-                  onClick={ScrollerClicked}
+                  onClick={scrollerClicked}
                 >
                   {isCurrentUser ? chevronDownSvgForSlider : chevronUpSvg}
                 </div>
               </Tooltip>
             )}
           </div>
-
+          {showSpinner && <LinearProgress />}
           {currentUser && (
             <div className="chat">
               <Form
@@ -421,7 +437,6 @@ export default function ChatBox(props: Props) {
               >
                 <InputGroup className="chat-input-group">
                   <Form.Control
-                    as="textarea"
                     value={message}
                     onChange={handleMessage}
                     required={true}
@@ -429,6 +444,10 @@ export default function ChatBox(props: Props) {
                     placeholder={_t("chat.start-chat-placeholder")}
                     autoComplete="off"
                     className="chat-input"
+                    style={{ maxWidth: "100%", overflowWrap: "break-word" }}
+                    disabled={
+                      showSpinner || receiverPubKey === null || receiverPubKey === undefined
+                    }
                   />
                   <InputGroup.Append
                     className={`msg-svg ${isMessageText ? "active" : ""}`}
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index fefdbfe8ca3..ee0ad3314d5 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -36,10 +36,12 @@ import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission, revokePostingPermission } from "../../api/operations";
 
 import { getRefreshToken } from "../../helper/user-token";
+import { getProfileMetaData } from "../../helper/chat-utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 
 import { addAccountAuthority, removeAccountAuthority, signBuffer } from "../../helper/keychain";
+import { setNostrkeys } from "../../../providers/message-provider";
 
 import { _t } from "../../i18n";
 import _c from "../../util/fix-class-names";
@@ -731,6 +733,7 @@ interface Props {
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
+  resetChat: () => void;
 }
 
 class LoginDialog extends Component<Props> {
@@ -749,7 +752,9 @@ class LoginDialog extends Component<Props> {
   }
 
   doLogin = async (hsCode: string, postingKey: null | undefined | string, account: Account) => {
-    const { global, setActiveUser, updateActiveUser, addUser } = this.props;
+    const profile = await getProfileMetaData(account.name);
+
+    const { global, setActiveUser, updateActiveUser, addUser, resetChat } = this.props;
 
     // get access token from code
     return hsTokenRenew(hsCode).then((x) => {
@@ -764,6 +769,11 @@ class LoginDialog extends Component<Props> {
       // add / update user data
       addUser(user);
 
+      //reset the already stored chat
+      resetChat();
+
+      //create new raven instance for newly logged in user
+      setNostrkeys(profile.noStrKey);
       // activate user
       setActiveUser(user.username);
 
@@ -817,7 +827,8 @@ export default ({ history }: Pick<Props, "history">) => {
     setActiveUser,
     updateActiveUser,
     deleteUser,
-    toggleUIProp
+    toggleUIProp,
+    resetChat
   } = useMappedStore();
   const location = useLocation();
 
@@ -829,6 +840,7 @@ export default ({ history }: Pick<Props, "history">) => {
       ui={ui}
       users={users}
       activeUser={activeUser}
+      resetChat={resetChat}
       addUser={addUser}
       setActiveUser={setActiveUser}
       updateActiveUser={updateActiveUser}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 591115b9e03..9019059a61a 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -1,6 +1,6 @@
-import { useMemo } from "react";
+import moment from "moment";
 import { generatePrivateKey, getPublicKey } from "../../lib/nostr-tools/keys";
-import { Channel, DirectMessage } from "../../providers/message-provider-types";
+import { DirectMessage } from "../../providers/message-provider-types";
 import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
 import { ActiveUser } from "../store/active-user/types";
@@ -43,15 +43,6 @@ export function notEmpty<TValue>(value: TValue | null | undefined): value is TVa
   return value !== null && value !== undefined;
 }
 
-export const GLOBAL_CHAT: Channel = {
-  id: "f412192fdc846952c75058e911d37a7392aa7fd2e727330f4344badc92fb8a22",
-  name: "Global Chat",
-  about: "Whatever you want it to be, just be nice",
-  picture: "",
-  creator: "aea59833635dd0868bc7cf923926e51df936405d8e6a753b78038981c75c4a74",
-  created: 1678198928
-};
-
 export const getDirectMessages = (messages: DirectMessage[], peer?: string) => {
   const clean = messages.filter((x) => x.peer === peer).sort((a, b) => a.created - b.created);
 
@@ -59,3 +50,7 @@ export const getDirectMessages = (messages: DirectMessage[], peer?: string) => {
     .map((c) => ({ ...c, children: clean.filter((x) => x.root === c.id) }))
     .filter((x) => !x.root);
 };
+
+export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
+
+export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index 48ceb9362d6..f3cea0cff6f 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -1,31 +1,7 @@
-import { useMappedStore } from "./../store/use-mapped-store";
-// import { Event, Filter, getEventHash, Kind, nip04, signEvent, SimplePool, Sub } from "nostr-tools";
-// import { TypedEventEmitter } from "raven/helper/event-emitter";
-// import {
-//   Channel,
-//   ChannelMessageHide,
-//   ChannelUpdate,
-//   ChannelUserMute,
-//   DirectMessage,
-//   EventDeletion,
-//   Keys,
-//   Metadata,
-//   MuteList,
-//   Profile,
-//   PublicMessage
-// } from "types";
-// import chunk from 'lodash.chunk';
-// import uniq from 'lodash.uniq';
-// import {getRelays} from 'helper';
-// import {GLOBAL_CHAT, MESSAGE_PER_PAGE} from 'const';
-// import {notEmpty} from 'util/misc';
-
 import { Sub } from "../../lib/nostr-tools/relay";
 import { Kind } from "../../lib/nostr-tools/event";
 import { Filter } from "../../lib/nostr-tools/filter";
 import { TypedEventEmitter } from "./message-event-emitter";
-import uniq from "lodash";
-import chunk from "lodash";
 import {
   Channel,
   ChannelMessageHide,
@@ -42,9 +18,7 @@ import {
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
 import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
-import { getDirectMessages, GLOBAL_CHAT, notEmpty } from "./chat-utils";
-import * as ls from "../util/local-storage";
-// import { addDirectContacts } from "../store/chat";
+import { notEmpty } from "./chat-utils";
 
 const relays = {
   "wss://relay1.nostrchat.io": { read: true, write: true },
@@ -54,10 +28,6 @@ const relays = {
   "wss://nos.lol": { read: true, write: true }
 };
 
-enum NewKinds {
-  MuteList = 10000
-}
-
 export enum RavenEvents {
   Ready = "ready",
   ProfileUpdate = "profile_update",
@@ -98,6 +68,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   private eventQueueTimer: any;
   private eventQueueFlag = true;
   private eventQueueBuffer: Event[] = [];
+  public directContacts: string[] = [];
 
   private nameCache: Record<string, number> = {};
 
@@ -117,23 +88,15 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   }
 
   private async init() {
+    this.eventQueue = [];
+    this.eventQueueFlag = true;
+    this.eventQueueBuffer = [];
+
     const filters: Filter[] = [
       {
         kinds: [Kind.Metadata],
         authors: [this.pub]
       },
-      // {
-      //   kinds: [Kind.ChannelHideMessage, Kind.ChannelMuteUser],
-      //   authors: [this.pub]
-      // },
-      // {
-      //   kinds: [NewKinds.MuteList],
-      //   authors: [this.pub]
-      // },
-      // {
-      //   kinds: [Kind.ChannelMessage],
-      //   authors: [this.pub]
-      // },
       {
         kinds: [Kind.EncryptedDirectMessage],
         authors: [this.pub]
@@ -144,40 +107,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       }
     ];
     this.fetchP(filters).then((resp) => {
-      console.log("Init called", resp);
-      // console.log("ddd", addDirectContacts);
-      // // const deletions = resp
-      //   .filter((x) => x.kind === Kind.EventDeletion)
-      //   .map((x) => Raven.findTagValue(x, "e"));
       const events = resp.sort((a, b) => b.created_at - a.created_at);
       const profile = events.find((x) => x.kind === Kind.Metadata);
-      console.log(profile, "profile in init");
-      if (profile) this.pushToEventBuffer(profile, "init");
-      // const muteList = events.find((x) => x.kind.toString() === NewKinds.MuteList.toString());
-      // if (muteList) this.pushToEventBuffer(muteList, "init");
-      // for (const e of events.filter((x) =>
-      //   [Kind.ChannelHideMessage, Kind.ChannelMuteUser].includes(x.kind)
-      // )) {
-      //   this.pushToEventBuffer(e, "init");
-      // }
-      // const channels = uniq(
-      //   events
-      //     .map((x) => {
-      //       if (x.kind === Kind.ChannelCreation) {
-      //         return x.id;
-      //       }
-      //       if (x.kind === Kind.ChannelMessage) {
-      //         return Raven.findTagValue(x, "e");
-      //       }
-      //       return undefined;
-      //     })
-      //     .filter((x) => !deletions.includes(x))
-      //     .filter(notEmpty)
-      // );
-      // if (!channels.includes(GLOBAL_CHAT.id)) {
-      //   channels.push(GLOBAL_CHAT.id);
-      // }
-      // console.log(events, "Events");
+      if (profile) this.pushToEventBuffer(profile);
       const directContacts = Array.from(
         new Set(
           events.map((x) => {
@@ -191,32 +123,8 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
         )
       ).filter(notEmpty);
 
-      // directContacts.map((p)=> {
-      //   console.log("p",p);
-      //   const profile =
-      // })
-      // directContacts.map(p => {
-      //   console.log(p)
-      //   // .filter((x) => x.kind === Kind.Metadata)
-      //   // const profile = profiles.find(x => x.creator === p.pub);
-      //   // const label = profile?.name || truncateMiddle(p.npub, 28, ':');
-      //   // const isSelected = p.pub === directMessage && location.pathname.startsWith('/dm/');
-      // )}
-
-      console.log("directContacts", directContacts);
-      // ls.set("direct_contacts", directContacts);
-
-      // addDirectContacts([
-      //   "0be16d2d36570b96080c0f9c351feb6be515a182b8b75b90738ae0180c27c6d5",
-      //   "1331c42d27e2a043ea5f478301a41ff4bab6c70bbb73f4edbf82a6756a7f51dd"
-      // ]);
-
-      // this.fetch([
-      //   {
-      //     kinds: [Kind.Metadata],
-      //     authors: directContacts
-      //   }
-      // ]);
+      this.directContacts.push(...directContacts);
+
       const filters: Filter[] = [
         {
           kinds: [Kind.Metadata],
@@ -237,38 +145,27 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
         this.fetch([c]);
       });
       this.emit(RavenEvents.Ready);
-
-      // let directMessages = getDirectMessages(events as DirectMessage[],)
     });
   }
 
-  // public fetchPrevMessages(channel: string, until: number) {
-  //   return this.fetchP(
-  //     [
-  //       {
-  //         kinds: [Kind.ChannelMessage],
-  //         "#e": [channel],
-  //         until,
-  //         limit: MESSAGE_PER_PAGE
-  //       }
-  //     ],
-  //     true
-  //   ).then((events) => {
-  //     events.forEach((ev) => {
-  //       this.pushToEventBuffer(ev);
-  //     });
-
-  //     return events.length;
-  //   });
-  // }
+  public addDirectContact(directContact: string) {
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.Metadata],
+        authors: [directContact]
+      }
+    ];
+    this.directContacts.push(directContact);
+    filters.forEach((c) => {
+      this.fetch([c]);
+    });
+  }
 
   private fetch(filters: Filter[], unsub: boolean = true) {
-    console.log("Fetch Calledd", filters);
-
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      this.pushToEventBuffer(event, "fetch");
+      this.pushToEventBuffer(event);
     });
 
     sub.on("eose", () => {
@@ -296,70 +193,6 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     });
   }
 
-  public loadChannel(id: string) {
-    // console.log("Load channel called");
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.ChannelCreation],
-        ids: [id]
-      },
-      {
-        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": [id]
-      },
-      {
-        kinds: [Kind.ChannelMessage],
-        "#e": [id],
-        limit: 30
-      }
-    ];
-
-    this.fetch(filters);
-  }
-
-  // public loadProfiles(pubs: string[]) {
-  //   console.log("pubs", pubs);
-  //   const authors = Array.from(new Set(pubs)).filter((p) => this.nameCache[p] === undefined);
-  //   console.log(authors, "authors");
-  //   if (authors.length === 0) {
-  //     return;
-  //   }
-  //   authors.forEach((a) => (this.nameCache[a] = Date.now()));
-
-  //   const batchSize = 20; // Number of authors to process in each batch
-
-  //   for (let i = 0; i < authors.length; i += batchSize) {
-  //     const batch = authors.slice(i, i + batchSize);
-
-  //     this.fetch([
-  //       {
-  //         kinds: [Kind.Metadata],
-  //         authors: batch
-  //       }
-  //     ]);
-  //   }
-
-  // }
-
-  // public loadProfiles(pubs: string[]) {
-  //   console.log(pubs, "pubs");
-  //   const authors = Array.from(new Set(pubs)).filter((p) => this.nameCache[p] === undefined);
-  //   console.log(authors, "authors");
-  //   if (authors.length === 0) {
-  //     return;
-  //   }
-  //   authors.forEach((a) => (this.nameCache[a] = Date.now()));
-
-  //   authors.forEach((a) => {
-  //     this.fetch([
-  //       {
-  //         kinds: [Kind.Metadata],
-  //         authors: [a]
-  //       }
-  //     ]);
-  //   });
-  // }
-
   public listen(since: number) {
     if (this.listenerSub) {
       this.listenerSub.unsub();
@@ -381,23 +214,6 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     );
   }
 
-  listenMessages = (ids: string[]) => {
-    // console.log("Listen messages called");
-    if (this.messageListenerSub) {
-      this.messageListenerSub.unsub();
-    }
-
-    this.messageListenerSub = this.fetch(
-      [
-        {
-          kinds: [Kind.EventDeletion, Kind.ChannelMessage, Kind.Reaction],
-          "#e": ids
-        }
-      ],
-      false
-    );
-  };
-
   private async findHealthyRelay(relays: string[]) {
     for (const relay of relays) {
       try {
@@ -410,39 +226,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    // console.log("Update profile run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
-  // public async createChannel(meta: Metadata) {
-  //   return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
-  // }
-
-  // public async updateChannel(channel: Channel, meta: Metadata) {
-  //   return this.findHealthyRelay(this.pool.seenOn(channel.id)).then((relay) => {
-  //     return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
-  //   });
-  // }
-
-  // public async deleteEvents(ids: string[], why: string = "") {
-  //   return this.publish(Kind.EventDeletion, [...ids.map((id) => ["e", id])], why);
-  // }
-
-  // public async sendPublicMessage(
-  //   channel: Channel,
-  //   message: string,
-  //   mentions?: string[],
-  //   parent?: string
-  // ) {
-  //   const root = parent || channel.id;
-  //   const relay = await this.findHealthyRelay(this.pool.seenOn(root));
-  //   const tags = [["e", root, relay, "root"]];
-  //   if (mentions) {
-  //     mentions.forEach((m) => tags.push(["p", m]));
-  //   }
-  //   return this.publish(Kind.ChannelMessage, tags, message);
-  // }
-
   public async sendDirectMessage(toPubkey: string, message: string, parent?: string) {
     const encrypted = await (this.priv === "nip07"
       ? window.nostr!.nip04.encrypt(toPubkey, message)
@@ -452,40 +238,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       const relay = await this.findHealthyRelay(this.pool.seenOn(parent) as string[]);
       tags.push(["e", parent, relay, "root"]);
     }
-    // this.emit(RavenEvents.DirectMessage, [
-    //   {
-    //     id: "7a6c0db898ee043045f21fa49c5fd4b0765b506d84cb8d71539ba4cb37292040",
-    //     content: "HYYYYYyyyy",
-    //     peer: "1331c42d27e2a043ea5f478301a41ff4bab6c70bbb73f4edbf82a6756a7f51dd",
-    //     creator: "7379e436f673358cdbf4f0d52ef5240c82d802755295b53182b107f41e9f43e5",
-    //     created: 1686567232,
-    //     decrypted: true
-    //   }
-    // ]);
-    // console.log("Event is emitted");
     return this.publish(Kind.EncryptedDirectMessage, tags, encrypted);
   }
 
-  // public async recommendRelay(relay: string) {
-  //   return this.publish(Kind.RecommendRelay, [], relay);
-  // }
-
-  // public async hideChannelMessage(id: string, reason: string) {
-  //   return this.publish(Kind.ChannelHideMessage, [["e", id]], JSON.stringify({ reason }));
-  // }
-
-  // public async muteChannelUser(pubkey: string, reason: string) {
-  //   return this.publish(Kind.ChannelMuteUser, [["p", pubkey]], JSON.stringify({ reason }));
-  // }
-
-  // public async updateMuteList(userIds: string[]) {
-  //   const list = [...userIds.map((id) => ["p", id])];
-  //   const content = await (this.priv === "nip07"
-  //     ? window.nostr!.nip04.encrypt(this.pub, JSON.stringify(list))
-  //     : nip04.encrypt(this.priv, this.pub, JSON.stringify(list)));
-  //   return this.publish(NewKinds.MuteList, [], content);
-  // }
-
   private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
     return new Promise((resolve, reject) => {
       this.signEvent({
@@ -504,7 +259,6 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
           }
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
-            console.log("My event is okkkkkkkkkkkkkkkkkkkkkkk", event);
             resolve(event);
           });
 
@@ -530,8 +284,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     }
   }
 
-  pushToEventBuffer(event: Event, from: string) {
-    console.log("Push to event buffer called frommmmmmmmmm", from);
+  pushToEventBuffer(event: Event) {
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {
@@ -569,90 +322,15 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
           : null;
       })
       .filter(notEmpty);
+
+    const directContacts = profileUpdates.filter((obj) =>
+      this.directContacts.includes(obj.creator)
+    );
+
     if (profileUpdates.length > 0) {
-      this.emit(RavenEvents.ProfileUpdate, profileUpdates);
+      this.emit(RavenEvents.ProfileUpdate, directContacts);
     }
 
-    // const channelCreations: Channel[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.ChannelCreation)
-    //   .map((ev) => {
-    //     const content = Raven.parseJson(ev.content);
-    //     return content
-    //       ? {
-    //           id: ev.id,
-    //           creator: ev.pubkey,
-    //           created: ev.created_at,
-    //           ...Raven.normalizeMetadata(content)
-    //         }
-    //       : null;
-    //   })
-    //   .filter(notEmpty);
-    // if (channelCreations.length > 0) {
-    //   this.emit(RavenEvents.ChannelCreation, channelCreations);
-    // }
-
-    // const channelUpdates: ChannelUpdate[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.ChannelMetadata)
-    //   .map((ev) => {
-    //     const content = Raven.parseJson(ev.content);
-    //     const channelId = Raven.findTagValue(ev, "e");
-    //     if (!channelId) return null;
-    //     return content
-    //       ? {
-    //           id: ev.id,
-    //           creator: ev.pubkey,
-    //           created: ev.created_at,
-    //           channelId,
-    //           ...Raven.normalizeMetadata(content)
-    //         }
-    //       : null;
-    //   })
-    //   .filter(notEmpty);
-    // if (channelUpdates.length > 0) {
-    //   this.emit(RavenEvents.ChannelUpdate, channelUpdates);
-    // }
-
-    // const deletions: EventDeletion[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.EventDeletion)
-    //   .map((ev) => {
-    //     const eventId = Raven.findTagValue(ev, "e");
-    //     if (!eventId) return null;
-    //     return {
-    //       eventId,
-    //       why: ev.content || ""
-    //     };
-    //   })
-    //   .filter(notEmpty)
-    //   .flat();
-    // if (deletions.length > 0) {
-    //   this.emit(RavenEvents.EventDeletion, deletions);
-    // }
-
-    // const publicMessages: PublicMessage[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.ChannelMessage)
-    //   .map((ev) => {
-    //     const eTags = Raven.filterTagValue(ev, "e");
-    //     const root = eTags.find((x) => x[3] === "root")?.[1];
-    //     const mentions = Raven.filterTagValue(ev, "p")
-    //       .map((x) => x?.[1])
-    //       .filter(notEmpty);
-    //     if (!root) return null;
-    //     return ev.content
-    //       ? {
-    //           id: ev.id,
-    //           root,
-    //           content: ev.content,
-    //           creator: ev.pubkey,
-    //           mentions,
-    //           created: ev.created_at
-    //         }
-    //       : null;
-    //   })
-    //   .filter(notEmpty);
-    // if (publicMessages.length > 0) {
-    //   this.emit(RavenEvents.PublicMessage, publicMessages);
-    // }
-
     Promise.all(
       this.eventQueue
         .filter((x) => x.kind === Kind.EncryptedDirectMessage)
@@ -690,63 +368,6 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       this.emit(RavenEvents.DirectMessage, directMessages);
     });
 
-    // const channelMessageHides: ChannelMessageHide[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.ChannelHideMessage)
-    //   .map((ev) => {
-    //     const content = Raven.parseJson(ev.content);
-    //     const id = Raven.findTagValue(ev, "e");
-    //     if (!id) return null;
-    //     return {
-    //       id,
-    //       reason: content?.reason || ""
-    //     };
-    //   })
-    //   .filter(notEmpty);
-    // if (channelMessageHides.length > 0) {
-    //   this.emit(RavenEvents.ChannelMessageHide, channelMessageHides);
-    // }
-
-    // const channelUserMutes: ChannelUserMute[] = this.eventQueue
-    //   .filter((x) => x.kind === Kind.ChannelMuteUser)
-    //   .map((ev) => {
-    //     const content = Raven.parseJson(ev.content);
-    //     const pubkey = Raven.findTagValue(ev, "p");
-    //     if (!pubkey) return null;
-    //     return {
-    //       pubkey,
-    //       reason: content?.reason || ""
-    //     };
-    //   })
-    //   .filter(notEmpty);
-    // if (channelUserMutes.length > 0) {
-    //   this.emit(RavenEvents.ChannelUserMute, channelUserMutes);
-    // }
-
-    // const muteListEv = this.eventQueue
-    //   .filter((x) => x.kind.toString() === NewKinds.MuteList.toString())
-    //   .sort((a, b) => b.created_at - a.created_at)[0];
-
-    // if (muteListEv) {
-    //   const visiblePubkeys = Raven.filterTagValue(muteListEv, "p").map((x) => x?.[1]);
-
-    //   if (muteListEv.content !== "" && this.priv !== "nip07") {
-    //     decrypt(this.priv, this.pub, muteListEv.content)
-    //       .then((e) => JSON.parse(e))
-    //       .then((resp) => {
-    //         const allPubkeys = [...visiblePubkeys, ...resp.map((x: any) => x?.[1])];
-    //         this.emit(RavenEvents.MuteList, {
-    //           pubkeys: uniq(allPubkeys),
-    //           encrypted: ""
-    //         });
-    //       });
-    //   } else {
-    //     this.emit(RavenEvents.MuteList, {
-    //       pubkeys: visiblePubkeys,
-    //       encrypted: muteListEv.content.trim()
-    //     });
-    //   }
-    // }
-
     this.eventQueue = [];
     this.eventQueueFlag = true;
   }
@@ -784,7 +405,6 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
 export default Raven;
 
 export const initRaven = (keys: Keys): Raven | undefined => {
-  console.log("Init raven run");
   if (window.raven) {
     window.raven.close();
     window.raven = undefined;
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index e64d8460c5a..d6f5d52715a 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1657,7 +1657,11 @@
     "followers": "Followers",
     "start-chat-placeholder": "Start a new message",
     "search": "Search people",
-    "join-chat": "Join chat"
+    "join-chat": "Join chat",
+    "back": "Back",
+    "no-chat": "No conversation found",
+    "start-chat": "Start chat",
+    "not-joined": "This user hasn't joined the chat yet"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index dd2d391c865..27d8a7a87f2 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -41,7 +41,7 @@ import { fetchPoints, resetPoints } from "./points";
 import { setSigningKey } from "./signing-key";
 import { setEntryPin, trackEntryPin } from "./entry-pin-tracker";
 import { savePageScroll } from "./persistent-page-scroll";
-import { addDirectContacts, addDirectMessages } from "./chat";
+import { addDirectContacts, addDirectMessages, resetChat } from "./chat";
 
 // @note Do not use it directly
 export const ACTIONS = {
@@ -92,7 +92,8 @@ export const ACTIONS = {
   fetchNotificationsSettings,
   setNotificationsSettingsItem,
   addDirectContacts,
-  addDirectMessages
+  addDirectMessages,
+  resetChat
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index be2fa23e0f0..55af8c96eb6 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -7,7 +7,8 @@ import {
   ActionTypes,
   DirectContactsAction,
   DirectContactsType,
-  DirectMessagesAction
+  DirectMessagesAction,
+  ResetChatAction
 } from "./types";
 
 export const initialState: Chat = {
@@ -19,9 +20,12 @@ export default (state: Chat = initialState, action: Actions): Chat => {
   switch (action.type) {
     case ActionTypes.DIRECTCONTACTS: {
       const { data } = action;
+      const uniqueDirectContacts = data.filter(
+        (contact) => !state.directContacts.includes(contact)
+      );
       return {
         ...state,
-        directContacts: [...state.directContacts, ...data]
+        directContacts: [...state.directContacts, ...uniqueDirectContacts]
       };
     }
     case ActionTypes.DIRECTMESSAGES: {
@@ -31,6 +35,10 @@ export default (state: Chat = initialState, action: Actions): Chat => {
         directMessages: [...state.directMessages, ...data]
       };
     }
+
+    case ActionTypes.RESET:
+      return initialState;
+
     default:
       return state;
   }
@@ -42,10 +50,12 @@ export const addDirectContacts = (data: DirectContactsType[]) => (dispatch: Disp
 };
 
 export const addDirectMessages = (data: DirectMessage[]) => (dispatch: Dispatch) => {
-  console.log("data in store", data);
   dispatch(addDirectMessagesAct(data));
 };
 
+export const resetChat = () => (dispatch: Dispatch) => {
+  dispatch(resetChatAct());
+};
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -61,3 +71,9 @@ export const addDirectMessagesAct = (data: DirectMessage[]): DirectMessagesActio
     data
   };
 };
+
+export const resetChatAct = (): ResetChatAction => {
+  return {
+    type: ActionTypes.RESET
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index ddfc443cf4a..57e6c3ddded 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -1,5 +1,4 @@
 import { DirectMessage } from "./../../../providers/message-provider-types";
-import { Account } from "../accounts/types";
 
 export interface DirectContactsType {
   name: string;
@@ -9,14 +8,12 @@ export interface DirectContactsType {
 export interface Chat {
   directContacts: DirectContactsType[];
   directMessages: DirectMessage[];
-  // points: UserPoints;
 }
 
 export enum ActionTypes {
   DIRECTCONTACTS = "@chat/DIRECTCONTACTS",
-  DIRECTMESSAGES = "@chat/DIRECTMESSAGES"
-  // LOGOUT = "@active-user/LOGOUT",
-  // UPDATE = "@active-user/UPDATE"
+  DIRECTMESSAGES = "@chat/DIRECTMESSAGES",
+  RESET = "@chat/RESET"
 }
 
 export interface DirectContactsAction {
@@ -24,18 +21,13 @@ export interface DirectContactsAction {
   data: DirectContactsType[];
 }
 
+export interface ResetChatAction {
+  type: ActionTypes.RESET;
+}
+
 export interface DirectMessagesAction {
   type: ActionTypes.DIRECTMESSAGES;
   data: DirectMessage[];
 }
-// export interface LogoutAction {
-//   type: ActionTypes.LOGOUT;
-// }
-
-// export interface UpdateAction {
-//   type: ActionTypes.UPDATE;
-//   data: Account;
-//   points: UserPoints;
-// }
 
-export type Actions = DirectContactsAction | DirectMessagesAction;
+export type Actions = DirectContactsAction | DirectMessagesAction | ResetChatAction;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index e5b823a0ea5..58daae77edf 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -1,52 +1,20 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { getProfileMetaData, GLOBAL_CHAT, NostrKeys } from "../common/helper/chat-utils";
-import { ActiveUser } from "../common/store/active-user/types";
-// import uniq from 'lodash.uniq';
-// import {nip19} from 'nostr-tools';
+import React, { useEffect, useState } from "react";
 
-// import {
-//     channelsAtom,
-//     channelUpdatesAtom,
-//     directContactsAtom,
-//     directMessagesAtom,
-//     eventDeletionsAtom,
-//     keysAtom,
-//     profileAtom,
-//     profilesAtom,
-//     publicMessagesAtom,
-//     ravenAtom,
-//     ravenReadyAtom,
-//     channelMessageHidesAtom,
-//     channelUserMutesAtom,
-//     muteListAtom, directMessageAtom
-// } from 'store';
-import { initRaven, RavenEvents } from "../common/helper/message-helper";
-import {
-  Channel,
-  ChannelUpdate,
-  DirectMessage,
-  EventDeletion,
-  Profile,
-  PublicMessage,
-  ChannelMessageHide,
-  ChannelUserMute,
-  MuteList,
-  Keys
-} from "./message-provider-types";
-import { useMappedStore } from "../common/store/use-mapped-store";
-import { Account } from "../common/store/accounts/types";
+import { ActiveUser } from "../common/store/active-user/types";
 import { Chat, DirectContactsType } from "../common/store/chat/types";
+import { DirectMessage, Profile, Keys } from "./message-provider-types";
 
-// import {createLogger} from 'logger';
+import { initRaven, RavenEvents } from "../common/helper/message-helper";
+import { getProfileMetaData, NostrKeys } from "../common/helper/chat-utils";
 
-// const logger = createLogger('RavenProvider');
+import { useMappedStore } from "../common/store/use-mapped-store";
 
 export const setNostrkeys = (keys: NostrKeys) => {
   const detail: NostrKeys = {
     pub: keys.pub,
     priv: keys.priv
   };
-  const ev = new CustomEvent("keysCreated", { detail });
+  const ev = new CustomEvent("createRavenInstance", { detail });
   window.dispatchEvent(ev);
 };
 
@@ -58,33 +26,17 @@ interface Props {
 }
 
 const MessageProvider = (props: Props) => {
-  // console.log(props.addDirectMessages, "MessageProvider")
   const { activeUser } = useMappedStore();
   const [ravenReady, setRavenReady] = useState(false);
-  // const [profile, setProfile] = useAtom(profileAtom);
-  // const [profiles, setProfiles] = useAtom(profilesAtom);
-  // const [channels, setChannels] = useAtom(channelsAtom);
-  // const [channelUpdates, setChannelUpdates] = useAtom(channelUpdatesAtom);
-  // const [eventDeletions, setEventDeletions] = useAtom(eventDeletionsAtom);
-  // const [publicMessages, setPublicMessages] = useAtom(publicMessagesAtom);
-  // const [directMessages, setDirectMessages] = useAtom(directMessagesAtom);
-  // const [directMessage,] = useAtom(directMessageAtom);
-  // const [channelMessageHides, setChannelMessageHides] = useAtom(channelMessageHidesAtom);
-  // const [channelUserMutes, setChannelUserMutes] = useAtom(channelUserMutesAtom);
-  // const [muteList, setMuteList] = useAtom(muteListAtom);
-  // const [, setDirectContacts] = useAtom(directContactsAtom);
   const [since, setSince] = useState<number>(0);
   const [keys, setKeys] = useState<Keys>();
   const [raven, setRaven] = useState<any>();
 
-  // const ravenInstance = useMemo(() => initRaven(keys!), [keys]);
-  // setRaven(ravenInstance);
-
   useEffect(() => {
-    window.addEventListener("keysCreated", createRavenInstance);
+    window.addEventListener("createRavenInstance", createRavenInstance);
 
     return () => {
-      window.removeEventListener("keysCreated", createRavenInstance);
+      window.removeEventListener("createRavenInstance", createRavenInstance);
     };
   }, []);
 
@@ -95,13 +47,6 @@ const MessageProvider = (props: Props) => {
     }
   }, [keys]);
 
-  // useEffect(() => {
-  //   console.log(raven);
-  //   if(raven){
-  //     raven?.updateProfile({name:activeUser?.username, about: "", picture: ""});
-  //   }
-  // }, [raven]);
-
   useEffect(() => {
     if (activeUser) {
       getNostrKeys(activeUser);
@@ -136,33 +81,6 @@ const MessageProvider = (props: Props) => {
     };
   }, [since, ravenReady, raven]);
 
-  // // Trigger listen once the window visibility changes.
-  // const visibilityChange = () => {
-  //   if (document.visibilityState === "visible") {
-  //     raven?.listen(
-  //       channels.map((x) => x.id),
-  //       Math.floor((since || Date.now()) / 1000)
-  //     );
-  //     setSince(Date.now());
-  //   }
-  // };
-  // useEffect(() => {
-  //   document.addEventListener("visibilitychange", visibilityChange);
-
-  //   return () => {
-  //     document.removeEventListener("visibilitychange", visibilityChange);
-  //   };
-  // }, [since, ravenReady, raven, channels]);
-
-  // useEffect(() => {
-  //   setDirectContacts(
-  //     [...new Set(directMessages.map((x) => x.peer))].map((p) => ({
-  //       pub: p,
-  //       npub: nip19.npubEncode(p)
-  //     }))
-  //   );
-  // }, [directMessages]);
-
   // // Ready state handler
   const handleReadyState = () => {
     setRavenReady(true);
@@ -177,47 +95,15 @@ const MessageProvider = (props: Props) => {
     };
   }, [ravenReady, raven]);
 
-  // // Event deletion handler
-  // const handleEventDeletion = (data: EventDeletion[]) => {
-  //   logger.info("handleEventDeletion", data);
-  //   const append = data.filter(
-  //     (x) => eventDeletions.find((y) => y.eventId === x.eventId) === undefined
-  //   );
-  //   setEventDeletions([...eventDeletions, ...append]);
-  // };
-
-  // useEffect(() => {
-  //   raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
-  //   raven?.addListener(RavenEvents.EventDeletion, handleEventDeletion);
-
-  //   return () => {
-  //     raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
-  //   };
-  // }, [raven, eventDeletions]);
-
   // // Direct message handler
   const handleDirectMessage = (data: DirectMessage[]) => {
-    console.log("handleDirectMessage", data);
-    console.log(props.chat.directMessages);
     const append = data.filter(
       (x) => props.chat.directMessages.find((y) => y.id === x.id) === undefined
     );
-    // console.log("append", [...props.chat.directMessages, ...append]);
 
     const result = [...props.chat.directMessages, ...append];
-    // console.log(result, 'result')
-    // raven?.loadProfiles(data.map((x) => x.peer));
-    props.addDirectMessages(result);
-    // const clean = data
-    //   .filter((x) => x.peer === "ad2b87073a67f664621c92dbc925f3d1be3e4df64968fdeb4d15c6736ef42300")
-    //   .sort((a, b) => a.created - b.created);
-
-    // console.log(clean, "clean");
-    // const finalData = clean
-    //   .map((c) => ({ ...c, children: clean.filter((x) => x.root === c.id) }))
-    //   .filter((x) => !x.root);
 
-    // console.log(finalData, "finalData");
+    props.addDirectMessages(result);
   };
 
   useEffect(() => {
@@ -229,24 +115,18 @@ const MessageProvider = (props: Props) => {
   }, [raven]);
 
   const handleProfileUpdate = (data: Profile[]) => {
-    // console.log("handleProfileData", data);
-    // console.log("Store state", props.chat.directContacts);
-
     const result = [...props.chat.directContacts];
-    const activeUserName = props.activeUser?.username;
 
     data.forEach(({ name, creator }) => {
       const isPresent = props.chat.directContacts.some(
         (obj) => obj.name === name && obj.creator === creator
       );
-      const isCurrentUser = name === activeUserName;
-      if (!isPresent && !isCurrentUser) {
-        // Add the object to the result array if it's not already present in store state.
+      if (!isPresent) {
+        //Add the object to the result array if it's not already present in store state.
         result.push({ name, creator });
       }
     });
 
-    // console.log("result", result);
     props.addDirectContacts(result);
   };
 
@@ -258,42 +138,6 @@ const MessageProvider = (props: Props) => {
     };
   }, [raven]);
 
-  // // decrypt direct messages one by one to avoid show nip7 wallet dialog many times.
-  // useEffect(() => {
-  //   if (directMessage) {
-  //     const decrypted = directMessages
-  //       .filter((m) => m.peer === directMessage)
-  //       .find((x) => !x.decrypted);
-  //     if (decrypted) {
-  //       window.nostr?.nip04.decrypt(decrypted.peer, decrypted.content).then((content) => {
-  //         setDirectMessages(
-  //           directMessages.map((m) => {
-  //             if (m.id === decrypted.id) {
-  //               return {
-  //                 ...m,
-  //                 content,
-  //                 decrypted: true
-  //               };
-  //             }
-  //             return m;
-  //           })
-  //         );
-  //       });
-  //     }
-  //   }
-  // }, [directMessages, directMessage]);
-
-  // Init raven
-  // useEffect(() => {
-  //   return () => {
-  //     raven?.removeListener(RavenEvents.Ready, handleReadyState);
-
-  //     // raven?.removeListener(RavenEvents.EventDeletion, handleEventDeletion);
-
-  //     raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
-  //   };
-  // }, [raven]);
-
   return <>{}</>;
 };
 

From b4dc181769c3c920ab38724c34ed0d865a4c19f0 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 20 Jun 2023 14:48:32 +0500
Subject: [PATCH 012/179] Remove commented code

---
 src/client/index.tsx                        | 5 -----
 src/common/components/search-user/index.tsx | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/src/client/index.tsx b/src/client/index.tsx
index 0bb65188059..9d6a1e938e9 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -11,7 +11,6 @@ import { AppWindow } from "./window";
 import "../style/style.scss";
 import "./base-handlers";
 import { loadableReady } from "@loadable/component";
-import MessageProvider from "../providers/message-provider";
 
 declare var window: AppWindow;
 
@@ -40,9 +39,7 @@ loadableReady().then(() => {
   hydrate(
     <Provider store={store}>
       <ConnectedRouter history={history!}>
-        {/* <MessageProvider> */}
         <App />
-        {/* </MessageProvider> */}
       </ConnectedRouter>
     </Provider>,
     document.getElementById("root")
@@ -67,9 +64,7 @@ if (module.hot) {
     hydrate(
       <Provider store={store}>
         <ConnectedRouter history={history!}>
-          {/* <MessageProvider> */}
           <App />
-          {/* </MessageProvider> */}
         </ConnectedRouter>
       </Provider>,
       document.getElementById("root")
diff --git a/src/common/components/search-user/index.tsx b/src/common/components/search-user/index.tsx
index 7e830be65a8..36ef8450c44 100644
--- a/src/common/components/search-user/index.tsx
+++ b/src/common/components/search-user/index.tsx
@@ -26,10 +26,6 @@ export default function SeachUser(props: Props) {
     [searchtext]
   );
 
-  useEffect(() => {
-    setUserList(["good-karma", "good-akai", "good-ali", "good-angle", "good-bad"]);
-  }, []);
-
   const searchUserClicked = (username: string) => {
     const { setCurrentUserFromSearch, setSearchUser } = props;
     setCurrentUserFromSearch(username);
@@ -79,7 +75,6 @@ export default function SeachUser(props: Props) {
 
                 <div className="search-user-title">
                   <p className="search-username">{user}</p>
-                  {/* <p className="searc-last-message">{user}</p> */}
                 </div>
               </div>
             );

From 0f89cfb40d78a447092d435bac90b36aaa86b81d Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 21 Jun 2023 18:47:49 +0500
Subject: [PATCH 013/179] Active user can send message to himself

---
 src/common/components/chat-box/index.scss |   6 -
 src/common/components/chat-box/index.tsx  |  43 +--
 src/common/helper/chat-utils.ts           |  20 ++
 src/common/helper/message-helper.ts       |  46 ++-
 src/lib/nostr-tools/.eslintrc.json        | 145 ---------
 src/lib/nostr-tools/.gitignore            |   7 -
 src/lib/nostr-tools/.prettierrc.yaml      |  10 -
 src/lib/nostr-tools/README.md             | 192 ------------
 src/lib/nostr-tools/build.js              |  41 ---
 src/lib/nostr-tools/index.ts              |  14 -
 src/lib/nostr-tools/package.json          |  40 ---
 src/lib/nostr-tools/pool.ts               |  91 ++----
 src/lib/nostr-tools/relay.ts              | 364 +++-------------------
 src/lib/nostr-tools/tsconfig.json         |  15 -
 src/providers/message-provider.tsx        |  11 +-
 15 files changed, 177 insertions(+), 868 deletions(-)
 delete mode 100644 src/lib/nostr-tools/.eslintrc.json
 delete mode 100644 src/lib/nostr-tools/.gitignore
 delete mode 100644 src/lib/nostr-tools/.prettierrc.yaml
 delete mode 100644 src/lib/nostr-tools/README.md
 delete mode 100755 src/lib/nostr-tools/build.js
 delete mode 100644 src/lib/nostr-tools/package.json
 delete mode 100644 src/lib/nostr-tools/tsconfig.json

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 1d952569261..fd4c41bc385 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -318,12 +318,6 @@
         margin: 0 24px;
         font-size: 0.7em;
         color: $dark;
-        .line {
-          flex-grow: 1;
-          height: 1px;
-          background-color: black;
-          margin: 0 10px;
-        }
         .custom-divider-text {
           display: flex;
           justify-content: center;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 5a338be1d45..ba3fb063500 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -3,9 +3,9 @@ import { Button, Form, FormControl, InputGroup, Spinner } from "react-bootstrap"
 import { Link } from "react-router-dom";
 
 import { ActiveUser } from "../../store/active-user/types";
-import { DirectContactsType } from "../../store/chat/types";
+import { Chat, DirectContactsType } from "../../store/chat/types";
 import { DirectMessage } from "../../../providers/message-provider-types";
-import { useMappedStore } from "../../store/use-mapped-store";
+// import { useMappedStore } from "../../store/use-mapped-store";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
@@ -30,7 +30,8 @@ import {
   getDirectMessages,
   getProfileMetaData,
   NostrKeys,
-  setProfileMetaData
+  setProfileMetaData,
+  correctProfile
 } from "../../helper/chat-utils";
 import { _t } from "../../i18n";
 import { getAccountFull } from "../../api/hive";
@@ -45,6 +46,8 @@ export interface profileData {
 
 interface Props {
   activeUser: ActiveUser | null;
+  chat: Chat;
+  resetChat: () => void;
 }
 
 export default function ChatBox(props: Props) {
@@ -67,17 +70,16 @@ export default function ChatBox(props: Props) {
   const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
   const [isUserFromSearch, setIsUserFromSearch] = useState(false);
 
-  const { chat } = useMappedStore();
-
   useEffect(() => {
+    // correctProfile(props.activeUser);
     fetchProfileData();
     setShow(!!props.activeUser?.username);
   }, []);
 
   useEffect(() => {
-    const msgsList = getDirectMessages(chat.directMessages, receiverPubKey!);
+    const msgsList = getDirectMessages(props.chat.directMessages, receiverPubKey!);
     setMessagesList(msgsList);
-  }, [chat.directMessages]);
+  }, [props.chat.directMessages]);
 
   useEffect(() => {
     scrollToBottom();
@@ -92,16 +94,16 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     fetchProfileData();
     setShow(!!props.activeUser?.username);
-    const msgsList = getDirectMessages(chat.directMessages, receiverPubKey!);
+    const msgsList = getDirectMessages(props.chat.directMessages, receiverPubKey!);
     setMessagesList(msgsList);
   }, [props.activeUser]);
 
   useEffect(() => {
     if (currentUser) {
       fetchCurrentUserData();
-      const peer = chat.directContacts.find((x) => x.name === currentUser)?.creator ?? null;
+      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.creator ?? null;
       setReceiverPubKey(peer!);
-      const msgsList = getDirectMessages(chat.directMessages, peer!);
+      const msgsList = getDirectMessages(props.chat.directMessages, peer!);
       setMessagesList(msgsList);
       if (!window.raven) {
         setNostrkeys(activeUserKeys!);
@@ -132,7 +134,7 @@ export default function ChatBox(props: Props) {
       followers: response.follow_stats?.follower_count
     });
     const currentUserProfile = await getProfileMetaData(currentUser);
-    setReceiverPubKey(currentUserProfile.noStrKey?.pub);
+    setReceiverPubKey(currentUserProfile?.noStrKey?.pub);
     setShowSpinner(false);
   };
 
@@ -154,7 +156,7 @@ export default function ChatBox(props: Props) {
     setCurrentUser(username);
     setExpanded(true);
     setIsCurrentUser(true);
-    fetchCurrentUserData();
+    // fetchCurrentUserData();
     setIsUserFromSearch(true);
   };
 
@@ -183,7 +185,6 @@ export default function ChatBox(props: Props) {
       isCurrentUser &&
       element.scrollTop <= (element.scrollHeight / 100) * 50 &&
       element.scrollHeight > 700;
-
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
   };
@@ -209,14 +210,18 @@ export default function ChatBox(props: Props) {
     setShowSearchUser(d);
   };
 
-  const handleJoinChat = () => {
+  const handleJoinChat = async () => {
+    const { resetChat } = props;
     setInProgress(true);
+    resetChat();
     const keys = createNoStrAccount();
-    setProfileMetaData(props.activeUser, keys);
-    setInProgress(false);
+    await setProfileMetaData(props.activeUser, keys);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
+    // fetchProfileData();
+    setActiveUserKeys(keys);
+    setInProgress(false);
   };
 
   const chatButtonSpinner = (
@@ -230,9 +235,7 @@ export default function ChatBox(props: Props) {
     if (msgDate !== prevMsgDate) {
       return (
         <div className="custom-divider">
-          <span className="line"></span>
           <span className="custom-divider-text">{msgDate}</span>
-          <span className="line"></span>
         </div>
       );
     }
@@ -371,9 +374,9 @@ export default function ChatBox(props: Props) {
                   </>
                 ) : (
                   <>
-                    {chat.directContacts.length !== 0 ? (
+                    {props.chat.directContacts.length !== 0 ? (
                       <React.Fragment>
-                        {chat.directContacts.map((user: DirectContactsType) => {
+                        {props.chat.directContacts.map((user: DirectContactsType) => {
                           return (
                             <div key={user.creator} className="chat-content">
                               <Link to={`/@${user.name}`}>
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 9019059a61a..6ac87fdd8a1 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -20,6 +20,26 @@ export const getProfileMetaData = async (username: string) => {
   }
 };
 
+export const correctProfile = async (activeUser: ActiveUser | null) => {
+  const profile = await getProfileMetaData(activeUser?.username!);
+  delete profile.noStrKey;
+  delete profile.profile;
+  delete profile.version;
+  const response = await getAccountFull(activeUser?.username!);
+  const profileC = {
+    name: activeUser?.username,
+    about: "",
+    cover_image: "",
+    profile_image: "",
+    website: "",
+    location: "",
+    pinned: "",
+    version: 2
+  };
+  const updatedProfile = await updateProfile(response, { ...profileC });
+  console.log(updatedProfile);
+};
+
 export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: NostrKeys) => {
   const response = await getAccountFull(activeUser?.username!);
 
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index f3cea0cff6f..0c6449a9012 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -69,6 +69,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   private eventQueueFlag = true;
   private eventQueueBuffer: Event[] = [];
   public directContacts: string[] = [];
+  private isActiveUserPushed: boolean = false;
 
   private nameCache: Record<string, number> = {};
 
@@ -148,6 +149,39 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     });
   }
 
+  public loadProfiles(pubs: string[]) {
+    pubs.forEach((p) => {
+      if (!this.directContacts.includes(p)) {
+        if (p !== this.pub) {
+          this.directContacts.push(p);
+        }
+        this.fetch([
+          {
+            kinds: [Kind.Metadata],
+            authors: [p]
+          }
+        ]);
+      }
+    });
+  }
+
+  public directContactForActiveUser(event: Event) {
+    if (!this.isActiveUserPushed && !this.directContacts.includes(event.pubkey)) {
+      const activeUserProfile = {
+        id: event.id,
+        creator: event.pubkey,
+        created: event.created_at,
+        name: JSON.parse(event.content).name,
+        about: JSON.parse(event.content).about || "",
+        picture: JSON.parse(event.content).picture || ""
+      };
+
+      this.emit(RavenEvents.ProfileUpdate, [activeUserProfile]);
+      this.isActiveUserPushed = true;
+      this.directContacts.push(event.pubkey);
+    }
+  }
+
   public addDirectContact(directContact: string) {
     const filters: Filter[] = [
       {
@@ -155,10 +189,11 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
         authors: [directContact]
       }
     ];
-    this.directContacts.push(directContact);
-    filters.forEach((c) => {
-      this.fetch([c]);
-    });
+
+    if (!this.directContacts.includes(directContact) && this.pub !== directContact) {
+      this.directContacts.push(directContact);
+    }
+    this.fetch(filters);
   }
 
   private fetch(filters: Filter[], unsub: boolean = true) {
@@ -166,6 +201,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
 
     sub.on("event", (event: Event) => {
       this.pushToEventBuffer(event);
+      if (event.kind === Kind.Metadata && event.pubkey === this.pub) {
+        this.directContactForActiveUser(event);
+      }
     });
 
     sub.on("eose", () => {
diff --git a/src/lib/nostr-tools/.eslintrc.json b/src/lib/nostr-tools/.eslintrc.json
deleted file mode 100644
index faca633c5e0..00000000000
--- a/src/lib/nostr-tools/.eslintrc.json
+++ /dev/null
@@ -1,145 +0,0 @@
-{
-  "root": true,
-
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-
-  "parserOptions": {
-    "ecmaVersion": 9,
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "sourceType": "module",
-    "allowImportExportEverywhere": false
-  },
-
-  "env": {
-    "es6": true,
-    "node": true
-  },
-
-  "plugins": ["babel"],
-
-  "globals": {
-    "document": false,
-    "navigator": false,
-    "window": false,
-    "location": false,
-    "URL": false,
-    "URLSearchParams": false,
-    "fetch": false,
-    "EventSource": false,
-    "localStorage": false,
-    "sessionStorage": false
-  },
-
-  "rules": {
-    "accessor-pairs": 2,
-    "arrow-spacing": [2, { "before": true, "after": true }],
-    "block-spacing": [2, "always"],
-    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
-    "comma-dangle": 0,
-    "comma-spacing": [2, { "before": false, "after": true }],
-    "comma-style": [2, "last"],
-    "constructor-super": 2,
-    "curly": [0, "multi-line"],
-    "dot-location": [2, "property"],
-    "eol-last": 2,
-    "eqeqeq": [2, "allow-null"],
-    "generator-star-spacing": [2, { "before": true, "after": true }],
-    "handle-callback-err": [2, "^(err|error)$"],
-    "indent": 0,
-    "jsx-quotes": [2, "prefer-double"],
-    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
-    "keyword-spacing": [2, { "before": true, "after": true }],
-    "new-cap": 0,
-    "new-parens": 0,
-    "no-array-constructor": 2,
-    "no-caller": 2,
-    "no-class-assign": 2,
-    "no-cond-assign": 2,
-    "no-const-assign": 2,
-    "no-control-regex": 0,
-    "no-debugger": 0,
-    "no-delete-var": 2,
-    "no-dupe-args": 2,
-    "no-dupe-class-members": 2,
-    "no-dupe-keys": 2,
-    "no-duplicate-case": 2,
-    "no-empty-character-class": 2,
-    "no-empty-pattern": 2,
-    "no-eval": 0,
-    "no-ex-assign": 2,
-    "no-extend-native": 2,
-    "no-extra-bind": 2,
-    "no-extra-boolean-cast": 2,
-    "no-extra-parens": [2, "functions"],
-    "no-fallthrough": 2,
-    "no-floating-decimal": 2,
-    "no-func-assign": 2,
-    "no-implied-eval": 2,
-    "no-inner-declarations": [0, "functions"],
-    "no-invalid-regexp": 2,
-    "no-irregular-whitespace": 2,
-    "no-iterator": 2,
-    "no-label-var": 2,
-    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
-    "no-lone-blocks": 2,
-    "no-mixed-spaces-and-tabs": 2,
-    "no-multi-spaces": 2,
-    "no-multi-str": 2,
-    "no-multiple-empty-lines": [2, { "max": 2 }],
-    "no-native-reassign": 2,
-    "no-negated-in-lhs": 2,
-    "no-new": 0,
-    "no-new-func": 2,
-    "no-new-object": 2,
-    "no-new-require": 2,
-    "no-new-symbol": 2,
-    "no-new-wrappers": 2,
-    "no-obj-calls": 2,
-    "no-octal": 2,
-    "no-octal-escape": 2,
-    "no-path-concat": 0,
-    "no-proto": 2,
-    "no-redeclare": 2,
-    "no-regex-spaces": 2,
-    "no-return-assign": 0,
-    "no-self-assign": 2,
-    "no-self-compare": 2,
-    "no-sequences": 2,
-    "no-shadow-restricted-names": 2,
-    "no-spaced-func": 2,
-    "no-sparse-arrays": 2,
-    "no-this-before-super": 2,
-    "no-throw-literal": 2,
-    "no-trailing-spaces": 2,
-    "no-undef": 2,
-    "no-undef-init": 2,
-    "no-unexpected-multiline": 2,
-    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
-    "no-unreachable": 2,
-    "no-unused-vars": [2, { "vars": "local", "args": "none", "varsIgnorePattern": "^_" }],
-    "no-useless-call": 2,
-    "no-useless-constructor": 2,
-    "no-with": 2,
-    "one-var": [0, { "initialized": "never" }],
-    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
-    "padded-blocks": [2, "never"],
-    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
-    "semi": [2, "never"],
-    "semi-spacing": [2, { "before": false, "after": true }],
-    "space-before-blocks": [2, "always"],
-    "space-before-function-paren": 0,
-    "space-in-parens": [2, "never"],
-    "space-infix-ops": 2,
-    "space-unary-ops": [2, { "words": true, "nonwords": false }],
-    "spaced-comment": 0,
-    "template-curly-spacing": [2, "never"],
-    "use-isnan": 2,
-    "valid-typeof": 2,
-    "wrap-iife": [2, "any"],
-    "yield-star-spacing": [2, "both"],
-    "yoda": [0]
-  }
-}
diff --git a/src/lib/nostr-tools/.gitignore b/src/lib/nostr-tools/.gitignore
deleted file mode 100644
index f9940ed24f0..00000000000
--- a/src/lib/nostr-tools/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-node_modules
-dist
-yarn.lock
-package-lock.json
-.envrc
-lib
-test.html
diff --git a/src/lib/nostr-tools/.prettierrc.yaml b/src/lib/nostr-tools/.prettierrc.yaml
deleted file mode 100644
index 16c878ec925..00000000000
--- a/src/lib/nostr-tools/.prettierrc.yaml
+++ /dev/null
@@ -1,10 +0,0 @@
-semi: false
-arrowParens: avoid
-insertPragma: false
-printWidth: 80
-proseWrap: preserve
-singleQuote: true
-trailingComma: none
-useTabs: false
-jsxBracketSameLine: false
-bracketSpacing: false
diff --git a/src/lib/nostr-tools/README.md b/src/lib/nostr-tools/README.md
deleted file mode 100644
index df60942d4d4..00000000000
--- a/src/lib/nostr-tools/README.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# nostr-tools
-
-Tools for developing [Nostr](https://github.com/fiatjaf/nostr) clients.
-
-## Usage
-
-### Generating a private key and a public key
-
-```js
-import { generatePrivateKey, getPublicKey } from "nostr-tools";
-
-let sk = generatePrivateKey(); // `sk` is a hex string
-let pk = getPublicKey(sk); // `pk` is a hex string
-```
-
-### Creating, signing and verifying events
-
-```js
-import { validateEvent, verifySignature, signEvent, getEventHash, getPublicKey } from "nostr-tools";
-
-let event = {
-  kind: 1,
-  created_at: Math.floor(Date.now() / 1000),
-  tags: [],
-  content: "hello"
-};
-
-event.id = getEventHash(event.id);
-event.pubkey = getPublicKey(privateKey);
-event.sig = await signEvent(event, privateKey);
-
-let ok = validateEvent(event);
-let veryOk = await verifySignature(event);
-```
-
-### Interacting with a relay
-
-```js
-import { relayInit, generatePrivateKey, getPublicKey, getEventHash, signEvent } from "nostr-tools";
-
-const relay = relayInit("wss://relay.example.com");
-relay.connect();
-
-relay.on("connect", () => {
-  console.log(`connected to ${relay.url}`);
-});
-relay.on("error", () => {
-  console.log(`failed to connect to ${relay.url}`);
-});
-
-// let's query for an event that exists
-let sub = relay.sub([
-  {
-    ids: ["d7dd5eb3ab747e16f8d0212d53032ea2a7cadef53837e5a6c66d42849fcb9027"]
-  }
-]);
-sub.on("event", (event) => {
-  console.log("we got the event we wanted:", event);
-});
-sub.on("eose", () => {
-  sub.unsub();
-});
-
-// let's publish a new event while simultaneously monitoring the relay for it
-let sk = generatePrivateKey();
-let pk = getPublicKey(sk);
-
-let sub = relay.sub([
-  {
-    kinds: [1],
-    authors: [pk]
-  }
-]);
-
-sub.on("event", (event) => {
-  console.log("got event:", event);
-});
-
-let event = {
-  kind: 1,
-  pubkey: pk,
-  created_at: Math.floor(Date.now() / 1000),
-  tags: [],
-  content: "hello world"
-};
-event.id = getEventHash(event);
-event.sig = await signEvent(event, sk);
-
-let pub = relay.publish(event);
-pub.on("ok", () => {
-  console.log(`{relay.url} has accepted our event`);
-});
-pub.on("seen", () => {
-  console.log(`we saw the event on {relay.url}`);
-});
-pub.on("failed", (reason) => {
-  console.log(`failed to publish to {relay.url}: ${reason}`);
-});
-
-await relay.close();
-```
-
-### Querying profile data from a NIP-05 address
-
-```js
-import { nip05 } from "nostr-tools";
-
-let profile = await nip05.queryProfile("jb55.com");
-console.log(profile.pubkey);
-// prints: 32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245
-console.log(profile.relays);
-// prints: [wss://relay.damus.io]
-
-// on nodejs, install node-fetch@2 and call this first:
-nip05.useFetchImplementation(require("node-fetch"));
-```
-
-### Encoding and decoding NIP-19 codes
-
-```js
-import { nip19, generatePrivateKey, getPublicKey } from "nostr-tools";
-
-let sk = generatePrivateKey();
-let nsec = nip19.nsecEncode(sk);
-let { type, data } = nip19.decode(nsec);
-assert(type === "nsec");
-assert(data === sk);
-
-let pk = getPublicKey(generatePrivateKey());
-let npub = nip19.npubEncode(pk);
-let { type, data } = nip19.decode(npub);
-assert(type === "npub");
-assert(data === pk);
-
-let pk = getPublicKey(generatePrivateKey());
-let relays = ["wss://relay.nostr.example.mydomain.example.com", "wss://nostr.banana.com"];
-let nprofile = nip19.nprofileEncode({ pubkey: pk, relays });
-let { type, data } = nip19.decode(nprofile);
-assert(type === "nprofile");
-assert(data.pubkey === pk);
-assert(data.relays.length === 2);
-```
-
-### Encrypting and decrypting direct messages
-
-```js
-import {nip04, getPublicKey, generatePrivateKey} from 'nostr-tools'
-
-// sender
-let sk1 = generatePrivateKey()
-let pk1 = getPublicKey(sk1)
-
-// receiver
-let sk2 = generatePrivateKey()
-let pk2 = getPublicKey(sk2)
-
-// on the sender side
-let message = 'hello'
-let ciphertext = nip04.encrypt(sk1, pk2, 'hello')
-
-let event = {
-  kind: 4,
-  pubkey: pk1,
-  tags: [['p', pk2]],
-  content: ciphertext,
-  ...otherProperties
-}
-
-sendEvent(event)
-
-// on the receiver side
-sub.on('event', (event) => {
-  let sender = event.tags.find(([k, v]) => k === 'p' && && v && v !== '')[1]
-  pk1 === sender
-  let plaintext = nip04.decrypt(sk2, pk1, event.content)
-})
-```
-
-Please consult the tests or [the source code](https://github.com/fiatjaf/nostr-tools) for more information that isn't available here.
-
-### Using from the browser (if you don't want to use a bundler)
-
-```html
-<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
-<script>
-  window.NostrTools.generatePrivateKey("..."); // and so on
-</script>
-```
-
-## License
-
-Public domain.
diff --git a/src/lib/nostr-tools/build.js b/src/lib/nostr-tools/build.js
deleted file mode 100755
index 31d53470d82..00000000000
--- a/src/lib/nostr-tools/build.js
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-
-const esbuild = require("esbuild");
-
-let common = {
-  entryPoints: ["index.ts"],
-  bundle: true,
-  sourcemap: "external"
-};
-
-esbuild
-  .build({
-    ...common,
-    outfile: "lib/nostr.esm.js",
-    format: "esm",
-    packages: "external"
-  })
-  .then(() => console.log("esm build success."));
-
-esbuild
-  .build({
-    ...common,
-    outfile: "lib/nostr.cjs.js",
-    format: "cjs",
-    packages: "external"
-  })
-  .then(() => console.log("cjs build success."));
-
-esbuild
-  .build({
-    ...common,
-    outfile: "lib/nostr.bundle.js",
-    format: "iife",
-    globalName: "NostrTools",
-    define: {
-      window: "self",
-      global: "self",
-      process: '{"env": {}}'
-    }
-  })
-  .then(() => console.log("standalone build success."));
diff --git a/src/lib/nostr-tools/index.ts b/src/lib/nostr-tools/index.ts
index 62ed810120c..e1fd087ef71 100644
--- a/src/lib/nostr-tools/index.ts
+++ b/src/lib/nostr-tools/index.ts
@@ -1,17 +1,3 @@
-// import * as keys from './keys'
-// import * as relay from './relay'
-// import * as event from './event'
-// import * as filter from './filter'
-// import * as path from './path'
-
-// export {keys, relay, event, filter, path}
-
-// export * as nip04 from './nip04'
-export * as nip05 from "./nip05";
-export * as nip06 from "./nip06";
-export * as nip19 from "./nip19";
-export * as nip26 from "./nip26";
-
 // monkey patch secp256k1
 import * as secp256k1 from "@noble/secp256k1";
 import { hmac } from "@noble/hashes/hmac";
diff --git a/src/lib/nostr-tools/package.json b/src/lib/nostr-tools/package.json
deleted file mode 100644
index 6ca9bd9153e..00000000000
--- a/src/lib/nostr-tools/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "name": "nostr-tools",
-  "version": "1.1.2",
-  "description": "Tools for making a Nostr client.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fiatjaf/nostr-tools.git"
-  },
-  "main": "lib/nostr.cjs.js",
-  "module": "lib/nostr.esm.js",
-  "dependencies": {},
-  "keywords": [
-    "decentralization",
-    "social",
-    "censorship-resistance",
-    "client",
-    "nostr"
-  ],
-  "devDependencies": {
-    "@types/node": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "esbuild": "0.16.9",
-    "esbuild-plugin-alias": "^0.2.1",
-    "eslint": "^8.30.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "esm-loader-typescript": "^1.0.1",
-    "events": "^3.3.0",
-    "jest": "^29.3.1",
-    "node-fetch": "2",
-    "ts-jest": "^29.0.3",
-    "tsd": "^0.22.0",
-    "typescript": "^4.9.4"
-  },
-  "scripts": {
-    "build": "node build.js",
-    "pretest": "node build.js",
-    "test": "jest"
-  }
-}
diff --git a/src/lib/nostr-tools/pool.ts b/src/lib/nostr-tools/pool.ts
index 72ac0882777..c95853db201 100644
--- a/src/lib/nostr-tools/pool.ts
+++ b/src/lib/nostr-tools/pool.ts
@@ -1,37 +1,14 @@
-import { Relay, relayInit } from "./relay";
+import { relayInit, SubscriptionOptions } from "./relay";
 import { Filter } from "./filter";
 import { Event } from "./event";
 
-// interface SimplePoolTypes {
-//   private _conn
-//   private _seenOn
-//   private eoseSubTimeout
-//   private getTimeout
-//   constructor(options?: {eoseSubTimeout?: number; getTimeout?: number})
-//   close(relays: string[]): void
-//   ensureRelay(url: string): Promise<Relay>
-//   sub(relays: string[], filters: Filter[], opts?: SubscriptionOptions): Sub
-//   get(
-//     relays: string[],
-//     filter: Filter,
-//     opts?: SubscriptionOptions
-//   ): Promise<Event | null>
-//   list(
-//     relays: string[],
-//     filters: Filter[],
-//     opts?: SubscriptionOptions
-//   ): Promise<Event[]>
-//   publish(relays: string[], event: Event): Pub
-//   seenOn(id: string): string[]
-// }
-
 export interface SimplePoolOptions {
   eoseSubTimeout?: number;
   getTimeout?: number;
   listTimeout?: number;
 }
 
-function normalizeURL(url) {
+function normalizeURL(url: string) {
   let p = new URL(url);
   p.pathname = p.pathname.replace(/\/+/g, "/");
   if (p.pathname.endsWith("/")) p.pathname = p.pathname.slice(0, -1);
@@ -43,23 +20,23 @@ function normalizeURL(url) {
 }
 
 export default class SimplePool {
-  _conn;
+  _conn: any;
   _seenOn = {};
-  eoseSubTimeout;
-  getTimeout;
-  constructor(options = {}) {
+  eoseSubTimeout: number;
+  getTimeout: number;
+  constructor(options: SimplePoolOptions = {}) {
     this._conn = {};
     this.eoseSubTimeout = options.eoseSubTimeout || 3400;
     this.getTimeout = options.getTimeout || 3400;
   }
 
-  close(relays) {
-    relays.forEach((url) => {
+  close(relays: string[]) {
+    relays.forEach((url: string) => {
       let relay = this._conn[normalizeURL(url)];
       if (relay) relay.close();
     });
   }
-  async ensureRelay(url) {
+  async ensureRelay(url: string) {
     const nm = normalizeURL(url);
     if (!this._conn[nm]) {
       this._conn[nm] = relayInit(nm, {
@@ -71,10 +48,10 @@ export default class SimplePool {
     await relay.connect();
     return relay;
   }
-  sub(relays, filters, opts?) {
+  sub(relays: string[], filters: Filter[], opts?: SubscriptionOptions) {
     let _knownIds = /* @__PURE__ */ new Set();
     let modifiedOpts = { ...(opts || {}) };
-    modifiedOpts.alreadyHaveEvent = (id, url) => {
+    modifiedOpts.alreadyHaveEvent = (id: number, url: string) => {
       if (opts?.alreadyHaveEvent?.(id, url)) {
         return true;
       }
@@ -83,16 +60,16 @@ export default class SimplePool {
       this._seenOn[id] = set;
       return _knownIds.has(id);
     };
-    let subs = [];
+    let subs: any = [];
     let eventListeners = /* @__PURE__ */ new Set();
     let eoseListeners = /* @__PURE__ */ new Set();
     let eosesMissing = relays.length;
     let eoseSent = false;
     let eoseTimeout = setTimeout(() => {
       eoseSent = true;
-      for (let cb of eoseListeners.values()) cb();
+      for (let cb of eoseListeners.values()) (cb as any)();
     }, this.eoseSubTimeout);
-    relays.forEach(async (relay) => {
+    relays.forEach(async (relay: any) => {
       let r;
       try {
         r = await this.ensureRelay(relay);
@@ -102,9 +79,9 @@ export default class SimplePool {
       }
       if (!r) return;
       let s = r.sub(filters, modifiedOpts);
-      s.on("event", (event) => {
+      s.on("event", (event: Event) => {
         _knownIds.add(event.id);
-        for (let cb of eventListeners.values()) cb(event);
+        for (let cb of eventListeners.values()) (cb as any)(event);
       });
       s.on("eose", () => {
         if (eoseSent) return;
@@ -115,26 +92,26 @@ export default class SimplePool {
         eosesMissing--;
         if (eosesMissing === 0) {
           clearTimeout(eoseTimeout);
-          for (let cb of eoseListeners.values()) cb();
+          for (let cb of eoseListeners.values()) (cb as any)();
         }
       }
     });
     let greaterSub = {
-      sub(filters2, opts2) {
-        subs.forEach((sub) => sub.sub(filters2, opts2));
+      sub(filters2: any, opts2: any) {
+        subs.forEach((sub: any) => sub.sub(filters2, opts2));
         return greaterSub;
       },
       unsub() {
-        subs.forEach((sub) => sub.unsub());
+        subs.forEach((sub: any) => sub.unsub());
       },
-      on(type, cb) {
+      on(type: any, cb: any) {
         if (type === "event") {
           eventListeners.add(cb);
         } else if (type === "eose") {
           eoseListeners.add(cb);
         }
       },
-      off(type, cb) {
+      off(type: any, cb: any) {
         if (type === "event") {
           eventListeners.delete(cb);
         } else if (type === "eose") eoseListeners.delete(cb);
@@ -142,25 +119,25 @@ export default class SimplePool {
     };
     return greaterSub;
   }
-  get(relays, filter, opts) {
+  get(relays: string[], filter: Filter, opts: SubscriptionOptions) {
     return new Promise((resolve) => {
       let sub = this.sub(relays, [filter], opts);
       let timeout = setTimeout(() => {
         sub.unsub();
         resolve(null);
       }, this.getTimeout);
-      sub.on("event", (event) => {
+      sub.on("event", (event: Event) => {
         resolve(event);
         clearTimeout(timeout);
         sub.unsub();
       });
     });
   }
-  list(relays, filters, opts) {
+  list(relays: string[], filters: Filter[], opts: SubscriptionOptions) {
     return new Promise((resolve) => {
-      let events = [];
+      let events: Event[] = [];
       let sub = this.sub(relays, filters, opts);
-      sub.on("event", (event) => {
+      sub.on("event", (event: Event) => {
         events.push(event);
       });
       sub.on("eose", () => {
@@ -169,8 +146,8 @@ export default class SimplePool {
       });
     });
   }
-  publish(relays, event) {
-    const pubPromises = relays.map(async (relay) => {
+  publish(relays: string[], event: Event) {
+    const pubPromises = relays.map(async (relay: string) => {
       let r;
       try {
         r = await this.ensureRelay(relay);
@@ -181,16 +158,16 @@ export default class SimplePool {
     });
     const callbackMap = /* @__PURE__ */ new Map();
     return {
-      on(type, cb) {
-        relays.forEach(async (relay, i) => {
+      on(type: string, cb: { (): void; (): void; (arg0: any): any }) {
+        relays.forEach(async (relay: any, i: string | number) => {
           let pub = await pubPromises[i];
           let callback = () => cb(relay);
           callbackMap.set(cb, callback);
           pub.on(type, callback);
         });
       },
-      off(type, cb) {
-        relays.forEach(async (_, i) => {
+      off(type: any, cb: any) {
+        relays.forEach(async (_: any, i: string | number) => {
           let callback = callbackMap.get(cb);
           if (callback) {
             let pub = await pubPromises[i];
@@ -200,7 +177,7 @@ export default class SimplePool {
       }
     };
   }
-  seenOn(id) {
+  seenOn(id: string) {
     return Array.from(this._seenOn[id]?.values?.() || []);
   }
 }
diff --git a/src/lib/nostr-tools/relay.ts b/src/lib/nostr-tools/relay.ts
index af55a6aa166..69f65598069 100644
--- a/src/lib/nostr-tools/relay.ts
+++ b/src/lib/nostr-tools/relay.ts
@@ -29,297 +29,13 @@ export type Sub = {
   off: (type: "event" | "eose", cb: any) => void;
 };
 
-type SubscriptionOptions = {
+export type SubscriptionOptions = {
   skipVerification?: boolean;
   id?: string;
   alreadyHaveEvent?: any;
 };
 
-// TODO allowAuthor fn so we can skip JSON.parse and sig verify if we won't allow the author anyway
-// export function relayInit(
-//   url: string,
-//   alreadyHaveEvent?: (id: string) => boolean
-// ): Relay {
-//   var ws: WebSocket
-//   var resolveClose: () => void
-//   var resolveOpen: (value: PromiseLike<void> | void) => void
-//   var untilOpen = new Promise<void>(resolve => {
-//     resolveOpen = resolve
-//   })
-//   var openSubs: {[id: string]: {filters: Filter[]} & SubscriptionOptions} = {}
-//   var listeners: {
-//     connect: Array<() => void>
-//     disconnect: Array<() => void>
-//     error: Array<() => void>
-//     notice: Array<(msg: string) => void>
-//     auth: Array<(challenge: string) => void>
-//   } = {
-//     connect: [],
-//     disconnect: [],
-//     error: [],
-//     notice: [],
-//     auth: []
-//   }
-//   var subListeners: {
-//     [subid: string]: {
-//       event: Array<(event: Event) => void>
-//       eose: Array<() => void>
-//     }
-//   } = {}
-//   var pubListeners: {
-//     [eventid: string]: {
-//       ok: Array<() => void>
-//       seen: Array<() => void>
-//       failed: Array<(reason: string) => void>
-//     }
-//   } = {}
-//   let idRegex = /"id":"([a-fA-F0-9]+)"/
-
-//   async function connectRelay(): Promise<void> {
-//     return new Promise((resolve, reject) => {
-//       ws = new WebSocket(url)
-
-//       ws.onopen = () => {
-//         listeners.connect.forEach(cb => cb())
-//         resolveOpen()
-//         resolve()
-//       }
-//       ws.onerror = () => {
-//         listeners.error.forEach(cb => cb())
-//         reject()
-//       }
-//       ws.onclose = async () => {
-//         listeners.disconnect.forEach(cb => cb())
-//         resolveClose && resolveClose()
-//       }
-
-//       let incomingMessageQueue: any[] = []
-//       let handleNextInterval: any
-
-//       const handleNext = () => {
-//         if (incomingMessageQueue.length === 0) {
-//           clearInterval(handleNextInterval)
-//           handleNextInterval = null
-//           return
-//         }
-
-//         var data = incomingMessageQueue.shift()
-//         if (data && alreadyHaveEvent !== undefined) {
-//           const match = idRegex.exec(data)
-//           if (match) {
-//             const id = match[1]
-//             if (alreadyHaveEvent(id)) {
-//               //console.log(`already have`);
-//               return
-//             }
-//           }
-//         }
-//         try {
-//           data = JSON.parse(data)
-//         } catch (err) {}
-
-//         if (data.length >= 1) {
-//           switch (data[0]) {
-//             case 'EVENT':
-//               if (data.length !== 3) return // ignore empty or malformed EVENT
-
-//               let id = data[1]
-//               let event = data[2]
-//               if (
-//                 validateEvent(event) &&
-//                 openSubs[id] &&
-//                 (openSubs[id].skipVerification || verifySignature(event)) &&
-//                 matchFilters(openSubs[id].filters, event)
-//               ) {
-//                 openSubs[id]
-//                 ;(subListeners[id]?.event || []).forEach(cb => cb(event))
-//               }
-//               return
-//             case 'EOSE': {
-//               if (data.length !== 2) return // ignore empty or malformed EOSE
-//               let id = data[1]
-//               ;(subListeners[id]?.eose || []).forEach(cb => cb())
-//               return
-//             }
-//             case 'OK': {
-//               if (data.length < 3) return // ignore empty or malformed OK
-//               let id: string = data[1]
-//               let ok: boolean = data[2]
-//               let reason: string = data[3] || ''
-//               if (ok) pubListeners[id]?.ok.forEach(cb => cb())
-//               else pubListeners[id]?.failed.forEach(cb => cb(reason))
-//               return
-//             }
-//             case 'NOTICE':
-//               if (data.length !== 2) return // ignore empty or malformed NOTICE
-//               let notice = data[1]
-//               listeners.notice.forEach(cb => cb(notice))
-//               return
-//             case 'AUTH': {
-//               let challenge = data[1]
-//               listeners.auth?.forEach(cb => cb(challenge))
-//               return
-//             }
-//           }
-//         }
-//       }
-
-//       ws.onmessage = e => {
-//         incomingMessageQueue.push(e.data)
-//         if (!handleNextInterval) {
-//           handleNextInterval = setInterval(handleNext, 0)
-//         }
-//       }
-//     })
-//   }
-
-//   async function connect(): Promise<void> {
-//     if (ws?.readyState && ws.readyState === 1) return // ws already open
-//     await connectRelay()
-//   }
-
-//   async function trySend(params: [string, ...any]) {
-//     let msg = JSON.stringify(params)
-
-//     await untilOpen
-//     try {
-//       ws.send(msg)
-//     } catch (err) {
-//       console.log(err)
-//     }
-//   }
-
-//   const sub = (
-//     filters: Filter[],
-//     {
-//       skipVerification = false,
-//       id = Math.random().toString().slice(2)
-//     }: SubscriptionOptions = {}
-//   ): Sub => {
-//     let subid = id
-
-//     openSubs[subid] = {
-//       id: subid,
-//       filters,
-//       skipVerification
-//     }
-//     trySend(['REQ', subid, ...filters])
-
-//     return {
-//       sub: (newFilters, newOpts = {}) =>
-//         sub(newFilters || filters, {
-//           skipVerification: newOpts.skipVerification || skipVerification,
-//           id: subid
-//         }),
-//       unsub: () => {
-//         delete openSubs[subid]
-//         delete subListeners[subid]
-//         trySend(['CLOSE', subid])
-//       },
-//       on: (type: 'event' | 'eose', cb: any): void => {
-//         subListeners[subid] = subListeners[subid] || {
-//           event: [],
-//           eose: []
-//         }
-//         subListeners[subid][type].push(cb)
-//       },
-//       off: (type: 'event' | 'eose', cb: any): void => {
-//         let listeners = subListeners[subid]
-//         let idx = listeners[type].indexOf(cb)
-//         if (idx >= 0) listeners[type].splice(idx, 1)
-//       }
-//     }
-//   }
-
-//   function _publishEvent(event: Event, type: string) {
-//     if (!event.id) throw new Error(`event ${event} has no id`)
-//     let id = event.id
-
-//     var sent = false
-//     var mustMonitor = false
-
-//     trySend([type, event])
-//       .then(() => {
-//         sent = true
-//         if (mustMonitor) {
-//           startMonitoring()
-//           mustMonitor = false
-//         }
-//       })
-//       .catch(() => {})
-
-//     const startMonitoring = () => {
-//       let monitor = sub([{ids: [id]}], {
-//         id: `monitor-${id.slice(0, 5)}`
-//       })
-//       let willUnsub = setTimeout(() => {
-//         ;(pubListeners[id]?.failed || []).forEach(cb =>
-//           cb('event not seen after 5 seconds')
-//         )
-//         monitor.unsub()
-//       }, 5000)
-//       monitor.on('event', () => {
-//         clearTimeout(willUnsub)
-//         ;(pubListeners[id]?.seen || []).forEach(cb => cb())
-//       })
-//     }
-
-//     return {
-//       on: (type: 'ok' | 'seen' | 'failed', cb: any) => {
-//         pubListeners[id] = pubListeners[id] || {
-//           ok: [],
-//           seen: [],
-//           failed: []
-//         }
-//         pubListeners[id][type].push(cb)
-
-//         if (type === 'seen') {
-//           if (sent) startMonitoring()
-//           else mustMonitor = true
-//         }
-//       },
-//       off: (type: 'ok' | 'seen' | 'failed', cb: any) => {
-//         let listeners = pubListeners[id]
-//         if (!listeners) return
-//         let idx = listeners[type].indexOf(cb)
-//         if (idx >= 0) listeners[type].splice(idx, 1)
-//       }
-//     }
-//   }
-
-//   return {
-//     url,
-//     sub,
-//     on: (type: RelayEvent, cb: any): void => {
-//       listeners[type].push(cb)
-//       if (type === 'connect' && ws?.readyState === 1) {
-//         cb()
-//       }
-//     },
-//     off: (type: RelayEvent, cb: any): void => {
-//       let index = listeners[type].indexOf(cb)
-//       if (index !== -1) listeners[type].splice(index, 1)
-//     },
-//     publish(event: Event): Pub {
-//       return _publishEvent(event, 'EVENT')
-//     },
-//     auth(event: Event): Pub {
-//       return _publishEvent(event, 'AUTH')
-//     },
-//     connect,
-//     close(): Promise<void> {
-//       ws.close()
-//       return new Promise<void>(resolve => {
-//         resolveClose = resolve
-//       })
-//     },
-//     get status() {
-//       return ws?.readyState ?? 3
-//     }
-//   }
-// }
-
-function getSubscriptionId(json) {
+function getSubscriptionId(json: string | any[]) {
   let idx = json.slice(0, 22).indexOf(`"EVENT"`);
   if (idx === -1) return null;
   let pstart = json.slice(idx + 7 + 1).indexOf(`"`);
@@ -331,7 +47,7 @@ function getSubscriptionId(json) {
   return json.slice(start + 1, end);
 }
 
-function getHex64(json, field) {
+function getHex64(json: string | string[], field: string | any[]) {
   let len = field.length + 3;
   let idx = json.indexOf(`"${field}":`) + len;
   let s = json.slice(idx).indexOf(`"`) + idx + 1;
@@ -340,7 +56,7 @@ function getHex64(json, field) {
 
 export function relayInit(url: string, options: SimplePoolOptions = {}) {
   let { listTimeout = 3e3, getTimeout = 3e3 } = options;
-  var ws;
+  var ws: WebSocket;
   var openSubs = {};
   var listeners = {
     connect: [],
@@ -350,7 +66,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
   };
   var subListeners = {};
   var pubListeners = {};
-  var connectionPromise;
+  var connectionPromise: Promise<void> | undefined;
   async function connectRelay() {
     if (connectionPromise) return connectionPromise;
     connectionPromise = new Promise<void>((resolve, reject) => {
@@ -360,20 +76,20 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
         reject(err);
       }
       ws.onopen = () => {
-        listeners.connect.forEach((cb) => cb());
+        listeners.connect.forEach((cb: any) => cb());
         resolve();
       };
       ws.onerror = () => {
         connectionPromise = void 0;
-        listeners.error.forEach((cb) => cb());
+        listeners.error.forEach((cb: any) => cb());
         reject();
       };
       ws.onclose = async () => {
         connectionPromise = void 0;
-        listeners.disconnect.forEach((cb) => cb());
+        listeners.disconnect.forEach((cb: any) => cb());
       };
-      let incomingMessageQueue = [];
-      let handleNextInterval;
+      let incomingMessageQueue: any[] = [];
+      let handleNextInterval: any;
       ws.onmessage = (e) => {
         incomingMessageQueue.push(e.data);
         if (!handleNextInterval) {
@@ -388,7 +104,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
         }
         var json = incomingMessageQueue.shift();
         if (!json) return;
-        let subid = getSubscriptionId(json);
+        let subid: any = getSubscriptionId(json);
         if (subid) {
           let so = openSubs[subid];
           if (so && so.alreadyHaveEvent && so.alreadyHaveEvent(getHex64(json, "id"), url)) {
@@ -407,13 +123,13 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
                 (openSubs[id].skipVerification || (await verifySignature(event)))
               ) {
                 openSubs[id];
-                (subListeners[id]?.event || []).forEach((cb) => cb(event));
+                (subListeners[id]?.event || []).forEach((cb: any) => cb(event));
               }
               return;
             case "EOSE": {
               let id2 = data[1];
               if (id2 in subListeners) {
-                subListeners[id2].eose.forEach((cb) => cb());
+                subListeners[id2].eose.forEach((cb: any) => cb());
                 subListeners[id2].eose = [];
               }
               return;
@@ -423,8 +139,8 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
               let ok = data[2];
               let reason = data[3] || "";
               if (id2 in pubListeners) {
-                if (ok) pubListeners[id2].ok.forEach((cb) => cb());
-                else pubListeners[id2].failed.forEach((cb) => cb(reason));
+                if (ok) pubListeners[id2].ok.forEach((cb: any) => cb());
+                else pubListeners[id2].failed.forEach((cb: any) => cb(reason));
                 pubListeners[id2].ok = [];
                 pubListeners[id2].failed = [];
               }
@@ -432,7 +148,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
             }
             case "NOTICE":
               let notice = data[1];
-              listeners.notice.forEach((cb) => cb(notice));
+              listeners.notice.forEach((cb: any) => cb(notice));
               return;
           }
         } catch (err) {
@@ -449,7 +165,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
     if (connected()) return;
     await connectRelay();
   }
-  async function trySend(params) {
+  async function trySend(params: any) {
     let msg = JSON.stringify(params);
     if (!connected()) {
       await new Promise((resolve) => setTimeout(resolve, 1e3));
@@ -464,7 +180,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
     }
   }
   const sub = (
-    filters,
+    filters: any[],
     {
       skipVerification = false,
       alreadyHaveEvent = null,
@@ -480,7 +196,7 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
     };
     trySend(["REQ", subid, ...filters]);
     return {
-      sub: (newFilters, newOpts: SubscriptionOptions = {}) =>
+      sub: (newFilters: any, newOpts: SubscriptionOptions = {}) =>
         sub(newFilters || filters, {
           skipVerification: newOpts.skipVerification || skipVerification,
           alreadyHaveEvent: newOpts.alreadyHaveEvent || alreadyHaveEvent,
@@ -491,14 +207,14 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
         delete subListeners[subid];
         trySend(["CLOSE", subid]);
       },
-      on: (type, cb) => {
+      on: (type: string | number, cb: any) => {
         subListeners[subid] = subListeners[subid] || {
           event: [],
           eose: []
         };
         subListeners[subid][type].push(cb);
       },
-      off: (type, cb) => {
+      off: (type: string | number, cb: any) => {
         let listeners2 = subListeners[subid];
         let idx = listeners2[type].indexOf(cb);
         if (idx >= 0) listeners2[type].splice(idx, 1);
@@ -508,20 +224,29 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
   return {
     url,
     sub,
-    on: (type, cb) => {
+    on: (type: string, cb: () => void) => {
       listeners[type].push(cb);
       if (type === "connect" && ws?.readyState === 1) {
         cb();
       }
     },
-    off: (type, cb) => {
+    off: (type: string | number, cb: any) => {
       let index = listeners[type].indexOf(cb);
       if (index !== -1) listeners[type].splice(index, 1);
     },
-    list: (filters, opts) =>
+    list: (
+      filters: any[],
+      opts:
+        | {
+            skipVerification?: boolean | undefined;
+            alreadyHaveEvent?: null | undefined;
+            id?: string | undefined;
+          }
+        | undefined
+    ) =>
       new Promise((resolve) => {
         let s = sub(filters, opts);
-        let events = [];
+        let events: any = [];
         let timeout = setTimeout(() => {
           s.unsub();
           resolve(events);
@@ -531,36 +256,45 @@ export function relayInit(url: string, options: SimplePoolOptions = {}) {
           clearTimeout(timeout);
           resolve(events);
         });
-        s.on("event", (event) => {
+        s.on("event", (event: any) => {
           events.push(event);
         });
       }),
-    get: (filter, opts) =>
+    get: (
+      filter: any,
+      opts:
+        | {
+            skipVerification?: boolean | undefined;
+            alreadyHaveEvent?: null | undefined;
+            id?: string | undefined;
+          }
+        | undefined
+    ) =>
       new Promise((resolve) => {
         let s = sub([filter], opts);
         let timeout = setTimeout(() => {
           s.unsub();
           resolve(null);
         }, getTimeout);
-        s.on("event", (event) => {
+        s.on("event", (event: any) => {
           s.unsub();
           clearTimeout(timeout);
           resolve(event);
         });
       }),
-    publish(event) {
+    publish(event: any) {
       if (!event.id) throw new Error(`event ${event} has no id`);
       let id = event.id;
       trySend(["EVENT", event]);
       return {
-        on: (type, cb) => {
+        on: (type: string | number, cb: any) => {
           pubListeners[id] = pubListeners[id] || {
             ok: [],
             failed: []
           };
           pubListeners[id][type].push(cb);
         },
-        off: (type, cb) => {
+        off: (type: string | number, cb: any) => {
           let listeners2 = pubListeners[id];
           if (!listeners2) return;
           let idx = listeners2[type].indexOf(cb);
diff --git a/src/lib/nostr-tools/tsconfig.json b/src/lib/nostr-tools/tsconfig.json
deleted file mode 100644
index 22bbdb23d4d..00000000000
--- a/src/lib/nostr-tools/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "declaration": true,
-    "strict": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "rootDir": "."
-  }
-}
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 58daae77edf..b7588af1de9 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -100,7 +100,7 @@ const MessageProvider = (props: Props) => {
     const append = data.filter(
       (x) => props.chat.directMessages.find((y) => y.id === x.id) === undefined
     );
-
+    raven?.loadProfiles(append.map((x) => x.peer));
     const result = [...props.chat.directMessages, ...append];
 
     props.addDirectMessages(result);
@@ -116,7 +116,6 @@ const MessageProvider = (props: Props) => {
 
   const handleProfileUpdate = (data: Profile[]) => {
     const result = [...props.chat.directContacts];
-
     data.forEach(({ name, creator }) => {
       const isPresent = props.chat.directContacts.some(
         (obj) => obj.name === name && obj.creator === creator
@@ -138,6 +137,14 @@ const MessageProvider = (props: Props) => {
     };
   }, [raven]);
 
+  useEffect(() => {
+    return () => {
+      raven?.removeListener(RavenEvents.Ready, handleReadyState);
+      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+    };
+  }, [raven]);
+
   return <>{}</>;
 };
 

From 56ec652ef43eea98f11f66dd43478281bb2eb71d Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 21 Jun 2023 18:50:07 +0500
Subject: [PATCH 014/179] Remove extra code

---
 src/common/helper/message-helper.ts | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index 0c6449a9012..9dcef190871 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -31,27 +31,13 @@ const relays = {
 export enum RavenEvents {
   Ready = "ready",
   ProfileUpdate = "profile_update",
-  ChannelCreation = "channel_creation",
-  ChannelUpdate = "channel_update",
-  EventDeletion = "event_deletion",
-  PublicMessage = "public_message",
-  DirectMessage = "direct_message",
-  ChannelMessageHide = "channel_message_hide",
-  ChannelUserMute = "channel_user_mute",
-  MuteList = "mute_list"
+  DirectMessage = "direct_message"
 }
 
 type EventHandlerMap = {
   [RavenEvents.Ready]: () => void;
   [RavenEvents.ProfileUpdate]: (data: Profile[]) => void;
-  [RavenEvents.ChannelCreation]: (data: Channel[]) => void;
-  [RavenEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
-  [RavenEvents.EventDeletion]: (data: EventDeletion[]) => void;
-  [RavenEvents.PublicMessage]: (data: PublicMessage[]) => void;
   [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
-  [RavenEvents.ChannelMessageHide]: (data: ChannelMessageHide[]) => void;
-  [RavenEvents.ChannelUserMute]: (data: ChannelUserMute[]) => void;
-  [RavenEvents.MuteList]: (data: MuteList) => void;
 };
 
 class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {

From 4e4f407c871494630de0fe1dce342128c5bbd2aa Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 6 Jul 2023 11:17:14 +0500
Subject: [PATCH 015/179] Optimize the chat

---
 src/common/components/chat-box/index.tsx |  51 +++---
 src/common/components/login/index.tsx    |   4 +-
 src/common/helper/chat-utils.ts          |   3 +-
 src/common/helper/message-helper.ts      | 205 +++++++++++------------
 src/common/store/chat/index.ts           |  34 ++--
 src/common/store/chat/types.ts           |  10 +-
 src/providers/message-provider-types.ts  |   2 +
 src/providers/message-provider.tsx       |  93 ++++++----
 8 files changed, 230 insertions(+), 172 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index ba3fb063500..cd40bb9dbff 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -5,7 +5,6 @@ import { Link } from "react-router-dom";
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
 import { DirectMessage } from "../../../providers/message-provider-types";
-// import { useMappedStore } from "../../store/use-mapped-store";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
@@ -31,7 +30,7 @@ import {
   getProfileMetaData,
   NostrKeys,
   setProfileMetaData,
-  correctProfile
+  resetProfile
 } from "../../helper/chat-utils";
 import { _t } from "../../i18n";
 import { getAccountFull } from "../../api/hive";
@@ -69,16 +68,18 @@ export default function ChatBox(props: Props) {
   const [showSpinner, setShowSpinner] = useState(false);
   const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
   const [isUserFromSearch, setIsUserFromSearch] = useState(false);
+  const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
 
   useEffect(() => {
-    // correctProfile(props.activeUser);
+    // resetProfile(props.activeUser);
     fetchProfileData();
     setShow(!!props.activeUser?.username);
   }, []);
 
   useEffect(() => {
-    const msgsList = getDirectMessages(props.chat.directMessages, receiverPubKey!);
-    setMessagesList(msgsList);
+    const msgsList = fetchMessages(receiverPubKey!);
+    const messages = msgsList.sort((a, b) => a.created - b.created);
+    setMessagesList(messages);
   }, [props.chat.directMessages]);
 
   useEffect(() => {
@@ -94,21 +95,24 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     fetchProfileData();
     setShow(!!props.activeUser?.username);
-    const msgsList = getDirectMessages(props.chat.directMessages, receiverPubKey!);
-    setMessagesList(msgsList);
+    const msgsList = fetchMessages(receiverPubKey!);
+    const messages = msgsList.sort((a, b) => a.created - b.created);
+    setMessagesList(messages);
   }, [props.activeUser]);
 
   useEffect(() => {
     if (currentUser) {
       fetchCurrentUserData();
-      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.creator ?? null;
+      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? null;
       setReceiverPubKey(peer!);
-      const msgsList = getDirectMessages(props.chat.directMessages, peer!);
-      setMessagesList(msgsList);
+      const msgsList = fetchMessages(peer!);
+      const messages = msgsList.sort((a, b) => a.created - b.created);
+      setMessagesList(messages);
       if (!window.raven) {
         setNostrkeys(activeUserKeys!);
       }
     } else {
+      setIsCurrentUserJoined(true);
       setMessage("");
       setShowSpinner(false);
     }
@@ -125,6 +129,15 @@ export default function ChatBox(props: Props) {
     return count;
   };
 
+  const fetchMessages = (peer: string) => {
+    for (const item of props.chat.directMessages) {
+      if (item.peer === peer) {
+        return item.chat;
+      }
+    }
+    return [];
+  };
+
   const fetchCurrentUserData = async () => {
     setShowSpinner(true);
     const response = await getAccountFull(currentUser);
@@ -133,8 +146,11 @@ export default function ChatBox(props: Props) {
       about: response.profile?.about,
       followers: response.follow_stats?.follower_count
     });
-    const currentUserProfile = await getProfileMetaData(currentUser);
-    setReceiverPubKey(currentUserProfile?.noStrKey?.pub);
+    const { posting_json_metadata } = response;
+    const profile = JSON.parse(posting_json_metadata!).profile;
+    const { noStrKey } = profile || {};
+    setReceiverPubKey(noStrKey?.pub);
+    setIsCurrentUserJoined(!!noStrKey?.pub);
     setShowSpinner(false);
   };
 
@@ -156,7 +172,6 @@ export default function ChatBox(props: Props) {
     setCurrentUser(username);
     setExpanded(true);
     setIsCurrentUser(true);
-    // fetchCurrentUserData();
     setIsUserFromSearch(true);
   };
 
@@ -172,7 +187,7 @@ export default function ChatBox(props: Props) {
       window.raven?.sendDirectMessage(receiverPubKey, message);
     }
     if (isUserFromSearch && receiverPubKey) {
-      window.raven?.addDirectContact(receiverPubKey);
+      window.raven?.publishContacts(currentUser, receiverPubKey);
       setIsUserFromSearch(false);
     }
   };
@@ -183,8 +198,7 @@ export default function ChatBox(props: Props) {
     const isScrollToTop = !isCurrentUser && element.scrollTop >= srollHeight;
     const isScrollToBottom =
       isCurrentUser &&
-      element.scrollTop <= (element.scrollHeight / 100) * 50 &&
-      element.scrollHeight > 700;
+      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight;
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
   };
@@ -219,7 +233,6 @@ export default function ChatBox(props: Props) {
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
-    // fetchProfileData();
     setActiveUserKeys(keys);
     setInProgress(false);
   };
@@ -329,7 +342,7 @@ export default function ChatBox(props: Props) {
                       </div>
                     </Link>
                     <div className="chats">
-                      {receiverPubKey === null || receiverPubKey === undefined ? (
+                      {!isCurrentUserJoined ? (
                         <p className="not-joined">{_t("chat.not-joined")}</p>
                       ) : (
                         <>
@@ -378,7 +391,7 @@ export default function ChatBox(props: Props) {
                       <React.Fragment>
                         {props.chat.directContacts.map((user: DirectContactsType) => {
                           return (
-                            <div key={user.creator} className="chat-content">
+                            <div key={user.pubkey} className="chat-content">
                               <Link to={`/@${user.name}`}>
                                 <div className="user-img">
                                   <span>
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index ee0ad3314d5..351541d06bc 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -773,7 +773,9 @@ class LoginDialog extends Component<Props> {
       resetChat();
 
       //create new raven instance for newly logged in user
-      setNostrkeys(profile.noStrKey);
+      if (profile && profile.noStrKey) {
+        setNostrkeys(profile.noStrKey);
+      }
       // activate user
       setActiveUser(user.username);
 
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 6ac87fdd8a1..9530da60353 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -20,7 +20,7 @@ export const getProfileMetaData = async (username: string) => {
   }
 };
 
-export const correctProfile = async (activeUser: ActiveUser | null) => {
+export const resetProfile = async (activeUser: ActiveUser | null) => {
   const profile = await getProfileMetaData(activeUser?.username!);
   delete profile.noStrKey;
   delete profile.profile;
@@ -37,7 +37,6 @@ export const correctProfile = async (activeUser: ActiveUser | null) => {
     version: 2
   };
   const updatedProfile = await updateProfile(response, { ...profileC });
-  console.log(updatedProfile);
 };
 
 export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: NostrKeys) => {
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index 9dcef190871..9c5a64b192c 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -3,17 +3,10 @@ import { Kind } from "../../lib/nostr-tools/event";
 import { Filter } from "../../lib/nostr-tools/filter";
 import { TypedEventEmitter } from "./message-event-emitter";
 import {
-  Channel,
-  ChannelMessageHide,
-  ChannelUpdate,
-  ChannelUserMute,
+  DirectContact,
   DirectMessage,
-  EventDeletion,
   Keys,
-  Metadata,
-  MuteList,
-  Profile,
-  PublicMessage
+  Metadata
 } from "../../providers/message-provider-types";
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
@@ -30,14 +23,14 @@ const relays = {
 
 export enum RavenEvents {
   Ready = "ready",
-  ProfileUpdate = "profile_update",
-  DirectMessage = "direct_message"
+  DirectMessage = "direct_message",
+  DirectContact = "direct_contact"
 }
 
 type EventHandlerMap = {
   [RavenEvents.Ready]: () => void;
-  [RavenEvents.ProfileUpdate]: (data: Profile[]) => void;
   [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
+  [RavenEvents.DirectContact]: (data: DirectContact[]) => void;
 };
 
 class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
@@ -54,8 +47,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   private eventQueueTimer: any;
   private eventQueueFlag = true;
   private eventQueueBuffer: Event[] = [];
-  public directContacts: string[] = [];
-  private isActiveUserPushed: boolean = false;
+  public directContacts: any = [];
 
   private nameCache: Record<string, number> = {};
 
@@ -81,66 +73,86 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
 
     const filters: Filter[] = [
       {
-        kinds: [Kind.Metadata],
+        kinds: [Kind.Contacts],
         authors: [this.pub]
-      },
-      {
-        kinds: [Kind.EncryptedDirectMessage],
-        authors: [this.pub]
-      },
-      {
-        kinds: [Kind.EncryptedDirectMessage],
-        "#p": [this.pub]
       }
     ];
     this.fetchP(filters).then((resp) => {
       const events = resp.sort((a, b) => b.created_at - a.created_at);
-      const profile = events.find((x) => x.kind === Kind.Metadata);
-      if (profile) this.pushToEventBuffer(profile);
-      const directContacts = Array.from(
-        new Set(
-          events.map((x) => {
-            if (x.kind === Kind.EncryptedDirectMessage) {
-              const receiver = Raven.findTagValue(x, "p");
-              if (!receiver) return undefined;
-              return receiver === this.pub ? x.pubkey : receiver;
-            }
-            return undefined;
-          })
-        )
-      ).filter(notEmpty);
-
-      this.directContacts.push(...directContacts);
+      const profile = events.find((x) => x.kind === Kind.Contacts);
+      if (profile && profile?.tags.length !== 0) {
+        this.directContacts = profile?.tags;
+        this.pushToEventBuffer(profile!);
+      }
+      this.fetchMessages();
+      this.emit(RavenEvents.Ready);
+    });
+  }
 
+  public fetchMessages() {
+    this.directContacts.map((contact: any) => {
       const filters: Filter[] = [
         {
-          kinds: [Kind.Metadata],
-          authors: directContacts
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [contact[0]],
+          authors: [this.pub]
         },
-        ...directContacts.map((x) => ({
+        {
           kinds: [Kind.EncryptedDirectMessage],
           "#p": [this.pub],
-          authors: [x]
-        })),
-        ...directContacts.map((x) => ({
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [x],
-          authors: [this.pub]
-        }))
+          authors: [contact[0]]
+        }
       ];
-      filters.forEach((c) => {
-        this.fetch([c]);
+      this.fetch(filters);
+    });
+  }
+
+  public publishContacts(username: string, pubkey: string) {
+    const newUser = [pubkey, username];
+    newUser.forEach((element) => {
+      let nameExist = false;
+
+      // Check if the name exists in the first array
+      this.directContacts.forEach((existingElement: string[]) => {
+        if (existingElement[0] === element || existingElement[1] === element) {
+          nameExist = true;
+          return;
+        }
       });
-      this.emit(RavenEvents.Ready);
+
+      // If the name doesn't exist, add the element to the direct contacts array
+      if (!nameExist) {
+        this.directContacts.push(newUser);
+        this.publish(Kind.Contacts, this.directContacts, "");
+        return;
+      }
     });
   }
 
-  public loadProfiles(pubs: string[]) {
+  public getContacts() {
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.Contacts],
+        authors: [this.pub]
+      }
+    ];
+    this.fetch(filters);
+  }
+
+  public checkProfiles(pubs: string[]) {
     pubs.forEach((p) => {
-      if (!this.directContacts.includes(p)) {
-        if (p !== this.pub) {
-          this.directContacts.push(p);
-        }
+      if (this.directContacts.length !== 0) {
+        this.directContacts.forEach((c: any) => {
+          if (p !== c[0]) {
+            this.fetch([
+              {
+                kinds: [Kind.Metadata],
+                authors: [p]
+              }
+            ]);
+          }
+        });
+      } else {
         this.fetch([
           {
             kinds: [Kind.Metadata],
@@ -151,45 +163,31 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     });
   }
 
-  public directContactForActiveUser(event: Event) {
-    if (!this.isActiveUserPushed && !this.directContacts.includes(event.pubkey)) {
-      const activeUserProfile = {
-        id: event.id,
-        creator: event.pubkey,
-        created: event.created_at,
-        name: JSON.parse(event.content).name,
-        about: JSON.parse(event.content).about || "",
-        picture: JSON.parse(event.content).picture || ""
-      };
-
-      this.emit(RavenEvents.ProfileUpdate, [activeUserProfile]);
-      this.isActiveUserPushed = true;
-      this.directContacts.push(event.pubkey);
-    }
-  }
-
-  public addDirectContact(directContact: string) {
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.Metadata],
-        authors: [directContact]
-      }
-    ];
-
-    if (!this.directContacts.includes(directContact) && this.pub !== directContact) {
-      this.directContacts.push(directContact);
+  private addDirectContact(event: Event) {
+    let isAdded = false;
+    const user = {
+      id: event.id,
+      creator: event.pubkey,
+      created: event.created_at,
+      name: JSON.parse(event.content).name,
+      about: JSON.parse(event.content).about || "",
+      picture: JSON.parse(event.content).picture || ""
+    };
+    const { creator, name } = user;
+    if (!isAdded) {
+      this.publishContacts(name, creator);
+      isAdded = true;
     }
-    this.fetch(filters);
   }
 
   private fetch(filters: Filter[], unsub: boolean = true) {
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      this.pushToEventBuffer(event);
-      if (event.kind === Kind.Metadata && event.pubkey === this.pub) {
-        this.directContactForActiveUser(event);
+      if (event.kind === Kind.Metadata) {
+        this.addDirectContact(event);
       }
+      this.pushToEventBuffer(event);
     });
 
     sub.on("eose", () => {
@@ -284,6 +282,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
+            if (event.kind === Kind.Contacts) {
+              this.getContacts();
+            }
           });
 
           pub.on("failed", () => {
@@ -331,28 +332,20 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
 
   async processEventQueue() {
     this.eventQueueFlag = false;
-
-    const profileUpdates: Profile[] = this.eventQueue
-      .filter((x) => x.kind === Kind.Metadata)
-      .map((ev) => {
-        const content = Raven.parseJson(ev.content);
-        return content
-          ? {
-              id: ev.id,
-              creator: ev.pubkey,
-              created: ev.created_at,
-              ...Raven.normalizeMetadata(content)
-            }
-          : null;
+    const data = this.eventQueue
+      .filter((x) => x.kind === Kind.Contacts)
+      .map((e: any) => {
+        const profiles: Array<[string, string]> = e.tags;
+        return profiles.map(([pubkey, name]) => ({ pubkey, name }));
       })
       .filter(notEmpty);
 
-    const directContacts = profileUpdates.filter((obj) =>
-      this.directContacts.includes(obj.creator)
-    );
+    if (data.length > 0) {
+      const directContactsProfile: Array<{ pubkey: string; name: string }> = data[0];
 
-    if (profileUpdates.length > 0) {
-      this.emit(RavenEvents.ProfileUpdate, directContacts);
+      if (directContactsProfile.length > 0) {
+        this.emit(RavenEvents.DirectContact, directContactsProfile);
+      }
     }
 
     Promise.all(
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 55af8c96eb6..8eccd7a3b5f 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -8,7 +8,8 @@ import {
   DirectContactsAction,
   DirectContactsType,
   DirectMessagesAction,
-  ResetChatAction
+  ResetChatAction,
+  directMessagesList
 } from "./types";
 
 export const initialState: Chat = {
@@ -20,19 +21,30 @@ export default (state: Chat = initialState, action: Actions): Chat => {
   switch (action.type) {
     case ActionTypes.DIRECTCONTACTS: {
       const { data } = action;
-      const uniqueDirectContacts = data.filter(
-        (contact) => !state.directContacts.includes(contact)
-      );
+      const uniqueDirectContacts = data.filter((contact) => {
+        return !state.directContacts.some((existingContact) => {
+          return existingContact.name === contact.name && existingContact.pubkey === contact.pubkey;
+        });
+      });
+      // console.log(uniqueDirectContacts, "uniqueDirectContacts");
       return {
         ...state,
-        directContacts: [...state.directContacts, ...uniqueDirectContacts]
+        directContacts: [...state.directContacts, ...uniqueDirectContacts],
+        directMessages: [
+          ...state.directMessages,
+          ...uniqueDirectContacts.map((contact) => ({ chat: [], peer: contact.pubkey }))
+        ]
       };
     }
     case ActionTypes.DIRECTMESSAGES: {
-      const { data } = action;
+      const { peer, data } = action;
       return {
         ...state,
-        directMessages: [...state.directMessages, ...data]
+        directMessages: [
+          ...state.directMessages.map((contact) =>
+            contact.peer === peer ? { peer: peer, chat: [...contact.chat, ...data] } : contact
+          )
+        ]
       };
     }
 
@@ -49,13 +61,14 @@ export const addDirectContacts = (data: DirectContactsType[]) => (dispatch: Disp
   dispatch(addDirectContactsAct(data));
 };
 
-export const addDirectMessages = (data: DirectMessage[]) => (dispatch: Dispatch) => {
-  dispatch(addDirectMessagesAct(data));
+export const addDirectMessages = (peer: string, data: DirectMessage[]) => (dispatch: Dispatch) => {
+  dispatch(addDirectMessagesAct(peer, data));
 };
 
 export const resetChat = () => (dispatch: Dispatch) => {
   dispatch(resetChatAct());
 };
+
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -65,9 +78,10 @@ export const addDirectContactsAct = (data: DirectContactsType[]): DirectContacts
   };
 };
 
-export const addDirectMessagesAct = (data: DirectMessage[]): DirectMessagesAction => {
+export const addDirectMessagesAct = (peer: string, data: DirectMessage[]): DirectMessagesAction => {
   return {
     type: ActionTypes.DIRECTMESSAGES,
+    peer,
     data
   };
 };
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 57e6c3ddded..cbd48ae10bf 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -2,12 +2,17 @@ import { DirectMessage } from "./../../../providers/message-provider-types";
 
 export interface DirectContactsType {
   name: string;
-  creator: string;
+  pubkey: string;
+}
+
+export interface directMessagesList {
+  peer: string;
+  chat: DirectMessage[];
 }
 
 export interface Chat {
   directContacts: DirectContactsType[];
-  directMessages: DirectMessage[];
+  directMessages: directMessagesList[];
 }
 
 export enum ActionTypes {
@@ -28,6 +33,7 @@ export interface ResetChatAction {
 export interface DirectMessagesAction {
   type: ActionTypes.DIRECTMESSAGES;
   data: DirectMessage[];
+  peer: string;
 }
 
 export type Actions = DirectContactsAction | DirectMessagesAction | ResetChatAction;
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index a553c7d16c2..2a71c9d2149 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -17,6 +17,8 @@ export type Metadata = {
 
 export type Profile = { id: string; creator: string; created: number } & Metadata;
 
+export type DirectContact = { name: string; pubkey: string };
+
 export type Channel = { id: string; creator: string; created: number } & Metadata;
 
 export type ChannelUpdate = { channelId: string } & Channel;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index b7588af1de9..7a8bc98e157 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
 import { Chat, DirectContactsType } from "../common/store/chat/types";
-import { DirectMessage, Profile, Keys } from "./message-provider-types";
+import { DirectMessage, Profile, Keys, DirectContact } from "./message-provider-types";
 
 import { initRaven, RavenEvents } from "../common/helper/message-helper";
 import { getProfileMetaData, NostrKeys } from "../common/helper/chat-utils";
@@ -19,18 +19,17 @@ export const setNostrkeys = (keys: NostrKeys) => {
 };
 
 interface Props {
-  activeUser: ActiveUser;
-  chat: Chat;
   addDirectContacts: (data?: DirectContactsType[]) => void;
-  addDirectMessages: (data?: DirectMessage[]) => void;
+  addDirectMessages: (peer: string, data?: DirectMessage[]) => void;
 }
 
 const MessageProvider = (props: Props) => {
-  const { activeUser } = useMappedStore();
+  const { activeUser, chat } = useMappedStore();
   const [ravenReady, setRavenReady] = useState(false);
   const [since, setSince] = useState<number>(0);
   const [keys, setKeys] = useState<Keys>();
   const [raven, setRaven] = useState<any>();
+  const [messageBuffer, setMessageBuffer] = useState<DirectMessage[]>([]);
 
   useEffect(() => {
     window.addEventListener("createRavenInstance", createRavenInstance);
@@ -95,52 +94,82 @@ const MessageProvider = (props: Props) => {
     };
   }, [ravenReady, raven]);
 
-  // // Direct message handler
-  const handleDirectMessage = (data: DirectMessage[]) => {
-    const append = data.filter(
-      (x) => props.chat.directMessages.find((y) => y.id === x.id) === undefined
-    );
-    raven?.loadProfiles(append.map((x) => x.peer));
-    const result = [...props.chat.directMessages, ...append];
-
-    props.addDirectMessages(result);
+  const handleProfileUpdate = (data: DirectContact[]) => {
+    const result = [...chat.directContacts];
+    data.forEach(({ name, pubkey }) => {
+      const isPresent = chat.directContacts.some(
+        (obj) => obj.name === name && obj.pubkey === pubkey
+      );
+      if (!isPresent) {
+        //Add the object to the result array if it's not already present in store state.
+        result.push({ name, pubkey });
+      }
+    });
+    if (result.length !== 0) {
+      props.addDirectContacts(result);
+    }
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
-    raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
+    raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
+    raven?.addListener(RavenEvents.DirectContact, handleProfileUpdate);
     return () => {
-      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+      raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
     };
   }, [raven]);
 
-  const handleProfileUpdate = (data: Profile[]) => {
-    const result = [...props.chat.directContacts];
-    data.forEach(({ name, creator }) => {
-      const isPresent = props.chat.directContacts.some(
-        (obj) => obj.name === name && obj.creator === creator
-      );
-      if (!isPresent) {
-        //Add the object to the result array if it's not already present in store state.
-        result.push({ name, creator });
+  // // Direct message handler
+  const handleDirectMessage = (data: DirectMessage[]) => {
+    setMessageBuffer((messageBuffer) => [...messageBuffer!, ...data]);
+    raven?.checkProfiles(data.map((x) => x.peer));
+  };
+
+  const setMessages = () => {
+    messageBuffer.forEach((obj) => {
+      const { peer } = obj;
+      const matchingStateItem = chat.directMessages.find((stateItem) => stateItem.peer === peer);
+      if (matchingStateItem) {
+        if (matchingStateItem.chat.length === 0) {
+          props.addDirectMessages(peer, [obj]);
+          setMessageBuffer((prevMessageBuffer) =>
+            prevMessageBuffer.filter((message) => message.id !== obj.id)
+          );
+        } else {
+          let itemExists = false;
+          matchingStateItem.chat.forEach((item) => {
+            if (item.id === obj.id) {
+              itemExists = true;
+            }
+          });
+          if (!itemExists) {
+            props.addDirectMessages(peer, [obj]);
+            setMessageBuffer((prevMessageBuffer) =>
+              prevMessageBuffer.filter((message) => message.id !== obj.id)
+            );
+          }
+        }
       }
     });
-
-    props.addDirectContacts(result);
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
-    raven?.addListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    if (chat.directContacts.length !== 0) {
+      setMessages();
+    }
+  }, [chat.directContacts, messageBuffer]);
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+    raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
     return () => {
-      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
     };
   }, [raven]);
 
   useEffect(() => {
     return () => {
       raven?.removeListener(RavenEvents.Ready, handleReadyState);
-      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
       raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
     };
   }, [raven]);

From 0d52de95c1fef421316eaf7c76b3722c13d3ec50 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 6 Jul 2023 18:30:38 +0500
Subject: [PATCH 016/179] Add emojis in chat feature and also show last message
 in contact list

---
 src/common/components/chat-box/index.scss     | 40 +++++++++++---
 src/common/components/chat-box/index.tsx      | 55 +++++++++++++++++--
 .../components/emoji-picker/_index.scss       |  9 +--
 src/common/components/emoji-picker/index.tsx  | 31 ++++++++++-
 src/common/img/svg.tsx                        |  7 +--
 5 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index fd4c41bc385..71874f19027 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -72,7 +72,7 @@
       margin-top: 0.8rem;
       font-weight: 700;
       line-height: 24px;
-      font-size: 20px;
+      font-size: 21px;
       font-family: $font-family-sans-serif;
 
       @include themify(day) {
@@ -172,7 +172,7 @@
         padding: 18px 16px;
       }
       .user-title {
-        padding-top: 26px;
+        padding-top: 19px;
         width: -webkit-fill-available;
 
         .username {
@@ -184,14 +184,17 @@
             color: $white-two;
           }
 
-          font-size: 16px;
-
+          font-size: 17px;
           font-weight: 700;
           margin-bottom: 0.2rem !important;
         }
         .last-message {
-          font-size: 15px;
-          margin-bottom: 0 !important;
+          max-width: 320px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 0;
+          font-size: 14px;
         }
       }
     }
@@ -390,6 +393,7 @@
     }
   }
   .chat {
+    display: flex;
     margin: 4px 8px;
     padding: 4px;
     min-height: 45px;
@@ -401,9 +405,31 @@
       background: #cee2ff;
     }
 
+    .chatbox-emoji-picker {
+      .chatbox-emoji {
+        .emoji-picker {
+          display: none;
+        }
+        margin: 8px 0 0 7px;
+        cursor: pointer;
+
+        svg {
+          height: 22px;
+          fill: rgb(60, 68, 73);
+        }
+      }
+      &:hover {
+        .chatbox-emoji {
+          .emoji-picker {
+            display: block;
+          }
+        }
+      }
+    }
+
     .chat-input-group {
       .chat-input {
-        padding-top: 13px;
+        padding-top: 10px;
         border: none;
         @include themify(day) {
           background: #e4e6eb;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index cd40bb9dbff..4d430ca2dbf 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -10,6 +10,8 @@ import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
 import SeachUser from "../search-user";
 import LinearProgress from "../linear-progress";
+import EmojiPicker from "../emoji-picker";
+import ClickAwayListener from "../clickaway-listener";
 import { setNostrkeys } from "../../../providers/message-provider";
 
 import {
@@ -19,7 +21,8 @@ import {
   arrowBackSvg,
   messageSendSvg,
   chevronUpSvg,
-  chevronDownSvgForSlider
+  chevronDownSvgForSlider,
+  emoticonHappyOutlineSvg
 } from "../../img/svg";
 import { dateToFormatted } from "../../helper/parse-date";
 import {
@@ -102,7 +105,16 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     if (currentUser) {
-      fetchCurrentUserData();
+      const isCurrentUserFound = props.chat.directContacts.some(
+        (contact) => contact.name === currentUser
+      );
+      if (isCurrentUserFound) {
+        fetchCurrentUserData();
+      } else {
+        setShowSpinner(true);
+        fetchCurrentUserData();
+      }
+
       const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? null;
       setReceiverPubKey(peer!);
       const msgsList = fetchMessages(peer!);
@@ -139,7 +151,6 @@ export default function ChatBox(props: Props) {
   };
 
   const fetchCurrentUserData = async () => {
-    setShowSpinner(true);
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
@@ -168,7 +179,6 @@ export default function ChatBox(props: Props) {
   };
 
   const setCurrentUserFromSearch = (username: string) => {
-    setShowSpinner(true);
     setCurrentUser(username);
     setExpanded(true);
     setIsCurrentUser(true);
@@ -205,8 +215,7 @@ export default function ChatBox(props: Props) {
 
   const scrollerClicked = () => {
     chatBodyDivRef?.current?.scrollTo({
-      top: isCurrentUser ? chatBodyDivRef?.current?.scrollHeight : 0,
-      behavior: "smooth"
+      top: isCurrentUser ? chatBodyDivRef?.current?.scrollHeight : 0
     });
   };
 
@@ -255,6 +264,17 @@ export default function ChatBox(props: Props) {
     return <></>;
   };
 
+  const handleEmojiSelection = (emoji: string) => {
+    setMessage((prevMessage) => prevMessage + emoji);
+  };
+
+  const getLastMessage = (pubkey: string) => {
+    const msgsList = fetchMessages(pubkey!);
+    const messages = msgsList.sort((a, b) => a.created - b.created);
+    const lastMessage = messages.slice(-1);
+    return lastMessage[0]?.content;
+  };
+
   return (
     <>
       {show && (
@@ -402,6 +422,7 @@ export default function ChatBox(props: Props) {
 
                               <div className="user-title" onClick={() => userClicked(user.name)}>
                                 <p className="username">{user.name}</p>
+                                <p className="last-message">{getLastMessage(user.pubkey)}</p>
                               </div>
                             </div>
                           );
@@ -444,12 +465,34 @@ export default function ChatBox(props: Props) {
           {showSpinner && <LinearProgress />}
           {currentUser && (
             <div className="chat">
+              <div className="chatbox-emoji-picker">
+                <div className="chatbox-emoji">
+                  <Tooltip content={_t("editor-toolbar.emoji")}>
+                    <div className="emoji-icon">{emoticonHappyOutlineSvg}</div>
+                  </Tooltip>
+                  <EmojiPicker
+                    style={{
+                      top: "255px",
+                      left: "0px",
+                      marginLeft: "14px",
+                      borderTopLeftRadius: "8px",
+                      borderTopRightRadius: "8px",
+                      borderBottomLeftRadius: "0px"
+                    }}
+                    fallback={(e) => {
+                      handleEmojiSelection(e);
+                    }}
+                  />
+                </div>
+              </div>
+
               <Form
                 onSubmit={(e: React.FormEvent) => {
                   e.preventDefault();
                   e.stopPropagation();
                   sendMessage();
                 }}
+                style={{ width: "100%" }}
               >
                 <InputGroup className="chat-input-group">
                   <Form.Control
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index c478b0df909..4f179d5c809 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -4,14 +4,7 @@
 @import "src/style/mixins";
 
 .emoji-picker {
-  width: 280px;
-  position: absolute;
-  right: 0;
-  z-index: 100;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  padding: 14px 6px;
-
+  
   @media (max-width: $sm-break) {
     width: 160px !important;
   }
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 581795c50d8..a59e48a0749 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -39,6 +39,14 @@ interface EmojiCacheItem {
 
 interface Props {
   fallback?: (e: string) => void;
+  style?: {
+    top: string;
+    left: string | number;
+    marginLeft: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    borderBottomLeftRadius: string;
+  };
 }
 
 interface State {
@@ -47,6 +55,16 @@ interface State {
   filter: string;
 }
 
+interface EmojiPickerStyle {
+  width: string;
+  position?: "absolute" | "relative" | "fixed" | "static";
+  right: string | number;
+  zIndex: number;
+  borderBottomRightRadius: string;
+  borderBottomLeftRadius: string;
+  padding: string;
+}
+
 export default class EmojiPicker extends BaseComponent<Props> {
   state: State = {
     data: null,
@@ -144,8 +162,19 @@ export default class EmojiPicker extends BaseComponent<Props> {
 
     const recent: string[] = ls.get("recent-emoji", []);
 
+    const emojiPickerStyle: EmojiPickerStyle = {
+      width: "280px",
+      position: "absolute",
+      right: "0",
+      zIndex: 1000,
+      borderBottomRightRadius: "8px",
+      borderBottomLeftRadius: "8px",
+      padding: "14px 6px",
+      ...(this.props.style && this.props.style) // Merge the passed style props if available
+    };
+
     return (
-      <div className="emoji-picker">
+      <div className="emoji-picker" style={emojiPickerStyle}>
         <SearchBox
           autoComplete="off"
           autoCorrect="off"
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 0f9c502ed05..3b4f4ddc5b9 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -580,11 +580,8 @@ export const gridSvg = (
 );
 
 export const emoticonHappyOutlineSvg = (
-  <svg viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-    />
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" />
   </svg>
 );
 

From 90211cdff4a6af086882fb6850c4fda91fa197ca Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 10 Jul 2023 14:25:05 +0500
Subject: [PATCH 017/179] Add feature to send gifs and image in chat

---
 src/common/components/chat-box/index.scss    |  52 ++++-
 src/common/components/chat-box/index.tsx     | 225 ++++++++++++++++++-
 src/common/components/emoji-picker/index.tsx |   1 +
 src/common/components/gif-picker/_index.scss |   8 -
 src/common/components/gif-picker/index.tsx   |  44 +++-
 src/common/img/svg.tsx                       |  18 +-
 6 files changed, 329 insertions(+), 19 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 71874f19027..960b7e668d2 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -5,7 +5,7 @@
 
 .chatbox-container {
   position: fixed;
-  z-index: 99;
+  // z-index: 99;
   right: 15rem;
   bottom: 0rem;
   height: 53px;
@@ -349,6 +349,20 @@
             @include themify(night) {
               background: #cee2ff;
             }
+
+            &.gif {
+              background: none;
+              img {
+                max-width: 100%;
+              }
+            }
+
+            &.chat-image {
+              background: none;
+              img {
+                max-width: 100%;
+              }
+            }
             color: #050505;
             max-width: 280px;
             word-wrap: break-word;
@@ -378,12 +392,38 @@
           margin-right: 15px;
 
           .sender-message-content {
+            @include themify(day) {
+              // background: rgb(204, 247, 255);
+              background: $light-periwinkle;
+              // background-color: rgb(0, 132, 255);
+              color: $dark-indigo;
+              // color: $white;
+            }
+            @include themify(night) {
+              background: $dark-indigo;
+              color: $white;
+            }
+            &.gif {
+              background: none;
+              img {
+                max-width: 100%;
+              }
+            }
+
+            &.chat-image {
+              background: none;
+              img {
+                max-width: 100%;
+              }
+            }
+            
             border-radius: 10px 10px 0px;
             max-width: 280px;
-            background-color: rgb(0, 132, 255);
+            // background-color: rgb(0, 132, 255);
+
             word-wrap: break-word;
             margin-bottom: 0;
-            color: $white;
+            color: $charcoal-grey;
             font-size: 16px;
             font-weight: 400;
             padding: 8px 12px 8px 12px;
@@ -426,6 +466,12 @@
         }
       }
     }
+    .chatbox-image {
+      cursor: pointer;
+      .chatbox-image-icon {
+        margin: 7px 0 0 7px;
+      }
+    }
 
     .chat-input-group {
       .chat-input {
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 4d430ca2dbf..b2e5c242f50 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Button, Form, FormControl, InputGroup, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import axios from "axios";
+import mediumZoom, { Zoom } from "medium-zoom";
 
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
+import { Global, Theme } from "../../store/global/types";
 import { DirectMessage } from "../../../providers/message-provider-types";
 
 import Tooltip from "../tooltip";
@@ -11,7 +14,8 @@ import UserAvatar from "../user-avatar";
 import SeachUser from "../search-user";
 import LinearProgress from "../linear-progress";
 import EmojiPicker from "../emoji-picker";
-import ClickAwayListener from "../clickaway-listener";
+import GifPicker from "../gif-picker";
+import { error } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
 
 import {
@@ -22,8 +26,11 @@ import {
   messageSendSvg,
   chevronUpSvg,
   chevronDownSvgForSlider,
-  emoticonHappyOutlineSvg
+  emoticonHappyOutlineSvg,
+  gifIcon,
+  chatBoxImageSvg
 } from "../../img/svg";
+
 import { dateToFormatted } from "../../helper/parse-date";
 import {
   createNoStrAccount,
@@ -35,8 +42,13 @@ import {
   setProfileMetaData,
   resetProfile
 } from "../../helper/chat-utils";
+import { renderPostBody } from "@ecency/render-helper";
+import { getAccessToken } from "../../helper/user-token";
 import { _t } from "../../i18n";
+
 import { getAccountFull } from "../../api/hive";
+import { uploadImage } from "../../api/misc";
+import { addImage } from "../../api/private-api";
 
 import "./index.scss";
 
@@ -48,12 +60,17 @@ export interface profileData {
 
 interface Props {
   activeUser: ActiveUser | null;
+  global: Global;
   chat: Chat;
   resetChat: () => void;
 }
 
+let zoom: Zoom | null = null;
+
 export default function ChatBox(props: Props) {
+  const prevPropsRef = useRef(props);
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
+  const fileInput = React.createRef<HTMLInputElement>();
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
@@ -72,6 +89,7 @@ export default function ChatBox(props: Props) {
   const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
   const [isUserFromSearch, setIsUserFromSearch] = useState(false);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
+  const [shGif, setShGif] = useState(false);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -85,12 +103,25 @@ export default function ChatBox(props: Props) {
     setMessagesList(messages);
   }, [props.chat.directMessages]);
 
+  useEffect(() => {
+    const prevProps = prevPropsRef.current;
+    if (prevProps.global.theme !== props.global.theme) {
+      setBackground();
+    }
+    prevPropsRef.current = props;
+  }, [props.global.theme]);
+
   useEffect(() => {
     scrollToBottom();
+    if (messagesList.length !== 0) {
+      //Initialize the zooming effect
+      zoomInitializer();
+    }
   }, [messagesList]);
 
   useEffect(() => {
     if (isCurrentUser) {
+      zoomInitializer();
       scrollToBottom();
     }
   }, [isCurrentUser]);
@@ -141,6 +172,22 @@ export default function ChatBox(props: Props) {
     return count;
   };
 
+  const zoomInitializer = () => {
+    const elements: HTMLElement[] = [
+      ...document.querySelectorAll<HTMLElement>(".chat-image img")
+    ].filter((x) => x.parentNode?.nodeName !== "A");
+    zoom = mediumZoom(elements);
+    setBackground();
+  };
+
+  const setBackground = () => {
+    if (props.global.theme === Theme.day) {
+      zoom?.update({ background: "#ffffff" });
+    } else {
+      zoom?.update({ background: "#131111" });
+    }
+  };
+
   const fetchMessages = (peer: string) => {
     for (const item of props.chat.directMessages) {
       if (item.peer === peer) {
@@ -275,6 +322,91 @@ export default function ChatBox(props: Props) {
     return lastMessage[0]?.content;
   };
 
+  const handleGifSelection = (gif: string) => {
+    window.raven?.sendDirectMessage(receiverPubKey, gif);
+  };
+
+  const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
+    if (e) {
+      e.stopPropagation();
+    }
+    setShGif(!shGif);
+  };
+
+  const isMessageGif = (content: string) => {
+    return content.includes("giphy");
+  };
+
+  const checkFile = (filename: string) => {
+    const filenameLow = filename.toLowerCase();
+    return ["jpg", "jpeg", "gif", "png"].some((el) => filenameLow.endsWith(el));
+  };
+
+  const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
+
+    const {
+      global: { isElectron }
+    } = props;
+
+    if (files.length > 0) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
+    if (files.length > 1 && isElectron) {
+      let isWindows = process.platform === "win32";
+      if (isWindows) {
+        files = files.reverse();
+      }
+    }
+
+    files.forEach((file) => upload(file));
+
+    // reset input
+    e.target.value = "";
+  };
+
+  const upload = async (file: File) => {
+    const { activeUser, global } = props;
+
+    const username = activeUser?.username!;
+
+    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
+
+    setMessage(tempImgTag);
+
+    let imageUrl: string;
+    try {
+      let token = getAccessToken(username);
+      if (token) {
+        const resp = await uploadImage(file, token);
+        imageUrl = resp.url;
+
+        if (global.usePrivate && imageUrl.length > 0) {
+          addImage(username, imageUrl).then();
+        }
+
+        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
+
+        imgTag && setMessage(imgTag);
+      } else {
+        error(_t("editor-toolbar.image-error-cache"));
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e) && e.response?.status === 413) {
+        error(_t("editor-toolbar.image-error-size"));
+      } else {
+        error(_t("editor-toolbar.image-error"));
+      }
+      return;
+    }
+  };
+
+  const isMessageImage = (content: string) => {
+    return content.includes("https://images.ecency.com");
+  };
+
   return (
     <>
       {show && (
@@ -368,6 +500,18 @@ export default function ChatBox(props: Props) {
                         <>
                           {messagesList.map((msg, i) => {
                             const dayAndMonth = getFormattedDateAndDay(msg, i);
+                            let renderedPreview = renderPostBody(
+                              msg.content,
+                              false,
+                              props.global.canUseWebp
+                            );
+
+                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                            const isGif = isMessageGif(msg.content);
+
+                            const isImage = isMessageImage(msg.content);
 
                             return (
                               <React.Fragment key={msg.id}>
@@ -385,7 +529,12 @@ export default function ChatBox(props: Props) {
                                       <p className="user-msg-time">
                                         {formatMessageTime(msg.created)}
                                       </p>
-                                      <p className="receiver-message-content">{msg.content}</p>
+                                      <div
+                                        className={`receiver-message-content ${
+                                          isGif ? "gif" : ""
+                                        } ${isImage ? "chat-image" : ""}`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
                                     </div>
                                   </div>
                                 ) : (
@@ -394,7 +543,12 @@ export default function ChatBox(props: Props) {
                                       {formatMessageTime(msg.created)}
                                     </p>
                                     <div className="sender-message">
-                                      <p className="sender-message-content">{msg.content}</p>
+                                      <div
+                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
+                                          isImage ? "chat-image" : ""
+                                        }`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
                                     </div>
                                   </div>
                                 )}
@@ -472,6 +626,7 @@ export default function ChatBox(props: Props) {
                   </Tooltip>
                   <EmojiPicker
                     style={{
+                      width: "94%",
                       top: "255px",
                       left: "0px",
                       marginLeft: "14px",
@@ -486,6 +641,66 @@ export default function ChatBox(props: Props) {
                 </div>
               </div>
 
+              {message.length === 0 && (
+                <React.Fragment>
+                  <div className="chatbox-emoji-picker">
+                    <div className="chatbox-emoji">
+                      <Tooltip content={_t("Gif")}>
+                        <div className="emoji-icon" onClick={toggleGif}>
+                          {" "}
+                          {gifIcon}
+                        </div>
+                      </Tooltip>
+                      {shGif && (
+                        <GifPicker
+                          style={{
+                            width: "94%",
+                            top: "76px",
+                            left: 0,
+                            marginLeft: "14px",
+                            borderTopLeftRadius: "8px",
+                            borderTopRightRadius: "8px",
+                            borderBottomLeftRadius: "0px"
+                          }}
+                          gifImagesStyle={{
+                            width: "170px"
+                          }}
+                          shGif={true}
+                          changeState={(gifState) => {
+                            setShGif(gifState!);
+                          }}
+                          fallback={(e) => {
+                            handleGifSelection(e);
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                  <Tooltip content={"Image"}>
+                    <div
+                      className="chatbox-image"
+                      onClick={(e: React.MouseEvent<HTMLElement>) => {
+                        e.stopPropagation();
+                        const el = fileInput.current;
+                        if (el) el.click();
+                      }}
+                    >
+                      <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
+                    </div>
+                  </Tooltip>
+
+                  <input
+                    onChange={fileInputChanged}
+                    className="file-input"
+                    ref={fileInput}
+                    type="file"
+                    accept="image/*"
+                    multiple={true}
+                    style={{ display: "none" }}
+                  />
+                </React.Fragment>
+              )}
+
               <Form
                 onSubmit={(e: React.FormEvent) => {
                   e.preventDefault();
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index a59e48a0749..f2b08aba0ab 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -40,6 +40,7 @@ interface EmojiCacheItem {
 interface Props {
   fallback?: (e: string) => void;
   style?: {
+    width: string;
     top: string;
     left: string | number;
     marginLeft: string;
diff --git a/src/common/components/gif-picker/_index.scss b/src/common/components/gif-picker/_index.scss
index ce529fa762c..2c94546b951 100644
--- a/src/common/components/gif-picker/_index.scss
+++ b/src/common/components/gif-picker/_index.scss
@@ -4,14 +4,6 @@
 @import "src/style/mixins";
 
 .emoji-picker.gif {
-  // width: 280px;
-  width: 430px !important;
-  position: absolute;
-  right: 0;
-  z-index: 12;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  padding: 14px 6px;
 
   @media (max-width: $sm-break) {
     width: 160px !important;
diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index 20932b84f98..774c6f481a5 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -11,6 +11,18 @@ interface Props {
   fallback?: (e: string) => void;
   shGif: boolean;
   changeState: (gifState?: boolean) => void;
+  style?: {
+    width: string;
+    top: string;
+    left: string | number;
+    marginLeft: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    borderBottomLeftRadius: string;
+  };
+  gifImagesStyle?: {
+    width: string;
+  };
 }
 
 interface State {
@@ -22,6 +34,20 @@ interface State {
   total_count: number;
 }
 
+interface GifPickerStyle {
+  width: string;
+  position?: "absolute" | "relative" | "fixed" | "static";
+  right: string | number;
+  zIndex: number;
+  borderBottomRightRadius: string;
+  borderBottomLeftRadius: string;
+  padding: string;
+}
+
+interface GifImageStyle {
+  width: string;
+}
+
 export default class GifPicker extends BaseComponent<Props> {
   state: State = {
     data: [],
@@ -172,10 +198,15 @@ export default class GifPicker extends BaseComponent<Props> {
   };
 
   renderEmoji = (gifData: any[] | null) => {
+    const gifImageStyle: GifImageStyle = {
+      width: "200px",
+      ...(this.props.gifImagesStyle && this.props.gifImagesStyle)
+    };
     return gifData?.map((_gif, i) => {
       return (
         <div className="emoji gifs" key={_gif?.id || i}>
           <img
+            style={gifImageStyle}
             loading="lazy"
             src={_gif?.images?.fixed_height?.url}
             alt="can't fetch :("
@@ -194,8 +225,19 @@ export default class GifPicker extends BaseComponent<Props> {
       return null;
     }
 
+    const gifPickerStyle: GifPickerStyle = {
+      width: "430px",
+      position: "absolute",
+      right: "0",
+      zIndex: 12,
+      borderBottomRightRadius: "8px",
+      borderBottomLeftRadius: "8px",
+      padding: "14px 6px",
+      ...(this.props.style && this.props.style)
+    };
+
     return (
-      <div className="emoji-picker gif" onScroll={this.handleScroll}>
+      <div className="emoji-picker gif" style={gifPickerStyle} onScroll={this.handleScroll}>
         <SearchBox
           autoComplete="off"
           autoCorrect="off"
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 3b4f4ddc5b9..320a12a284b 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -1607,10 +1607,11 @@ export const globalTrending = (
 export const gifIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
+    width="18"
+    height="18"
     fill="currentColor"
     viewBox="0 0 16 16"
+    strokeWidth="2"
   >
     <path
       fillRule="evenodd"
@@ -2068,3 +2069,16 @@ export const messageSendSvg = (
     <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" />
   </svg>
 );
+
+export const chatBoxImageSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="22px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="#3c4449"
+  >
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z" />
+  </svg>
+);

From 70d39729ab890241d0ccd8c131fc9d336364fef5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 17 Jul 2023 18:30:52 +0500
Subject: [PATCH 018/179] Add public chat feature in chat

---
 src/common/components/chat-box/index.scss     | 116 ++-
 src/common/components/chat-box/index.tsx      | 690 ++++++++++++++----
 .../components/community-cover/index.tsx      |   6 +-
 .../components/community-settings/index.tsx   |   2 +
 .../join-community-chat-btn/index.tsx         | 171 +++++
 src/common/helper/chat-utils.ts               |  23 +-
 src/common/helper/message-helper.ts           | 273 ++++++-
 src/common/i18n/locales/en-US.json            |   8 +-
 src/common/img/svg.tsx                        |  17 +
 src/common/store/actions.ts                   |  14 +-
 src/common/store/chat/index.ts                |  91 ++-
 src/common/store/chat/types.ts                |  44 +-
 src/providers/message-provider-types.ts       |   1 +
 src/providers/message-provider.tsx            | 157 +++-
 14 files changed, 1411 insertions(+), 202 deletions(-)
 create mode 100644 src/common/components/join-community-chat-btn/index.tsx

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 960b7e668d2..e95cc1f7c74 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -5,7 +5,7 @@
 
 .chatbox-container {
   position: fixed;
-  // z-index: 99;
+  z-index: 99;
   right: 15rem;
   bottom: 0rem;
   height: 53px;
@@ -75,6 +75,11 @@
       font-size: 21px;
       font-family: $font-family-sans-serif;
 
+      max-width: 183px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
       @include themify(day) {
         color: $charcoal-grey;
       }
@@ -90,15 +95,15 @@
       justify-content: center;
       margin-top: 1.1rem;
       .message-image {
-        margin: 0.2rem 0.3rem 0 0;
+        margin-top: 2px;
 
         .message-svg {
-          width: 40px;
-          height: 40px;
+          width: 32px;
+          height: 32px;
           justify-content: center;
           text-align: center;
           border-radius: 50%;
-          padding-top: 11px;
+          padding-top: 9px;
           display: flex;
 
           svg {
@@ -116,9 +121,9 @@
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 6px;
-          width: 40px;
-          height: 40px;
+          padding-top: 1px;
+          width: 28px;
+          height: 28px;
           border-radius: 50%;
         }
 
@@ -126,13 +131,36 @@
           background: rgba(29, 155, 240, 0.1);
         }
       }
+      .community-menu {
+        margin-top: -15px;
+        svg {
+          @include themify(day) {
+            color: $charcoal-grey;
+          }
+
+          @include themify(night) {
+            color: $white-two;
+          }
+        }
+      }
     }
   }
 
   .chat-body {
     position: relative;
     height: 470px;
-    overflow-y: auto;
+    overflow: scroll;
+    overflow-x: hidden;
+
+    .community-header,
+    .dm-header {
+      padding: 10px;
+      border-bottom: 1px solid #e7e7e7;
+      padding-left: 14px;
+      font-family: Faktum, sans-serif;
+      font-weight: 700;
+      // background: #e4e6eb;
+    }
 
     &.current-user {
       padding-bottom: 10px;
@@ -146,6 +174,22 @@
       }
     }
 
+    &.community {
+      padding-bottom: 10px;
+      height: 412px;
+      margin-bottom: 8px;
+      @include themify(day) {
+        border-bottom: 1px solid $white-three;
+      }
+      @include themify(night) {
+        border-bottom: 1px solid #172b44;
+      }
+    }
+
+    &.no-scroll {
+      overflow: hidden;
+    }
+
     &.join-chat {
       display: flex;
       justify-content: center;
@@ -169,10 +213,10 @@
       border-bottom: 0.5px solid rgba(134, 150, 160, 0.15);
 
       .user-img {
-        padding: 18px 16px;
+        padding: 13px 16px;
       }
       .user-title {
-        padding-top: 19px;
+        padding-top: 13px;
         width: -webkit-fill-available;
 
         .username {
@@ -184,7 +228,7 @@
             color: $white-two;
           }
 
-          font-size: 17px;
+          font-size: 18px;
           font-weight: 700;
           margin-bottom: 0.2rem !important;
         }
@@ -318,7 +362,7 @@
         margin-top: 14%;
       }
       .custom-divider {
-        margin: 0 24px;
+        margin: 12px 24px 0px 24px;
         font-size: 0.7em;
         color: $dark;
         .custom-divider-text {
@@ -332,6 +376,12 @@
         .user-img {
           padding: 18px 8px 8px 16px;
         }
+        .community-user-img {
+          padding: 8px 8px 8px 16px;
+          .user-avatar.medium {
+            cursor: pointer;
+          }
+        }
         .user-info {
           padding-top: 8px;
           .user-msg-time {
@@ -341,6 +391,9 @@
             font-size: 12px;
             margin-left: 9px;
             margin-bottom: 2px;
+            .username-community {
+              margin-right: 8px;
+            }
           }
           .receiver-message-content {
             @include themify(day) {
@@ -416,7 +469,7 @@
                 max-width: 100%;
               }
             }
-            
+
             border-radius: 10px 10px 0px;
             max-width: 280px;
             // background-color: rgb(0, 132, 255);
@@ -498,3 +551,38 @@
     }
   }
 }
+
+.chats-dialog {
+  .chat-modals-body {
+    padding: 2rem;
+
+    .leave-dialog-body {
+      font-size: 18px;
+      margin-top: 12px;
+    }
+    .leave-confirm-buttons {
+      text-align: right !important;
+      .close-btn,
+      .confirm-btn {
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+.profile-box {
+  padding: 15px;
+
+  .user-avatar.large {
+    margin-left: 73px;
+    margin-bottom: 20px;
+  }
+  .profile-name {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 800;
+  }
+}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index b2e5c242f50..84220d79e03 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,5 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Form, FormControl, InputGroup, Spinner } from "react-bootstrap";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { History } from "history";
+import {
+  Button,
+  Form,
+  FormControl,
+  InputGroup,
+  Modal,
+  OverlayTrigger,
+  Popover,
+  Spinner
+} from "react-bootstrap";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import mediumZoom, { Zoom } from "medium-zoom";
@@ -7,7 +17,7 @@ import mediumZoom, { Zoom } from "medium-zoom";
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
 import { Global, Theme } from "../../store/global/types";
-import { DirectMessage } from "../../../providers/message-provider-types";
+import { Channel, DirectMessage, PublicMessage } from "../../../providers/message-provider-types";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
@@ -15,7 +25,7 @@ import SeachUser from "../search-user";
 import LinearProgress from "../linear-progress";
 import EmojiPicker from "../emoji-picker";
 import GifPicker from "../gif-picker";
-import { error } from "../feedback";
+import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
 
 import {
@@ -28,7 +38,11 @@ import {
   chevronDownSvgForSlider,
   emoticonHappyOutlineSvg,
   gifIcon,
-  chatBoxImageSvg
+  chatBoxImageSvg,
+  linkSvg,
+  keyOutlineSvg,
+  KebabMenu,
+  chatLeaveSvg
 } from "../../img/svg";
 
 import { dateToFormatted } from "../../helper/parse-date";
@@ -36,7 +50,6 @@ import {
   createNoStrAccount,
   formatMessageDate,
   formatMessageTime,
-  getDirectMessages,
   getProfileMetaData,
   NostrKeys,
   setProfileMetaData,
@@ -51,6 +64,10 @@ import { uploadImage } from "../../api/misc";
 import { addImage } from "../../api/private-api";
 
 import "./index.scss";
+import { getCommunity } from "../../api/bridge";
+import { Community } from "../../store/communities/types";
+import { npubEncode } from "../../../lib/nostr-tools/nip19";
+import DropDown, { MenuItem } from "../dropdown";
 
 export interface profileData {
   joiningData: string;
@@ -59,6 +76,7 @@ export interface profileData {
 }
 
 interface Props {
+  history: History;
   activeUser: ActiveUser | null;
   global: Global;
   chat: Chat;
@@ -69,12 +87,14 @@ let zoom: Zoom | null = null;
 
 export default function ChatBox(props: Props) {
   const prevPropsRef = useRef(props);
+  const popoverRef = useRef(null);
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
   const fileInput = React.createRef<HTMLInputElement>();
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
   const [message, setMessage] = useState("");
+  const [dMMessage, setDMMessage] = useState("");
   const [isMessageText, setIsMessageText] = useState(false);
   const [profileData, setProfileData] = useState<profileData>();
   const [isScrollToTop, setIsScrollToTop] = useState(false);
@@ -86,10 +106,48 @@ export default function ChatBox(props: Props) {
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeys>();
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [showSpinner, setShowSpinner] = useState(false);
-  const [messagesList, setMessagesList] = useState<DirectMessage[]>([]);
+  const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isUserFromSearch, setIsUserFromSearch] = useState(false);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
   const [shGif, setShGif] = useState(false);
+  const [isCommunity, setIsCommunity] = useState(false);
+  const [communityName, setCommunityName] = useState("");
+  const [currentCommunity, setCurrentCommunity] = useState<Community>();
+  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
+  const [activeMessage, setActiveMessage] = useState("");
+  const [keyDialog, setKeyDialog] = useState(false);
+  const [step, setStep] = useState(0);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const clickedElement = event.target as HTMLElement;
+      const isAvatarClicked =
+        clickedElement.classList.contains("user-avatar") &&
+        clickedElement.classList.contains("medium");
+      if (
+        popoverRef.current &&
+        !(popoverRef.current as HTMLElement).contains(event.target as Node) &&
+        !isAvatarClicked
+      ) {
+        setActiveMessage("");
+      }
+    };
+
+    if (chatBodyDivRef.current) {
+      chatBodyDivRef.current.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      if (chatBodyDivRef.current) {
+        chatBodyDivRef.current.removeEventListener("mousedown", handleClickOutside);
+      }
+    };
+  }, [activeMessage]);
+
+  useEffect(() => {
+    console.log(currentChannel, "currentChannel");
+  }, [currentChannel]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -97,10 +155,16 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
   }, []);
 
+  // useEffect(() => {
+  //   if (window.raven) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.raven]);
+
   useEffect(() => {
-    const msgsList = fetchMessages(receiverPubKey!);
+    const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
-    setMessagesList(messages);
+    setDirectMessagesList(messages);
   }, [props.chat.directMessages]);
 
   useEffect(() => {
@@ -112,28 +176,47 @@ export default function ChatBox(props: Props) {
   }, [props.global.theme]);
 
   useEffect(() => {
-    scrollToBottom();
-    if (messagesList.length !== 0) {
+    scrollerClicked();
+    if (directMessagesList.length !== 0 || publicMessages.length !== 0) {
       //Initialize the zooming effect
       zoomInitializer();
     }
-  }, [messagesList]);
+  }, [directMessagesList, publicMessages]);
+
+  useEffect(() => {
+    if (currentChannel && isCommunity) {
+      const publicMessages = fetchCommunityMessages(currentChannel.id);
+      const messages = publicMessages.sort((a, b) => a.created - b.created);
+      setPublicMessages(messages);
+    }
+    scrollerClicked();
+  }, [currentChannel, isCommunity, props.chat.publicMessages]);
 
   useEffect(() => {
     if (isCurrentUser) {
       zoomInitializer();
-      scrollToBottom();
+      scrollerClicked();
+    } else {
+      scrollerClicked();
     }
   }, [isCurrentUser]);
 
   useEffect(() => {
     fetchProfileData();
     setShow(!!props.activeUser?.username);
-    const msgsList = fetchMessages(receiverPubKey!);
+    const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
-    setMessagesList(messages);
+    setDirectMessagesList(messages);
   }, [props.activeUser]);
 
+  useEffect(() => {
+    if (isCommunity) {
+      fetchCommunity();
+      scrollerClicked();
+      fetchCurrentChannel(communityName);
+    }
+  }, [isCommunity, communityName]);
+
   useEffect(() => {
     if (currentUser) {
       const isCurrentUserFound = props.chat.directContacts.some(
@@ -148,9 +231,9 @@ export default function ChatBox(props: Props) {
 
       const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? null;
       setReceiverPubKey(peer!);
-      const msgsList = fetchMessages(peer!);
+      const msgsList = fetchDirectMessages(peer!);
       const messages = msgsList.sort((a, b) => a.created - b.created);
-      setMessagesList(messages);
+      setDirectMessagesList(messages);
       if (!window.raven) {
         setNostrkeys(activeUserKeys!);
       }
@@ -158,9 +241,30 @@ export default function ChatBox(props: Props) {
       setIsCurrentUserJoined(true);
       setMessage("");
       setShowSpinner(false);
+      scrollerClicked();
     }
   }, [currentUser]);
 
+  const fetchCommunity = async () => {
+    const community = await getCommunity(communityName, props.activeUser?.username);
+    setCurrentCommunity(community!);
+    setProfileData({
+      joiningData: community?.created_at!,
+      about: community?.about,
+      followers: community?.subscribers
+    });
+  };
+
+  const fetchCurrentChannel = (communityName: string) => {
+    for (const item of props.chat.channels) {
+      if (item.communityName === communityName) {
+        setCurrentChannel(item);
+        return item;
+      }
+    }
+    return {};
+  };
+
   const formatFollowers = (count: number | undefined) => {
     if (count) {
       return count >= 1e6
@@ -188,7 +292,7 @@ export default function ChatBox(props: Props) {
     }
   };
 
-  const fetchMessages = (peer: string) => {
+  const fetchDirectMessages = (peer: string) => {
     for (const item of props.chat.directMessages) {
       if (item.peer === peer) {
         return item.chat;
@@ -197,6 +301,15 @@ export default function ChatBox(props: Props) {
     return [];
   };
 
+  const fetchCommunityMessages = (channelId: string) => {
+    for (const item of props.chat.publicMessages) {
+      if (item.channelId === channelId) {
+        return item.PublicMessage;
+      }
+    }
+    return [];
+  };
+
   const fetchCurrentUserData = async () => {
     const response = await getAccountFull(currentUser);
     setProfileData({
@@ -215,7 +328,7 @@ export default function ChatBox(props: Props) {
   const fetchProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
     setActiveUserKeys(profileData?.noStrKey);
-    const hasNoStrKey = "noStrKey" in profileData;
+    const hasNoStrKey = profileData.hasOwnProperty("noStrKey");
     setHasUserJoinedChat(hasNoStrKey);
     setShow(!!props.activeUser?.username);
   };
@@ -238,10 +351,12 @@ export default function ChatBox(props: Props) {
   };
 
   const sendMessage = () => {
-    if (message.length !== 0) {
+    if (message.length !== 0 && !message.includes("Uploading")) {
       setMessage("");
       setIsMessageText(false);
-      window.raven?.sendDirectMessage(receiverPubKey, message);
+      isCommunity
+        ? window?.raven?.sendPublicMessage(currentChannel!, message, [], "")
+        : window.raven?.sendDirectMessage(receiverPubKey, message);
     }
     if (isUserFromSearch && receiverPubKey) {
       window.raven?.publishContacts(currentUser, receiverPubKey);
@@ -252,23 +367,25 @@ export default function ChatBox(props: Props) {
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     let srollHeight: number = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = !isCurrentUser && element.scrollTop >= srollHeight;
+    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
     const isScrollToBottom =
-      isCurrentUser &&
+      (isCurrentUser || isCommunity) &&
       element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight;
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
   };
 
   const scrollerClicked = () => {
-    chatBodyDivRef?.current?.scrollTo({
-      top: isCurrentUser ? chatBodyDivRef?.current?.scrollHeight : 0
+    chatBodyDivRef?.current?.scroll({
+      top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
+      behavior: "auto"
     });
   };
 
   const scrollToBottom = () => {
-    chatBodyDivRef?.current?.scrollTo({
-      top: chatBodyDivRef?.current?.scrollHeight
+    chatBodyDivRef?.current?.scroll({
+      top: chatBodyDivRef?.current?.scrollHeight,
+      behavior: "auto"
     });
   };
 
@@ -297,8 +414,8 @@ export default function ChatBox(props: Props) {
     <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
   );
 
-  const getFormattedDateAndDay = (msg: DirectMessage, i: number) => {
-    const prevMsg = messagesList[i - 1];
+  const getFormattedDateAndDay = (msg: DirectMessage | PublicMessage, i: number) => {
+    const prevMsg = isCurrentUser ? directMessagesList[i - 1] : publicMessages[i - 1];
     const msgDate = formatMessageDate(msg.created);
     const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
     if (msgDate !== prevMsgDate) {
@@ -316,14 +433,16 @@ export default function ChatBox(props: Props) {
   };
 
   const getLastMessage = (pubkey: string) => {
-    const msgsList = fetchMessages(pubkey!);
+    const msgsList = fetchDirectMessages(pubkey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     const lastMessage = messages.slice(-1);
     return lastMessage[0]?.content;
   };
 
   const handleGifSelection = (gif: string) => {
-    window.raven?.sendDirectMessage(receiverPubKey, gif);
+    isCurrentUser
+      ? window.raven?.sendDirectMessage(receiverPubKey, gif)
+      : window?.raven?.sendPublicMessage(currentChannel!, gif, [], "");
   };
 
   const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
@@ -390,6 +509,7 @@ export default function ChatBox(props: Props) {
         const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
 
         imgTag && setMessage(imgTag);
+        setIsMessageText(true);
       } else {
         error(_t("editor-toolbar.image-error-cache"));
       }
@@ -407,12 +527,124 @@ export default function ChatBox(props: Props) {
     return content.includes("https://images.ecency.com");
   };
 
+  const communityClicked = (community: string, name: string) => {
+    setIsCommunity(true);
+    setCommunityName(community);
+  };
+
+  const getProfileName = (creator: string) => {
+    const profile = props.chat.profiles.find((x) => x.creator === creator);
+    return profile?.name;
+  };
+
+  const sendDM = (name: string, pubkey: string) => {
+    if (dMMessage) {
+      window.raven?.sendDirectMessage(pubkey, dMMessage);
+
+      setIsCurrentUser(true);
+      setCurrentUser(name);
+      setIsCommunity(false);
+      setCommunityName("");
+      setActiveMessage("");
+      setDMMessage("");
+    }
+  };
+
+  const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    setDMMessage(e.target.value);
+  };
+
+  const handleImageClick = (id: string) => {
+    if (activeMessage === id) {
+      popoverRef.current = null;
+      setActiveMessage("");
+    } else {
+      popoverRef.current = null;
+      setActiveMessage(id);
+    }
+  };
+
+  const inviteClicked = () => {
+    const textField = document.createElement("textarea");
+    textField.innerText = currentChannel?.id!;
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand("copy");
+    textField.remove();
+    success("Channel Id copied into clipboard");
+  };
+
+  const LeaveModal = () => {
+    return (
+      <>
+        <div className="leave-dialog-header border-bottom">
+          <div className="leave-dialog-titles">
+            <h2 className="leave-main-title">Confirmaton</h2>
+          </div>
+        </div>
+        <div className="leave-dialog-body">Are you sure?</div>
+        <p className="leave-confirm-buttons">
+          {/* <a
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              setKeyDialog(false);
+            }}
+          >
+            {_t("g.back")}
+          </a> */}
+          <Button
+            variant="outline-primary"
+            className="close-btn"
+            onClick={() => {
+              setKeyDialog(false);
+              setStep(0);
+            }}
+          >
+            Close
+          </Button>
+          <Button variant="outline-primary" className="confirm-btn">
+            Confirm
+          </Button>
+        </p>
+      </>
+    );
+  };
+  const LeaveClicked = () => {
+    setKeyDialog(true);
+    setStep(1);
+  };
+
+  const toggleKeyDialog = () => {
+    setKeyDialog(!keyDialog);
+  };
+
+  const menuItems: MenuItem[] = [
+    {
+      label: _t("chat.invite"),
+      onClick: inviteClicked,
+      icon: linkSvg
+    },
+    {
+      label: "Leave",
+      onClick: LeaveClicked,
+      icon: chatLeaveSvg
+    }
+  ];
+
+  const menuConfig = {
+    history: props.history,
+    label: "",
+    icon: KebabMenu,
+    items: menuItems
+  };
+
   return (
     <>
       {show && (
         <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
           <div className="chat-header">
-            {currentUser && expanded && (
+            {(currentUser || communityName) && expanded && (
               <Tooltip content={_t("chat.back")}>
                 <div className="back-arrow-image">
                   <span
@@ -420,6 +652,9 @@ export default function ChatBox(props: Props) {
                     onClick={() => {
                       setCurrentUser("");
                       setIsCurrentUser(false);
+                      setCommunityName("");
+                      setIsCommunity(false);
+                      setActiveMessage("");
                     }}
                   >
                     {" "}
@@ -429,13 +664,24 @@ export default function ChatBox(props: Props) {
               </Tooltip>
             )}
             <div className="message-title" onClick={() => setExpanded(!expanded)}>
-              {currentUser && (
+              {(currentUser || isCommunity) && (
                 <p className="user-icon">
-                  <UserAvatar username={currentUser} size="small" />
+                  <UserAvatar
+                    username={
+                      isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""
+                    }
+                    size="small"
+                  />
                 </p>
               )}
 
-              <p className="message-content">{currentUser ? currentUser : _t("chat.messages")}</p>
+              <p className="message-content">
+                {currentUser
+                  ? currentUser
+                  : isCommunity
+                  ? currentCommunity?.title
+                  : _t("chat.messages")}
+              </p>
             </div>
             <div className="actionable-imgs">
               {!currentUser && hasUserJoinedChat && (
@@ -452,117 +698,289 @@ export default function ChatBox(props: Props) {
                   </p>
                 </Tooltip>
               </div>
+              {isCommunity && (
+                <div className="community-menu">
+                  <DropDown {...menuConfig} float="right" alignBottom={false} noMarginTop={true} />
+                </div>
+              )}
             </div>
           </div>
 
           <div
-            className={`chat-body ${currentUser ? "current-user" : ""} ${
-              !hasUserJoinedChat ? "join-chat" : ""
-            }`}
+            className={`chat-body ${
+              currentUser ? "current-user" : isCommunity ? "community" : ""
+            } ${!hasUserJoinedChat ? "join-chat" : activeMessage ? "no-scroll" : ""}`}
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
             {hasUserJoinedChat ? (
               <>
-                {currentUser.length !== 0 ? (
+                {currentUser.length !== 0 || communityName.length !== 0 ? (
                   <>
-                    <Link to={`/@${currentUser}`}>
-                      <div className="user-profile">
-                        {profileData?.joiningData && (
-                          <div className="user-profile-data">
-                            <span className="user-logo">
-                              <UserAvatar username={currentUser} size="large" />
-                            </span>
-                            <h4 className="user-name user-logo ">{currentUser}</h4>
-                            {profileData.about && (
-                              <p className="about user-logo ">{profileData.about}</p>
-                            )}
-
-                            <div className="created-date user-logo joining-info">
-                              <p>
-                                {" "}
-                                {_t("chat.joined")}{" "}
-                                {dateToFormatted(profileData!.joiningData, "LL")}
-                              </p>
-                              <p className="followers">
-                                {" "}
-                                {formatFollowers(profileData!.followers)} {_t("chat.followers")}
-                              </p>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </Link>
                     <div className="chats">
                       {!isCurrentUserJoined ? (
                         <p className="not-joined">{_t("chat.not-joined")}</p>
                       ) : (
                         <>
-                          {messagesList.map((msg, i) => {
-                            const dayAndMonth = getFormattedDateAndDay(msg, i);
-                            let renderedPreview = renderPostBody(
-                              msg.content,
-                              false,
-                              props.global.canUseWebp
-                            );
-
-                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                            const isGif = isMessageGif(msg.content);
-
-                            const isImage = isMessageImage(msg.content);
-
-                            return (
-                              <React.Fragment key={msg.id}>
-                                {dayAndMonth}
-                                {msg.creator !== activeUserKeys?.pub ? (
-                                  <div key={msg.id} className="message">
-                                    <div className="user-img">
-                                      <Link to={`/@${currentUser}`}>
-                                        <span>
-                                          <UserAvatar username={currentUser} size="medium" />
-                                        </span>
-                                      </Link>
-                                    </div>
-                                    <div className="user-info">
-                                      <p className="user-msg-time">
-                                        {formatMessageTime(msg.created)}
-                                      </p>
-                                      <div
-                                        className={`receiver-message-content ${
-                                          isGif ? "gif" : ""
-                                        } ${isImage ? "chat-image" : ""}`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                    </div>
-                                  </div>
-                                ) : (
-                                  <div key={msg.id} className="sender">
-                                    <p className="sender-message-time">
-                                      {formatMessageTime(msg.created)}
+                          {" "}
+                          <Link
+                            to={
+                              isCurrentUser
+                                ? `/@${currentUser}`
+                                : isCommunity
+                                ? `/created/${currentCommunity?.name}`
+                                : ""
+                            }
+                          >
+                            <div className="user-profile">
+                              {profileData?.joiningData && (
+                                <div className="user-profile-data">
+                                  <span className="user-logo">
+                                    <UserAvatar
+                                      username={
+                                        isCurrentUser
+                                          ? currentUser
+                                          : (isCommunity && currentCommunity?.name) || ""
+                                      }
+                                      size="large"
+                                    />
+                                  </span>
+                                  <h4 className="user-name user-logo ">
+                                    {isCurrentUser
+                                      ? currentUser
+                                      : (isCommunity && currentCommunity?.title) || ""}
+                                  </h4>
+                                  {profileData.about && (
+                                    <p className="about user-logo ">{profileData.about}</p>
+                                  )}
+
+                                  <div className="created-date user-logo joining-info">
+                                    <p>
+                                      {" "}
+                                      {_t("chat.joined")}{" "}
+                                      {dateToFormatted(profileData!.joiningData, "LL")}
+                                    </p>
+                                    <p className="followers">
+                                      {" "}
+                                      {formatFollowers(profileData!.followers)}{" "}
+                                      {isCommunity ? _t("chat.subscribers") : _t("chat.followers")}
                                     </p>
-                                    <div className="sender-message">
-                                      <div
-                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
-                                          isImage ? "chat-image" : ""
-                                        }`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                    </div>
                                   </div>
-                                )}
-                              </React.Fragment>
-                            );
-                          })}
+                                </div>
+                              )}
+                            </div>
+                          </Link>
+                          {isCurrentUser
+                            ? directMessagesList.map((msg, i) => {
+                                const dayAndMonth = getFormattedDateAndDay(msg, i);
+                                let renderedPreview = renderPostBody(
+                                  msg.content,
+                                  false,
+                                  props.global.canUseWebp
+                                );
+
+                                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                                const isGif = isMessageGif(msg.content);
+
+                                const isImage = isMessageImage(msg.content);
+
+                                return (
+                                  <React.Fragment key={msg.id}>
+                                    {dayAndMonth}
+                                    {msg.creator !== activeUserKeys?.pub ? (
+                                      <div key={msg.id} className="message">
+                                        <div className="user-img">
+                                          <Link to={`/@${currentUser}`}>
+                                            <span>
+                                              <UserAvatar username={currentUser} size="medium" />
+                                            </span>
+                                          </Link>
+                                        </div>
+                                        <div className="user-info">
+                                          <p className="user-msg-time">
+                                            {formatMessageTime(msg.created)}
+                                          </p>
+                                          <div
+                                            className={`receiver-message-content ${
+                                              isGif ? "gif" : ""
+                                            } ${isImage ? "chat-image" : ""}`}
+                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                          />
+                                        </div>
+                                      </div>
+                                    ) : (
+                                      <div key={msg.id} className="sender">
+                                        <p className="sender-message-time">
+                                          {formatMessageTime(msg.created)}
+                                        </p>
+                                        <div className="sender-message">
+                                          <div
+                                            className={`sender-message-content ${
+                                              isGif ? "gif" : ""
+                                            } ${isImage ? "chat-image" : ""}`}
+                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                          />
+                                        </div>
+                                      </div>
+                                    )}
+                                  </React.Fragment>
+                                );
+                              })
+                            : publicMessages.map((pMsg, i) => {
+                                const dayAndMonth = getFormattedDateAndDay(pMsg, i);
+                                let renderedPreview = renderPostBody(
+                                  pMsg.content,
+                                  false,
+                                  props.global.canUseWebp
+                                );
+
+                                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                                const isGif = isMessageGif(pMsg.content);
+
+                                const isImage = isMessageImage(pMsg.content);
+
+                                const name = getProfileName(pMsg.creator);
+
+                                const popover = (
+                                  <Popover
+                                    id={`profile-popover`}
+                                    placement="right"
+                                    className="profile-popover"
+                                  >
+                                    <Popover.Content>
+                                      <div className="profile-box" ref={popoverRef}>
+                                        <UserAvatar username={name!} size="large" />
+
+                                        <p className="profile-name">{name!}</p>
+
+                                        <Form
+                                          onSubmit={(e: React.FormEvent) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            sendDM(name!, pMsg.creator);
+                                          }}
+                                        >
+                                          <InputGroup className="dm-input-group">
+                                            <Form.Control
+                                              value={dMMessage}
+                                              autoFocus={true}
+                                              onChange={handleDMChange}
+                                              required={true}
+                                              type="text"
+                                              placeholder={"Send direct message"}
+                                              autoComplete="off"
+                                              className="dm-chat-input"
+                                              style={{
+                                                maxWidth: "100%",
+                                                overflowWrap: "break-word"
+                                              }}
+                                            />
+                                          </InputGroup>
+                                        </Form>
+                                      </div>
+                                    </Popover.Content>
+                                  </Popover>
+                                );
+
+                                return (
+                                  <React.Fragment key={pMsg.id}>
+                                    {dayAndMonth}
+                                    {pMsg.creator !== activeUserKeys?.pub ? (
+                                      <div key={pMsg.id} className="message">
+                                        <div className="community-user-img">
+                                          <OverlayTrigger
+                                            trigger="click"
+                                            placement="right"
+                                            // trigger={["hover", "focus"]}
+                                            show={activeMessage === pMsg.id}
+                                            overlay={popover}
+                                            delay={1000}
+                                            onToggle={() => handleImageClick(pMsg.id)}
+                                          >
+                                            <span>
+                                              <UserAvatar username={name!} size="medium" />
+                                            </span>
+                                          </OverlayTrigger>
+                                        </div>
+
+                                        <div className="user-info">
+                                          <p className="user-msg-time">
+                                            <span className="username-community">{name}</span>
+                                            {formatMessageTime(pMsg.created)}
+                                          </p>
+                                          <div
+                                            className={`receiver-message-content ${
+                                              isGif ? "gif" : ""
+                                            } ${isImage ? "chat-image" : ""}`}
+                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                          />
+                                        </div>
+                                      </div>
+                                    ) : (
+                                      <div key={pMsg.id} className="sender">
+                                        <p className="sender-message-time">
+                                          {formatMessageTime(pMsg.created)}
+                                        </p>
+                                        <div className="sender-message">
+                                          <div
+                                            className={`sender-message-content ${
+                                              isGif ? "gif" : ""
+                                            } ${isImage ? "chat-image" : ""}`}
+                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                          />
+                                        </div>
+                                      </div>
+                                    )}
+                                  </React.Fragment>
+                                );
+                              })}
                         </>
                       )}
                     </div>
                   </>
                 ) : (
                   <>
-                    {props.chat.directContacts.length !== 0 ? (
+                    {props.chat.directContacts.length !== 0 || props.chat.channels.length !== 0 ? (
                       <React.Fragment>
+                        {props.chat.channels.length !== 0 && (
+                          <>
+                            <div className="community-header">Communities</div>
+                            {props.chat.channels.map((channel) => {
+                              return (
+                                <div key={channel.id} className="chat-content">
+                                  <Link to={`/created/${channel.communityName}`}>
+                                    <div className="user-img">
+                                      <span>
+                                        <UserAvatar
+                                          username={channel.communityName!}
+                                          size="medium"
+                                        />
+                                      </span>
+                                    </div>
+                                  </Link>
+
+                                  <div
+                                    className="user-title"
+                                    onClick={() =>
+                                      communityClicked(channel.communityName!, channel.name)
+                                    }
+                                  >
+                                    <p className="username" style={{ paddingTop: "8px" }}>
+                                      {channel.name}
+                                    </p>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                            {props.chat.directContacts.length !== 0 && (
+                              <div className="dm-header">DMs</div>
+                            )}
+                          </>
+                        )}
                         {props.chat.directContacts.map((user: DirectContactsType) => {
                           return (
                             <div key={user.pubkey} className="chat-content">
@@ -602,7 +1020,8 @@ export default function ChatBox(props: Props) {
               </Button>
             )}
 
-            {((isScrollToTop && !isCurrentUser) || (isCurrentUser && isScrollToBottom)) && (
+            {((isScrollToTop && !isCurrentUser) ||
+              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
               <Tooltip
                 content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
               >
@@ -611,13 +1030,13 @@ export default function ChatBox(props: Props) {
                   style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
                   onClick={scrollerClicked}
                 >
-                  {isCurrentUser ? chevronDownSvgForSlider : chevronUpSvg}
+                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
                 </div>
               </Tooltip>
             )}
           </div>
           {showSpinner && <LinearProgress />}
-          {currentUser && (
+          {(currentUser || isCommunity) && (
             <div className="chat">
               <div className="chatbox-emoji-picker">
                 <div className="chatbox-emoji">
@@ -712,6 +1131,7 @@ export default function ChatBox(props: Props) {
                 <InputGroup className="chat-input-group">
                   <Form.Control
                     value={message}
+                    autoFocus={true}
                     onChange={handleMessage}
                     required={true}
                     type="text"
@@ -724,7 +1144,7 @@ export default function ChatBox(props: Props) {
                     }
                   />
                   <InputGroup.Append
-                    className={`msg-svg ${isMessageText ? "active" : ""}`}
+                    className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
                     onClick={sendMessage}
                   >
                     {messageSendSvg}
@@ -742,6 +1162,24 @@ export default function ChatBox(props: Props) {
           setCurrentUserFromSearch={setCurrentUserFromSearch}
         />
       )}
+
+      {keyDialog && (
+        <Modal
+          animation={false}
+          show={true}
+          centered={true}
+          onHide={toggleKeyDialog}
+          keyboard={false}
+          className="chats-dialog modal-thin-header"
+          size="lg"
+        >
+          <Modal.Header closeButton={true} />
+          <Modal.Body className="chat-modals-body">
+            {step === 1 && LeaveModal()}
+            {/* {step === 2 && successModal()} */}
+          </Modal.Body>
+        </Modal>
+      )}
     </>
   );
 }
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 992d624d229..3805477505e 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -21,6 +21,7 @@ setProxyBase(defaults.imageServer);
 import BaseComponent from "../base";
 import SubscriptionBtn from "../subscription-btn";
 import CommunityPostBtn from "../community-post-btn";
+import JoinCommunityChatBtn from "../join-community-chat-btn";
 import Tooltip from "../tooltip";
 import ImageUploadDialog from "../image-upload";
 
@@ -138,6 +139,7 @@ interface Props {
   toggleUIProp: (what: ToggleType) => void;
   updateSubscriptions: (list: Subscription[]) => void;
   addAccount: (data: Account) => void;
+  addCommunity: (data: Community) => void;
 }
 
 export class CommunityCover extends Component<Props> {
@@ -203,6 +205,7 @@ export class CommunityCover extends Component<Props> {
         <div className="controls-holder">
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
+          <JoinCommunityChatBtn {...this.props} />
         </div>
         {canUpdateCoverImage && (
           <EditCoverImage
@@ -231,7 +234,8 @@ export default (p: Props) => {
     deleteUser: p.deleteUser,
     toggleUIProp: p.toggleUIProp,
     updateSubscriptions: p.updateSubscriptions,
-    addAccount: p.addAccount
+    addAccount: p.addAccount,
+    addCommunity: p.addCommunity
   };
 
   return <CommunityCover {...props} />;
diff --git a/src/common/components/community-settings/index.tsx b/src/common/components/community-settings/index.tsx
index 29ac5931536..a491319ec3c 100644
--- a/src/common/components/community-settings/index.tsx
+++ b/src/common/components/community-settings/index.tsx
@@ -180,9 +180,11 @@ export class CommunitySettings extends BaseComponent<Props, State> {
     };
 
     this.stateSet({ inProgress: true });
+    console.log("Submit run");
     return updateCommunity(activeUser.username, community.name, newProps)
       .then(() => {
         const nCom: Community = { ...clone(community), ...newProps };
+        console.log(nCom, "New dara");
         addCommunity(nCom);
         onHide();
       })
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
new file mode 100644
index 00000000000..a275bc322ab
--- /dev/null
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from "react";
+import { Button, Spinner } from "react-bootstrap";
+import { History } from "history";
+
+import { Community } from "../../store/communities/types";
+import { ActiveUser } from "../../store/active-user/types";
+
+import { _t } from "../../i18n";
+
+import { useMappedStore } from "../../store/use-mapped-store";
+import { Channel } from "../../../providers/message-provider-types";
+import {
+  createNoStrAccount,
+  getProfileMetaData,
+  setChannelMetaData,
+  setProfileMetaData
+} from "../../helper/chat-utils";
+import { setNostrkeys } from "../../../providers/message-provider";
+
+interface Props {
+  history: History;
+  community: Community;
+  activeUser: ActiveUser | null;
+  addCommunity: (data: Community) => void;
+  resetChat: () => void;
+}
+
+export default function JoinCommunityChatBtn(props: Props) {
+  const { chat } = useMappedStore();
+  const [inProgress, setInProgress] = useState(false);
+  const [isJoinChat, setIsJoinChat] = useState(false);
+  const [isChatEnabled, setIsChatEnabled] = useState(false);
+  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
+
+  useEffect(() => {
+    fetchCommunityProfile();
+    fetchUserProfileData();
+  }, [chat.channels, currentChannel]);
+
+  useEffect(() => {
+    fetchCommunityProfile();
+  }, [props.activeUser]);
+
+  // useEffect(() => {
+  //   if (window.raven) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.raven]);
+
+  useEffect(() => {
+    checkIsChatJoined();
+
+    fetchCurrentChannel();
+  }, [isJoinChat, props.community, chat.channels]);
+
+  const fetchUserProfileData = async () => {
+    const profileData = await getProfileMetaData(props.activeUser?.username!);
+    const hasNoStrKey = profileData.hasOwnProperty("noStrKey");
+    setHasUserJoinedChat(hasNoStrKey);
+  };
+
+  const fetchCommunityProfile = async () => {
+    const communityProfile = await getProfileMetaData(props.community?.name);
+    const haschannelMetaData = communityProfile.hasOwnProperty("channel");
+    setIsChatEnabled(haschannelMetaData);
+    const hasNoStrKey = communityProfile.hasOwnProperty("noStrKey");
+    if (!currentChannel) {
+      setCurrentChannel(communityProfile.channel);
+    }
+
+    if (!haschannelMetaData && currentChannel) {
+      await setChannelMetaData(props.community.name, currentChannel!);
+    }
+  };
+
+  const checkIsChatJoined = () => {
+    for (const item of chat.channels) {
+      if (item.communityName === props.community.name) {
+        setIsJoinChat(true);
+      }
+    }
+    return [];
+  };
+
+  const createCommunityChat = async () => {
+    const { community } = props;
+    try {
+      setInProgress(true);
+      const data = await window?.raven?.createChannel({
+        name: community.title,
+        about: community.description,
+        communityName: community.name,
+        picture: ""
+      });
+
+      const content = JSON.parse(data?.content!);
+      const channelMetaData = {
+        id: data?.id as string,
+        creator: data?.pubkey as string,
+        created: data?.created_at!,
+        communityName: content.communityName,
+        name: content.name,
+        about: content.about,
+        picture: content.picture
+      };
+      await setChannelMetaData(community.name, currentChannel!);
+      setCurrentChannel(channelMetaData);
+    } finally {
+      setInProgress(false);
+      setIsJoinChat(true);
+    }
+  };
+
+  const joinCommunityChat = () => {
+    window?.raven?.loadChannel(currentChannel?.id!);
+    setIsJoinChat(true);
+  };
+
+  const fetchCurrentChannel = () => {
+    for (const item of chat.channels) {
+      if (item.communityName === props.community.name) {
+        setCurrentChannel(item);
+        return item;
+      }
+    }
+    return {};
+  };
+
+  const handleJoinChat = async () => {
+    const { resetChat } = props;
+    setInProgress(true);
+    const keys = createNoStrAccount();
+    await setProfileMetaData(props.activeUser, keys);
+    setHasUserJoinedChat(true);
+    setNostrkeys(keys);
+    window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
+    setInProgress(false);
+    fetchCommunityProfile();
+    resetChat();
+  };
+
+  const chatButtonSpinner = (
+    <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
+  );
+
+  return (
+    <>
+      {props.community["context"].role === "owner" ? (
+        isJoinChat ? (
+          <Button variant="outline-primary">Chat Joined</Button>
+        ) : hasUserJoinedChat ? (
+          <Button onClick={createCommunityChat}>
+            {inProgress && chatButtonSpinner}
+            Start Community Chat
+          </Button>
+        ) : (
+          <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat</Button>
+        )
+      ) : isChatEnabled && !isJoinChat && hasUserJoinedChat ? (
+        <Button onClick={joinCommunityChat}>{_t("community.join-community-chat")}</Button>
+      ) : !hasUserJoinedChat ? (
+        <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat </Button>
+      ) : isJoinChat ? (
+        <Button variant="outline-primary">Chat Joined</Button>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 9530da60353..5f55e4fdcc6 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { generatePrivateKey, getPublicKey } from "../../lib/nostr-tools/keys";
-import { DirectMessage } from "../../providers/message-provider-types";
+import { Channel } from "../../providers/message-provider-types";
 import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
 import { ActiveUser } from "../store/active-user/types";
@@ -37,6 +37,7 @@ export const resetProfile = async (activeUser: ActiveUser | null) => {
     version: 2
   };
   const updatedProfile = await updateProfile(response, { ...profileC });
+  console.log(updatedProfile);
 };
 
 export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: NostrKeys) => {
@@ -52,6 +53,18 @@ export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: No
   return updatedProfile;
 };
 
+export const setChannelMetaData = async (username: string, channel: Channel) => {
+  const response = await getAccountFull(username!);
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+  const newProfile = {
+    channel: channel
+  };
+  console.log({ ...profile, ...newProfile });
+  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+  return updatedProfile;
+};
+
 export const createNoStrAccount = () => {
   const priv = generatePrivateKey();
   const pub = getPublicKey(priv);
@@ -62,14 +75,6 @@ export function notEmpty<TValue>(value: TValue | null | undefined): value is TVa
   return value !== null && value !== undefined;
 }
 
-export const getDirectMessages = (messages: DirectMessage[], peer?: string) => {
-  const clean = messages.filter((x) => x.peer === peer).sort((a, b) => a.created - b.created);
-
-  return clean
-    .map((c) => ({ ...c, children: clean.filter((x) => x.root === c.id) }))
-    .filter((x) => !x.root);
-};
-
 export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
 
 export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index 9c5a64b192c..6d1938f80e2 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -3,10 +3,13 @@ import { Kind } from "../../lib/nostr-tools/event";
 import { Filter } from "../../lib/nostr-tools/filter";
 import { TypedEventEmitter } from "./message-event-emitter";
 import {
+  Channel,
   DirectContact,
   DirectMessage,
   Keys,
-  Metadata
+  Metadata,
+  Profile,
+  PublicMessage
 } from "../../providers/message-provider-types";
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
@@ -21,15 +24,26 @@ const relays = {
   "wss://nos.lol": { read: true, write: true }
 };
 
+enum NewKinds {
+  MuteList = 10000,
+  Arbitrary = 30078
+}
+
 export enum RavenEvents {
   Ready = "ready",
+  ProfileUpdate = "profile_update",
+  ChannelCreation = "channel_creation",
   DirectMessage = "direct_message",
-  DirectContact = "direct_contact"
+  DirectContact = "direct_contact",
+  PublicMessage = "public_message"
 }
 
 type EventHandlerMap = {
   [RavenEvents.Ready]: () => void;
+  [RavenEvents.ProfileUpdate]: (data: Profile[]) => void;
   [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
+  [RavenEvents.ChannelCreation]: (data: Channel[]) => void;
+  [RavenEvents.PublicMessage]: (data: PublicMessage[]) => void;
   [RavenEvents.DirectContact]: (data: DirectContact[]) => void;
 };
 
@@ -75,20 +89,91 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       {
         kinds: [Kind.Contacts],
         authors: [this.pub]
+      },
+      {
+        kinds: [Kind.ChannelCreation, Kind.EventDeletion],
+        authors: [this.pub]
+      },
+      {
+        kinds: [Kind.ChannelMessage],
+        authors: [this.pub]
+      },
+      {
+        kinds: [NewKinds.Arbitrary],
+        authors: [this.pub],
+        "#d": ["left-channel-list", "read-mark-map"]
       }
     ];
     this.fetchP(filters).then((resp) => {
       const events = resp.sort((a, b) => b.created_at - a.created_at);
+      const deletions = resp
+        .filter((x) => x.kind === Kind.EventDeletion)
+        .map((x) => Raven.findTagValue(x, "e"));
       const profile = events.find((x) => x.kind === Kind.Contacts);
       if (profile && profile?.tags.length !== 0) {
         this.directContacts = profile?.tags;
         this.pushToEventBuffer(profile!);
       }
+
+      const leftChannelList = events.find(
+        (x) =>
+          x.kind.toString() === NewKinds.Arbitrary.toString() &&
+          Raven.findTagValue(x, "d") === "left-channel-list"
+      );
+      console.log(leftChannelList, "leftChannelList");
+      if (leftChannelList) {
+        this.pushToEventBuffer(leftChannelList);
+      }
+
+      const channels = Array.from(
+        new Set(
+          events
+            .map((x) => {
+              if (x.kind === Kind.ChannelCreation) {
+                return x.id;
+              }
+
+              if (x.kind === Kind.ChannelMessage) {
+                return Raven.findTagValue(x, "e");
+              }
+
+              return undefined;
+            })
+            .filter((x) => !deletions.includes(x))
+            .filter(notEmpty)
+        )
+      );
+      if (channels.length !== 0) {
+        this.fetchChannels(channels);
+      }
+
       this.fetchMessages();
       this.emit(RavenEvents.Ready);
     });
   }
 
+  public fetchChannels(channels: string[]) {
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.ChannelCreation],
+        ids: channels
+      },
+      ...channels.map((c) => ({
+        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
+        "#e": [c]
+      })),
+      ...channels.map((c) => ({
+        kinds: [Kind.ChannelMessage],
+        "#e": [c],
+        limit: 30
+      }))
+    ];
+
+    filters.forEach((c) => {
+      this.fetch([c]);
+    });
+  }
+
   public fetchMessages() {
     this.directContacts.map((contact: any) => {
       const filters: Filter[] = [
@@ -139,26 +224,71 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     this.fetch(filters);
   }
 
+  public loadChannel(id: string) {
+    // console.log(id, "id");
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.ChannelCreation],
+        ids: [id]
+      },
+      {
+        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
+        "#e": [id]
+      },
+      {
+        kinds: [Kind.ChannelMessage],
+        "#e": [id],
+        limit: 30
+      }
+    ];
+
+    this.fetch(filters);
+  }
+
+  public loadProfiles(pubs: string[]) {
+    console.log("load profiles run");
+    pubs.forEach((p) => {
+      this.fetch(
+        [
+          {
+            kinds: [Kind.Metadata],
+            authors: [p]
+          }
+        ],
+        true,
+        false
+      );
+    });
+  }
+
   public checkProfiles(pubs: string[]) {
     pubs.forEach((p) => {
       if (this.directContacts.length !== 0) {
         this.directContacts.forEach((c: any) => {
           if (p !== c[0]) {
-            this.fetch([
-              {
-                kinds: [Kind.Metadata],
-                authors: [p]
-              }
-            ]);
+            this.fetch(
+              [
+                {
+                  kinds: [Kind.Metadata],
+                  authors: [p]
+                }
+              ],
+              true,
+              true
+            );
           }
         });
       } else {
-        this.fetch([
-          {
-            kinds: [Kind.Metadata],
-            authors: [p]
-          }
-        ]);
+        this.fetch(
+          [
+            {
+              kinds: [Kind.Metadata],
+              authors: [p]
+            }
+          ],
+          true,
+          true
+        );
       }
     });
   }
@@ -180,14 +310,14 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     }
   }
 
-  private fetch(filters: Filter[], unsub: boolean = true) {
+  private fetch(filters: Filter[], unsub: boolean = true, isDirectContact: boolean = false) {
+    // console.log("Fetch run", filters);
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      if (event.kind === Kind.Metadata) {
-        this.addDirectContact(event);
-      }
-      this.pushToEventBuffer(event);
+      event.kind === Kind.Metadata && isDirectContact
+        ? this.addDirectContact(event)
+        : this.pushToEventBuffer(event);
     });
 
     sub.on("eose", () => {
@@ -215,7 +345,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     });
   }
 
-  public listen(since: number) {
+  public listen(channels: string[], since: number) {
     if (this.listenerSub) {
       this.listenerSub.unsub();
     }
@@ -226,6 +356,11 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
           authors: [this.pub],
           since
         },
+        {
+          kinds: [Kind.EventDeletion, Kind.ChannelMetadata, Kind.ChannelMessage],
+          "#e": channels,
+          since
+        },
         {
           kinds: [Kind.EncryptedDirectMessage],
           "#p": [this.pub],
@@ -236,6 +371,11 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     );
   }
 
+  public async createChannel(meta: Metadata) {
+    // console.log("create channel run");
+    return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
+  }
+
   private async findHealthyRelay(relays: string[]) {
     for (const relay of relays) {
       try {
@@ -263,6 +403,21 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     return this.publish(Kind.EncryptedDirectMessage, tags, encrypted);
   }
 
+  public async sendPublicMessage(
+    channel: Channel,
+    message: string,
+    mentions?: string[],
+    parent?: string
+  ) {
+    const root = parent || channel.id;
+    const relay = await this.findHealthyRelay(this.pool.seenOn(root) as string[]);
+    const tags = [["e", root, relay, "root"]];
+    if (mentions) {
+      mentions.forEach((m) => tags.push(["p", m]));
+    }
+    return this.publish(Kind.ChannelMessage, tags, message);
+  }
+
   private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
     return new Promise((resolve, reject) => {
       this.signEvent({
@@ -276,22 +431,26 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       })
         .then((event) => {
           if (!event) {
+            console.log("Event not found");
             reject("Couldn't sign event!");
             return;
           }
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
+            console.log("event is send", event);
             if (event.kind === Kind.Contacts) {
               this.getContacts();
             }
           });
 
           pub.on("failed", () => {
+            console.log("Failed to sign event");
             reject("Couldn't sign event!");
           });
         })
         .catch(() => {
+          console.log("Catch run event not");
           reject("Couldn't sign event!");
         });
     });
@@ -332,7 +491,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
 
   async processEventQueue() {
     this.eventQueueFlag = false;
-    const data = this.eventQueue
+    const directContacts = this.eventQueue
       .filter((x) => x.kind === Kind.Contacts)
       .map((e: any) => {
         const profiles: Array<[string, string]> = e.tags;
@@ -340,14 +499,77 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
 
-    if (data.length > 0) {
-      const directContactsProfile: Array<{ pubkey: string; name: string }> = data[0];
+    if (directContacts.length > 0) {
+      const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
 
       if (directContactsProfile.length > 0) {
         this.emit(RavenEvents.DirectContact, directContactsProfile);
       }
     }
 
+    const profileUpdates: Profile[] = this.eventQueue
+      .filter((x) => x.kind === Kind.Metadata)
+      .map((ev) => {
+        const content = Raven.parseJson(ev.content);
+        return content
+          ? {
+              id: ev.id,
+              creator: ev.pubkey,
+              created: ev.created_at,
+              ...Raven.normalizeMetadata(content)
+            }
+          : null;
+      })
+      .filter(notEmpty);
+    if (profileUpdates.length > 0) {
+      this.emit(RavenEvents.ProfileUpdate, profileUpdates);
+    }
+
+    const channelCreations: Channel[] = this.eventQueue
+      .filter((x) => x.kind === Kind.ChannelCreation)
+      .map((ev) => {
+        const content = Raven.parseJson(ev.content);
+        // console.log(content,"events")
+        return content
+          ? {
+              id: ev.id,
+              creator: ev.pubkey,
+              created: ev.created_at,
+              communityName: content.communityName,
+              ...Raven.normalizeMetadata(content)
+            }
+          : null;
+      })
+      .filter(notEmpty);
+    if (channelCreations.length > 0) {
+      this.emit(RavenEvents.ChannelCreation, channelCreations);
+    }
+
+    const publicMessages: PublicMessage[] = this.eventQueue
+      .filter((x) => x.kind === Kind.ChannelMessage)
+      .map((ev) => {
+        const eTags = Raven.filterTagValue(ev, "e");
+        const root = eTags.find((x) => x[3] === "root")?.[1];
+        const mentions = Raven.filterTagValue(ev, "p")
+          .map((x) => x?.[1])
+          .filter(notEmpty);
+        if (!root) return null;
+        return ev.content
+          ? {
+              id: ev.id,
+              root,
+              content: ev.content,
+              creator: ev.pubkey,
+              mentions,
+              created: ev.created_at
+            }
+          : null;
+      })
+      .filter(notEmpty);
+    if (publicMessages.length > 0) {
+      this.emit(RavenEvents.PublicMessage, publicMessages);
+    }
+
     Promise.all(
       this.eventQueue
         .filter((x) => x.kind === Kind.EncryptedDirectMessage)
@@ -410,11 +632,11 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     }
   }
 
-  static findTagValue(ev: Event, tag: "e" | "p") {
+  static findTagValue(ev: Event, tag: "e" | "p" | "d") {
     return ev.tags.find(([t]) => t === tag)?.[1];
   }
 
-  static filterTagValue(ev: Event, tag: "e" | "p") {
+  static filterTagValue(ev: Event, tag: "e" | "p" | "d") {
     return ev.tags.filter(([t]) => t === tag);
   }
 }
@@ -429,6 +651,7 @@ export const initRaven = (keys: Keys): Raven | undefined => {
 
   if (keys) {
     window.raven = new Raven(keys.priv, keys.pub);
+    console.log("window raven", window.raven);
   }
 
   return window.raven;
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index d6f5d52715a..215fe18b70e 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -644,7 +644,8 @@
     "roles-account": "Account",
     "roles-role": "Role",
     "roles-account-title": "Title",
-    "roles-add": "Add User"
+    "roles-add": "Add User",
+    "join-community-chat": "Join Community Chat"
   },
   "community-cover": {
     "rewards": "rewards",
@@ -1661,7 +1662,10 @@
     "back": "Back",
     "no-chat": "No conversation found",
     "start-chat": "Start chat",
-    "not-joined": "This user hasn't joined the chat yet"
+    "not-joined": "This user hasn't joined the chat yet",
+    "subscribers": "Subscribers",
+    "invite": "Invite",
+    "leave:": "Leave"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 320a12a284b..45dbddc5aa5 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2082,3 +2082,20 @@ export const chatBoxImageSvg = (
     <path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z" />
   </svg>
 );
+
+export const chatLeaveSvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
+    ></path>
+  </svg>
+);
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index 27d8a7a87f2..ac342178407 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -41,7 +41,14 @@ import { fetchPoints, resetPoints } from "./points";
 import { setSigningKey } from "./signing-key";
 import { setEntryPin, trackEntryPin } from "./entry-pin-tracker";
 import { savePageScroll } from "./persistent-page-scroll";
-import { addDirectContacts, addDirectMessages, resetChat } from "./chat";
+import {
+  addDirectContacts,
+  addDirectMessages,
+  resetChat,
+  addChannels,
+  addPublicMessage,
+  addProfile
+} from "./chat";
 
 // @note Do not use it directly
 export const ACTIONS = {
@@ -93,7 +100,10 @@ export const ACTIONS = {
   setNotificationsSettingsItem,
   addDirectContacts,
   addDirectMessages,
-  resetChat
+  resetChat,
+  addChannels,
+  addPublicMessage,
+  addProfile
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 8eccd7a3b5f..d130c988be3 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -1,4 +1,9 @@
-import { DirectMessage } from "./../../../providers/message-provider-types";
+import {
+  Channel,
+  DirectMessage,
+  PublicMessage,
+  Profile
+} from "./../../../providers/message-provider-types";
 import { Dispatch } from "redux";
 
 import {
@@ -9,12 +14,18 @@ import {
   DirectContactsType,
   DirectMessagesAction,
   ResetChatAction,
-  directMessagesList
+  directMessagesList,
+  ChannelsAction,
+  PublicMessagesAction,
+  ProfilesAction
 } from "./types";
 
 export const initialState: Chat = {
   directContacts: [],
-  directMessages: []
+  directMessages: [],
+  channels: [],
+  publicMessages: [],
+  profiles: []
 };
 
 export default (state: Chat = initialState, action: Actions): Chat => {
@@ -51,6 +62,41 @@ export default (state: Chat = initialState, action: Actions): Chat => {
     case ActionTypes.RESET:
       return initialState;
 
+    case ActionTypes.CHANNELS: {
+      const { data } = action;
+
+      return {
+        ...state,
+        channels: [...state.channels, ...data],
+        publicMessages: [
+          ...state.publicMessages,
+          ...data.map((channel) => ({ channelId: channel.id, PublicMessage: [] }))
+        ]
+      };
+    }
+
+    case ActionTypes.PUBLICMESSAGES: {
+      const { channelId, data } = action;
+      return {
+        ...state,
+        publicMessages: [
+          ...state.publicMessages.map((obj) =>
+            obj.channelId === channelId
+              ? { channelId: channelId, PublicMessage: [...obj.PublicMessage, ...data] }
+              : obj
+          )
+        ]
+      };
+    }
+
+    case ActionTypes.PROFILES: {
+      const { data } = action;
+      return {
+        ...state,
+        profiles: [...state.profiles, ...data]
+      };
+    }
+
     default:
       return state;
   }
@@ -66,9 +112,23 @@ export const addDirectMessages = (peer: string, data: DirectMessage[]) => (dispa
 };
 
 export const resetChat = () => (dispatch: Dispatch) => {
+  console.log("Reset chat run in store");
   dispatch(resetChatAct());
 };
 
+export const addChannels = (data: Channel[]) => (dispatch: Dispatch) => {
+  dispatch(addChannelsAct(data));
+};
+
+export const addPublicMessage =
+  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
+    dispatch(addPublicMessagesAct(channelId, data));
+  };
+
+export const addProfile = (data: Profile[]) => (dispatch: Dispatch) => {
+  dispatch(addProfilesAct(data));
+};
+
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -86,8 +146,33 @@ export const addDirectMessagesAct = (peer: string, data: DirectMessage[]): Direc
   };
 };
 
+export const addPublicMessagesAct = (
+  channelId: string,
+  data: PublicMessage[]
+): PublicMessagesAction => {
+  return {
+    type: ActionTypes.PUBLICMESSAGES,
+    channelId,
+    data
+  };
+};
+
 export const resetChatAct = (): ResetChatAction => {
   return {
     type: ActionTypes.RESET
   };
 };
+
+export const addChannelsAct = (data: Channel[]): ChannelsAction => {
+  return {
+    type: ActionTypes.CHANNELS,
+    data
+  };
+};
+
+export const addProfilesAct = (data: Profile[]): ProfilesAction => {
+  return {
+    type: ActionTypes.PROFILES,
+    data
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index cbd48ae10bf..5cb02068eb1 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -1,4 +1,9 @@
-import { DirectMessage } from "./../../../providers/message-provider-types";
+import {
+  Channel,
+  DirectMessage,
+  Profile,
+  PublicMessage
+} from "./../../../providers/message-provider-types";
 
 export interface DirectContactsType {
   name: string;
@@ -10,15 +15,26 @@ export interface directMessagesList {
   chat: DirectMessage[];
 }
 
+export interface publicMessagesList {
+  channelId: string;
+  PublicMessage: PublicMessage[];
+}
+
 export interface Chat {
   directContacts: DirectContactsType[];
   directMessages: directMessagesList[];
+  channels: Channel[];
+  publicMessages: publicMessagesList[];
+  profiles: Profile[];
 }
 
 export enum ActionTypes {
   DIRECTCONTACTS = "@chat/DIRECTCONTACTS",
   DIRECTMESSAGES = "@chat/DIRECTMESSAGES",
-  RESET = "@chat/RESET"
+  RESET = "@chat/RESET",
+  CHANNELS = "@chat/CHANNELS",
+  PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
+  PROFILES = "@chat/PROFILES"
 }
 
 export interface DirectContactsAction {
@@ -36,4 +52,26 @@ export interface DirectMessagesAction {
   peer: string;
 }
 
-export type Actions = DirectContactsAction | DirectMessagesAction | ResetChatAction;
+export interface PublicMessagesAction {
+  type: ActionTypes.PUBLICMESSAGES;
+  data: PublicMessage[];
+  channelId: string;
+}
+
+export interface ChannelsAction {
+  type: ActionTypes.CHANNELS;
+  data: Channel[];
+}
+
+export interface ProfilesAction {
+  type: ActionTypes.PROFILES;
+  data: Profile[];
+}
+
+export type Actions =
+  | DirectContactsAction
+  | DirectMessagesAction
+  | ResetChatAction
+  | ChannelsAction
+  | PublicMessagesAction
+  | ProfilesAction;
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index 2a71c9d2149..ad0dfd3eb68 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -13,6 +13,7 @@ export type Metadata = {
   name: string;
   about: string;
   picture: string;
+  communityName?: string;
 };
 
 export type Profile = { id: string; creator: string; created: number } & Metadata;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 7a8bc98e157..79a53259b79 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -2,7 +2,14 @@ import React, { useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
 import { Chat, DirectContactsType } from "../common/store/chat/types";
-import { DirectMessage, Profile, Keys, DirectContact } from "./message-provider-types";
+import {
+  DirectMessage,
+  Profile,
+  Keys,
+  DirectContact,
+  Channel,
+  PublicMessage
+} from "./message-provider-types";
 
 import { initRaven, RavenEvents } from "../common/helper/message-helper";
 import { getProfileMetaData, NostrKeys } from "../common/helper/chat-utils";
@@ -21,6 +28,9 @@ export const setNostrkeys = (keys: NostrKeys) => {
 interface Props {
   addDirectContacts: (data?: DirectContactsType[]) => void;
   addDirectMessages: (peer: string, data?: DirectMessage[]) => void;
+  addPublicMessage: (channelId: string, data?: PublicMessage[]) => void;
+  addChannels: (data: Channel[]) => void;
+  addProfile: (data: Profile[]) => void;
 }
 
 const MessageProvider = (props: Props) => {
@@ -29,7 +39,8 @@ const MessageProvider = (props: Props) => {
   const [since, setSince] = useState<number>(0);
   const [keys, setKeys] = useState<Keys>();
   const [raven, setRaven] = useState<any>();
-  const [messageBuffer, setMessageBuffer] = useState<DirectMessage[]>([]);
+  const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
+  const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
 
   useEffect(() => {
     window.addEventListener("createRavenInstance", createRavenInstance);
@@ -55,6 +66,7 @@ const MessageProvider = (props: Props) => {
   const createRavenInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeys;
     const ravenInstance = initRaven(detail);
+    console.log("Create rvan instance run");
     setRaven(ravenInstance);
   };
 
@@ -69,7 +81,10 @@ const MessageProvider = (props: Props) => {
 
     const timer = setTimeout(
       () => {
-        raven?.listen(Math.floor((since || Date.now()) / 1000));
+        raven?.listen(
+          chat.channels.map((x) => x.id),
+          Math.floor((since || Date.now()) / 1000)
+        );
         setSince(Date.now());
       },
       since === 0 ? 500 : 10000
@@ -78,7 +93,7 @@ const MessageProvider = (props: Props) => {
     return () => {
       clearTimeout(timer);
     };
-  }, [since, ravenReady, raven]);
+  }, [since, ravenReady, raven, chat.channels]);
 
   // // Ready state handler
   const handleReadyState = () => {
@@ -94,14 +109,36 @@ const MessageProvider = (props: Props) => {
     };
   }, [ravenReady, raven]);
 
-  const handleProfileUpdate = (data: DirectContact[]) => {
+  // Profile update handler
+  const handleProfileUpdate = (data: Profile[]) => {
+    console.log("handleProfileUpdate", data);
+    props.addProfile(data);
+    // setProfiles([
+    //     ...profiles.filter(x => data.find(y => x.creator === y.creator) === undefined),
+    //     ...data
+    // ]);
+    // const profile = data.find(x => x.creator === keys!.pub);
+    // if (profile) {
+    //     setProfile(profile);
+    // }
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    raven?.addListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    return () => {
+      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    };
+  }, [raven, chat.profiles]);
+
+  //Direct contact handler
+  const handleDirectContact = (data: DirectContact[]) => {
     const result = [...chat.directContacts];
     data.forEach(({ name, pubkey }) => {
       const isPresent = chat.directContacts.some(
         (obj) => obj.name === name && obj.pubkey === pubkey
       );
       if (!isPresent) {
-        //Add the object to the result array if it's not already present in store state.
         result.push({ name, pubkey });
       }
     });
@@ -111,27 +148,28 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
-    raven?.addListener(RavenEvents.DirectContact, handleProfileUpdate);
+    raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
+    raven?.addListener(RavenEvents.DirectContact, handleDirectContact);
     return () => {
-      raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
     };
   }, [raven]);
 
   // // Direct message handler
   const handleDirectMessage = (data: DirectMessage[]) => {
-    setMessageBuffer((messageBuffer) => [...messageBuffer!, ...data]);
+    setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
+    console.log("HandleDirectMessage", data);
     raven?.checkProfiles(data.map((x) => x.peer));
   };
 
-  const setMessages = () => {
-    messageBuffer.forEach((obj) => {
+  const setDirectMessages = () => {
+    directMessageBuffer.forEach((obj) => {
       const { peer } = obj;
       const matchingStateItem = chat.directMessages.find((stateItem) => stateItem.peer === peer);
       if (matchingStateItem) {
         if (matchingStateItem.chat.length === 0) {
           props.addDirectMessages(peer, [obj]);
-          setMessageBuffer((prevMessageBuffer) =>
+          setDirectMessageBuffer((prevMessageBuffer) =>
             prevMessageBuffer.filter((message) => message.id !== obj.id)
           );
         } else {
@@ -143,7 +181,7 @@ const MessageProvider = (props: Props) => {
           });
           if (!itemExists) {
             props.addDirectMessages(peer, [obj]);
-            setMessageBuffer((prevMessageBuffer) =>
+            setDirectMessageBuffer((prevMessageBuffer) =>
               prevMessageBuffer.filter((message) => message.id !== obj.id)
             );
           }
@@ -154,9 +192,9 @@ const MessageProvider = (props: Props) => {
 
   useEffect(() => {
     if (chat.directContacts.length !== 0) {
-      setMessages();
+      setDirectMessages();
     }
-  }, [chat.directContacts, messageBuffer]);
+  }, [chat.directContacts, directMessageBuffer]);
 
   useEffect(() => {
     raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
@@ -166,10 +204,95 @@ const MessageProvider = (props: Props) => {
     };
   }, [raven]);
 
+  // Channel creation handler
+  const handleChannelCreation = (data: Channel[]) => {
+    console.log("handleChannelCreation", data);
+
+    const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
+    props.addChannels(append);
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
+    raven?.addListener(RavenEvents.ChannelCreation, handleChannelCreation);
+
+    return () => {
+      raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
+    };
+  }, [raven]);
+
+  //Public Message handler
+  const handlePublicMessage = (data: PublicMessage[]) => {
+    console.log("handlePublicMessage", data, chat.profiles);
+    setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
+
+    for (const item of data) {
+      const isCreatorMatch = chat.profiles.some((firstItem) => firstItem.creator === item.creator);
+
+      if (!isCreatorMatch) {
+        let uniqueUsers: string[] = [];
+        for (const item of data) {
+          if (!uniqueUsers.includes(item.creator)) {
+            uniqueUsers.push(item.creator);
+          }
+        }
+        raven?.loadProfiles(uniqueUsers);
+      }
+    }
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
+    raven?.addListener(RavenEvents.PublicMessage, handlePublicMessage);
+
+    return () => {
+      raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
+    };
+  }, [raven, chat.profiles, chat.publicMessages]);
+
+  useEffect(() => {
+    if (chat.channels.length !== 0) {
+      setPublicMessages();
+    }
+  }, [chat.publicMessages, publicMessageBuffer]);
+
+  const setPublicMessages = () => {
+    publicMessageBuffer.forEach((obj) => {
+      const { root } = obj;
+      const matchingStateItem = chat.publicMessages.find(
+        (stateItem) => stateItem.channelId === root
+      );
+      if (matchingStateItem) {
+        if (matchingStateItem.PublicMessage.length === 0) {
+          props.addPublicMessage(root, [obj]);
+          setPublicMessageBuffer((prevMessageBuffer) =>
+            prevMessageBuffer.filter((message) => message.id !== obj.id)
+          );
+        } else {
+          let itemExists = false;
+          matchingStateItem.PublicMessage.forEach((item) => {
+            if (item.id === obj.id) {
+              itemExists = true;
+            }
+          });
+          if (!itemExists) {
+            props.addPublicMessage(root, [obj]);
+            setPublicMessageBuffer((prevMessageBuffer) =>
+              prevMessageBuffer.filter((message) => message.id !== obj.id)
+            );
+          }
+        }
+      }
+    });
+  };
+
   useEffect(() => {
     return () => {
       raven?.removeListener(RavenEvents.Ready, handleReadyState);
-      raven?.removeListener(RavenEvents.DirectContact, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+      raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
+      raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
+      raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
       raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
     };
   }, [raven]);

From 176818b0e051369f21e219d5e78fa957dba4fdf2 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 17 Jul 2023 18:33:23 +0500
Subject: [PATCH 019/179] remove commented code

---
 src/common/components/chat-box/index.tsx               | 10 +++++-----
 .../components/join-community-chat-btn/index.tsx       | 10 +++++-----
 src/providers/message-provider.tsx                     |  9 ---------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 84220d79e03..8551e1a5c31 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -155,11 +155,11 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
   }, []);
 
-  // useEffect(() => {
-  //   if (window.raven) {
-  //     setHasUserJoinedChat(true);
-  //   }
-  // }, [window?.raven]);
+  useEffect(() => {
+    if (window.raven) {
+      setHasUserJoinedChat(true);
+    }
+  }, [window?.raven]);
 
   useEffect(() => {
     const msgsList = fetchDirectMessages(receiverPubKey!);
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index a275bc322ab..32379dfae0c 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -42,11 +42,11 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCommunityProfile();
   }, [props.activeUser]);
 
-  // useEffect(() => {
-  //   if (window.raven) {
-  //     setHasUserJoinedChat(true);
-  //   }
-  // }, [window?.raven]);
+  useEffect(() => {
+    if (window.raven) {
+      setHasUserJoinedChat(true);
+    }
+  }, [window?.raven]);
 
   useEffect(() => {
     checkIsChatJoined();
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 79a53259b79..9b9ba83d57a 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -66,7 +66,6 @@ const MessageProvider = (props: Props) => {
   const createRavenInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeys;
     const ravenInstance = initRaven(detail);
-    console.log("Create rvan instance run");
     setRaven(ravenInstance);
   };
 
@@ -113,14 +112,6 @@ const MessageProvider = (props: Props) => {
   const handleProfileUpdate = (data: Profile[]) => {
     console.log("handleProfileUpdate", data);
     props.addProfile(data);
-    // setProfiles([
-    //     ...profiles.filter(x => data.find(y => x.creator === y.creator) === undefined),
-    //     ...data
-    // ]);
-    // const profile = data.find(x => x.creator === keys!.pub);
-    // if (profile) {
-    //     setProfile(profile);
-    // }
   };
 
   useEffect(() => {

From d871c706909e65fbc703613381bd68a4fda8abce Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 18 Jul 2023 12:57:12 +0500
Subject: [PATCH 020/179] Add option to leave public chat

---
 src/common/components/chat-box/index.scss     |  1 -
 src/common/components/chat-box/index.tsx      | 48 +++++++++++++++----
 .../join-community-chat-btn/index.tsx         | 35 ++++++++++----
 src/common/helper/chat-utils.ts               |  2 +
 src/common/helper/message-helper.ts           | 27 ++++++++++-
 src/common/store/actions.ts                   |  6 ++-
 src/common/store/chat/index.ts                | 27 +++++++++--
 src/common/store/chat/types.ts                | 11 ++++-
 src/providers/message-provider.tsx            | 22 ++++++++-
 9 files changed, 147 insertions(+), 32 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index e95cc1f7c74..b42c63207c2 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -132,7 +132,6 @@
         }
       }
       .community-menu {
-        margin-top: -15px;
         svg {
           @include themify(day) {
             color: $charcoal-grey;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 8551e1a5c31..79be6679bde 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -118,6 +118,7 @@ export default function ChatBox(props: Props) {
   const [activeMessage, setActiveMessage] = useState("");
   const [keyDialog, setKeyDialog] = useState(false);
   const [step, setStep] = useState(0);
+  const [communities, setCommunities] = useState<Channel[]>([]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -146,8 +147,8 @@ export default function ChatBox(props: Props) {
   }, [activeMessage]);
 
   useEffect(() => {
-    console.log(currentChannel, "currentChannel");
-  }, [currentChannel]);
+    console.log(props.chat, "chat in store");
+  }, [props.chat]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -155,11 +156,16 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
   }, []);
 
+  // useEffect(() => {
+  //   if (window.raven) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.raven]);
+
   useEffect(() => {
-    if (window.raven) {
-      setHasUserJoinedChat(true);
-    }
-  }, [window?.raven]);
+    const communities = getCommunities();
+    setCommunities(communities);
+  }, [props.chat.channels, props.chat.leftChannelsList]);
 
   useEffect(() => {
     const msgsList = fetchDirectMessages(receiverPubKey!);
@@ -301,6 +307,10 @@ export default function ChatBox(props: Props) {
     return [];
   };
 
+  const getCommunities = () => {
+    return props.chat.channels.filter((item) => !props.chat.leftChannelsList.includes(item.id));
+  };
+
   const fetchCommunityMessages = (channelId: string) => {
     for (const item of props.chat.publicMessages) {
       if (item.channelId === channelId) {
@@ -603,7 +613,24 @@ export default function ChatBox(props: Props) {
           >
             Close
           </Button>
-          <Button variant="outline-primary" className="confirm-btn">
+          <Button
+            variant="outline-primary"
+            className="confirm-btn"
+            onClick={() => {
+              window?.raven
+                ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
+                .then(() => {})
+                .catch((e: any) => {
+                  // error(e.toString(), "error");
+                })
+                .finally(() => {
+                  setKeyDialog(false);
+                  setStep(0);
+                  setIsCommunity(false);
+                  setCommunityName("");
+                });
+            }}
+          >
             Confirm
           </Button>
         </p>
@@ -944,12 +971,13 @@ export default function ChatBox(props: Props) {
                   </>
                 ) : (
                   <>
-                    {props.chat.directContacts.length !== 0 || props.chat.channels.length !== 0 ? (
+                    {props.chat.directContacts.length !== 0 ||
+                    (props.chat.channels.length !== 0 && communities.length !== 0) ? (
                       <React.Fragment>
-                        {props.chat.channels.length !== 0 && (
+                        {props.chat.channels.length !== 0 && communities.length !== 0 && (
                           <>
                             <div className="community-header">Communities</div>
-                            {props.chat.channels.map((channel) => {
+                            {communities.map((channel) => {
                               return (
                                 <div key={channel.id} className="chat-content">
                                   <Link to={`/created/${channel.communityName}`}>
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 32379dfae0c..cad3da3c5a6 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -36,23 +36,23 @@ export default function JoinCommunityChatBtn(props: Props) {
   useEffect(() => {
     fetchCommunityProfile();
     fetchUserProfileData();
-  }, [chat.channels, currentChannel]);
+  }, [chat.channels, currentChannel, chat.leftChannelsList]);
 
   useEffect(() => {
     fetchCommunityProfile();
   }, [props.activeUser]);
 
-  useEffect(() => {
-    if (window.raven) {
-      setHasUserJoinedChat(true);
-    }
-  }, [window?.raven]);
+  // useEffect(() => {
+  //   if (window.raven) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.raven]);
 
   useEffect(() => {
     checkIsChatJoined();
 
     fetchCurrentChannel();
-  }, [isJoinChat, props.community, chat.channels]);
+  }, [isJoinChat, props.community, chat.channels, chat.leftChannelsList]);
 
   const fetchUserProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
@@ -76,11 +76,15 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const checkIsChatJoined = () => {
     for (const item of chat.channels) {
-      if (item.communityName === props.community.name) {
+      if (
+        item.communityName === props.community.name &&
+        !chat.leftChannelsList.includes(currentChannel?.id!)
+      ) {
         setIsJoinChat(true);
+      } else {
+        setIsJoinChat(false);
       }
     }
-    return [];
   };
 
   const createCommunityChat = async () => {
@@ -113,6 +117,12 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const joinCommunityChat = () => {
+    if (chat.leftChannelsList.includes(currentChannel?.id!)) {
+      console.log("If true in join community");
+      window?.raven?.updateLeftChannelList(
+        chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
+      );
+    }
     window?.raven?.loadChannel(currentChannel?.id!);
     setIsJoinChat(true);
   };
@@ -149,11 +159,16 @@ export default function JoinCommunityChatBtn(props: Props) {
       {props.community["context"].role === "owner" ? (
         isJoinChat ? (
           <Button variant="outline-primary">Chat Joined</Button>
-        ) : hasUserJoinedChat ? (
+        ) : hasUserJoinedChat && !isChatEnabled ? (
           <Button onClick={createCommunityChat}>
             {inProgress && chatButtonSpinner}
             Start Community Chat
           </Button>
+        ) : !isJoinChat && isChatEnabled ? (
+          <Button onClick={joinCommunityChat}>
+            {" "}
+            {inProgress && chatButtonSpinner}Join Community Chat
+          </Button>
         ) : (
           <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat</Button>
         )
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 5f55e4fdcc6..9fd09850b6d 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -78,3 +78,5 @@ export function notEmpty<TValue>(value: TValue | null | undefined): value is TVa
 export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
 
 export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
+
+export const isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-helper.ts
index 6d1938f80e2..5f9956a86a4 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-helper.ts
@@ -14,7 +14,7 @@ import {
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
 import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
-import { notEmpty } from "./chat-utils";
+import { isSha256, notEmpty } from "./chat-utils";
 
 const relays = {
   "wss://relay1.nostrchat.io": { read: true, write: true },
@@ -32,6 +32,7 @@ enum NewKinds {
 export enum RavenEvents {
   Ready = "ready",
   ProfileUpdate = "profile_update",
+  LeftChannelList = "left_channel_list",
   ChannelCreation = "channel_creation",
   DirectMessage = "direct_message",
   DirectContact = "direct_contact",
@@ -44,6 +45,7 @@ type EventHandlerMap = {
   [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
   [RavenEvents.ChannelCreation]: (data: Channel[]) => void;
   [RavenEvents.PublicMessage]: (data: PublicMessage[]) => void;
+  [RavenEvents.LeftChannelList]: (data: string[]) => void;
   [RavenEvents.DirectContact]: (data: DirectContact[]) => void;
 };
 
@@ -174,6 +176,12 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
     });
   }
 
+  public async updateLeftChannelList(channelIds: string[]) {
+    console.log(channelIds, "channelIds");
+    const tags = [["d", "left-channel-list"]];
+    return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
+  }
+
   public fetchMessages() {
     this.directContacts.map((contact: any) => {
       const filters: Filter[] = [
@@ -225,7 +233,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   }
 
   public loadChannel(id: string) {
-    // console.log(id, "id");
+    console.log(id, "id");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -525,6 +533,21 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       this.emit(RavenEvents.ProfileUpdate, profileUpdates);
     }
 
+    const leftChannelListEv = this.eventQueue
+      .filter(
+        (x) =>
+          x.kind.toString() === NewKinds.Arbitrary.toString() &&
+          Raven.findTagValue(x, "d") === "left-channel-list"
+      )
+      .sort((a, b) => b.created_at - a.created_at)[0];
+
+    if (leftChannelListEv) {
+      const content = Raven.parseJson(leftChannelListEv.content);
+      if (Array.isArray(content) && content.every((x) => isSha256(x))) {
+        this.emit(RavenEvents.LeftChannelList, content);
+      }
+    }
+
     const channelCreations: Channel[] = this.eventQueue
       .filter((x) => x.kind === Kind.ChannelCreation)
       .map((ev) => {
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index ac342178407..ada5bbba07f 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -47,7 +47,8 @@ import {
   resetChat,
   addChannels,
   addPublicMessage,
-  addProfile
+  addProfile,
+  addleftChannels
 } from "./chat";
 
 // @note Do not use it directly
@@ -103,7 +104,8 @@ export const ACTIONS = {
   resetChat,
   addChannels,
   addPublicMessage,
-  addProfile
+  addProfile,
+  addleftChannels
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index d130c988be3..af83baa5514 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -17,7 +17,8 @@ import {
   directMessagesList,
   ChannelsAction,
   PublicMessagesAction,
-  ProfilesAction
+  ProfilesAction,
+  LeftChannelsAction
 } from "./types";
 
 export const initialState: Chat = {
@@ -25,7 +26,8 @@ export const initialState: Chat = {
   directMessages: [],
   channels: [],
   publicMessages: [],
-  profiles: []
+  profiles: [],
+  leftChannelsList: []
 };
 
 export default (state: Chat = initialState, action: Actions): Chat => {
@@ -97,6 +99,15 @@ export default (state: Chat = initialState, action: Actions): Chat => {
       };
     }
 
+    case ActionTypes.LEFTCHANNELLIST: {
+      const { data } = action;
+      console.log("data in store", data);
+      return {
+        ...state,
+        leftChannelsList: [...data]
+      };
+    }
+
     default:
       return state;
   }
@@ -112,7 +123,6 @@ export const addDirectMessages = (peer: string, data: DirectMessage[]) => (dispa
 };
 
 export const resetChat = () => (dispatch: Dispatch) => {
-  console.log("Reset chat run in store");
   dispatch(resetChatAct());
 };
 
@@ -129,6 +139,10 @@ export const addProfile = (data: Profile[]) => (dispatch: Dispatch) => {
   dispatch(addProfilesAct(data));
 };
 
+export const addleftChannels = (data: string[]) => (dispatch: Dispatch) => {
+  dispatch(addleftChannelsAct(data));
+};
+
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -176,3 +190,10 @@ export const addProfilesAct = (data: Profile[]): ProfilesAction => {
     data
   };
 };
+
+export const addleftChannelsAct = (data: string[]): LeftChannelsAction => {
+  return {
+    type: ActionTypes.LEFTCHANNELLIST,
+    data
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 5cb02068eb1..cf1f82266dd 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -26,6 +26,7 @@ export interface Chat {
   channels: Channel[];
   publicMessages: publicMessagesList[];
   profiles: Profile[];
+  leftChannelsList: string[];
 }
 
 export enum ActionTypes {
@@ -34,7 +35,8 @@ export enum ActionTypes {
   RESET = "@chat/RESET",
   CHANNELS = "@chat/CHANNELS",
   PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
-  PROFILES = "@chat/PROFILES"
+  PROFILES = "@chat/PROFILES",
+  LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST"
 }
 
 export interface DirectContactsAction {
@@ -67,6 +69,10 @@ export interface ProfilesAction {
   type: ActionTypes.PROFILES;
   data: Profile[];
 }
+export interface LeftChannelsAction {
+  type: ActionTypes.LEFTCHANNELLIST;
+  data: string[];
+}
 
 export type Actions =
   | DirectContactsAction
@@ -74,4 +80,5 @@ export type Actions =
   | ResetChatAction
   | ChannelsAction
   | PublicMessagesAction
-  | ProfilesAction;
+  | ProfilesAction
+  | LeftChannelsAction;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 9b9ba83d57a..8281a71a2e8 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -31,6 +31,7 @@ interface Props {
   addPublicMessage: (channelId: string, data?: PublicMessage[]) => void;
   addChannels: (data: Channel[]) => void;
   addProfile: (data: Profile[]) => void;
+  addleftChannels: (data: string[]) => void;
 }
 
 const MessageProvider = (props: Props) => {
@@ -110,7 +111,7 @@ const MessageProvider = (props: Props) => {
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
-    console.log("handleProfileUpdate", data);
+    // console.log("handleProfileUpdate", data);
     props.addProfile(data);
   };
 
@@ -214,7 +215,7 @@ const MessageProvider = (props: Props) => {
 
   //Public Message handler
   const handlePublicMessage = (data: PublicMessage[]) => {
-    console.log("handlePublicMessage", data, chat.profiles);
+    console.log("handlePublicMessage", data);
     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
 
     for (const item of data) {
@@ -277,12 +278,29 @@ const MessageProvider = (props: Props) => {
     });
   };
 
+  // Left channel handler
+  const handleLeftChannelList = (data: string[]) => {
+    console.log("handleLeftChannelList", data);
+    // setLeftChannelList(data);
+    props.addleftChannels(data);
+  };
+
+  useEffect(() => {
+    raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
+    raven?.addListener(RavenEvents.LeftChannelList, handleLeftChannelList);
+
+    return () => {
+      raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
+    };
+  }, [raven, chat.leftChannelsList]);
+
   useEffect(() => {
     return () => {
       raven?.removeListener(RavenEvents.Ready, handleReadyState);
       raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
       raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
       raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
+      raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
       raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
       raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
     };

From cb4fdffd4d7105adaf48ef542d5a8f751ed4d27a Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 18 Jul 2023 16:06:37 +0500
Subject: [PATCH 021/179] Remove commented code

---
 src/common/components/chat-box/index.tsx      | 33 +++++++------------
 .../join-community-chat-btn/index.tsx         | 11 +++----
 src/providers/message-provider.tsx            |  8 ++---
 3 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 79be6679bde..e28bfafd5df 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -146,9 +146,9 @@ export default function ChatBox(props: Props) {
     };
   }, [activeMessage]);
 
-  useEffect(() => {
-    console.log(props.chat, "chat in store");
-  }, [props.chat]);
+  // useEffect(() => {
+  //   console.log(props.chat, "chat in store");
+  // }, [props.chat]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -156,11 +156,11 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
   }, []);
 
-  // useEffect(() => {
-  //   if (window.raven) {
-  //     setHasUserJoinedChat(true);
-  //   }
-  // }, [window?.raven]);
+  useEffect(() => {
+    if (window.raven) {
+      setHasUserJoinedChat(true);
+    }
+  }, [window?.raven]);
 
   useEffect(() => {
     const communities = getCommunities();
@@ -576,12 +576,13 @@ export default function ChatBox(props: Props) {
 
   const inviteClicked = () => {
     const textField = document.createElement("textarea");
-    textField.innerText = currentChannel?.id!;
+    const url = `https://ecency.com/community/join?communityId=${currentChannel?.id}`;
+    textField.innerText = url;
     document.body.appendChild(textField);
     textField.select();
     document.execCommand("copy");
     textField.remove();
-    success("Channel Id copied into clipboard");
+    success("Link copied into clipboard");
   };
 
   const LeaveModal = () => {
@@ -594,15 +595,6 @@ export default function ChatBox(props: Props) {
         </div>
         <div className="leave-dialog-body">Are you sure?</div>
         <p className="leave-confirm-buttons">
-          {/* <a
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              setKeyDialog(false);
-            }}
-          >
-            {_t("g.back")}
-          </a> */}
           <Button
             variant="outline-primary"
             className="close-btn"
@@ -620,9 +612,6 @@ export default function ChatBox(props: Props) {
               window?.raven
                 ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
                 .then(() => {})
-                .catch((e: any) => {
-                  // error(e.toString(), "error");
-                })
                 .finally(() => {
                   setKeyDialog(false);
                   setStep(0);
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index cad3da3c5a6..1f54a0893cb 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -42,11 +42,11 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCommunityProfile();
   }, [props.activeUser]);
 
-  // useEffect(() => {
-  //   if (window.raven) {
-  //     setHasUserJoinedChat(true);
-  //   }
-  // }, [window?.raven]);
+  useEffect(() => {
+    if (window.raven) {
+      setHasUserJoinedChat(true);
+    }
+  }, [window?.raven]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -118,7 +118,6 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const joinCommunityChat = () => {
     if (chat.leftChannelsList.includes(currentChannel?.id!)) {
-      console.log("If true in join community");
       window?.raven?.updateLeftChannelList(
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 8281a71a2e8..88f9c7ee875 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -150,7 +150,7 @@ const MessageProvider = (props: Props) => {
   // // Direct message handler
   const handleDirectMessage = (data: DirectMessage[]) => {
     setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
-    console.log("HandleDirectMessage", data);
+    // console.log("HandleDirectMessage", data);
     raven?.checkProfiles(data.map((x) => x.peer));
   };
 
@@ -198,7 +198,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    console.log("handleChannelCreation", data);
+    // console.log("handleChannelCreation", data);
 
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
@@ -215,7 +215,7 @@ const MessageProvider = (props: Props) => {
 
   //Public Message handler
   const handlePublicMessage = (data: PublicMessage[]) => {
-    console.log("handlePublicMessage", data);
+    // console.log("handlePublicMessage", data);
     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
 
     for (const item of data) {
@@ -280,7 +280,7 @@ const MessageProvider = (props: Props) => {
 
   // Left channel handler
   const handleLeftChannelList = (data: string[]) => {
-    console.log("handleLeftChannelList", data);
+    // console.log("handleLeftChannelList", data);
     // setLeftChannelList(data);
     props.addleftChannels(data);
   };

From b2335ddcb9b7843c57822920dc532e491b64a979 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 19 Jul 2023 16:43:11 +0500
Subject: [PATCH 022/179] Add search bar within popup

---
 .../components/chat-box/chat-constants.ts     |  28 +
 src/common/components/chat-box/index.scss     |  65 +-
 src/common/components/chat-box/index.tsx      | 675 +++++++++---------
 src/common/components/dropdown/_index.scss    |   2 -
 src/common/components/dropdown/index.tsx      |  22 +-
 .../join-community-chat-btn/index.tsx         |  24 +-
 src/common/components/login/index.tsx         |   2 +-
 src/common/components/search-user/index.scss  |  51 --
 src/common/components/search-user/index.tsx   |  86 ---
 src/common/helper/chat-utils.ts               |  19 +-
 ...ge-global.ts => message-service-global.ts} |   4 +-
 .../{message-helper.ts => message-service.ts} |  79 +-
 src/common/pages/community-functional.tsx     | 164 ++++-
 src/common/routes.ts                          |   4 +-
 src/common/store/chat/index.ts                |   1 -
 src/providers/message-provider.tsx            | 108 +--
 16 files changed, 734 insertions(+), 600 deletions(-)
 create mode 100644 src/common/components/chat-box/chat-constants.ts
 delete mode 100644 src/common/components/search-user/index.scss
 delete mode 100644 src/common/components/search-user/index.tsx
 rename src/common/helper/{message-global.ts => message-service-global.ts} (81%)
 rename src/common/helper/{message-helper.ts => message-service.ts} (87%)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
new file mode 100644
index 00000000000..a03c1a7d895
--- /dev/null
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -0,0 +1,28 @@
+export const EmojiPickerStyle = {
+  width: "94%",
+  top: "255px",
+  left: "0px",
+  marginLeft: "14px",
+  borderTopLeftRadius: "8px",
+  borderTopRightRadius: "8px",
+  borderBottomLeftRadius: "0px"
+};
+
+export const GifPickerStyle = {
+  width: "94%",
+  top: "76px",
+  left: 0,
+  marginLeft: "14px",
+  borderTopLeftRadius: "8px",
+  borderTopRightRadius: "8px",
+  borderBottomLeftRadius: "0px"
+};
+
+export const DropDownStyle = {
+  width: "40px",
+  height: "40px"
+};
+
+export const NOSTRKEY = "noStrKey";
+export const UPLOADING = "Uploading";
+export const GIPHGY = "giphy";
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index b42c63207c2..32ff6ccb3c2 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -9,7 +9,7 @@
   right: 15rem;
   bottom: 0rem;
   height: 53px;
-  width: 400px;
+  width: 410px;
 
   border-top-right-radius: 16px;
   border-top-left-radius: 16px;
@@ -32,8 +32,8 @@
 
   .chat-header {
     border-bottom: 1px solid $white-four;
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: 6px;
+    padding-right: 6px;
     cursor: pointer;
     height: 53px;
     display: flex;
@@ -59,23 +59,23 @@
     .back-arrow-svg:hover {
       background: rgba(29, 155, 240, 0.1);
     }
-    .message-title {
+    .message-header-title {
       display: flex;
       width: 288px;
-      margin-left: 0.8rem;
+      margin-left: 0.6rem;
       .user-icon {
         margin: 14px 11px 0 0;
       }
     }
 
-    .message-content {
+    .message-header-content {
       margin-top: 0.8rem;
       font-weight: 700;
       line-height: 24px;
       font-size: 21px;
       font-family: $font-family-sans-serif;
 
-      max-width: 183px;
+      max-width: 200px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -98,12 +98,12 @@
         margin-top: 2px;
 
         .message-svg {
-          width: 32px;
-          height: 32px;
+          width: 40px;
+          height: 40px;
           justify-content: center;
           text-align: center;
           border-radius: 50%;
-          padding-top: 9px;
+          padding-top: 11px;
           display: flex;
 
           svg {
@@ -121,9 +121,9 @@
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 1px;
-          width: 28px;
-          height: 28px;
+          padding-top: 6px;
+          width: 40px;
+          height: 40px;
           border-radius: 50%;
         }
 
@@ -132,6 +132,7 @@
         }
       }
       .community-menu {
+        margin-bottom: 12px;
         svg {
           @include themify(day) {
             color: $charcoal-grey;
@@ -206,6 +207,44 @@
       justify-content: center;
     }
 
+    .user-search-bar {
+      margin: 12px;
+    }
+    .user-search-suggestion-list {
+      .search-content {
+        padding: 0.7rem;
+        border-radius: 10px;
+        cursor: pointer;
+        display: flex;
+        margin-bottom: 1rem;
+
+        .search-user-img {
+          justify-content: center;
+          align-items: center;
+          display: flex;
+          margin-left: 10px;
+        }
+
+        .search-user-title {
+          margin-left: 1rem;
+          .search-username {
+            margin-top: 7px;
+            margin-bottom: 0;
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+        &:hover {
+          @include themify(day) {
+            background: $white-four;
+          }
+          @include themify(night) {
+            background: $charcoal-grey;
+          }
+        }
+      }
+    }
+
     .chat-content {
       display: flex;
       cursor: pointer;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index e28bfafd5df..802d39c4a14 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import useDebounce from "react-use/lib/useDebounce";
 import { History } from "history";
 import {
   Button,
@@ -16,17 +17,18 @@ import mediumZoom, { Zoom } from "medium-zoom";
 
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
+import { Community } from "../../store/communities/types";
 import { Global, Theme } from "../../store/global/types";
 import { Channel, DirectMessage, PublicMessage } from "../../../providers/message-provider-types";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
-import SeachUser from "../search-user";
 import LinearProgress from "../linear-progress";
 import EmojiPicker from "../emoji-picker";
 import GifPicker from "../gif-picker";
 import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
+import DropDown, { MenuItem } from "../dropdown";
 
 import {
   addMessageSVG,
@@ -40,11 +42,19 @@ import {
   gifIcon,
   chatBoxImageSvg,
   linkSvg,
-  keyOutlineSvg,
   KebabMenu,
   chatLeaveSvg
 } from "../../img/svg";
 
+import {
+  DropDownStyle,
+  EmojiPickerStyle,
+  GifPickerStyle,
+  GIPHGY,
+  NOSTRKEY,
+  UPLOADING
+} from "./chat-constants";
+
 import { dateToFormatted } from "../../helper/parse-date";
 import {
   createNoStrAccount,
@@ -53,21 +63,19 @@ import {
   getProfileMetaData,
   NostrKeys,
   setProfileMetaData,
-  resetProfile
+  resetProfile,
+  getCommunities
 } from "../../helper/chat-utils";
 import { renderPostBody } from "@ecency/render-helper";
 import { getAccessToken } from "../../helper/user-token";
 import { _t } from "../../i18n";
 
-import { getAccountFull } from "../../api/hive";
+import { getAccountFull, lookupAccounts } from "../../api/hive";
 import { uploadImage } from "../../api/misc";
 import { addImage } from "../../api/private-api";
+import { getCommunity } from "../../api/bridge";
 
 import "./index.scss";
-import { getCommunity } from "../../api/bridge";
-import { Community } from "../../store/communities/types";
-import { npubEncode } from "../../../lib/nostr-tools/nip19";
-import DropDown, { MenuItem } from "../dropdown";
 
 export interface profileData {
   joiningData: string;
@@ -107,7 +115,6 @@ export default function ChatBox(props: Props) {
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
-  const [isUserFromSearch, setIsUserFromSearch] = useState(false);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
   const [shGif, setShGif] = useState(false);
   const [isCommunity, setIsCommunity] = useState(false);
@@ -115,10 +122,12 @@ export default function ChatBox(props: Props) {
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
-  const [activeMessage, setActiveMessage] = useState("");
+  const [clickedMessage, setClickedMessage] = useState("");
   const [keyDialog, setKeyDialog] = useState(false);
   const [step, setStep] = useState(0);
   const [communities, setCommunities] = useState<Channel[]>([]);
+  const [searchtext, setSearchText] = useState("");
+  const [userList, setUserList] = useState<string[]>([]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -131,7 +140,7 @@ export default function ChatBox(props: Props) {
         !(popoverRef.current as HTMLElement).contains(event.target as Node) &&
         !isAvatarClicked
       ) {
-        setActiveMessage("");
+        setClickedMessage("");
       }
     };
 
@@ -144,11 +153,11 @@ export default function ChatBox(props: Props) {
         chatBodyDivRef.current.removeEventListener("mousedown", handleClickOutside);
       }
     };
-  }, [activeMessage]);
+  }, [clickedMessage]);
 
-  // useEffect(() => {
-  //   console.log(props.chat, "chat in store");
-  // }, [props.chat]);
+  useEffect(() => {
+    console.log(props.chat, "chat in store");
+  }, [props.chat]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -157,13 +166,13 @@ export default function ChatBox(props: Props) {
   }, []);
 
   useEffect(() => {
-    if (window.raven) {
+    if (window.messageService) {
       setHasUserJoinedChat(true);
     }
-  }, [window?.raven]);
+  }, [window?.messageService]);
 
   useEffect(() => {
-    const communities = getCommunities();
+    const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
     setCommunities(communities);
   }, [props.chat.channels, props.chat.leftChannelsList]);
 
@@ -231,7 +240,7 @@ export default function ChatBox(props: Props) {
       if (isCurrentUserFound) {
         fetchCurrentUserData();
       } else {
-        setShowSpinner(true);
+        setInProgress(true);
         fetchCurrentUserData();
       }
 
@@ -240,17 +249,26 @@ export default function ChatBox(props: Props) {
       const msgsList = fetchDirectMessages(peer!);
       const messages = msgsList.sort((a, b) => a.created - b.created);
       setDirectMessagesList(messages);
-      if (!window.raven) {
+      if (!window.messageService) {
         setNostrkeys(activeUserKeys!);
       }
     } else {
       setIsCurrentUserJoined(true);
       setMessage("");
-      setShowSpinner(false);
+      setInProgress(false);
       scrollerClicked();
     }
   }, [currentUser]);
 
+  useDebounce(
+    async () => {
+      const resp = await lookupAccounts(searchtext, 7);
+      setUserList(resp);
+    },
+    500,
+    [searchtext]
+  );
+
   const fetchCommunity = async () => {
     const community = await getCommunity(communityName, props.activeUser?.username);
     setCurrentCommunity(community!);
@@ -307,10 +325,6 @@ export default function ChatBox(props: Props) {
     return [];
   };
 
-  const getCommunities = () => {
-    return props.chat.channels.filter((item) => !props.chat.leftChannelsList.includes(item.id));
-  };
-
   const fetchCommunityMessages = (channelId: string) => {
     for (const item of props.chat.publicMessages) {
       if (item.channelId === channelId) {
@@ -332,13 +346,13 @@ export default function ChatBox(props: Props) {
     const { noStrKey } = profile || {};
     setReceiverPubKey(noStrKey?.pub);
     setIsCurrentUserJoined(!!noStrKey?.pub);
-    setShowSpinner(false);
+    setInProgress(false);
   };
 
   const fetchProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
     setActiveUserKeys(profileData?.noStrKey);
-    const hasNoStrKey = profileData.hasOwnProperty("noStrKey");
+    const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
     setHasUserJoinedChat(hasNoStrKey);
     setShow(!!props.activeUser?.username);
   };
@@ -348,29 +362,26 @@ export default function ChatBox(props: Props) {
     setCurrentUser(username);
   };
 
-  const setCurrentUserFromSearch = (username: string) => {
-    setCurrentUser(username);
-    setExpanded(true);
-    setIsCurrentUser(true);
-    setIsUserFromSearch(true);
-  };
-
   const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
     setMessage(e.target.value);
     setIsMessageText(e.target.value.length !== 0);
   };
 
   const sendMessage = () => {
-    if (message.length !== 0 && !message.includes("Uploading")) {
+    if (message.length !== 0 && !message.includes(UPLOADING)) {
       setMessage("");
       setIsMessageText(false);
       isCommunity
-        ? window?.raven?.sendPublicMessage(currentChannel!, message, [], "")
-        : window.raven?.sendDirectMessage(receiverPubKey, message);
+        ? window?.messageService?.sendPublicMessage(currentChannel!, message, [], "")
+        : window.messageService?.sendDirectMessage(receiverPubKey, message);
     }
-    if (isUserFromSearch && receiverPubKey) {
-      window.raven?.publishContacts(currentUser, receiverPubKey);
-      setIsUserFromSearch(false);
+    if (
+      receiverPubKey &&
+      !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
+      isCurrentUser
+    ) {
+      console.log("Publish contacts run from chatbox component.");
+      window.messageService?.publishContacts(currentUser, receiverPubKey);
     }
   };
 
@@ -400,24 +411,24 @@ export default function ChatBox(props: Props) {
   };
 
   const handleMessageSvgClick = () => {
-    setShowSearchUser(true);
-  };
-
-  const setSearchUser = (d: boolean) => {
-    setShowSearchUser(d);
+    setShowSearchUser(!showSearchUser);
   };
 
   const handleJoinChat = async () => {
     const { resetChat } = props;
-    setInProgress(true);
+    setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
     await setProfileMetaData(props.activeUser, keys);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
+    window.messageService?.updateProfile({
+      name: props.activeUser?.username!,
+      about: "",
+      picture: ""
+    });
     setActiveUserKeys(keys);
-    setInProgress(false);
+    setShowSpinner(false);
   };
 
   const chatButtonSpinner = (
@@ -451,8 +462,8 @@ export default function ChatBox(props: Props) {
 
   const handleGifSelection = (gif: string) => {
     isCurrentUser
-      ? window.raven?.sendDirectMessage(receiverPubKey, gif)
-      : window?.raven?.sendPublicMessage(currentChannel!, gif, [], "");
+      ? window.messageService?.sendDirectMessage(receiverPubKey, gif)
+      : window?.messageService?.sendPublicMessage(currentChannel!, gif, [], "");
   };
 
   const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
@@ -463,7 +474,7 @@ export default function ChatBox(props: Props) {
   };
 
   const isMessageGif = (content: string) => {
-    return content.includes("giphy");
+    return content.includes(GIPHGY);
   };
 
   const checkFile = (filename: string) => {
@@ -549,13 +560,13 @@ export default function ChatBox(props: Props) {
 
   const sendDM = (name: string, pubkey: string) => {
     if (dMMessage) {
-      window.raven?.sendDirectMessage(pubkey, dMMessage);
+      window.messageService?.sendDirectMessage(pubkey, dMMessage);
 
       setIsCurrentUser(true);
       setCurrentUser(name);
       setIsCommunity(false);
       setCommunityName("");
-      setActiveMessage("");
+      setClickedMessage("");
       setDMMessage("");
     }
   };
@@ -565,18 +576,18 @@ export default function ChatBox(props: Props) {
   };
 
   const handleImageClick = (id: string) => {
-    if (activeMessage === id) {
+    if (clickedMessage === id) {
       popoverRef.current = null;
-      setActiveMessage("");
+      setClickedMessage("");
     } else {
       popoverRef.current = null;
-      setActiveMessage(id);
+      setClickedMessage(id);
     }
   };
 
   const inviteClicked = () => {
     const textField = document.createElement("textarea");
-    const url = `https://ecency.com/community/join?communityId=${currentChannel?.id}`;
+    const url = `http://localhost:3000/created/${currentCommunity?.name}?communityid=${currentChannel?.id}`;
     textField.innerText = url;
     document.body.appendChild(textField);
     textField.select();
@@ -609,7 +620,7 @@ export default function ChatBox(props: Props) {
             variant="outline-primary"
             className="confirm-btn"
             onClick={() => {
-              window?.raven
+              window?.messageService
                 ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
                 .then(() => {})
                 .finally(() => {
@@ -635,6 +646,16 @@ export default function ChatBox(props: Props) {
     setKeyDialog(!keyDialog);
   };
 
+  const handleBackArrowSvg = () => {
+    setCurrentUser("");
+    setIsCurrentUser(false);
+    setCommunityName("");
+    setIsCommunity(false);
+    setClickedMessage("");
+    setShowSearchUser(false);
+    setSearchText("");
+  };
+
   const menuItems: MenuItem[] = [
     {
       label: _t("chat.invite"),
@@ -660,26 +681,17 @@ export default function ChatBox(props: Props) {
       {show && (
         <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
           <div className="chat-header">
-            {(currentUser || communityName) && expanded && (
+            {(currentUser || communityName || showSearchUser) && expanded && (
               <Tooltip content={_t("chat.back")}>
                 <div className="back-arrow-image">
-                  <span
-                    className="back-arrow-svg"
-                    onClick={() => {
-                      setCurrentUser("");
-                      setIsCurrentUser(false);
-                      setCommunityName("");
-                      setIsCommunity(false);
-                      setActiveMessage("");
-                    }}
-                  >
+                  <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
                     {" "}
                     {arrowBackSvg}
                   </span>
                 </div>
               </Tooltip>
             )}
-            <div className="message-title" onClick={() => setExpanded(!expanded)}>
+            <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
               {(currentUser || isCommunity) && (
                 <p className="user-icon">
                   <UserAvatar
@@ -691,12 +703,14 @@ export default function ChatBox(props: Props) {
                 </p>
               )}
 
-              <p className="message-content">
+              <p className="message-header-content">
                 {currentUser
                   ? currentUser
                   : isCommunity
                   ? currentCommunity?.title
-                  : _t("chat.messages")}
+                  : showSearchUser
+                  ? "New Message"
+                  : "Messages"}
               </p>
             </div>
             <div className="actionable-imgs">
@@ -716,7 +730,13 @@ export default function ChatBox(props: Props) {
               </div>
               {isCommunity && (
                 <div className="community-menu">
-                  <DropDown {...menuConfig} float="right" alignBottom={false} noMarginTop={true} />
+                  <DropDown
+                    {...menuConfig}
+                    float="right"
+                    alignBottom={false}
+                    noMarginTop={true}
+                    style={DropDownStyle}
+                  />
                 </div>
               )}
             </div>
@@ -725,237 +745,269 @@ export default function ChatBox(props: Props) {
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${!hasUserJoinedChat ? "join-chat" : activeMessage ? "no-scroll" : ""}`}
+            } ${!hasUserJoinedChat ? "join-chat" : clickedMessage ? "no-scroll" : ""}`}
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
             {hasUserJoinedChat ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
-                  <>
-                    <div className="chats">
-                      {!isCurrentUserJoined ? (
-                        <p className="not-joined">{_t("chat.not-joined")}</p>
-                      ) : (
-                        <>
-                          {" "}
-                          <Link
-                            to={
-                              isCurrentUser
-                                ? `/@${currentUser}`
-                                : isCommunity
-                                ? `/created/${currentCommunity?.name}`
-                                : ""
-                            }
-                          >
-                            <div className="user-profile">
-                              {profileData?.joiningData && (
-                                <div className="user-profile-data">
-                                  <span className="user-logo">
-                                    <UserAvatar
-                                      username={
-                                        isCurrentUser
-                                          ? currentUser
-                                          : (isCommunity && currentCommunity?.name) || ""
-                                      }
-                                      size="large"
-                                    />
-                                  </span>
-                                  <h4 className="user-name user-logo ">
-                                    {isCurrentUser
+                  <div className="chats">
+                    <>
+                      {" "}
+                      <Link
+                        to={
+                          isCurrentUser
+                            ? `/@${currentUser}`
+                            : isCommunity
+                            ? `/created/${currentCommunity?.name}`
+                            : ""
+                        }
+                      >
+                        <div className="user-profile">
+                          {profileData?.joiningData && (
+                            <div className="user-profile-data">
+                              <span className="user-logo">
+                                <UserAvatar
+                                  username={
+                                    isCurrentUser
                                       ? currentUser
-                                      : (isCommunity && currentCommunity?.title) || ""}
-                                  </h4>
-                                  {profileData.about && (
-                                    <p className="about user-logo ">{profileData.about}</p>
-                                  )}
-
-                                  <div className="created-date user-logo joining-info">
-                                    <p>
-                                      {" "}
-                                      {_t("chat.joined")}{" "}
-                                      {dateToFormatted(profileData!.joiningData, "LL")}
+                                      : (isCommunity && currentCommunity?.name) || ""
+                                  }
+                                  size="large"
+                                />
+                              </span>
+                              <h4 className="user-name user-logo ">
+                                {isCurrentUser
+                                  ? currentUser
+                                  : (isCommunity && currentCommunity?.title) || ""}
+                              </h4>
+                              {profileData.about && (
+                                <p className="about user-logo ">{profileData.about}</p>
+                              )}
+
+                              <div className="created-date user-logo joining-info">
+                                <p>
+                                  {" "}
+                                  {_t("chat.joined")}{" "}
+                                  {dateToFormatted(profileData!.joiningData, "LL")}
+                                </p>
+                                <p className="followers">
+                                  {" "}
+                                  {formatFollowers(profileData!.followers)}{" "}
+                                  {isCommunity ? _t("chat.subscribers") : _t("chat.followers")}
+                                </p>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </Link>
+                      {!isCurrentUserJoined && (
+                        <p className="not-joined">{_t("chat.not-joined")}</p>
+                      )}
+                      {isCurrentUser
+                        ? directMessagesList.map((msg, i) => {
+                            const dayAndMonth = getFormattedDateAndDay(msg, i);
+                            let renderedPreview = renderPostBody(
+                              msg.content,
+                              false,
+                              props.global.canUseWebp
+                            );
+
+                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                            const isGif = isMessageGif(msg.content);
+
+                            const isImage = isMessageImage(msg.content);
+
+                            return (
+                              <React.Fragment key={msg.id}>
+                                {dayAndMonth}
+                                {msg.creator !== activeUserKeys?.pub ? (
+                                  <div key={msg.id} className="message">
+                                    <div className="user-img">
+                                      <Link to={`/@${currentUser}`}>
+                                        <span>
+                                          <UserAvatar username={currentUser} size="medium" />
+                                        </span>
+                                      </Link>
+                                    </div>
+                                    <div className="user-info">
+                                      <p className="user-msg-time">
+                                        {formatMessageTime(msg.created)}
+                                      </p>
+                                      <div
+                                        className={`receiver-message-content ${
+                                          isGif ? "gif" : ""
+                                        } ${isImage ? "chat-image" : ""}`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
+                                    </div>
+                                  </div>
+                                ) : (
+                                  <div key={msg.id} className="sender">
+                                    <p className="sender-message-time">
+                                      {formatMessageTime(msg.created)}
                                     </p>
-                                    <p className="followers">
-                                      {" "}
-                                      {formatFollowers(profileData!.followers)}{" "}
-                                      {isCommunity ? _t("chat.subscribers") : _t("chat.followers")}
+                                    <div className="sender-message">
+                                      <div
+                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
+                                          isImage ? "chat-image" : ""
+                                        }`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
+                                    </div>
+                                  </div>
+                                )}
+                              </React.Fragment>
+                            );
+                          })
+                        : publicMessages.map((pMsg, i) => {
+                            const dayAndMonth = getFormattedDateAndDay(pMsg, i);
+                            let renderedPreview = renderPostBody(
+                              pMsg.content,
+                              false,
+                              props.global.canUseWebp
+                            );
+
+                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                            const isGif = isMessageGif(pMsg.content);
+
+                            const isImage = isMessageImage(pMsg.content);
+
+                            const name = getProfileName(pMsg.creator);
+
+                            const popover = (
+                              <Popover
+                                id={`profile-popover`}
+                                placement="right"
+                                className="profile-popover"
+                              >
+                                <Popover.Content>
+                                  <div className="profile-box" ref={popoverRef}>
+                                    <UserAvatar username={name!} size="large" />
+
+                                    <p className="profile-name">{name!}</p>
+
+                                    <Form
+                                      onSubmit={(e: React.FormEvent) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        sendDM(name!, pMsg.creator);
+                                      }}
+                                    >
+                                      <InputGroup className="dm-input-group">
+                                        <Form.Control
+                                          value={dMMessage}
+                                          autoFocus={true}
+                                          onChange={handleDMChange}
+                                          required={true}
+                                          type="text"
+                                          placeholder={"Send direct message"}
+                                          autoComplete="off"
+                                          className="dm-chat-input"
+                                        />
+                                      </InputGroup>
+                                    </Form>
+                                  </div>
+                                </Popover.Content>
+                              </Popover>
+                            );
+
+                            return (
+                              <React.Fragment key={pMsg.id}>
+                                {dayAndMonth}
+                                {pMsg.creator !== activeUserKeys?.pub ? (
+                                  <div key={pMsg.id} className="message">
+                                    <div className="community-user-img">
+                                      <OverlayTrigger
+                                        trigger="click"
+                                        placement="right"
+                                        show={clickedMessage === pMsg.id}
+                                        overlay={popover}
+                                        delay={1000}
+                                        onToggle={() => handleImageClick(pMsg.id)}
+                                      >
+                                        <span>
+                                          <UserAvatar username={name!} size="medium" />
+                                        </span>
+                                      </OverlayTrigger>
+                                    </div>
+
+                                    <div className="user-info">
+                                      <p className="user-msg-time">
+                                        <span className="username-community">{name}</span>
+                                        {formatMessageTime(pMsg.created)}
+                                      </p>
+                                      <div
+                                        className={`receiver-message-content ${
+                                          isGif ? "gif" : ""
+                                        } ${isImage ? "chat-image" : ""}`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
+                                    </div>
+                                  </div>
+                                ) : (
+                                  <div key={pMsg.id} className="sender">
+                                    <p className="sender-message-time">
+                                      {formatMessageTime(pMsg.created)}
                                     </p>
+                                    <div className="sender-message">
+                                      <div
+                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
+                                          isImage ? "chat-image" : ""
+                                        }`}
+                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                      />
+                                    </div>
                                   </div>
-                                </div>
-                              )}
+                                )}
+                              </React.Fragment>
+                            );
+                          })}
+                    </>
+                  </div>
+                ) : showSearchUser ? (
+                  <>
+                    <div className="user-search-bar">
+                      <Form.Group className="w-100 mb-3">
+                        <Form.Control
+                          type="text"
+                          placeholder={_t("chat.search")}
+                          value={searchtext}
+                          autoFocus={true}
+                          onChange={(e) => {
+                            setSearchText(e.target.value);
+                          }}
+                        />
+                      </Form.Group>
+                    </div>
+                    <div className="user-search-suggestion-list">
+                      {userList.map((user, index) => {
+                        return (
+                          <div
+                            key={index}
+                            className="search-content"
+                            onClick={() => {
+                              setCurrentUser(user);
+                              setIsCurrentUser(true);
+                            }}
+                          >
+                            <div className="search-user-img">
+                              <span>
+                                <UserAvatar username={user} size="medium" />
+                              </span>
                             </div>
-                          </Link>
-                          {isCurrentUser
-                            ? directMessagesList.map((msg, i) => {
-                                const dayAndMonth = getFormattedDateAndDay(msg, i);
-                                let renderedPreview = renderPostBody(
-                                  msg.content,
-                                  false,
-                                  props.global.canUseWebp
-                                );
-
-                                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                                const isGif = isMessageGif(msg.content);
-
-                                const isImage = isMessageImage(msg.content);
-
-                                return (
-                                  <React.Fragment key={msg.id}>
-                                    {dayAndMonth}
-                                    {msg.creator !== activeUserKeys?.pub ? (
-                                      <div key={msg.id} className="message">
-                                        <div className="user-img">
-                                          <Link to={`/@${currentUser}`}>
-                                            <span>
-                                              <UserAvatar username={currentUser} size="medium" />
-                                            </span>
-                                          </Link>
-                                        </div>
-                                        <div className="user-info">
-                                          <p className="user-msg-time">
-                                            {formatMessageTime(msg.created)}
-                                          </p>
-                                          <div
-                                            className={`receiver-message-content ${
-                                              isGif ? "gif" : ""
-                                            } ${isImage ? "chat-image" : ""}`}
-                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                          />
-                                        </div>
-                                      </div>
-                                    ) : (
-                                      <div key={msg.id} className="sender">
-                                        <p className="sender-message-time">
-                                          {formatMessageTime(msg.created)}
-                                        </p>
-                                        <div className="sender-message">
-                                          <div
-                                            className={`sender-message-content ${
-                                              isGif ? "gif" : ""
-                                            } ${isImage ? "chat-image" : ""}`}
-                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                          />
-                                        </div>
-                                      </div>
-                                    )}
-                                  </React.Fragment>
-                                );
-                              })
-                            : publicMessages.map((pMsg, i) => {
-                                const dayAndMonth = getFormattedDateAndDay(pMsg, i);
-                                let renderedPreview = renderPostBody(
-                                  pMsg.content,
-                                  false,
-                                  props.global.canUseWebp
-                                );
-
-                                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                                const isGif = isMessageGif(pMsg.content);
-
-                                const isImage = isMessageImage(pMsg.content);
-
-                                const name = getProfileName(pMsg.creator);
-
-                                const popover = (
-                                  <Popover
-                                    id={`profile-popover`}
-                                    placement="right"
-                                    className="profile-popover"
-                                  >
-                                    <Popover.Content>
-                                      <div className="profile-box" ref={popoverRef}>
-                                        <UserAvatar username={name!} size="large" />
-
-                                        <p className="profile-name">{name!}</p>
-
-                                        <Form
-                                          onSubmit={(e: React.FormEvent) => {
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            sendDM(name!, pMsg.creator);
-                                          }}
-                                        >
-                                          <InputGroup className="dm-input-group">
-                                            <Form.Control
-                                              value={dMMessage}
-                                              autoFocus={true}
-                                              onChange={handleDMChange}
-                                              required={true}
-                                              type="text"
-                                              placeholder={"Send direct message"}
-                                              autoComplete="off"
-                                              className="dm-chat-input"
-                                              style={{
-                                                maxWidth: "100%",
-                                                overflowWrap: "break-word"
-                                              }}
-                                            />
-                                          </InputGroup>
-                                        </Form>
-                                      </div>
-                                    </Popover.Content>
-                                  </Popover>
-                                );
-
-                                return (
-                                  <React.Fragment key={pMsg.id}>
-                                    {dayAndMonth}
-                                    {pMsg.creator !== activeUserKeys?.pub ? (
-                                      <div key={pMsg.id} className="message">
-                                        <div className="community-user-img">
-                                          <OverlayTrigger
-                                            trigger="click"
-                                            placement="right"
-                                            // trigger={["hover", "focus"]}
-                                            show={activeMessage === pMsg.id}
-                                            overlay={popover}
-                                            delay={1000}
-                                            onToggle={() => handleImageClick(pMsg.id)}
-                                          >
-                                            <span>
-                                              <UserAvatar username={name!} size="medium" />
-                                            </span>
-                                          </OverlayTrigger>
-                                        </div>
-
-                                        <div className="user-info">
-                                          <p className="user-msg-time">
-                                            <span className="username-community">{name}</span>
-                                            {formatMessageTime(pMsg.created)}
-                                          </p>
-                                          <div
-                                            className={`receiver-message-content ${
-                                              isGif ? "gif" : ""
-                                            } ${isImage ? "chat-image" : ""}`}
-                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                          />
-                                        </div>
-                                      </div>
-                                    ) : (
-                                      <div key={pMsg.id} className="sender">
-                                        <p className="sender-message-time">
-                                          {formatMessageTime(pMsg.created)}
-                                        </p>
-                                        <div className="sender-message">
-                                          <div
-                                            className={`sender-message-content ${
-                                              isGif ? "gif" : ""
-                                            } ${isImage ? "chat-image" : ""}`}
-                                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                          />
-                                        </div>
-                                      </div>
-                                    )}
-                                  </React.Fragment>
-                                );
-                              })}
-                        </>
-                      )}
+
+                            <div className="search-user-title">
+                              <p className="search-username">{user}</p>
+                            </div>
+                          </div>
+                        );
+                      })}
                     </div>
                   </>
                 ) : (
@@ -1032,7 +1084,7 @@ export default function ChatBox(props: Props) {
               </>
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
-                {inProgress && chatButtonSpinner}
+                {showSpinner && chatButtonSpinner}
                 {_t("chat.join-chat")}
               </Button>
             )}
@@ -1052,7 +1104,7 @@ export default function ChatBox(props: Props) {
               </Tooltip>
             )}
           </div>
-          {showSpinner && <LinearProgress />}
+          {inProgress && <LinearProgress />}
           {(currentUser || isCommunity) && (
             <div className="chat">
               <div className="chatbox-emoji-picker">
@@ -1061,15 +1113,7 @@ export default function ChatBox(props: Props) {
                     <div className="emoji-icon">{emoticonHappyOutlineSvg}</div>
                   </Tooltip>
                   <EmojiPicker
-                    style={{
-                      width: "94%",
-                      top: "255px",
-                      left: "0px",
-                      marginLeft: "14px",
-                      borderTopLeftRadius: "8px",
-                      borderTopRightRadius: "8px",
-                      borderBottomLeftRadius: "0px"
-                    }}
+                    style={EmojiPickerStyle}
                     fallback={(e) => {
                       handleEmojiSelection(e);
                     }}
@@ -1089,15 +1133,7 @@ export default function ChatBox(props: Props) {
                       </Tooltip>
                       {shGif && (
                         <GifPicker
-                          style={{
-                            width: "94%",
-                            top: "76px",
-                            left: 0,
-                            marginLeft: "14px",
-                            borderTopLeftRadius: "8px",
-                            borderTopRightRadius: "8px",
-                            borderBottomLeftRadius: "0px"
-                          }}
+                          style={GifPickerStyle}
                           gifImagesStyle={{
                             width: "170px"
                           }}
@@ -1156,9 +1192,7 @@ export default function ChatBox(props: Props) {
                     autoComplete="off"
                     className="chat-input"
                     style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-                    disabled={
-                      showSpinner || receiverPubKey === null || receiverPubKey === undefined
-                    }
+                    disabled={inProgress || receiverPubKey === null || receiverPubKey === undefined}
                   />
                   <InputGroup.Append
                     className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
@@ -1173,13 +1207,6 @@ export default function ChatBox(props: Props) {
         </div>
       )}
 
-      {showSearchUser && (
-        <SeachUser
-          setSearchUser={setSearchUser}
-          setCurrentUserFromSearch={setCurrentUserFromSearch}
-        />
-      )}
-
       {keyDialog && (
         <Modal
           animation={false}
diff --git a/src/common/components/dropdown/_index.scss b/src/common/components/dropdown/_index.scss
index 639a3366b4f..0a212a14c76 100644
--- a/src/common/components/dropdown/_index.scss
+++ b/src/common/components/dropdown/_index.scss
@@ -25,9 +25,7 @@
       background: transparent;
       border-radius: 50%;
       display: flex;
-      height: 28px;
       justify-content: center;
-      width: 28px;
       user-select: none;
 
       svg {
diff --git a/src/common/components/dropdown/index.tsx b/src/common/components/dropdown/index.tsx
index fd2cdcae1c2..9aa17da3f0e 100644
--- a/src/common/components/dropdown/index.tsx
+++ b/src/common/components/dropdown/index.tsx
@@ -18,6 +18,11 @@ export interface MenuItem {
   isStatic?: boolean;
 }
 
+interface MenuDownStyle {
+  width: string;
+  height: string;
+}
+
 interface Props {
   history: History | null;
   float: "left" | "right" | "none";
@@ -34,6 +39,10 @@ interface Props {
   withPadding?: boolean;
   menuHide?: boolean;
   noMarginTop?: boolean;
+  style?: {
+    width: string;
+    height: string;
+  };
 }
 
 const MyDropDown = (props: Props) => {
@@ -112,11 +121,19 @@ const MyDropDown = (props: Props) => {
 
   const { label, float, items } = props;
 
+  const menuDownStyle: MenuDownStyle = {
+    width: "28px",
+    height: "28px",
+    ...(props.style && props.style) // Merge the passed style props if available
+  };
+
   const child: JSX.Element =
     typeof label === "string" ? (
       <div className={_c(`dropdown-btn ${menu ? "hover" : ""}`)}>
         {label && <div className="label">{label}</div>}
-        <div className="menu-down">{props?.icon || menuDownSvg}</div>
+        <div style={menuDownStyle} className="menu-down">
+          {props?.icon || menuDownSvg}
+        </div>
       </div>
     ) : (
       label
@@ -203,7 +220,8 @@ export default (p: Props) => {
     className: p?.className,
     withPadding: p?.withPadding,
     menuHide: p?.menuHide,
-    noMarginTop: p?.noMarginTop
+    noMarginTop: p?.noMarginTop,
+    style: p?.style
   };
 
   return <MyDropDown {...props} />;
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 1f54a0893cb..b378282cb92 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -43,10 +43,10 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [props.activeUser]);
 
   useEffect(() => {
-    if (window.raven) {
+    if (window.messageService) {
       setHasUserJoinedChat(true);
     }
-  }, [window?.raven]);
+  }, [window?.messageService]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -56,15 +56,15 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const fetchUserProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const hasNoStrKey = profileData.hasOwnProperty("noStrKey");
+    const hasNoStrKey = profileData && profileData.hasOwnProperty("noStrKey");
     setHasUserJoinedChat(hasNoStrKey);
   };
 
   const fetchCommunityProfile = async () => {
     const communityProfile = await getProfileMetaData(props.community?.name);
-    const haschannelMetaData = communityProfile.hasOwnProperty("channel");
+    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty("channel");
     setIsChatEnabled(haschannelMetaData);
-    const hasNoStrKey = communityProfile.hasOwnProperty("noStrKey");
+    const hasNoStrKey = communityProfile && communityProfile.hasOwnProperty("noStrKey");
     if (!currentChannel) {
       setCurrentChannel(communityProfile.channel);
     }
@@ -91,7 +91,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const { community } = props;
     try {
       setInProgress(true);
-      const data = await window?.raven?.createChannel({
+      const data = await window?.messageService?.createChannel({
         name: community.title,
         about: community.description,
         communityName: community.name,
@@ -118,11 +118,11 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const joinCommunityChat = () => {
     if (chat.leftChannelsList.includes(currentChannel?.id!)) {
-      window?.raven?.updateLeftChannelList(
+      window?.messageService?.updateLeftChannelList(
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
     }
-    window?.raven?.loadChannel(currentChannel?.id!);
+    window?.messageService?.loadChannel(currentChannel?.id!);
     setIsJoinChat(true);
   };
 
@@ -143,7 +143,11 @@ export default function JoinCommunityChatBtn(props: Props) {
     await setProfileMetaData(props.activeUser, keys);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    window.raven?.updateProfile({ name: props.activeUser?.username!, about: "", picture: "" });
+    window.messageService?.updateProfile({
+      name: props.activeUser?.username!,
+      about: "",
+      picture: ""
+    });
     setInProgress(false);
     fetchCommunityProfile();
     resetChat();
@@ -163,7 +167,7 @@ export default function JoinCommunityChatBtn(props: Props) {
             {inProgress && chatButtonSpinner}
             Start Community Chat
           </Button>
-        ) : !isJoinChat && isChatEnabled ? (
+        ) : !isJoinChat && isChatEnabled && hasUserJoinedChat ? (
           <Button onClick={joinCommunityChat}>
             {" "}
             {inProgress && chatButtonSpinner}Join Community Chat
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 351541d06bc..8a04894f563 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -772,7 +772,7 @@ class LoginDialog extends Component<Props> {
       //reset the already stored chat
       resetChat();
 
-      //create new raven instance for newly logged in user
+      //create new message service instance for newly logged in user
       if (profile && profile.noStrKey) {
         setNostrkeys(profile.noStrKey);
       }
diff --git a/src/common/components/search-user/index.scss b/src/common/components/search-user/index.scss
deleted file mode 100644
index a107eccbf8f..00000000000
--- a/src/common/components/search-user/index.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import "src/style/colors";
-@import "src/style/variables";
-@import "src/style/bootstrap_vars";
-@import "src/style/mixins";
-
-.search-user-dialog {
-  .search-header {
-    padding-left: 5px;
-  }
-  .modal-content {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .modal-body {
-    padding: 0 0 10px 0;
-  }
-
-  .search-content {
-    padding: 0.7rem;
-    border-radius: 10px;
-    cursor: pointer;
-    display: flex;
-    margin-bottom: 1rem;
-
-    .search-user-img {
-      justify-content: center;
-      align-items: center;
-      display: flex;
-      margin-left: 10px;
-    }
-
-    .search-user-title {
-      margin-left: 1rem;
-      .search-username {
-        margin-top: 7px;
-        margin-bottom: 0;
-        font-size: 20px;
-        font-weight: 700;
-      }
-    }
-    &:hover {
-      @include themify(day) {
-        background: $white-four;
-      }
-      @include themify(night) {
-        background: $charcoal-grey;
-      }
-    }
-  }
-}
diff --git a/src/common/components/search-user/index.tsx b/src/common/components/search-user/index.tsx
deleted file mode 100644
index 36ef8450c44..00000000000
--- a/src/common/components/search-user/index.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Modal, Form } from "react-bootstrap";
-import useDebounce from "react-use/lib/useDebounce";
-import { lookupAccounts } from "../../api/hive";
-
-import UserAvatar from "../user-avatar";
-import { _t } from "../../i18n";
-import "./index.scss";
-
-interface Props {
-  setSearchUser: (d: boolean) => void;
-  setCurrentUserFromSearch: (username: string) => void;
-}
-
-export default function SeachUser(props: Props) {
-  const [searchtext, setSearchText] = useState("");
-  const [userList, setUserList] = useState<string[]>([]);
-  const [showModal, setShowModal] = useState(true);
-
-  useDebounce(
-    async () => {
-      const resp = await lookupAccounts(searchtext, 7);
-      setUserList(resp);
-    },
-    500,
-    [searchtext]
-  );
-
-  const searchUserClicked = (username: string) => {
-    const { setCurrentUserFromSearch, setSearchUser } = props;
-    setCurrentUserFromSearch(username);
-    setSearchUser(false);
-  };
-
-  const handleCloseModal = () => {
-    setShowModal(false);
-    const { setSearchUser } = props;
-    setSearchUser(false);
-  };
-
-  return (
-    <Modal
-      animation={false}
-      show={showModal}
-      centered={true}
-      onHide={handleCloseModal}
-      keyboard={false}
-      className="search-user-dialog"
-      size="lg"
-    >
-      <Modal.Header closeButton={true} className="search-header">
-        <Modal.Title>{_t("chat.new-message")}</Modal.Title>
-      </Modal.Header>
-      <Form.Group className="w-100 mb-3">
-        <Form.Control
-          type="text"
-          placeholder={_t("chat.search")}
-          value={searchtext}
-          autoFocus={true}
-          onChange={(e) => {
-            setSearchText(e.target.value);
-          }}
-        />
-      </Form.Group>
-      <Modal.Body>
-        <div className="user-search-suggestion-list">
-          {userList.map((user, index) => {
-            return (
-              <div key={index} className="search-content" onClick={() => searchUserClicked(user)}>
-                <div className="search-user-img">
-                  <span>
-                    <UserAvatar username={user} size="medium" />
-                  </span>
-                </div>
-
-                <div className="search-user-title">
-                  <p className="search-username">{user}</p>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 9fd09850b6d..6bfb1f510a8 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -23,20 +23,9 @@ export const getProfileMetaData = async (username: string) => {
 export const resetProfile = async (activeUser: ActiveUser | null) => {
   const profile = await getProfileMetaData(activeUser?.username!);
   delete profile.noStrKey;
-  delete profile.profile;
-  delete profile.version;
+  delete profile.channel;
   const response = await getAccountFull(activeUser?.username!);
-  const profileC = {
-    name: activeUser?.username,
-    about: "",
-    cover_image: "",
-    profile_image: "",
-    website: "",
-    location: "",
-    pinned: "",
-    version: 2
-  };
-  const updatedProfile = await updateProfile(response, { ...profileC });
+  const updatedProfile = await updateProfile(response, { ...profile });
   console.log(updatedProfile);
 };
 
@@ -80,3 +69,7 @@ export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format(
 export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
 
 export const isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
+
+export const getCommunities = (channels: Channel[], leftChannels: string[]) => {
+  return channels.filter((item) => !leftChannels.includes(item.id));
+};
diff --git a/src/common/helper/message-global.ts b/src/common/helper/message-service-global.ts
similarity index 81%
rename from src/common/helper/message-global.ts
rename to src/common/helper/message-service-global.ts
index c0981223bcb..7d1a6791ac4 100644
--- a/src/common/helper/message-global.ts
+++ b/src/common/helper/message-service-global.ts
@@ -1,9 +1,9 @@
-import Raven from "./message-helper";
+import MessageService from "./message-service";
 import { Event } from "../../lib/nostr-tools/event";
 
 declare global {
   interface Window {
-    raven?: Raven;
+    messageService?: MessageService;
     nostr?: {
       getPublicKey: () => Promise<string>;
       signEvent: (event: Event) => Promise<Event>;
diff --git a/src/common/helper/message-helper.ts b/src/common/helper/message-service.ts
similarity index 87%
rename from src/common/helper/message-helper.ts
rename to src/common/helper/message-service.ts
index 5f9956a86a4..f2505d15cec 100644
--- a/src/common/helper/message-helper.ts
+++ b/src/common/helper/message-service.ts
@@ -29,7 +29,7 @@ enum NewKinds {
   Arbitrary = 30078
 }
 
-export enum RavenEvents {
+export enum MessageEvents {
   Ready = "ready",
   ProfileUpdate = "profile_update",
   LeftChannelList = "left_channel_list",
@@ -40,16 +40,16 @@ export enum RavenEvents {
 }
 
 type EventHandlerMap = {
-  [RavenEvents.Ready]: () => void;
-  [RavenEvents.ProfileUpdate]: (data: Profile[]) => void;
-  [RavenEvents.DirectMessage]: (data: DirectMessage[]) => void;
-  [RavenEvents.ChannelCreation]: (data: Channel[]) => void;
-  [RavenEvents.PublicMessage]: (data: PublicMessage[]) => void;
-  [RavenEvents.LeftChannelList]: (data: string[]) => void;
-  [RavenEvents.DirectContact]: (data: DirectContact[]) => void;
+  [MessageEvents.Ready]: () => void;
+  [MessageEvents.ProfileUpdate]: (data: Profile[]) => void;
+  [MessageEvents.DirectMessage]: (data: DirectMessage[]) => void;
+  [MessageEvents.ChannelCreation]: (data: Channel[]) => void;
+  [MessageEvents.PublicMessage]: (data: PublicMessage[]) => void;
+  [MessageEvents.LeftChannelList]: (data: string[]) => void;
+  [MessageEvents.DirectContact]: (data: DirectContact[]) => void;
 };
 
-class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
+class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   private pool: SimplePool;
   private poolL: SimplePool;
 
@@ -110,7 +110,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       const events = resp.sort((a, b) => b.created_at - a.created_at);
       const deletions = resp
         .filter((x) => x.kind === Kind.EventDeletion)
-        .map((x) => Raven.findTagValue(x, "e"));
+        .map((x) => MessageService.findTagValue(x, "e"));
       const profile = events.find((x) => x.kind === Kind.Contacts);
       if (profile && profile?.tags.length !== 0) {
         this.directContacts = profile?.tags;
@@ -120,9 +120,9 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       const leftChannelList = events.find(
         (x) =>
           x.kind.toString() === NewKinds.Arbitrary.toString() &&
-          Raven.findTagValue(x, "d") === "left-channel-list"
+          MessageService.findTagValue(x, "d") === "left-channel-list"
       );
-      console.log(leftChannelList, "leftChannelList");
+
       if (leftChannelList) {
         this.pushToEventBuffer(leftChannelList);
       }
@@ -136,7 +136,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
               }
 
               if (x.kind === Kind.ChannelMessage) {
-                return Raven.findTagValue(x, "e");
+                return MessageService.findTagValue(x, "e");
               }
 
               return undefined;
@@ -150,7 +150,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       }
 
       this.fetchMessages();
-      this.emit(RavenEvents.Ready);
+      this.emit(MessageEvents.Ready);
     });
   }
 
@@ -201,6 +201,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   }
 
   public publishContacts(username: string, pubkey: string) {
+    console.log("Publish contact run", username, pubkey);
     const newUser = [pubkey, username];
     newUser.forEach((element) => {
       let nameExist = false;
@@ -216,6 +217,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       // If the name doesn't exist, add the element to the direct contacts array
       if (!nameExist) {
         this.directContacts.push(newUser);
+        console.log("Event is fired");
         this.publish(Kind.Contacts, this.directContacts, "");
         return;
       }
@@ -511,47 +513,48 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
 
       if (directContactsProfile.length > 0) {
-        this.emit(RavenEvents.DirectContact, directContactsProfile);
+        console.log(directContactsProfile, "directContactsProfile");
+        this.emit(MessageEvents.DirectContact, directContactsProfile);
       }
     }
 
     const profileUpdates: Profile[] = this.eventQueue
       .filter((x) => x.kind === Kind.Metadata)
       .map((ev) => {
-        const content = Raven.parseJson(ev.content);
+        const content = MessageService.parseJson(ev.content);
         return content
           ? {
               id: ev.id,
               creator: ev.pubkey,
               created: ev.created_at,
-              ...Raven.normalizeMetadata(content)
+              ...MessageService.normalizeMetadata(content)
             }
           : null;
       })
       .filter(notEmpty);
     if (profileUpdates.length > 0) {
-      this.emit(RavenEvents.ProfileUpdate, profileUpdates);
+      this.emit(MessageEvents.ProfileUpdate, profileUpdates);
     }
 
     const leftChannelListEv = this.eventQueue
       .filter(
         (x) =>
           x.kind.toString() === NewKinds.Arbitrary.toString() &&
-          Raven.findTagValue(x, "d") === "left-channel-list"
+          MessageService.findTagValue(x, "d") === "left-channel-list"
       )
       .sort((a, b) => b.created_at - a.created_at)[0];
 
     if (leftChannelListEv) {
-      const content = Raven.parseJson(leftChannelListEv.content);
+      const content = MessageService.parseJson(leftChannelListEv.content);
       if (Array.isArray(content) && content.every((x) => isSha256(x))) {
-        this.emit(RavenEvents.LeftChannelList, content);
+        this.emit(MessageEvents.LeftChannelList, content);
       }
     }
 
     const channelCreations: Channel[] = this.eventQueue
       .filter((x) => x.kind === Kind.ChannelCreation)
       .map((ev) => {
-        const content = Raven.parseJson(ev.content);
+        const content = MessageService.parseJson(ev.content);
         // console.log(content,"events")
         return content
           ? {
@@ -559,21 +562,21 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
               creator: ev.pubkey,
               created: ev.created_at,
               communityName: content.communityName,
-              ...Raven.normalizeMetadata(content)
+              ...MessageService.normalizeMetadata(content)
             }
           : null;
       })
       .filter(notEmpty);
     if (channelCreations.length > 0) {
-      this.emit(RavenEvents.ChannelCreation, channelCreations);
+      this.emit(MessageEvents.ChannelCreation, channelCreations);
     }
 
     const publicMessages: PublicMessage[] = this.eventQueue
       .filter((x) => x.kind === Kind.ChannelMessage)
       .map((ev) => {
-        const eTags = Raven.filterTagValue(ev, "e");
+        const eTags = MessageService.filterTagValue(ev, "e");
         const root = eTags.find((x) => x[3] === "root")?.[1];
-        const mentions = Raven.filterTagValue(ev, "p")
+        const mentions = MessageService.filterTagValue(ev, "p")
           .map((x) => x?.[1])
           .filter(notEmpty);
         if (!root) return null;
@@ -590,16 +593,16 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (publicMessages.length > 0) {
-      this.emit(RavenEvents.PublicMessage, publicMessages);
+      this.emit(MessageEvents.PublicMessage, publicMessages);
     }
 
     Promise.all(
       this.eventQueue
         .filter((x) => x.kind === Kind.EncryptedDirectMessage)
         .map((ev) => {
-          const receiver = Raven.findTagValue(ev, "p");
+          const receiver = MessageService.findTagValue(ev, "p");
           if (!receiver) return null;
-          const eTags = Raven.filterTagValue(ev, "e");
+          const eTags = MessageService.filterTagValue(ev, "e");
           const root = eTags.find((x) => x[3] === "root")?.[1];
 
           const peer = receiver === this.pub ? ev.pubkey : receiver;
@@ -627,7 +630,7 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
         })
         .filter(notEmpty)
     ).then((directMessages: DirectMessage[]) => {
-      this.emit(RavenEvents.DirectMessage, directMessages);
+      this.emit(MessageEvents.DirectMessage, directMessages);
     });
 
     this.eventQueue = [];
@@ -664,18 +667,18 @@ class Raven extends TypedEventEmitter<RavenEvents, EventHandlerMap> {
   }
 }
 
-export default Raven;
+export default MessageService;
 
-export const initRaven = (keys: Keys): Raven | undefined => {
-  if (window.raven) {
-    window.raven.close();
-    window.raven = undefined;
+export const initMessageService = (keys: Keys): MessageService | undefined => {
+  if (window.messageService) {
+    window.messageService.close();
+    window.messageService = undefined;
   }
 
   if (keys) {
-    window.raven = new Raven(keys.priv, keys.pub);
-    console.log("window raven", window.raven);
+    window.messageService = new MessageService(keys.priv, keys.pub);
+    console.log("window messageService", window.messageService);
   }
 
-  return window.raven;
+  return window.messageService;
 };
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 522efd7ae69..b8344b6b722 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -35,6 +35,16 @@ import { EntryListContent } from "../components/entry-list";
 import { connect } from "react-redux";
 import { withPersistentScroll } from "../components/with-persistent-scroll";
 import "./community.scss";
+import { Button, Modal } from "react-bootstrap";
+import LoginRequired from "../components/login-required";
+import {
+  createNoStrAccount,
+  getCommunities,
+  getProfileMetaData,
+  setProfileMetaData
+} from "../helper/chat-utils";
+import { useMappedStore } from "../store/use-mapped-store";
+import { Channel } from "../../providers/message-provider-types";
 
 interface MatchParams {
   filter: string;
@@ -47,9 +57,10 @@ interface Props extends PageProps {
 
 export const CommunityPage = (props: Props) => {
   const getSearchParam = () => {
-    return props.location.search.replace("?", "").replace("q", "").replace("=", "");
+    const updatedLocation = props.location.search.replace(/communityid=.*?(?=&|$)/, "");
+    return updatedLocation.replace("?", "").replace("q", "").replace("=", "").replace("&", "");
   };
-
+  const { chat } = useMappedStore();
   const [community, setCommunity] = useState<Community | null>(null);
   const [account, setAccount] = useState<Account | null>(null);
   const [loading, setLoading] = useState(true);
@@ -57,10 +68,30 @@ export const CommunityPage = (props: Props) => {
   const [search, setSearch] = useState(getSearchParam());
   const [searchDataLoading, setSearchDataLoading] = useState(getSearchParam().length > 0);
   const [searchData, setSearchData] = useState<SearchResult[]>([]);
+  const [isJoinCommunity, setIsJoinCommunity] = useState(false);
+  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(true);
+  const [inProgress, setInProgress] = useState(false);
+  const [channelId, setChannelId] = useState("");
+  const [communities, setCommunities] = useState<Channel[]>([]);
+  const [isCommunityAlreadyJoined, setIsCommunityAlreadyJoined] = useState(false);
 
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
+  useEffect(() => {
+    fetchUserProfileData();
+  }, [props.activeUser]);
+
+  useEffect(() => {
+    const communities = getCommunities(chat.channels, chat.leftChannelsList);
+    setCommunities(communities);
+  }, [chat.channels, chat.leftChannelsList]);
+
+  useEffect(() => {
+    const isAlreadyExists = communities.some((community) => community.id === channelId);
+    setIsCommunityAlreadyJoined(isAlreadyExists);
+  }, [communities]);
+
   useEffect(() => {
     ensureData();
     if (search.length) handleInputChange(search);
@@ -69,6 +100,12 @@ export const CommunityPage = (props: Props) => {
     const { filter, name } = match.params;
     // fetch blog posts.
     if (EntryFilter[filter]) fetchEntries(filter, name, false);
+    const urlParams = new URLSearchParams(location.search);
+    const communityId = urlParams.get("communityid");
+    if (communityId) {
+      setChannelId(communityId);
+      setIsJoinCommunity(true);
+    }
 
     fetchSubscriptions();
   }, []);
@@ -178,6 +215,14 @@ export const CommunityPage = (props: Props) => {
     delayedSearch(value);
   };
 
+  const fetchUserProfileData = async () => {
+    if (props.activeUser) {
+      const profileData = await getProfileMetaData(props.activeUser?.username!);
+      const hasNoStrKey = profileData && profileData.hasOwnProperty("noStrKey");
+      setHasUserJoinedChat(hasNoStrKey);
+    }
+  };
+
   const getMetaProps = () => {
     const { filter } = props.match.params;
     const ncount = props.notifications.unread > 0 ? `(${props.notifications.unread}) ` : "";
@@ -200,8 +245,123 @@ export const CommunityPage = (props: Props) => {
     <NavBar {...props} />
   );
 
+  const handleJoinChat = async () => {
+    setInProgress(true);
+    const keys = createNoStrAccount();
+    await setProfileMetaData(props.activeUser, keys);
+    setHasUserJoinedChat(true);
+    window.messageService?.updateProfile({
+      name: props.activeUser?.username!,
+      about: "",
+      picture: ""
+    });
+    setInProgress(false);
+  };
+
+  const joinCommunityChat = () => {
+    const communityIds = new Set(communities.map((community) => community.id));
+    if (!communityIds.has(channelId)) {
+      const messageService = window?.messageService;
+      if (messageService) {
+        const updatedLeftChannelsList = chat.leftChannelsList.filter((x) => x !== channelId);
+        messageService.updateLeftChannelList(updatedLeftChannelsList);
+        messageService.loadChannel(channelId);
+      }
+    }
+
+    setIsJoinCommunity(false);
+  };
+
+  const joinCommunityModal = () => {
+    if (hasUserJoinedChat && !isCommunityAlreadyJoined) {
+      return (
+        <>
+          <div className="join-community-dialog-header border-bottom">
+            <div className="join-community-dialog-titles">
+              <h2 className="join-community-main-title">Confirmaton</h2>
+            </div>
+          </div>
+          <div
+            className="join-community-dialog-body"
+            style={{ fontSize: "18px", marginTop: "12px" }}
+          >
+            Are you sure?
+          </div>
+          <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+            <Button
+              variant="outline-primary"
+              className="close-btn"
+              style={{ marginRight: "20px" }}
+              onClick={() => {
+                setIsJoinCommunity(false);
+              }}
+            >
+              Close
+            </Button>
+            <Button variant="outline-primary" className="confirm-btn" onClick={joinCommunityChat}>
+              Confirm
+            </Button>
+          </p>
+        </>
+      );
+    } else {
+      if (isCommunityAlreadyJoined) {
+        return (
+          <>
+            <div className="join-chat-header border-bottom">
+              <div className="join-chat-titles">
+                <h4 className="join-chat-main-title"> You have already joined this community</h4>
+              </div>
+            </div>
+            <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "right" }}>
+              <Button
+                variant="outline-primary"
+                className="join-btn"
+                onClick={() => setIsJoinCommunity(false)}
+              >
+                Ok
+              </Button>
+            </p>
+          </>
+        );
+      } else {
+        return (
+          <>
+            <div className="join-chat-header border-bottom">
+              <div className="join-chat-titles">
+                <h4 className="join-chat-main-title"> Please Join the Chat to Continue</h4>
+              </div>
+            </div>
+            {inProgress && <LinearProgress />}
+            <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "center" }}>
+              <Button className="join-btn" onClick={handleJoinChat}>
+                Join Chat
+              </Button>
+            </p>
+          </>
+        );
+      }
+    }
+  };
+
   return community && account ? (
     <>
+      {isJoinCommunity && (
+        <LoginRequired {...props}>
+          <Modal
+            animation={false}
+            show={true}
+            centered={true}
+            onHide={() => setIsJoinCommunity(false)}
+            keyboard={false}
+            className="authorities-dialog modal-thin-header"
+            size="lg"
+          >
+            <Modal.Header closeButton={true} />
+            <Modal.Body>{joinCommunityModal()}</Modal.Body>
+          </Modal>
+        </LoginRequired>
+      )}
       <Meta {...getMetaProps()} />
       <ScrollToTop />
       <Theme global={props.global} />
diff --git a/src/common/routes.ts b/src/common/routes.ts
index 4bf63ecfe99..a479d0d98ba 100644
--- a/src/common/routes.ts
+++ b/src/common/routes.ts
@@ -27,7 +27,9 @@ export default {
   COMMUNITIES: `/communities`,
   COMMUNITIES_CREATE: `/communities/create`,
   COMMUNITIES_CREATE_HS: `/communities/create-hs`,
-  COMMUNITY: `/:filter(${entryFilters.join("|")}|subscribers|activities|roles)/:name(hive-[\\d]+)`,
+  COMMUNITY: `/:filter(${entryFilters.join(
+    "|"
+  )}|subscribers|activities|roles)/:name(hive-[\\d]+)(/:communityid)?`,
   SUBMIT: `/submit`,
   EDIT: `/:username(@[\\w\\.\\d-]+)/:permlink/edit`,
   EDIT_DRAFT: `/draft/:draftId`,
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index af83baa5514..2b452360728 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -101,7 +101,6 @@ export default (state: Chat = initialState, action: Actions): Chat => {
 
     case ActionTypes.LEFTCHANNELLIST: {
       const { data } = action;
-      console.log("data in store", data);
       return {
         ...state,
         leftChannelsList: [...data]
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 88f9c7ee875..e169032a40c 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -11,7 +11,7 @@ import {
   PublicMessage
 } from "./message-provider-types";
 
-import { initRaven, RavenEvents } from "../common/helper/message-helper";
+import { initMessageService, MessageEvents } from "../common/helper/message-service";
 import { getProfileMetaData, NostrKeys } from "../common/helper/chat-utils";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
@@ -21,7 +21,7 @@ export const setNostrkeys = (keys: NostrKeys) => {
     pub: keys.pub,
     priv: keys.priv
   };
-  const ev = new CustomEvent("createRavenInstance", { detail });
+  const ev = new CustomEvent("createMSInstance", { detail });
   window.dispatchEvent(ev);
 };
 
@@ -36,25 +36,25 @@ interface Props {
 
 const MessageProvider = (props: Props) => {
   const { activeUser, chat } = useMappedStore();
-  const [ravenReady, setRavenReady] = useState(false);
+  const [messageServiceReady, setMessageServiceReady] = useState(false);
   const [since, setSince] = useState<number>(0);
   const [keys, setKeys] = useState<Keys>();
-  const [raven, setRaven] = useState<any>();
+  const [messageService, setMessageService] = useState<any>();
   const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
   const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
 
   useEffect(() => {
-    window.addEventListener("createRavenInstance", createRavenInstance);
+    window.addEventListener("createMSInstance", createMSInstance);
 
     return () => {
-      window.removeEventListener("createRavenInstance", createRavenInstance);
+      window.removeEventListener("createMSInstance", createMSInstance);
     };
   }, []);
 
   useEffect(() => {
-    if (!window.raven && keys) {
-      const ravenInstance = initRaven(keys);
-      setRaven(ravenInstance);
+    if (!window.messageService && keys) {
+      const messageServiceInstance = initMessageService(keys);
+      setMessageService(messageServiceInstance);
     }
   }, [keys]);
 
@@ -64,10 +64,10 @@ const MessageProvider = (props: Props) => {
     }
   }, [activeUser]);
 
-  const createRavenInstance = (e: Event) => {
+  const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeys;
-    const ravenInstance = initRaven(detail);
-    setRaven(ravenInstance);
+    const messageServiceInstance = initMessageService(detail);
+    setMessageService(messageServiceInstance);
   };
 
   const getNostrKeys = async (activeUser: ActiveUser) => {
@@ -77,11 +77,11 @@ const MessageProvider = (props: Props) => {
 
   //Listen for events in an interval.
   useEffect(() => {
-    if (!ravenReady) return;
+    if (!messageServiceReady) return;
 
     const timer = setTimeout(
       () => {
-        raven?.listen(
+        messageService?.listen(
           chat.channels.map((x) => x.id),
           Math.floor((since || Date.now()) / 1000)
         );
@@ -93,21 +93,21 @@ const MessageProvider = (props: Props) => {
     return () => {
       clearTimeout(timer);
     };
-  }, [since, ravenReady, raven, chat.channels]);
+  }, [since, messageServiceReady, messageService, chat.channels]);
 
   // // Ready state handler
   const handleReadyState = () => {
-    setRavenReady(true);
+    setMessageServiceReady(true);
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.Ready, handleReadyState);
-    raven?.addListener(RavenEvents.Ready, handleReadyState);
+    messageService?.removeListener(MessageEvents.Ready, handleReadyState);
+    messageService?.addListener(MessageEvents.Ready, handleReadyState);
 
     return () => {
-      raven?.removeListener(RavenEvents.Ready, handleReadyState);
+      messageService?.removeListener(MessageEvents.Ready, handleReadyState);
     };
-  }, [ravenReady, raven]);
+  }, [messageServiceReady, messageService]);
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
@@ -116,12 +116,12 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
-    raven?.addListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+    messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
+    messageService?.addListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
     return () => {
-      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
+      messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
     };
-  }, [raven, chat.profiles]);
+  }, [messageService, chat.profiles]);
 
   //Direct contact handler
   const handleDirectContact = (data: DirectContact[]) => {
@@ -140,18 +140,18 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
-    raven?.addListener(RavenEvents.DirectContact, handleDirectContact);
+    messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
+    messageService?.addListener(MessageEvents.DirectContact, handleDirectContact);
     return () => {
-      raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
+      messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
     };
-  }, [raven]);
+  }, [messageService]);
 
   // // Direct message handler
   const handleDirectMessage = (data: DirectMessage[]) => {
     setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
     // console.log("HandleDirectMessage", data);
-    raven?.checkProfiles(data.map((x) => x.peer));
+    messageService?.checkProfiles(data.map((x) => x.peer));
   };
 
   const setDirectMessages = () => {
@@ -189,12 +189,12 @@ const MessageProvider = (props: Props) => {
   }, [chat.directContacts, directMessageBuffer]);
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
-    raven?.addListener(RavenEvents.DirectMessage, handleDirectMessage);
+    messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
+    messageService?.addListener(MessageEvents.DirectMessage, handleDirectMessage);
     return () => {
-      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+      messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
     };
-  }, [raven]);
+  }, [messageService]);
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
@@ -205,13 +205,13 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
-    raven?.addListener(RavenEvents.ChannelCreation, handleChannelCreation);
+    messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
+    messageService?.addListener(MessageEvents.ChannelCreation, handleChannelCreation);
 
     return () => {
-      raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
+      messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
     };
-  }, [raven]);
+  }, [messageService]);
 
   //Public Message handler
   const handlePublicMessage = (data: PublicMessage[]) => {
@@ -228,19 +228,19 @@ const MessageProvider = (props: Props) => {
             uniqueUsers.push(item.creator);
           }
         }
-        raven?.loadProfiles(uniqueUsers);
+        messageService?.loadProfiles(uniqueUsers);
       }
     }
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
-    raven?.addListener(RavenEvents.PublicMessage, handlePublicMessage);
+    messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
+    messageService?.addListener(MessageEvents.PublicMessage, handlePublicMessage);
 
     return () => {
-      raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
+      messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
     };
-  }, [raven, chat.profiles, chat.publicMessages]);
+  }, [messageService, chat.profiles, chat.publicMessages]);
 
   useEffect(() => {
     if (chat.channels.length !== 0) {
@@ -286,25 +286,25 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
-    raven?.addListener(RavenEvents.LeftChannelList, handleLeftChannelList);
+    messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
+    messageService?.addListener(MessageEvents.LeftChannelList, handleLeftChannelList);
 
     return () => {
-      raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
+      messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
     };
-  }, [raven, chat.leftChannelsList]);
+  }, [messageService, chat.leftChannelsList]);
 
   useEffect(() => {
     return () => {
-      raven?.removeListener(RavenEvents.Ready, handleReadyState);
-      raven?.removeListener(RavenEvents.ProfileUpdate, handleProfileUpdate);
-      raven?.removeListener(RavenEvents.ChannelCreation, handleChannelCreation);
-      raven?.removeListener(RavenEvents.DirectContact, handleDirectContact);
-      raven?.removeListener(RavenEvents.LeftChannelList, handleLeftChannelList);
-      raven?.removeListener(RavenEvents.PublicMessage, handlePublicMessage);
-      raven?.removeListener(RavenEvents.DirectMessage, handleDirectMessage);
+      messageService?.removeListener(MessageEvents.Ready, handleReadyState);
+      messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
+      messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
+      messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
+      messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
+      messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
+      messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
     };
-  }, [raven]);
+  }, [messageService]);
 
   return <>{}</>;
 };

From e18f2c61c7cdaf2c17cd5f4d4d9071a778ecf378 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 19 Jul 2023 16:45:35 +0500
Subject: [PATCH 023/179] Remove commented code

---
 src/common/components/community-settings/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/common/components/community-settings/index.tsx b/src/common/components/community-settings/index.tsx
index a491319ec3c..29ac5931536 100644
--- a/src/common/components/community-settings/index.tsx
+++ b/src/common/components/community-settings/index.tsx
@@ -180,11 +180,9 @@ export class CommunitySettings extends BaseComponent<Props, State> {
     };
 
     this.stateSet({ inProgress: true });
-    console.log("Submit run");
     return updateCommunity(activeUser.username, community.name, newProps)
       .then(() => {
         const nCom: Community = { ...clone(community), ...newProps };
-        console.log(nCom, "New dara");
         addCommunity(nCom);
         onHide();
       })

From 544b837948358bc70c8c4ebae0be8f04b45a5f57 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 19 Jul 2023 17:09:39 +0500
Subject: [PATCH 024/179] Remove default styling from ts file and move it into
 scss file of some components

---
 .../components/chat-box/chat-constants.ts     |  4 ++++
 src/common/components/chat-box/index.tsx      |  7 +++----
 src/common/components/dropdown/_index.scss    |  3 +++
 src/common/components/dropdown/index.tsx      |  4 +---
 .../components/emoji-picker/_index.scss       |  9 ++++++++-
 src/common/components/emoji-picker/index.tsx  | 20 +------------------
 src/common/components/gif-picker/_index.scss  |  8 ++++++++
 src/common/components/gif-picker/index.tsx    | 19 +-----------------
 8 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index a03c1a7d895..f0605f2bae8 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -23,6 +23,10 @@ export const DropDownStyle = {
   height: "40px"
 };
 
+export const GifImagesStyle = {
+  width: "170px"
+};
+
 export const NOSTRKEY = "noStrKey";
 export const UPLOADING = "Uploading";
 export const GIPHGY = "giphy";
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 802d39c4a14..524f9d3a350 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -52,7 +52,8 @@ import {
   GifPickerStyle,
   GIPHGY,
   NOSTRKEY,
-  UPLOADING
+  UPLOADING,
+  GifImagesStyle
 } from "./chat-constants";
 
 import { dateToFormatted } from "../../helper/parse-date";
@@ -1134,9 +1135,7 @@ export default function ChatBox(props: Props) {
                       {shGif && (
                         <GifPicker
                           style={GifPickerStyle}
-                          gifImagesStyle={{
-                            width: "170px"
-                          }}
+                          gifImagesStyle={GifImagesStyle}
                           shGif={true}
                           changeState={(gifState) => {
                             setShGif(gifState!);
diff --git a/src/common/components/dropdown/_index.scss b/src/common/components/dropdown/_index.scss
index 0a212a14c76..b8191971127 100644
--- a/src/common/components/dropdown/_index.scss
+++ b/src/common/components/dropdown/_index.scss
@@ -25,7 +25,10 @@
       background: transparent;
       border-radius: 50%;
       display: flex;
+      height: 28px;
+      height: 28px;
       justify-content: center;
+      width: 28px;
       user-select: none;
 
       svg {
diff --git a/src/common/components/dropdown/index.tsx b/src/common/components/dropdown/index.tsx
index 9aa17da3f0e..ab6399aec24 100644
--- a/src/common/components/dropdown/index.tsx
+++ b/src/common/components/dropdown/index.tsx
@@ -121,9 +121,7 @@ const MyDropDown = (props: Props) => {
 
   const { label, float, items } = props;
 
-  const menuDownStyle: MenuDownStyle = {
-    width: "28px",
-    height: "28px",
+  const menuDownStyle = {
     ...(props.style && props.style) // Merge the passed style props if available
   };
 
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index 4f179d5c809..c478b0df909 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -4,7 +4,14 @@
 @import "src/style/mixins";
 
 .emoji-picker {
-  
+  width: 280px;
+  position: absolute;
+  right: 0;
+  z-index: 100;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  padding: 14px 6px;
+
   @media (max-width: $sm-break) {
     width: 160px !important;
   }
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index f2b08aba0ab..24e92f44267 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -55,17 +55,6 @@ interface State {
   cache: EmojiCacheItem[] | null;
   filter: string;
 }
-
-interface EmojiPickerStyle {
-  width: string;
-  position?: "absolute" | "relative" | "fixed" | "static";
-  right: string | number;
-  zIndex: number;
-  borderBottomRightRadius: string;
-  borderBottomLeftRadius: string;
-  padding: string;
-}
-
 export default class EmojiPicker extends BaseComponent<Props> {
   state: State = {
     data: null,
@@ -163,14 +152,7 @@ export default class EmojiPicker extends BaseComponent<Props> {
 
     const recent: string[] = ls.get("recent-emoji", []);
 
-    const emojiPickerStyle: EmojiPickerStyle = {
-      width: "280px",
-      position: "absolute",
-      right: "0",
-      zIndex: 1000,
-      borderBottomRightRadius: "8px",
-      borderBottomLeftRadius: "8px",
-      padding: "14px 6px",
+    const emojiPickerStyle = {
       ...(this.props.style && this.props.style) // Merge the passed style props if available
     };
 
diff --git a/src/common/components/gif-picker/_index.scss b/src/common/components/gif-picker/_index.scss
index 2c94546b951..edba9650abc 100644
--- a/src/common/components/gif-picker/_index.scss
+++ b/src/common/components/gif-picker/_index.scss
@@ -4,6 +4,14 @@
 @import "src/style/mixins";
 
 .emoji-picker.gif {
+  // width: 280px;
+  width: 430px;
+  position: absolute;
+  right: 0;
+  z-index: 12;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  padding: 14px 6px;
 
   @media (max-width: $sm-break) {
     width: 160px !important;
diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index 774c6f481a5..729bdbea4cc 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -34,16 +34,6 @@ interface State {
   total_count: number;
 }
 
-interface GifPickerStyle {
-  width: string;
-  position?: "absolute" | "relative" | "fixed" | "static";
-  right: string | number;
-  zIndex: number;
-  borderBottomRightRadius: string;
-  borderBottomLeftRadius: string;
-  padding: string;
-}
-
 interface GifImageStyle {
   width: string;
 }
@@ -225,14 +215,7 @@ export default class GifPicker extends BaseComponent<Props> {
       return null;
     }
 
-    const gifPickerStyle: GifPickerStyle = {
-      width: "430px",
-      position: "absolute",
-      right: "0",
-      zIndex: 12,
-      borderBottomRightRadius: "8px",
-      borderBottomLeftRadius: "8px",
-      padding: "14px 6px",
+    const gifPickerStyle = {
       ...(this.props.style && this.props.style)
     };
 

From ebb60f1e04dc2658d5a1da9b808a6201b12facfb Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 19 Jul 2023 19:12:03 +0500
Subject: [PATCH 025/179] change color scheme for message sender

---
 src/common/components/chat-box/index.scss     | 30 +++++++++----------
 .../join-community-chat-btn/index.tsx         |  5 ++--
 src/common/pages/community-functional.tsx     |  3 +-
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 32ff6ccb3c2..9fb5d7a12b5 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -483,12 +483,21 @@
           margin-right: 15px;
 
           .sender-message-content {
+            border-radius: 10px 10px 0px;
+            max-width: 280px;
+            word-wrap: break-word;
+            margin-bottom: 0;
+            color: $charcoal-grey;
+            font-size: 16px;
+            font-weight: 400;
+            padding: 8px 12px 8px 12px;
+            a {
+              text-decoration: underline;
+              color: white;
+            }
             @include themify(day) {
-              // background: rgb(204, 247, 255);
-              background: $light-periwinkle;
-              // background-color: rgb(0, 132, 255);
-              color: $dark-indigo;
-              // color: $white;
+              background-color: rgb(0, 132, 255);
+              color: $white;
             }
             @include themify(night) {
               background: $dark-indigo;
@@ -507,17 +516,6 @@
                 max-width: 100%;
               }
             }
-
-            border-radius: 10px 10px 0px;
-            max-width: 280px;
-            // background-color: rgb(0, 132, 255);
-
-            word-wrap: break-word;
-            margin-bottom: 0;
-            color: $charcoal-grey;
-            font-size: 16px;
-            font-weight: 400;
-            padding: 8px 12px 8px 12px;
           }
         }
       }
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index b378282cb92..629967a07b4 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -16,6 +16,7 @@ import {
   setProfileMetaData
 } from "../../helper/chat-utils";
 import { setNostrkeys } from "../../../providers/message-provider";
+import { NOSTRKEY } from "../chat-box/chat-constants";
 
 interface Props {
   history: History;
@@ -56,7 +57,7 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const fetchUserProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const hasNoStrKey = profileData && profileData.hasOwnProperty("noStrKey");
+    const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
     setHasUserJoinedChat(hasNoStrKey);
   };
 
@@ -64,7 +65,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const communityProfile = await getProfileMetaData(props.community?.name);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty("channel");
     setIsChatEnabled(haschannelMetaData);
-    const hasNoStrKey = communityProfile && communityProfile.hasOwnProperty("noStrKey");
+    const hasNoStrKey = communityProfile && communityProfile.hasOwnProperty(NOSTRKEY);
     if (!currentChannel) {
       setCurrentChannel(communityProfile.channel);
     }
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index b8344b6b722..ba3006c1696 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -12,6 +12,7 @@ import ScrollToTop from "../components/scroll-to-top";
 import Theme from "../components/theme";
 import Feedback from "../components/feedback";
 import defaults from "../constants/defaults.json";
+import { NOSTRKEY } from "../components/chat-box/chat-constants";
 import CommunitySubscribers from "../components/community-subscribers";
 import CommunityActivities from "../components/community-activities";
 import LinearProgress from "../components/linear-progress";
@@ -218,7 +219,7 @@ export const CommunityPage = (props: Props) => {
   const fetchUserProfileData = async () => {
     if (props.activeUser) {
       const profileData = await getProfileMetaData(props.activeUser?.username!);
-      const hasNoStrKey = profileData && profileData.hasOwnProperty("noStrKey");
+      const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
       setHasUserJoinedChat(hasNoStrKey);
     }
   };

From 088b0eecc73b9fcc8afcc268052e05e0af9cef1c Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 21 Jul 2023 15:50:25 +0500
Subject: [PATCH 026/179] Community chat authorities | WIP

---
 src/common/components/chat-box/index.scss     |  22 +-
 src/common/components/chat-box/index.tsx      | 227 ++++++++++++++++--
 .../join-community-chat-btn/index.tsx         |  45 +++-
 src/common/helper/message-service.ts          |  41 +++-
 src/common/img/svg.tsx                        |  16 ++
 src/common/pages/community-functional.tsx     |   2 +-
 src/providers/message-provider-types.ts       |   7 +
 src/providers/message-provider.tsx            |  24 +-
 8 files changed, 350 insertions(+), 34 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 9fb5d7a12b5..dd5a689a4c2 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -69,7 +69,7 @@
     }
 
     .message-header-content {
-      margin-top: 0.8rem;
+      margin-top: 0.9rem;
       font-weight: 700;
       line-height: 24px;
       font-size: 21px;
@@ -103,7 +103,7 @@
           justify-content: center;
           text-align: center;
           border-radius: 50%;
-          padding-top: 11px;
+          padding-top: 13px;
           display: flex;
 
           svg {
@@ -121,7 +121,7 @@
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 6px;
+          padding-top: 7px;
           width: 40px;
           height: 40px;
           border-radius: 50%;
@@ -427,7 +427,7 @@
             color: rgb(138, 141, 145);
             font-weight: 400;
             font-size: 12px;
-            margin-left: 9px;
+            margin-left: 4px;
             margin-bottom: 2px;
             .username-community {
               margin-right: 8px;
@@ -604,6 +604,20 @@
       }
     }
   }
+  .add-dialog-header {
+    margin-bottom: 20px;
+  }
+  .community-chat-role-edit-dialog-content {
+    .add-user-role-form {
+      margin: 15px 0;
+    }
+    .user {
+      display: flex;
+    }
+    .username {
+      margin: 10px 0 0 10px;
+    }
+  }
 }
 
 .profile-box {
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 524f9d3a350..2d7c39b7131 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -3,12 +3,14 @@ import useDebounce from "react-use/lib/useDebounce";
 import { History } from "history";
 import {
   Button,
+  Col,
   Form,
   FormControl,
   InputGroup,
   Modal,
   OverlayTrigger,
   Popover,
+  Row,
   Spinner
 } from "react-bootstrap";
 import { Link } from "react-router-dom";
@@ -17,9 +19,14 @@ import mediumZoom, { Zoom } from "medium-zoom";
 
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
-import { Community } from "../../store/communities/types";
+import { Community, ROLES } from "../../store/communities/types";
 import { Global, Theme } from "../../store/global/types";
-import { Channel, DirectMessage, PublicMessage } from "../../../providers/message-provider-types";
+import {
+  Channel,
+  communityModerator,
+  DirectMessage,
+  PublicMessage
+} from "../../../providers/message-provider-types";
 
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
@@ -43,7 +50,8 @@ import {
   chatBoxImageSvg,
   linkSvg,
   KebabMenu,
-  chatLeaveSvg
+  chatLeaveSvg,
+  editSVG
 } from "../../img/svg";
 
 import {
@@ -93,6 +101,7 @@ interface Props {
 }
 
 let zoom: Zoom | null = null;
+const roles = [ROLES.ADMIN, ROLES.MOD];
 
 export default function ChatBox(props: Props) {
   const prevPropsRef = useRef(props);
@@ -129,6 +138,10 @@ export default function ChatBox(props: Props) {
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [searchtext, setSearchText] = useState("");
   const [userList, setUserList] = useState<string[]>([]);
+  const [user, setUser] = useState("");
+  const [role, setRole] = useState("admin");
+  const [addRoleError, setAddRoleError] = useState("");
+  const [moderator, setModerator] = useState<communityModerator>();
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -166,11 +179,11 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
   }, []);
 
-  useEffect(() => {
-    if (window.messageService) {
-      setHasUserJoinedChat(true);
-    }
-  }, [window?.messageService]);
+  // useEffect(() => {
+  //   if (window.messageService) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.messageService]);
 
   useEffect(() => {
     const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
@@ -263,8 +276,12 @@ export default function ChatBox(props: Props) {
 
   useDebounce(
     async () => {
-      const resp = await lookupAccounts(searchtext, 7);
-      setUserList(resp);
+      if (searchtext.length !== 0) {
+        const resp = await lookupAccounts(searchtext, 7);
+        setUserList(resp);
+      } else {
+        setUserList([]);
+      }
     },
     500,
     [searchtext]
@@ -605,7 +622,7 @@ export default function ChatBox(props: Props) {
             <h2 className="leave-main-title">Confirmaton</h2>
           </div>
         </div>
-        <div className="leave-dialog-body">Are you sure?</div>
+        <div className="leave-dialog-body">Are you sure to leave this community?</div>
         <p className="leave-confirm-buttons">
           <Button
             variant="outline-primary"
@@ -638,13 +655,184 @@ export default function ChatBox(props: Props) {
       </>
     );
   };
-  const LeaveClicked = () => {
+
+  const EditRolesModal = () => {
+    return (
+      <>
+        <div className="add-dialog-header">
+          <div className="add-dialog-titles">
+            <h4 className="add-main-title">Edit Community Roles</h4>
+          </div>
+        </div>
+        <div className="community-chat-role-edit-dialog-content">
+          {inProgress && <LinearProgress />}
+          <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
+            <Form.Group as={Row}>
+              <Form.Label column={true} sm="2">
+                {_t("community-role-edit.username")}
+              </Form.Label>
+              <Col sm="10">
+                <InputGroup>
+                  <InputGroup.Prepend>
+                    <InputGroup.Text>@</InputGroup.Text>
+                  </InputGroup.Prepend>
+                  <Form.Control
+                    type="text"
+                    autoFocus={user === ""}
+                    placeholder={_t("community-role-edit.username").toLowerCase()}
+                    value={user}
+                    onChange={userChanged}
+                    className={addRoleError ? "is-invalid" : ""}
+                    // ref={this._input}
+                  />
+                </InputGroup>
+                {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
+              </Col>
+            </Form.Group>
+            <Form.Group as={Row}>
+              <Form.Label column={true} sm="2">
+                {_t("community-role-edit.role")}
+              </Form.Label>
+              <Col sm="10">
+                <Form.Control as="select" value={role} onChange={roleChanged}>
+                  {roles.map((r, i) => (
+                    <option key={i} value={r}>
+                      {r}
+                    </option>
+                  ))}
+                </Form.Control>
+              </Col>
+            </Form.Group>
+            <div className="d-flex justify-content-end">
+              <Button
+                type="button"
+                onClick={addNewRole}
+                disabled={inProgress || addRoleError.length !== 0}
+              >
+                Add
+              </Button>
+            </div>
+          </div>
+          <table className="table table-striped table-bordered table-roles">
+            <thead>
+              <tr>
+                <th style={{ width: "200px" }}>{_t("community.roles-account")}</th>
+                <th style={{ width: "200px" }}>{_t("community.roles-role")}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentChannel?.communityModerators!.map((t, i) => {
+                // const [username, role, title] = t;
+                // const canEdit = roles && roles.includes(role);
+                return (
+                  <tr key={i}>
+                    <td>
+                      <span className="user">
+                        <UserAvatar username={t.name} size="medium" />{" "}
+                        <span className="username">@{t.name}</span>
+                      </span>
+                    </td>
+                    <td>
+                      <Form.Control as="select" value={role} onChange={roleChanged}>
+                        {roles.map((r, i) => (
+                          <option key={i} value={r}>
+                            {r}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </>
+    );
+  };
+
+  useDebounce(
+    async () => {
+      if (user.length === 0) {
+        setAddRoleError("");
+        setInProgress(false);
+        return;
+      }
+
+      try {
+        const profileData = await getProfileMetaData(user);
+        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
+          const alreadyExists = currentChannel?.communityModerators?.some(
+            (moderator) => moderator.name === profileData.name
+          );
+          if (alreadyExists) {
+            setAddRoleError("You have already assigned some rule to this user.");
+            setInProgress(false);
+            return;
+          }
+          const moderator = {
+            name: profileData.name,
+            pubkey: profileData.noStrKey.pub,
+            role: role
+          };
+          setModerator(moderator);
+          setAddRoleError("");
+        } else {
+          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
+        }
+      } catch (err) {
+        error(err as string);
+      }
+
+      setInProgress(false);
+    },
+    200,
+    [user, role]
+  );
+
+  const userChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    const { value: user } = e.target;
+    setUser(user);
+    console.log();
+    setInProgress(true);
+  };
+
+  const addNewRole = () => {
+    const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
+
+    console.log("updatedRoles", currentChannel);
+    const updatedMetaData = {
+      name: currentChannel?.name!,
+      about: currentChannel?.about!,
+      picture: "",
+      communityName: currentChannel?.communityName!,
+      communityModerators: updatedRoles
+    };
+
+    console.log(updatedMetaData, "updatedMetaData");
+    window.messageService?.updateChannel(currentChannel!, updatedMetaData).then((resp) => {
+      console.log(resp, "resp");
+    });
+  };
+
+  const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    const { value: role } = e.target;
+    setRole(role);
+  };
+
+  const leaveClicked = () => {
     setKeyDialog(true);
     setStep(1);
   };
 
+  const editRolesClicked = () => {
+    setKeyDialog(true);
+    setStep(2);
+  };
+
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
+    setUser("");
   };
 
   const handleBackArrowSvg = () => {
@@ -665,9 +853,18 @@ export default function ChatBox(props: Props) {
     },
     {
       label: "Leave",
-      onClick: LeaveClicked,
+      onClick: leaveClicked,
       icon: chatLeaveSvg
-    }
+    },
+    ...(props.activeUser?.username === currentChannel?.communityName
+      ? [
+          {
+            label: "Edit Roles",
+            onClick: editRolesClicked,
+            icon: editSVG
+          }
+        ]
+      : [])
   ];
 
   const menuConfig = {
@@ -1219,7 +1416,7 @@ export default function ChatBox(props: Props) {
           <Modal.Header closeButton={true} />
           <Modal.Body className="chat-modals-body">
             {step === 1 && LeaveModal()}
-            {/* {step === 2 && successModal()} */}
+            {step === 2 && EditRolesModal()}
           </Modal.Body>
         </Modal>
       )}
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 629967a07b4..d387a454164 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -2,13 +2,13 @@ import React, { useEffect, useState } from "react";
 import { Button, Spinner } from "react-bootstrap";
 import { History } from "history";
 
-import { Community } from "../../store/communities/types";
+import { Community, ROLES } from "../../store/communities/types";
 import { ActiveUser } from "../../store/active-user/types";
 
 import { _t } from "../../i18n";
 
 import { useMappedStore } from "../../store/use-mapped-store";
-import { Channel } from "../../../providers/message-provider-types";
+import { Channel, communityModerator } from "../../../providers/message-provider-types";
 import {
   createNoStrAccount,
   getProfileMetaData,
@@ -26,6 +26,8 @@ interface Props {
   resetChat: () => void;
 }
 
+type CommunityRoles = [string, string, string];
+
 export default function JoinCommunityChatBtn(props: Props) {
   const { chat } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
@@ -33,6 +35,11 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [isChatEnabled, setIsChatEnabled] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
+  const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
+
+  useEffect(() => {
+    getCommunityRoles();
+  }, []);
 
   useEffect(() => {
     fetchCommunityProfile();
@@ -43,11 +50,11 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCommunityProfile();
   }, [props.activeUser]);
 
-  useEffect(() => {
-    if (window.messageService) {
-      setHasUserJoinedChat(true);
-    }
-  }, [window?.messageService]);
+  // useEffect(() => {
+  //   if (window.messageService) {
+  //     setHasUserJoinedChat(true);
+  //   }
+  // }, [window?.messageService]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -88,6 +95,27 @@ export default function JoinCommunityChatBtn(props: Props) {
     }
   };
 
+  const getCommunityRoles = async () => {
+    let communityRoles: communityModerator[] = [];
+    const { community } = props;
+    for (let i = 0; i < community.team.length; i++) {
+      const item = community.team[i];
+      if (item[1] === ROLES.ADMIN || item[1] === ROLES.MOD || item[1] === ROLES.OWNER) {
+        const profileData = await getProfileMetaData(item[0]);
+        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
+          const roleInfo: communityModerator = {
+            name: item[0],
+            pubkey: profileData.noStrKey.pub,
+            role: item[1]
+          };
+
+          communityRoles.push(roleInfo);
+        }
+      }
+    }
+    setCommunityRoles(communityRoles);
+  };
+
   const createCommunityChat = async () => {
     const { community } = props;
     try {
@@ -96,7 +124,8 @@ export default function JoinCommunityChatBtn(props: Props) {
         name: community.title,
         about: community.description,
         communityName: community.name,
-        picture: ""
+        picture: "",
+        communityModerators: communityRoles
       });
 
       const content = JSON.parse(data?.content!);
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index f2505d15cec..a1e2ed41634 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -4,6 +4,7 @@ import { Filter } from "../../lib/nostr-tools/filter";
 import { TypedEventEmitter } from "./message-event-emitter";
 import {
   Channel,
+  ChannelUpdate,
   DirectContact,
   DirectMessage,
   Keys,
@@ -33,6 +34,7 @@ export enum MessageEvents {
   Ready = "ready",
   ProfileUpdate = "profile_update",
   LeftChannelList = "left_channel_list",
+  ChannelUpdate = "channel_update",
   ChannelCreation = "channel_creation",
   DirectMessage = "direct_message",
   DirectContact = "direct_contact",
@@ -44,6 +46,7 @@ type EventHandlerMap = {
   [MessageEvents.ProfileUpdate]: (data: Profile[]) => void;
   [MessageEvents.DirectMessage]: (data: DirectMessage[]) => void;
   [MessageEvents.ChannelCreation]: (data: Channel[]) => void;
+  [MessageEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
   [MessageEvents.PublicMessage]: (data: PublicMessage[]) => void;
   [MessageEvents.LeftChannelList]: (data: string[]) => void;
   [MessageEvents.DirectContact]: (data: DirectContact[]) => void;
@@ -325,6 +328,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
+      console.log(event, "channel event");
       event.kind === Kind.Metadata && isDirectContact
         ? this.addDirectContact(event)
         : this.pushToEventBuffer(event);
@@ -382,10 +386,17 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async createChannel(meta: Metadata) {
-    // console.log("create channel run");
+    // console.log("create channel run", meta);
     return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
   }
 
+  public async updateChannel(channel: Channel, meta: Metadata) {
+    console.log(channel, meta, "Update channel run");
+    return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
+      return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
+    });
+  }
+
   private async findHealthyRelay(relays: string[]) {
     for (const relay of relays) {
       try {
@@ -513,7 +524,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
 
       if (directContactsProfile.length > 0) {
-        console.log(directContactsProfile, "directContactsProfile");
+        // console.log(directContactsProfile, "directContactsProfile");
         this.emit(MessageEvents.DirectContact, directContactsProfile);
       }
     }
@@ -555,13 +566,13 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       .filter((x) => x.kind === Kind.ChannelCreation)
       .map((ev) => {
         const content = MessageService.parseJson(ev.content);
-        // console.log(content,"events")
         return content
           ? {
               id: ev.id,
               creator: ev.pubkey,
               created: ev.created_at,
               communityName: content.communityName,
+              communityModerators: content.communityModerators,
               ...MessageService.normalizeMetadata(content)
             }
           : null;
@@ -571,6 +582,30 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       this.emit(MessageEvents.ChannelCreation, channelCreations);
     }
 
+    const channelUpdates: ChannelUpdate[] = this.eventQueue
+      .filter((x) => x.kind === Kind.ChannelMetadata)
+      .map((ev) => {
+        const content = MessageService.parseJson(ev.content);
+        console.log("content", content);
+        const channelId = MessageService.findTagValue(ev, "e");
+        if (!channelId) return null;
+        return content
+          ? {
+              id: ev.id,
+              creator: ev.pubkey,
+              created: ev.created_at,
+              communityName: content.communityName,
+              communityModerators: content.communityModerators,
+              channelId,
+              ...MessageService.normalizeMetadata(content)
+            }
+          : null;
+      })
+      .filter(notEmpty);
+    if (channelUpdates.length > 0) {
+      this.emit(MessageEvents.ChannelUpdate, channelUpdates);
+    }
+
     const publicMessages: PublicMessage[] = this.eventQueue
       .filter((x) => x.kind === Kind.ChannelMessage)
       .map((ev) => {
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 45dbddc5aa5..4fe1e7da76b 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2099,3 +2099,19 @@ export const chatLeaveSvg = (
     ></path>
   </svg>
 );
+
+export const editSVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <polygon points="16 3 21 8 8 21 3 21 3 16 16 3" />
+  </svg>
+);
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index ba3006c1696..d6f67e474eb 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -300,7 +300,7 @@ export const CommunityPage = (props: Props) => {
               Close
             </Button>
             <Button variant="outline-primary" className="confirm-btn" onClick={joinCommunityChat}>
-              Confirm
+              Join
             </Button>
           </p>
         </>
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index ad0dfd3eb68..8fd832af5d5 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -14,6 +14,13 @@ export type Metadata = {
   about: string;
   picture: string;
   communityName?: string;
+  communityModerators?: communityModerator[];
+};
+
+export type communityModerator = {
+  name: string;
+  pubkey: string;
+  role: string;
 };
 
 export type Profile = { id: string; creator: string; created: number } & Metadata;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index e169032a40c..5640fae9055 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -8,7 +8,8 @@ import {
   Keys,
   DirectContact,
   Channel,
-  PublicMessage
+  PublicMessage,
+  ChannelUpdate
 } from "./message-provider-types";
 
 import { initMessageService, MessageEvents } from "../common/helper/message-service";
@@ -198,7 +199,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    // console.log("handleChannelCreation", data);
+    console.log("handleChannelCreation", data);
 
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
@@ -213,9 +214,25 @@ const MessageProvider = (props: Props) => {
     };
   }, [messageService]);
 
+  // Channel update handler
+  const handleChannelUpdate = (data: ChannelUpdate[]) => {
+    console.log("handleChannelUpdate", data);
+    // const append = data.filter(x => channelUpdates.find(y => y.id === x.id) === undefined);
+    // setChannelUpdates([...channelUpdates, ...append]);
+  };
+
+  useEffect(() => {
+    messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
+    messageService?.addListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
+
+    return () => {
+      messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
+    };
+  }, [messageService]);
+
   //Public Message handler
   const handlePublicMessage = (data: PublicMessage[]) => {
-    // console.log("handlePublicMessage", data);
+    console.log("handlePublicMessage", data);
     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
 
     for (const item of data) {
@@ -301,6 +318,7 @@ const MessageProvider = (props: Props) => {
       messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
       messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
       messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
+      messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
       messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
       messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
     };

From 3bde88f5a37752e89bff9de2011efc70f22e58a0 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 25 Jul 2023 19:41:19 +0500
Subject: [PATCH 027/179] Add moderators in public chat

---
 src/common/components/chat-box/index.scss     |  37 +-
 src/common/components/chat-box/index.tsx      | 385 ++++++++++++++----
 .../join-community-chat-btn/index.tsx         |  37 +-
 src/common/components/login/index.tsx         |  10 +-
 src/common/helper/chat-utils.ts               |  14 +-
 src/common/helper/message-service.ts          |  31 +-
 src/common/i18n/locales/en-US.json            |   3 +-
 src/common/store/actions.ts                   |   6 +-
 src/common/store/chat/index.ts                |  32 +-
 src/common/store/chat/types.ts                |  17 +-
 src/common/store/users/types.ts               |   2 -
 src/providers/message-provider.tsx            |  35 +-
 12 files changed, 478 insertions(+), 131 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index dd5a689a4c2..261c6c21ebc 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -75,7 +75,7 @@
       font-size: 21px;
       font-family: $font-family-sans-serif;
 
-      max-width: 200px;
+      max-width: 190px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -121,7 +121,7 @@
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 7px;
+          padding-top: 6px;
           width: 40px;
           height: 40px;
           border-radius: 50%;
@@ -131,8 +131,10 @@
           background: rgba(29, 155, 240, 0.1);
         }
       }
-      .community-menu {
-        margin-bottom: 12px;
+      .community-menu,
+      .simple-menu {
+        border: none;
+        margin-bottom: 16px;
         svg {
           @include themify(day) {
             color: $charcoal-grey;
@@ -455,7 +457,7 @@
               }
             }
             color: #050505;
-            max-width: 280px;
+            max-width: 290px;
             word-wrap: break-word;
             padding: 10px;
             border-radius: 0px 10px 10px;
@@ -475,7 +477,7 @@
           margin-bottom: 2px;
         }
         .sender-message {
-          max-width: 280px;
+          max-width: 290px;
           margin-left: auto;
 
           display: flex;
@@ -484,7 +486,7 @@
 
           .sender-message-content {
             border-radius: 10px 10px 0px;
-            max-width: 280px;
+            max-width: 290px;
             word-wrap: break-word;
             margin-bottom: 0;
             color: $charcoal-grey;
@@ -603,6 +605,27 @@
         margin-right: 20px;
       }
     }
+
+    .import-chat-dialog-header {
+      display: flex;
+      .import-chat-dialog-titles {
+        margin-top: 9px;
+      }
+      .import-chat-main-title {
+        font-weight: bold;
+      }
+    }
+    .success-dialog-body {
+      margin: 2rem 0 1.4rem 0;
+      .success-dialog-content {
+        text-align: center;
+        margin-bottom: 1.4rem;
+      }
+    }
+
+    .private-key {
+      margin: 2rem 0;
+    }
   }
   .add-dialog-header {
     margin-bottom: 20px;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 2d7c39b7131..7d66fb3632e 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -51,7 +51,9 @@ import {
   linkSvg,
   KebabMenu,
   chatLeaveSvg,
-  editSVG
+  editSVG,
+  keySvg,
+  syncSvg
 } from "../../img/svg";
 
 import {
@@ -64,17 +66,20 @@ import {
   GifImagesStyle
 } from "./chat-constants";
 
+import { getPublicKey } from "../../../lib/nostr-tools/keys";
 import { dateToFormatted } from "../../helper/parse-date";
 import {
   createNoStrAccount,
   formatMessageDate,
   formatMessageTime,
   getProfileMetaData,
-  NostrKeys,
+  NostrKeysType,
   setProfileMetaData,
   resetProfile,
-  getCommunities
+  getCommunities,
+  getPrivateKey
 } from "../../helper/chat-utils";
+import * as ls from "../../util/local-storage";
 import { renderPostBody } from "@ecency/render-helper";
 import { getAccessToken } from "../../helper/user-token";
 import { _t } from "../../i18n";
@@ -101,7 +106,7 @@ interface Props {
 }
 
 let zoom: Zoom | null = null;
-const roles = [ROLES.ADMIN, ROLES.MOD];
+const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
 export default function ChatBox(props: Props) {
   const prevPropsRef = useRef(props);
@@ -121,7 +126,7 @@ export default function ChatBox(props: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeys>();
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
@@ -142,6 +147,8 @@ export default function ChatBox(props: Props) {
   const [role, setRole] = useState("admin");
   const [addRoleError, setAddRoleError] = useState("");
   const [moderator, setModerator] = useState<communityModerator>();
+  const [noStrPrivKey, setNoStrPrivKey] = useState("");
+  const [chatPrivKey, setChatPrivkey] = useState("");
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -170,13 +177,15 @@ export default function ChatBox(props: Props) {
   }, [clickedMessage]);
 
   useEffect(() => {
-    console.log(props.chat, "chat in store");
+    setInProgress(false);
   }, [props.chat]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
     fetchProfileData();
     setShow(!!props.activeUser?.username);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    setNoStrPrivKey(noStrPrivKey);
   }, []);
 
   // useEffect(() => {
@@ -201,8 +210,14 @@ export default function ChatBox(props: Props) {
     if (prevProps.global.theme !== props.global.theme) {
       setBackground();
     }
+    if (prevProps.activeUser?.username !== props.activeUser?.username) {
+      setIsCommunity(false);
+      setIsCurrentUser(false);
+      setCurrentUser("");
+      setCommunityName("");
+    }
     prevPropsRef.current = props;
-  }, [props.global.theme]);
+  }, [props.global.theme, props.activeUser]);
 
   useEffect(() => {
     scrollerClicked();
@@ -214,6 +229,7 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     if (currentChannel && isCommunity) {
+      window?.messageService?.fetchChannel(currentChannel.id);
       const publicMessages = fetchCommunityMessages(currentChannel.id);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
@@ -236,6 +252,8 @@ export default function ChatBox(props: Props) {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    setNoStrPrivKey(noStrPrivKey);
   }, [props.activeUser]);
 
   useEffect(() => {
@@ -279,7 +297,9 @@ export default function ChatBox(props: Props) {
       if (searchtext.length !== 0) {
         const resp = await lookupAccounts(searchtext, 7);
         setUserList(resp);
+        setInProgress(false);
       } else {
+        setInProgress(false);
         setUserList([]);
       }
     },
@@ -298,13 +318,27 @@ export default function ChatBox(props: Props) {
   };
 
   const fetchCurrentChannel = (communityName: string) => {
-    for (const item of props.chat.channels) {
-      if (item.communityName === communityName) {
+    const item = props.chat.channels.find((channel) => channel.communityName === communityName);
+    if (item) {
+      const updated = props.chat.updatedChannel
+        .filter((x) => x.channelId === item.id)
+        .sort((a, b) => b.created - a.created)[0];
+      if (updated && currentChannel) {
+        const channel = {
+          name: updated.name,
+          about: updated.about,
+          picture: updated.picture,
+          communityName: updated.communityName,
+          communityModerators: updated.communityModerators,
+          id: updated.channelId,
+          creator: currentChannel.creator,
+          created: currentChannel.created
+        };
+        setCurrentChannel(channel);
+      } else {
         setCurrentChannel(item);
-        return item;
       }
     }
-    return {};
   };
 
   const formatFollowers = (count: number | undefined) => {
@@ -362,14 +396,19 @@ export default function ChatBox(props: Props) {
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
     const { noStrKey } = profile || {};
-    setReceiverPubKey(noStrKey?.pub);
-    setIsCurrentUserJoined(!!noStrKey?.pub);
+    setReceiverPubKey(noStrKey);
+    setIsCurrentUserJoined(!!noStrKey);
     setInProgress(false);
   };
 
   const fetchProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
-    setActiveUserKeys(profileData?.noStrKey);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const activeUserKeys = {
+      pub: profileData?.noStrKey,
+      priv: noStrPrivKey
+    };
+    setActiveUserKeys(activeUserKeys);
     const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
     setHasUserJoinedChat(hasNoStrKey);
     setShow(!!props.activeUser?.username);
@@ -398,7 +437,6 @@ export default function ChatBox(props: Props) {
       !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
-      console.log("Publish contacts run from chatbox component.");
       window.messageService?.publishContacts(currentUser, receiverPubKey);
     }
   };
@@ -432,12 +470,27 @@ export default function ChatBox(props: Props) {
     setShowSearchUser(!showSearchUser);
   };
 
+  const handleRefreshSvgClick = () => {
+    if (getPrivateKey(props.activeUser?.username!)) {
+      setInProgress(true);
+      const keys = {
+        pub: activeUserKeys?.pub!,
+        priv: getPrivateKey(props.activeUser?.username!)
+      };
+      setNostrkeys(keys);
+    } else {
+      setNoStrPrivKey("");
+    }
+  };
+
   const handleJoinChat = async () => {
     const { resetChat } = props;
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
-    await setProfileMetaData(props.activeUser, keys);
+    ls.set(`${props.activeUser?.username}_noStrPrivKey`, keys.priv);
+    setNoStrPrivKey(keys.priv);
+    await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.messageService?.updateProfile({
@@ -603,15 +656,59 @@ export default function ChatBox(props: Props) {
     }
   };
 
-  const inviteClicked = () => {
+  const inviteClicked = (content: string) => {
     const textField = document.createElement("textarea");
-    const url = `http://localhost:3000/created/${currentCommunity?.name}?communityid=${currentChannel?.id}`;
-    textField.innerText = url;
+    textField.innerText = content;
     document.body.appendChild(textField);
     textField.select();
     document.execCommand("copy");
     textField.remove();
-    success("Link copied into clipboard");
+    success(`${isCommunity ? "Link" : "Key"} copied into clipboard`);
+  };
+
+  const handleImportChatSubmit = () => {
+    try {
+      const pubKey = getPublicKey(chatPrivKey);
+      if (pubKey === activeUserKeys?.pub) {
+        setNoStrPrivKey(chatPrivKey);
+        ls.set(`${props.activeUser?.username}_noStrPrivKey`, chatPrivKey);
+        const keys = {
+          pub: activeUserKeys?.pub!,
+          priv: chatPrivKey
+        };
+        setNostrkeys(keys);
+        setStep(4);
+        setChatPrivkey("");
+      } else {
+        setAddRoleError("Invalid Private key");
+      }
+    } catch (error) {
+      setAddRoleError("Invalid Private key");
+    }
+  };
+
+  const finish = () => {
+    setStep(0);
+    setKeyDialog(false);
+  };
+
+  const updateRole = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+    moderator: communityModerator
+  ) => {
+    const selectedRole = event.target.value;
+    const moderatorIndex = currentChannel?.communityModerators?.findIndex(
+      (mod) => mod.name === moderator.name
+    );
+    if (moderatorIndex !== -1 && currentChannel) {
+      const newUpdatedChannel: Channel = { ...currentChannel };
+      const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
+      newUpdatedModerator.role = selectedRole;
+      newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
+      setCurrentChannel(newUpdatedChannel);
+      window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
+      success("Roles updated succesfully");
+    }
   };
 
   const LeaveModal = () => {
@@ -707,45 +804,126 @@ export default function ChatBox(props: Props) {
               <Button
                 type="button"
                 onClick={addNewRole}
-                disabled={inProgress || addRoleError.length !== 0}
+                disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
               >
                 Add
               </Button>
             </div>
           </div>
-          <table className="table table-striped table-bordered table-roles">
-            <thead>
-              <tr>
-                <th style={{ width: "200px" }}>{_t("community.roles-account")}</th>
-                <th style={{ width: "200px" }}>{_t("community.roles-role")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentChannel?.communityModerators!.map((t, i) => {
-                // const [username, role, title] = t;
-                // const canEdit = roles && roles.includes(role);
-                return (
-                  <tr key={i}>
-                    <td>
-                      <span className="user">
-                        <UserAvatar username={t.name} size="medium" />{" "}
-                        <span className="username">@{t.name}</span>
-                      </span>
-                    </td>
-                    <td>
-                      <Form.Control as="select" value={role} onChange={roleChanged}>
-                        {roles.map((r, i) => (
-                          <option key={i} value={r}>
-                            {r}
-                          </option>
-                        ))}
-                      </Form.Control>
-                    </td>
+          {currentChannel?.communityModerators?.length !== 0 ? (
+            <>
+              <table className="table table-striped table-bordered table-roles">
+                <thead>
+                  <tr>
+                    <th style={{ width: "200px" }}>{_t("community.roles-account")}</th>
+                    <th style={{ width: "200px" }}>{_t("community.roles-role")}</th>
                   </tr>
-                );
-              })}
-            </tbody>
-          </table>
+                </thead>
+                <tbody>
+                  {currentChannel?.communityModerators &&
+                    currentChannel?.communityModerators!.map((moderator, i) => {
+                      return (
+                        <tr key={i}>
+                          <td>
+                            <span className="user">
+                              <UserAvatar username={moderator.name} size="medium" />{" "}
+                              <span className="username">@{moderator.name}</span>
+                            </span>
+                          </td>
+                          <td>
+                            {moderator.name === props.activeUser?.username ? (
+                              <p style={{ margin: "5px 0 0 12px" }}>{moderator.role}</p>
+                            ) : (
+                              <Form.Control
+                                as="select"
+                                value={moderator.role}
+                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                                  updateRole(e, moderator)
+                                }
+                              >
+                                {roles.map((r, i) => (
+                                  <option key={i} value={r}>
+                                    {r}
+                                  </option>
+                                ))}
+                              </Form.Control>
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                </tbody>
+              </table>
+            </>
+          ) : (
+            <div className="text-center">
+              <p>No admin or moderator for this community chat.</p>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const ImportChatModal = () => {
+    return (
+      <>
+        <div className="import-chat-dialog-header border-bottom">
+          <div className="step-no">1</div>
+          <div className="import-chat-dialog-titles">
+            <div className="import-chat-main-title">Enter Chat private key</div>
+            <div className="import-chat-sub-title">Enter chat private key to import all chats</div>
+          </div>
+        </div>
+        <div className="private-key">
+          <Form
+            onSubmit={(e: React.FormEvent) => {
+              e.preventDefault();
+            }}
+          >
+            <InputGroup>
+              <InputGroup.Prepend>
+                <InputGroup.Text>{keySvg}</InputGroup.Text>
+              </InputGroup.Prepend>
+              <Form.Control
+                value={chatPrivKey}
+                type="password"
+                autoFocus={true}
+                autoComplete="off"
+                placeholder="Chat private key"
+                onChange={(e) => setChatPrivkey(e.target.value)}
+              />
+              <InputGroup.Append>
+                <Button onClick={handleImportChatSubmit}>{_t("key-or-hot.sign")}</Button>
+              </InputGroup.Append>
+            </InputGroup>
+            {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
+          </Form>
+        </div>
+      </>
+    );
+  };
+
+  const chatSuccessModal = () => {
+    return (
+      <>
+        <div className="import-chat-dialog-header border-bottom">
+          <div className="step-no">2</div>
+          <div className="import-chat-dialog-titles">
+            <div className="import-chat-main-title">{_t("manage-authorities.success-title")}</div>
+            <div className="import-chat-sub-title">
+              {_t("manage-authorities.success-sub-title")}
+            </div>
+          </div>
+        </div>
+        <div className="success-dialog-body">
+          <div className="success-dialog-content">
+            <span>Chats imported successfully </span>
+          </div>
+          <div className="d-flex justify-content-center">
+            <span className="hr-6px-btn-spacer" />
+            <Button onClick={finish}>{_t("g.finish")}</Button>
+          </div>
         </div>
       </>
     );
@@ -771,8 +949,8 @@ export default function ChatBox(props: Props) {
             return;
           }
           const moderator = {
-            name: profileData.name,
-            pubkey: profileData.noStrKey.pub,
+            name: user,
+            pubkey: profileData.noStrKey,
             role: role
           };
           setModerator(moderator);
@@ -793,14 +971,11 @@ export default function ChatBox(props: Props) {
   const userChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
     const { value: user } = e.target;
     setUser(user);
-    console.log();
     setInProgress(true);
   };
 
   const addNewRole = () => {
     const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
-
-    console.log("updatedRoles", currentChannel);
     const updatedMetaData = {
       name: currentChannel?.name!,
       about: currentChannel?.about!,
@@ -809,10 +984,14 @@ export default function ChatBox(props: Props) {
       communityModerators: updatedRoles
     };
 
-    console.log(updatedMetaData, "updatedMetaData");
-    window.messageService?.updateChannel(currentChannel!, updatedMetaData).then((resp) => {
-      console.log(resp, "resp");
-    });
+    window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+    currentChannel?.communityModerators?.push(moderator!);
+    const updatedChannel: Channel = {
+      ...currentChannel!,
+      communityModerators: updatedRoles
+    };
+    setUser("");
+    setCurrentChannel(updatedChannel);
   };
 
   const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
@@ -833,6 +1012,7 @@ export default function ChatBox(props: Props) {
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
     setUser("");
+    setAddRoleError("");
   };
 
   const handleBackArrowSvg = () => {
@@ -845,10 +1025,19 @@ export default function ChatBox(props: Props) {
     setSearchText("");
   };
 
-  const menuItems: MenuItem[] = [
+  const handleImportChat = () => {
+    setKeyDialog(true);
+
+    setStep(3);
+  };
+
+  const communityMenuItems: MenuItem[] = [
     {
       label: _t("chat.invite"),
-      onClick: inviteClicked,
+      onClick: () =>
+        inviteClicked(
+          `http://localhost:3000/created/${currentCommunity?.name}?communityid=${currentChannel?.id}`
+        ),
       icon: linkSvg
     },
     {
@@ -867,6 +1056,21 @@ export default function ChatBox(props: Props) {
       : [])
   ];
 
+  const communityMenuConfig = {
+    history: props.history,
+    label: "",
+    icon: KebabMenu,
+    items: communityMenuItems
+  };
+
+  const menuItems: MenuItem[] = [
+    {
+      label: "Copy private key",
+      onClick: () => inviteClicked(noStrPrivKey),
+      icon: linkSvg
+    }
+  ];
+
   const menuConfig = {
     history: props.history,
     label: "",
@@ -912,10 +1116,21 @@ export default function ChatBox(props: Props) {
               </p>
             </div>
             <div className="actionable-imgs">
-              {!currentUser && hasUserJoinedChat && (
-                <div className="message-image" onClick={handleMessageSvgClick}>
-                  <Tooltip content={_t("chat.new-message")}>
-                    <p className="message-svg">{addMessageSVG}</p>
+              {!currentUser && hasUserJoinedChat && noStrPrivKey && !isCommunity && (
+                <>
+                  <div className="message-image" onClick={handleMessageSvgClick}>
+                    <Tooltip content={_t("chat.new-message")}>
+                      <p className="message-svg">{addMessageSVG}</p>
+                    </Tooltip>
+                  </div>
+                </>
+              )}
+              {!currentUser && hasUserJoinedChat && noStrPrivKey && (
+                <div className="message-image" onClick={handleRefreshSvgClick}>
+                  <Tooltip content={_t("chat.refresh")}>
+                    <p className="message-svg" style={{ paddingTop: "10px" }}>
+                      {syncSvg}
+                    </p>
                   </Tooltip>
                 </div>
               )}
@@ -928,6 +1143,17 @@ export default function ChatBox(props: Props) {
               </div>
               {isCommunity && (
                 <div className="community-menu">
+                  <DropDown
+                    {...communityMenuConfig}
+                    float="right"
+                    alignBottom={false}
+                    noMarginTop={true}
+                    style={DropDownStyle}
+                  />
+                </div>
+              )}{" "}
+              {!isCommunity && !isCurrentUser && noStrPrivKey && (
+                <div className="simple-menu">
                   <DropDown
                     {...menuConfig}
                     float="right"
@@ -940,6 +1166,8 @@ export default function ChatBox(props: Props) {
             </div>
           </div>
 
+          {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
+
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
@@ -1179,6 +1407,7 @@ export default function ChatBox(props: Props) {
                           autoFocus={true}
                           onChange={(e) => {
                             setSearchText(e.target.value);
+                            setInProgress(true);
                           }}
                         />
                       </Form.Group>
@@ -1210,8 +1439,9 @@ export default function ChatBox(props: Props) {
                   </>
                 ) : (
                   <>
-                    {props.chat.directContacts.length !== 0 ||
-                    (props.chat.channels.length !== 0 && communities.length !== 0) ? (
+                    {(props.chat.directContacts.length !== 0 ||
+                      (props.chat.channels.length !== 0 && communities.length !== 0)) &&
+                    noStrPrivKey ? (
                       <React.Fragment>
                         {props.chat.channels.length !== 0 && communities.length !== 0 && (
                           <>
@@ -1267,15 +1497,24 @@ export default function ChatBox(props: Props) {
                           );
                         })}
                       </React.Fragment>
+                    ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
+                      <>
+                        {/* <p className="no-chat">{_t("chat.no-chat")}</p> */}
+                        <div className="start-chat-btn" style={{ marginTop: "25%" }}>
+                          <Button variant="primary" onClick={handleImportChat}>
+                            Import Chat
+                          </Button>
+                        </div>
+                      </>
                     ) : (
-                      <React.Fragment>
+                      <>
                         <p className="no-chat">{_t("chat.no-chat")}</p>
                         <div className="start-chat-btn">
                           <Button variant="primary" onClick={() => setShowSearchUser(true)}>
                             {_t("chat.start-chat")}
                           </Button>
                         </div>
-                      </React.Fragment>
+                      </>
                     )}
                   </>
                 )}
@@ -1417,6 +1656,8 @@ export default function ChatBox(props: Props) {
           <Modal.Body className="chat-modals-body">
             {step === 1 && LeaveModal()}
             {step === 2 && EditRolesModal()}
+            {step === 3 && ImportChatModal()}
+            {step === 4 && chatSuccessModal()}
           </Modal.Body>
         </Modal>
       )}
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index d387a454164..400280b205a 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -12,9 +12,11 @@ import { Channel, communityModerator } from "../../../providers/message-provider
 import {
   createNoStrAccount,
   getProfileMetaData,
+  NostrKeysType,
   setChannelMetaData,
   setProfileMetaData
 } from "../../helper/chat-utils";
+import * as ls from "../../util/local-storage";
 import { setNostrkeys } from "../../../providers/message-provider";
 import { NOSTRKEY } from "../chat-box/chat-constants";
 
@@ -26,8 +28,6 @@ interface Props {
   resetChat: () => void;
 }
 
-type CommunityRoles = [string, string, string];
-
 export default function JoinCommunityChatBtn(props: Props) {
   const { chat } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
@@ -36,6 +36,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
 
   useEffect(() => {
     getCommunityRoles();
@@ -50,11 +51,12 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCommunityProfile();
   }, [props.activeUser]);
 
-  // useEffect(() => {
-  //   if (window.messageService) {
-  //     setHasUserJoinedChat(true);
-  //   }
-  // }, [window?.messageService]);
+  useEffect(() => {
+    if (window.messageService && activeUserKeys) {
+      getCommunityRoles();
+      setHasUserJoinedChat(true);
+    }
+  }, [window?.messageService, activeUserKeys]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -97,15 +99,24 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const getCommunityRoles = async () => {
     let communityRoles: communityModerator[] = [];
-    const { community } = props;
+    const { community, activeUser } = props;
+    const ownerData = await getProfileMetaData(community.name);
+    const ownerRole = {
+      name: activeUser!.username,
+      pubkey: ownerData.noStrKey || activeUserKeys?.pub,
+      role: "owner"
+    };
+
+    communityRoles.push(ownerRole);
+
     for (let i = 0; i < community.team.length; i++) {
       const item = community.team[i];
-      if (item[1] === ROLES.ADMIN || item[1] === ROLES.MOD || item[1] === ROLES.OWNER) {
+      if (item[1] === ROLES.ADMIN || item[1] === ROLES.MOD) {
         const profileData = await getProfileMetaData(item[0]);
         if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
           const roleInfo: communityModerator = {
             name: item[0],
-            pubkey: profileData.noStrKey.pub,
+            pubkey: profileData.noStrKey,
             role: item[1]
           };
 
@@ -167,10 +178,12 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const handleJoinChat = async () => {
-    const { resetChat } = props;
+    const { resetChat, activeUser } = props;
     setInProgress(true);
     const keys = createNoStrAccount();
-    await setProfileMetaData(props.activeUser, keys);
+    setActiveUserKeys(keys);
+    ls.set(`${activeUser?.username}_noStrPrivKey`, keys.priv);
+    await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.messageService?.updateProfile({
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 8a04894f563..23d4b8141c6 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -36,7 +36,7 @@ import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission, revokePostingPermission } from "../../api/operations";
 
 import { getRefreshToken } from "../../helper/user-token";
-import { getProfileMetaData } from "../../helper/chat-utils";
+import { getPrivateKey, getProfileMetaData } from "../../helper/chat-utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 
@@ -773,8 +773,12 @@ class LoginDialog extends Component<Props> {
       resetChat();
 
       //create new message service instance for newly logged in user
-      if (profile && profile.noStrKey) {
-        setNostrkeys(profile.noStrKey);
+      if (profile && profile.noStrKey && getPrivateKey(account.name)) {
+        const keys = {
+          pub: profile.noStrKey,
+          priv: getPrivateKey(account.name)
+        };
+        setNostrkeys(keys);
       }
       // activate user
       setActiveUser(user.username);
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 6bfb1f510a8..67ba159bff1 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -4,8 +4,9 @@ import { Channel } from "../../providers/message-provider-types";
 import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
 import { ActiveUser } from "../store/active-user/types";
+import * as ls from "../util/local-storage";
 
-export interface NostrKeys {
+export interface NostrKeysType {
   pub: string;
   priv: string;
 }
@@ -24,18 +25,19 @@ export const resetProfile = async (activeUser: ActiveUser | null) => {
   const profile = await getProfileMetaData(activeUser?.username!);
   delete profile.noStrKey;
   delete profile.channel;
+  ls.remove(`${activeUser?.username}_noStrPrivKey`);
   const response = await getAccountFull(activeUser?.username!);
   const updatedProfile = await updateProfile(response, { ...profile });
-  console.log(updatedProfile);
+  console.log(updatedProfile, profile);
 };
 
-export const setProfileMetaData = async (activeUser: ActiveUser | null, keys: NostrKeys) => {
+export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
   const response = await getAccountFull(activeUser?.username!);
 
   const { posting_json_metadata } = response;
   const profile = JSON.parse(posting_json_metadata!).profile;
   const newProfile = {
-    noStrKey: keys
+    noStrKey: noStrPubKey
   };
 
   const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
@@ -73,3 +75,7 @@ export const isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
 export const getCommunities = (channels: Channel[], leftChannels: string[]) => {
   return channels.filter((item) => !leftChannels.includes(item.id));
 };
+
+export const getPrivateKey = (username: string) => {
+  return ls.get(`${username}_noStrPrivKey`);
+};
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index a1e2ed41634..80536ad083f 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -158,6 +158,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public fetchChannels(channels: string[]) {
+    // console.log("fetch channels run");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -179,8 +180,24 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     });
   }
 
+  public fetchChannel(id: string) {
+    // console.log("fetchChannel run", id);
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.ChannelCreation],
+        ids: [id]
+      },
+      {
+        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
+        "#e": [id]
+      }
+    ];
+
+    this.fetch(filters);
+  }
+
   public async updateLeftChannelList(channelIds: string[]) {
-    console.log(channelIds, "channelIds");
+    // console.log(channelIds, "channelIds");
     const tags = [["d", "left-channel-list"]];
     return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
   }
@@ -204,7 +221,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public publishContacts(username: string, pubkey: string) {
-    console.log("Publish contact run", username, pubkey);
     const newUser = [pubkey, username];
     newUser.forEach((element) => {
       let nameExist = false;
@@ -220,7 +236,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       // If the name doesn't exist, add the element to the direct contacts array
       if (!nameExist) {
         this.directContacts.push(newUser);
-        console.log("Event is fired");
+        // console.log("Event is fired");
         this.publish(Kind.Contacts, this.directContacts, "");
         return;
       }
@@ -238,7 +254,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadChannel(id: string) {
-    console.log(id, "id");
+    // console.log(id, "id");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -259,7 +275,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadProfiles(pubs: string[]) {
-    console.log("load profiles run");
     pubs.forEach((p) => {
       this.fetch(
         [
@@ -328,7 +343,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      console.log(event, "channel event");
       event.kind === Kind.Metadata && isDirectContact
         ? this.addDirectContact(event)
         : this.pushToEventBuffer(event);
@@ -490,6 +504,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   pushToEventBuffer(event: Event) {
+    // console.log("event reaches in event buffer");
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {
@@ -511,6 +526,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   async processEventQueue() {
+    // console.log("Event reaches in process queue");
     this.eventQueueFlag = false;
     const directContacts = this.eventQueue
       .filter((x) => x.kind === Kind.Contacts)
@@ -705,6 +721,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 export default MessageService;
 
 export const initMessageService = (keys: Keys): MessageService | undefined => {
+  // console.log("keys in raven instance", keys)
   if (window.messageService) {
     window.messageService.close();
     window.messageService = undefined;
@@ -712,7 +729,7 @@ export const initMessageService = (keys: Keys): MessageService | undefined => {
 
   if (keys) {
     window.messageService = new MessageService(keys.priv, keys.pub);
-    console.log("window messageService", window.messageService);
+    // console.log("window messageService", window.messageService);
   }
 
   return window.messageService;
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 215fe18b70e..64b5d753799 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1665,7 +1665,8 @@
     "not-joined": "This user hasn't joined the chat yet",
     "subscribers": "Subscribers",
     "invite": "Invite",
-    "leave:": "Leave"
+    "leave:": "Leave",
+    "refresh": "Refresh"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index ada5bbba07f..da195eab229 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -48,7 +48,8 @@ import {
   addChannels,
   addPublicMessage,
   addProfile,
-  addleftChannels
+  addleftChannels,
+  UpdateChannels
 } from "./chat";
 
 // @note Do not use it directly
@@ -105,7 +106,8 @@ export const ACTIONS = {
   addChannels,
   addPublicMessage,
   addProfile,
-  addleftChannels
+  addleftChannels,
+  UpdateChannels
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 2b452360728..6d09ef6d6ce 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -2,7 +2,8 @@ import {
   Channel,
   DirectMessage,
   PublicMessage,
-  Profile
+  Profile,
+  ChannelUpdate
 } from "./../../../providers/message-provider-types";
 import { Dispatch } from "redux";
 
@@ -15,10 +16,11 @@ import {
   DirectMessagesAction,
   ResetChatAction,
   directMessagesList,
-  ChannelsAction,
+  AddChannelsAction,
   PublicMessagesAction,
   ProfilesAction,
-  LeftChannelsAction
+  LeftChannelsAction,
+  UpdateChannelAction
 } from "./types";
 
 export const initialState: Chat = {
@@ -27,7 +29,8 @@ export const initialState: Chat = {
   channels: [],
   publicMessages: [],
   profiles: [],
-  leftChannelsList: []
+  leftChannelsList: [],
+  updatedChannel: []
 };
 
 export default (state: Chat = initialState, action: Actions): Chat => {
@@ -107,6 +110,14 @@ export default (state: Chat = initialState, action: Actions): Chat => {
       };
     }
 
+    case ActionTypes.UPDATEDCHANNEL: {
+      const { data } = action;
+      return {
+        ...state,
+        updatedChannel: [...state.updatedChannel, ...data]
+      };
+    }
+
     default:
       return state;
   }
@@ -142,6 +153,10 @@ export const addleftChannels = (data: string[]) => (dispatch: Dispatch) => {
   dispatch(addleftChannelsAct(data));
 };
 
+export const UpdateChannels = (data: ChannelUpdate[]) => (dispatch: Dispatch) => {
+  dispatch(UpdateChannelsAct(data));
+};
+
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -176,7 +191,7 @@ export const resetChatAct = (): ResetChatAction => {
   };
 };
 
-export const addChannelsAct = (data: Channel[]): ChannelsAction => {
+export const addChannelsAct = (data: Channel[]): AddChannelsAction => {
   return {
     type: ActionTypes.CHANNELS,
     data
@@ -196,3 +211,10 @@ export const addleftChannelsAct = (data: string[]): LeftChannelsAction => {
     data
   };
 };
+
+export const UpdateChannelsAct = (data: ChannelUpdate[]): UpdateChannelAction => {
+  return {
+    type: ActionTypes.UPDATEDCHANNEL,
+    data
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index cf1f82266dd..3b795570922 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -1,5 +1,6 @@
 import {
   Channel,
+  ChannelUpdate,
   DirectMessage,
   Profile,
   PublicMessage
@@ -27,6 +28,7 @@ export interface Chat {
   publicMessages: publicMessagesList[];
   profiles: Profile[];
   leftChannelsList: string[];
+  updatedChannel: ChannelUpdate[];
 }
 
 export enum ActionTypes {
@@ -36,7 +38,8 @@ export enum ActionTypes {
   CHANNELS = "@chat/CHANNELS",
   PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
   PROFILES = "@chat/PROFILES",
-  LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST"
+  LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST",
+  UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL"
 }
 
 export interface DirectContactsAction {
@@ -60,7 +63,7 @@ export interface PublicMessagesAction {
   channelId: string;
 }
 
-export interface ChannelsAction {
+export interface AddChannelsAction {
   type: ActionTypes.CHANNELS;
   data: Channel[];
 }
@@ -74,11 +77,17 @@ export interface LeftChannelsAction {
   data: string[];
 }
 
+export interface UpdateChannelAction {
+  type: ActionTypes.UPDATEDCHANNEL;
+  data: ChannelUpdate[];
+}
+
 export type Actions =
   | DirectContactsAction
   | DirectMessagesAction
   | ResetChatAction
-  | ChannelsAction
+  | AddChannelsAction
   | PublicMessagesAction
   | ProfilesAction
-  | LeftChannelsAction;
+  | LeftChannelsAction
+  | UpdateChannelAction;
diff --git a/src/common/store/users/types.ts b/src/common/store/users/types.ts
index 23057f4c0f7..407ea2a6f95 100644
--- a/src/common/store/users/types.ts
+++ b/src/common/store/users/types.ts
@@ -1,5 +1,3 @@
-import { PrivateKey } from "@hiveio/dhive";
-
 export interface UserKeys {
   owner?: string;
   active?: string;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 5640fae9055..d46124bfe34 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
-import { Chat, DirectContactsType } from "../common/store/chat/types";
+import { DirectContactsType } from "../common/store/chat/types";
 import {
   DirectMessage,
   Profile,
@@ -13,15 +13,17 @@ import {
 } from "./message-provider-types";
 
 import { initMessageService, MessageEvents } from "../common/helper/message-service";
-import { getProfileMetaData, NostrKeys } from "../common/helper/chat-utils";
+import { getProfileMetaData, NostrKeysType, getPrivateKey } from "../common/helper/chat-utils";
+import * as ls from "../common/util/local-storage";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
 
-export const setNostrkeys = (keys: NostrKeys) => {
-  const detail: NostrKeys = {
+export const setNostrkeys = (keys: NostrKeysType) => {
+  const detail: NostrKeysType = {
     pub: keys.pub,
     priv: keys.priv
   };
+  // console.log("detail", detail)
   const ev = new CustomEvent("createMSInstance", { detail });
   window.dispatchEvent(ev);
 };
@@ -33,6 +35,7 @@ interface Props {
   addChannels: (data: Channel[]) => void;
   addProfile: (data: Profile[]) => void;
   addleftChannels: (data: string[]) => void;
+  UpdateChannels: (data: ChannelUpdate[]) => void;
 }
 
 const MessageProvider = (props: Props) => {
@@ -53,7 +56,8 @@ const MessageProvider = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    if (!window.messageService && keys) {
+    if (!window.messageService && keys?.priv) {
+      // console.log(keys, "keys")
       const messageServiceInstance = initMessageService(keys);
       setMessageService(messageServiceInstance);
     }
@@ -66,14 +70,21 @@ const MessageProvider = (props: Props) => {
   }, [activeUser]);
 
   const createMSInstance = (e: Event) => {
-    const detail = (e as CustomEvent).detail as NostrKeys;
+    const detail = (e as CustomEvent).detail as NostrKeysType;
+    // console.log(detail, "details")
     const messageServiceInstance = initMessageService(detail);
     setMessageService(messageServiceInstance);
   };
 
   const getNostrKeys = async (activeUser: ActiveUser) => {
     const profile = await getProfileMetaData(activeUser.username);
-    setKeys(profile.noStrKey);
+    const noStrPrivKey = getPrivateKey(activeUser.username);
+    const keys = {
+      pub: profile.noStrKey,
+      priv: noStrPrivKey
+    };
+    // console.log('keys', keys)
+    setKeys(keys);
   };
 
   //Listen for events in an interval.
@@ -126,6 +137,7 @@ const MessageProvider = (props: Props) => {
 
   //Direct contact handler
   const handleDirectContact = (data: DirectContact[]) => {
+    // console.log("handleDirectContact", data)
     const result = [...chat.directContacts];
     data.forEach(({ name, pubkey }) => {
       const isPresent = chat.directContacts.some(
@@ -199,7 +211,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    console.log("handleChannelCreation", data);
+    // console.log("handleChannelCreation", data);
 
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
@@ -216,9 +228,8 @@ const MessageProvider = (props: Props) => {
 
   // Channel update handler
   const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    console.log("handleChannelUpdate", data);
-    // const append = data.filter(x => channelUpdates.find(y => y.id === x.id) === undefined);
-    // setChannelUpdates([...channelUpdates, ...append]);
+    // console.log("handleChannelUpdate", data);
+    props.UpdateChannels(data);
   };
 
   useEffect(() => {
@@ -232,7 +243,7 @@ const MessageProvider = (props: Props) => {
 
   //Public Message handler
   const handlePublicMessage = (data: PublicMessage[]) => {
-    console.log("handlePublicMessage", data);
+    // console.log("handlePublicMessage", data);
     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
 
     for (const item of data) {

From a6c679fece78ac706ecf71cdafb1c9f5399eb7c8 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 27 Jul 2023 18:22:20 +0500
Subject: [PATCH 028/179] Removed users from community completed

---
 .../components/chat-box/chat-constants.ts     |   4 +
 src/common/components/chat-box/index.scss     |  43 +-
 src/common/components/chat-box/index.tsx      | 422 +++++++++++++-----
 .../components/follow-controls/index.tsx      |   8 +
 .../join-community-chat-btn/index.tsx         |   4 +-
 src/common/helper/message-service.ts          |  11 +-
 src/common/img/svg.tsx                        |  17 +
 src/common/pages/community-functional.tsx     |   8 +-
 src/common/store/chat/index.ts                |   7 +-
 src/providers/message-provider-types.ts       |   2 +
 src/providers/message-provider.tsx            |  10 +-
 11 files changed, 405 insertions(+), 131 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index f0605f2bae8..68cb398cae4 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -30,3 +30,7 @@ export const GifImagesStyle = {
 export const NOSTRKEY = "noStrKey";
 export const UPLOADING = "Uploading";
 export const GIPHGY = "giphy";
+export const HIDEMESSAGE = "hideMessage";
+export const ADDROLE = "addRole";
+export const REMOVEUSER = "removeUser";
+export const LEAVECOMMUNITY = "leaveCommunity";
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 261c6c21ebc..eb5d5f9fc75 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -477,7 +477,7 @@
           margin-bottom: 2px;
         }
         .sender-message {
-          max-width: 290px;
+          max-width: 320px;
           margin-left: auto;
 
           display: flex;
@@ -521,6 +521,17 @@
           }
         }
       }
+      .hide-msg {
+        margin-left: 6px;
+        margin-top: 22px;
+        svg {
+          height: 14px;
+          width: 14px;
+        }
+        .hide-msg-svg {
+          cursor: pointer;
+        }
+      }
     }
   }
   .chat {
@@ -536,6 +547,11 @@
       background: #cee2ff;
     }
 
+    &.disable {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
     .chatbox-emoji-picker {
       .chatbox-emoji {
         .emoji-picker {
@@ -645,17 +661,18 @@
 
 .profile-box {
   padding: 15px;
-
-  .user-avatar.large {
-    margin-left: 73px;
-    margin-bottom: 20px;
-  }
-  .profile-name {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    font-size: 18px;
-    font-weight: 800;
+  .profile-box-content {
+    .user-avatar.large {
+      margin-bottom: 20px;
+    }
+    .profile-name {
+      margin-bottom: 10px;
+      font-size: 18px;
+      font-weight: 800;
+    }
+    .profile-box-buttons {
+      margin-bottom: 15px;
+      padding: 0 5px;
+    }
   }
 }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 7d66fb3632e..9487b62276c 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -21,8 +21,12 @@ import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
 import { Community, ROLES } from "../../store/communities/types";
 import { Global, Theme } from "../../store/global/types";
+import { User } from "../../store/users/types";
+import { ToggleType, UI } from "../../store/ui/types";
+import { Account } from "../../store/accounts/types";
 import {
   Channel,
+  ChannelUpdate,
   communityModerator,
   DirectMessage,
   PublicMessage
@@ -36,6 +40,7 @@ import GifPicker from "../gif-picker";
 import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
 import DropDown, { MenuItem } from "../dropdown";
+import FollowControls from "../follow-controls";
 
 import {
   addMessageSVG,
@@ -53,7 +58,8 @@ import {
   chatLeaveSvg,
   editSVG,
   keySvg,
-  syncSvg
+  syncSvg,
+  hideSvg
 } from "../../img/svg";
 
 import {
@@ -63,7 +69,11 @@ import {
   GIPHGY,
   NOSTRKEY,
   UPLOADING,
-  GifImagesStyle
+  GifImagesStyle,
+  ADDROLE,
+  HIDEMESSAGE,
+  REMOVEUSER,
+  LEAVECOMMUNITY
 } from "./chat-constants";
 
 import { getPublicKey } from "../../../lib/nostr-tools/keys";
@@ -98,11 +108,19 @@ export interface profileData {
 }
 
 interface Props {
-  history: History;
+  users: User[];
   activeUser: ActiveUser | null;
+  ui: UI;
+  targetUsername: string;
+  where?: string;
+  history: History;
   global: Global;
   chat: Chat;
   resetChat: () => void;
+  setActiveUser: (username: string | null) => void;
+  updateActiveUser: (data?: Account) => void;
+  deleteUser: (username: string) => void;
+  toggleUIProp: (what: ToggleType) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -149,6 +167,47 @@ export default function ChatBox(props: Props) {
   const [moderator, setModerator] = useState<communityModerator>();
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
   const [chatPrivKey, setChatPrivkey] = useState("");
+  const [hoveredMessageId, setHoveredMessageId] = useState("");
+  const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
+  const [hiddenMsgId, setHiddenMsgId] = useState("");
+  const [removedUserId, setRemovedUserID] = useState("");
+  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
+  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
+
+  useEffect(() => {
+    console.log(isActveUserRemoved, "isActveUserRemoved");
+  }, [isActveUserRemoved]);
+
+  useEffect(() => {
+    console.log(currentChannel, "currentChannel");
+  }, [currentChannel]);
+
+  useEffect(() => {
+    const updated: ChannelUpdate = props.chat.updatedChannel
+      .filter((x) => x.channelId === currentChannel?.id!)
+      .sort((a, b) => b.created - a.created)[0];
+    if (currentChannel) {
+      const publicMessages: PublicMessage[] = fetchCommunityMessages(
+        currentChannel.id,
+        updated.hiddenMessageIds
+      );
+      const messages = publicMessages.sort((a, b) => a.created - b.created);
+      setPublicMessages(messages);
+      const channel = {
+        name: updated.name,
+        about: updated.about,
+        picture: updated.picture,
+        communityName: updated.communityName,
+        communityModerators: updated.communityModerators,
+        id: updated.channelId,
+        creator: updated.creator,
+        created: currentChannel?.created!,
+        hiddenMessageIds: updated.hiddenMessageIds,
+        removedUserIds: updated.removedUserIds
+      };
+      setCurrentChannel(channel);
+    }
+  }, [props.chat.updatedChannel]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -178,8 +237,20 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     setInProgress(false);
+    console.log("chat in store", props.chat);
   }, [props.chat]);
 
+  useEffect(() => {
+    currentChannel?.communityModerators && getPrivilegedUsers(currentChannel?.communityModerators!);
+    currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
+    currentChannel && scrollerClicked();
+    if (removedUsers) {
+      const removed = removedUsers.includes(activeUserKeys?.pub!);
+      setIsActiveUserRemoved(removed);
+    }
+    scrollerClicked();
+  }, [currentChannel, removedUsers]);
+
   useEffect(() => {
     // resetProfile(props.activeUser);
     fetchProfileData();
@@ -191,6 +262,7 @@ export default function ChatBox(props: Props) {
   // useEffect(() => {
   //   if (window.messageService) {
   //     setHasUserJoinedChat(true);
+  //     setInProgress(false);
   //   }
   // }, [window?.messageService]);
 
@@ -230,7 +302,7 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     if (currentChannel && isCommunity) {
       window?.messageService?.fetchChannel(currentChannel.id);
-      const publicMessages = fetchCommunityMessages(currentChannel.id);
+      const publicMessages: PublicMessage[] = fetchCommunityMessages(currentChannel.id);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
     }
@@ -307,6 +379,14 @@ export default function ChatBox(props: Props) {
     [searchtext]
   );
 
+  const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
+    const filteredUsers =
+      communityModerators &&
+      communityModerators.filter((user) => ["owner", "admin", "mod"].includes(user.role));
+    const privilegedUsersName = filteredUsers?.map((user) => user.name);
+    setPrivilegedUsers(privilegedUsersName!);
+  };
+
   const fetchCommunity = async () => {
     const community = await getCommunity(communityName, props.activeUser?.username);
     setCurrentCommunity(community!);
@@ -318,12 +398,14 @@ export default function ChatBox(props: Props) {
   };
 
   const fetchCurrentChannel = (communityName: string) => {
-    const item = props.chat.channels.find((channel) => channel.communityName === communityName);
-    if (item) {
-      const updated = props.chat.updatedChannel
-        .filter((x) => x.channelId === item.id)
+    const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
+    console.log("fetch current chanel", channel);
+    if (channel) {
+      const updated: ChannelUpdate = props.chat.updatedChannel
+        .filter((x) => x.channelId === channel.id)
         .sort((a, b) => b.created - a.created)[0];
-      if (updated && currentChannel) {
+      if (updated) {
+        console.log("updated", updated);
         const channel = {
           name: updated.name,
           about: updated.about,
@@ -331,12 +413,14 @@ export default function ChatBox(props: Props) {
           communityName: updated.communityName,
           communityModerators: updated.communityModerators,
           id: updated.channelId,
-          creator: currentChannel.creator,
-          created: currentChannel.created
+          creator: updated.creator,
+          created: currentChannel?.created!,
+          hiddenMessageIds: updated.hiddenMessageIds,
+          removedUserIds: updated.removedUserIds
         };
         setCurrentChannel(channel);
       } else {
-        setCurrentChannel(item);
+        setCurrentChannel(channel);
       }
     }
   };
@@ -377,10 +461,11 @@ export default function ChatBox(props: Props) {
     return [];
   };
 
-  const fetchCommunityMessages = (channelId: string) => {
+  const fetchCommunityMessages = (channelId: string, hiddenMessageIds?: string[]) => {
+    const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
     for (const item of props.chat.publicMessages) {
       if (item.channelId === channelId) {
-        return item.PublicMessage;
+        return item.PublicMessage.filter((message) => !hideMessageIds.includes(message.id));
       }
     }
     return [];
@@ -459,13 +544,6 @@ export default function ChatBox(props: Props) {
     });
   };
 
-  const scrollToBottom = () => {
-    chatBodyDivRef?.current?.scroll({
-      top: chatBodyDivRef?.current?.scrollHeight,
-      behavior: "auto"
-    });
-  };
-
   const handleMessageSvgClick = () => {
     setShowSearchUser(!showSearchUser);
   };
@@ -478,6 +556,9 @@ export default function ChatBox(props: Props) {
         priv: getPrivateKey(props.activeUser?.username!)
       };
       setNostrkeys(keys);
+      if (isCommunity && communityName) {
+        fetchCurrentChannel(communityName);
+      }
     } else {
       setNoStrPrivKey("");
     }
@@ -646,13 +727,14 @@ export default function ChatBox(props: Props) {
     setDMMessage(e.target.value);
   };
 
-  const handleImageClick = (id: string) => {
-    if (clickedMessage === id) {
+  const handleImageClick = (msgId: string, pubkey: string) => {
+    if (clickedMessage === msgId) {
       popoverRef.current = null;
       setClickedMessage("");
     } else {
       popoverRef.current = null;
-      setClickedMessage(id);
+      setClickedMessage(msgId);
+      setRemovedUserID(pubkey);
     }
   };
 
@@ -705,52 +787,29 @@ export default function ChatBox(props: Props) {
       const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
       newUpdatedModerator.role = selectedRole;
       newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
+      console.log("Update role", newUpdatedChannel);
       setCurrentChannel(newUpdatedChannel);
       window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
       success("Roles updated succesfully");
     }
   };
 
-  const LeaveModal = () => {
-    return (
-      <>
-        <div className="leave-dialog-header border-bottom">
-          <div className="leave-dialog-titles">
-            <h2 className="leave-main-title">Confirmaton</h2>
-          </div>
-        </div>
-        <div className="leave-dialog-body">Are you sure to leave this community?</div>
-        <p className="leave-confirm-buttons">
-          <Button
-            variant="outline-primary"
-            className="close-btn"
-            onClick={() => {
-              setKeyDialog(false);
-              setStep(0);
-            }}
-          >
-            Close
-          </Button>
-          <Button
-            variant="outline-primary"
-            className="confirm-btn"
-            onClick={() => {
-              window?.messageService
-                ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
-                .then(() => {})
-                .finally(() => {
-                  setKeyDialog(false);
-                  setStep(0);
-                  setIsCommunity(false);
-                  setCommunityName("");
-                });
-            }}
-          >
-            Confirm
-          </Button>
-        </p>
-      </>
-    );
+  const handleConfirmaButton = (actionType: string) => {
+    if (actionType === HIDEMESSAGE) {
+      handleChannelUpdate(HIDEMESSAGE);
+    } else if (actionType === REMOVEUSER) {
+      handleChannelUpdate(REMOVEUSER);
+    } else if (actionType === LEAVECOMMUNITY) {
+      window?.messageService
+        ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
+        .then(() => {})
+        .finally(() => {
+          setKeyDialog(false);
+          setStep(0);
+          setIsCommunity(false);
+          setCommunityName("");
+        });
+    }
   };
 
   const EditRolesModal = () => {
@@ -803,7 +862,7 @@ export default function ChatBox(props: Props) {
             <div className="d-flex justify-content-end">
               <Button
                 type="button"
-                onClick={addNewRole}
+                onClick={() => handleChannelUpdate(ADDROLE)}
                 disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
               >
                 Add
@@ -929,6 +988,41 @@ export default function ChatBox(props: Props) {
     );
   };
 
+  const confirmationModal = (actionType: string) => {
+    return (
+      <>
+        <div className="join-community-dialog-header border-bottom">
+          <div className="join-community-dialog-titles">
+            <h2 className="join-community-main-title">Confirmaton</h2>
+          </div>
+        </div>
+        <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
+          Are you sure?
+        </div>
+        <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+          <Button
+            variant="outline-primary"
+            className="close-btn"
+            style={{ marginRight: "20px" }}
+            onClick={() => {
+              setStep(0);
+              setKeyDialog(false);
+            }}
+          >
+            Close
+          </Button>
+          <Button
+            variant="outline-primary"
+            className="confirm-btn"
+            onClick={() => handleConfirmaButton(actionType)}
+          >
+            Confirm
+          </Button>
+        </p>
+      </>
+    );
+  };
+
   useDebounce(
     async () => {
       if (user.length === 0) {
@@ -974,24 +1068,53 @@ export default function ChatBox(props: Props) {
     setInProgress(true);
   };
 
-  const addNewRole = () => {
-    const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
-    const updatedMetaData = {
+  const handleChannelUpdate = (operationType: string) => {
+    let updatedMetaData = {
       name: currentChannel?.name!,
       about: currentChannel?.about!,
       picture: "",
       communityName: currentChannel?.communityName!,
-      communityModerators: updatedRoles
+      communityModerators: currentChannel?.communityModerators,
+      hiddenMessageIds: currentChannel?.hiddenMessageIds,
+      removedUserIds: currentChannel?.removedUserIds
     };
 
-    window.messageService?.updateChannel(currentChannel!, updatedMetaData);
-    currentChannel?.communityModerators?.push(moderator!);
-    const updatedChannel: Channel = {
-      ...currentChannel!,
-      communityModerators: updatedRoles
-    };
-    setUser("");
-    setCurrentChannel(updatedChannel);
+    switch (operationType) {
+      case ADDROLE:
+        const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
+        updatedMetaData.communityModerators = updatedRoles;
+        break;
+      case HIDEMESSAGE:
+        const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
+        updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
+        break;
+      case REMOVEUSER:
+        const updatedRemovedUsers = [...(currentChannel?.removedUserIds || []), removedUserId!];
+        updatedMetaData.removedUserIds = updatedRemovedUsers;
+        break;
+      default:
+        break;
+    }
+
+    console.log(updatedMetaData, "updatedMetaData");
+    try {
+      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
+      if (operationType === HIDEMESSAGE) {
+        setStep(0);
+        setKeyDialog(false);
+        fetchCommunityMessages(currentChannel?.id!);
+        setHiddenMsgId("");
+      }
+      if (operationType === REMOVEUSER) {
+        setStep(0);
+        setKeyDialog(false);
+        // fetchCommunityMessages(currentChannel?.id!);
+        setRemovedUserID("");
+      }
+    } catch (err) {
+      error("Error occurred while updating community");
+    }
   };
 
   const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
@@ -1125,7 +1248,7 @@ export default function ChatBox(props: Props) {
                   </div>
                 </>
               )}
-              {!currentUser && hasUserJoinedChat && noStrPrivKey && (
+              {hasUserJoinedChat && noStrPrivKey && (
                 <div className="message-image" onClick={handleRefreshSvgClick}>
                   <Tooltip content={_t("chat.refresh")}>
                     <p className="message-svg" style={{ paddingTop: "10px" }}>
@@ -1314,30 +1437,54 @@ export default function ChatBox(props: Props) {
                               >
                                 <Popover.Content>
                                   <div className="profile-box" ref={popoverRef}>
-                                    <UserAvatar username={name!} size="large" />
-
-                                    <p className="profile-name">{name!}</p>
-
-                                    <Form
-                                      onSubmit={(e: React.FormEvent) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        sendDM(name!, pMsg.creator);
-                                      }}
-                                    >
-                                      <InputGroup className="dm-input-group">
-                                        <Form.Control
-                                          value={dMMessage}
-                                          autoFocus={true}
-                                          onChange={handleDMChange}
-                                          required={true}
-                                          type="text"
-                                          placeholder={"Send direct message"}
-                                          autoComplete="off"
-                                          className="dm-chat-input"
+                                    <div className="profile-box-content">
+                                      <div className="profile-box-logo d-flex justify-content-center">
+                                        <UserAvatar username={name!} size="large" />
+                                      </div>
+
+                                      <p className="d-flex justify-content-center profile-name">
+                                        {name!}
+                                      </p>
+                                      <div className="d-flex justify-content-between profile-box-buttons">
+                                        <FollowControls
+                                          {...props}
+                                          targetUsername={name!}
+                                          where={"chat-box"}
                                         />
-                                      </InputGroup>
-                                    </Form>
+
+                                        <Button
+                                          variant="primary"
+                                          onClick={() => {
+                                            setKeyDialog(true);
+                                            setStep(6);
+                                            setClickedMessage("");
+                                          }}
+                                        >
+                                          Remove
+                                        </Button>
+                                      </div>
+
+                                      <Form
+                                        onSubmit={(e: React.FormEvent) => {
+                                          e.preventDefault();
+                                          e.stopPropagation();
+                                          sendDM(name!, pMsg.creator);
+                                        }}
+                                      >
+                                        <InputGroup className="dm-input-group">
+                                          <Form.Control
+                                            value={dMMessage}
+                                            autoFocus={true}
+                                            onChange={handleDMChange}
+                                            required={true}
+                                            type="text"
+                                            placeholder={"Send direct message"}
+                                            autoComplete="off"
+                                            className="dm-chat-input"
+                                          />
+                                        </InputGroup>
+                                      </Form>
+                                    </div>
                                   </div>
                                 </Popover.Content>
                               </Popover>
@@ -1347,7 +1494,12 @@ export default function ChatBox(props: Props) {
                               <React.Fragment key={pMsg.id}>
                                 {dayAndMonth}
                                 {pMsg.creator !== activeUserKeys?.pub ? (
-                                  <div key={pMsg.id} className="message">
+                                  <div
+                                    key={pMsg.id}
+                                    className="message"
+                                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                                    onMouseLeave={() => setHoveredMessageId("")}
+                                  >
                                     <div className="community-user-img">
                                       <OverlayTrigger
                                         trigger="click"
@@ -1355,7 +1507,7 @@ export default function ChatBox(props: Props) {
                                         show={clickedMessage === pMsg.id}
                                         overlay={popover}
                                         delay={1000}
-                                        onToggle={() => handleImageClick(pMsg.id)}
+                                        onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
                                       >
                                         <span>
                                           <UserAvatar username={name!} size="medium" />
@@ -1375,13 +1527,56 @@ export default function ChatBox(props: Props) {
                                         dangerouslySetInnerHTML={{ __html: renderedPreview }}
                                       />
                                     </div>
+                                    {hoveredMessageId === pMsg.id &&
+                                      privilegedUsers.includes(props.activeUser?.username!) && (
+                                        <Tooltip content={"Hide Message"}>
+                                          <div className="hide-msg">
+                                            <p
+                                              className="hide-msg-svg"
+                                              onClick={() => {
+                                                setClickedMessage("");
+                                                setKeyDialog(true);
+                                                setStep(5);
+                                                setHiddenMsgId(pMsg.id);
+                                              }}
+                                            >
+                                              {hideSvg}
+                                            </p>
+                                          </div>
+                                        </Tooltip>
+                                      )}
                                   </div>
                                 ) : (
-                                  <div key={pMsg.id} className="sender">
+                                  <div
+                                    key={pMsg.id}
+                                    className="sender"
+                                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                                    onMouseLeave={() => setHoveredMessageId("")}
+                                  >
                                     <p className="sender-message-time">
                                       {formatMessageTime(pMsg.created)}
                                     </p>
                                     <div className="sender-message">
+                                      {hoveredMessageId === pMsg.id && (
+                                        <Tooltip content={"Hide Message"}>
+                                          <div
+                                            className="hide-msg"
+                                            style={{ marginTop: 0, marginRight: "6px" }}
+                                          >
+                                            <p
+                                              className="hide-msg-svg"
+                                              onClick={() => {
+                                                setClickedMessage("");
+                                                setKeyDialog(true);
+                                                setStep(5);
+                                                setHiddenMsgId(pMsg.id);
+                                              }}
+                                            >
+                                              {hideSvg}
+                                            </p>
+                                          </div>
+                                        </Tooltip>
+                                      )}
                                       <div
                                         className={`sender-message-content ${isGif ? "gif" : ""} ${
                                           isImage ? "chat-image" : ""
@@ -1540,10 +1735,16 @@ export default function ChatBox(props: Props) {
                 </div>
               </Tooltip>
             )}
+            {isActveUserRemoved && isCommunity && (
+              <p className="d-flex justify-content-center mt-4 mb-0">
+                You have been removed from this community
+              </p>
+            )}
           </div>
           {inProgress && <LinearProgress />}
+
           {(currentUser || isCommunity) && (
-            <div className="chat">
+            <div className={`chat ${isActveUserRemoved ? "disable" : ""}`}>
               <div className="chatbox-emoji-picker">
                 <div className="chatbox-emoji">
                   <Tooltip content={_t("editor-toolbar.emoji")}>
@@ -1627,7 +1828,12 @@ export default function ChatBox(props: Props) {
                     autoComplete="off"
                     className="chat-input"
                     style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-                    disabled={inProgress || receiverPubKey === null || receiverPubKey === undefined}
+                    disabled={
+                      inProgress ||
+                      receiverPubKey === null ||
+                      receiverPubKey === undefined ||
+                      isActveUserRemoved
+                    }
                   />
                   <InputGroup.Append
                     className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
@@ -1654,7 +1860,9 @@ export default function ChatBox(props: Props) {
         >
           <Modal.Header closeButton={true} />
           <Modal.Body className="chat-modals-body">
-            {step === 1 && LeaveModal()}
+            {step === 1 && confirmationModal(LEAVECOMMUNITY)}
+            {step === 5 && confirmationModal(HIDEMESSAGE)}
+            {step === 6 && confirmationModal(REMOVEUSER)}
             {step === 2 && EditRolesModal()}
             {step === 3 && ImportChatModal()}
             {step === 4 && chatSuccessModal()}
diff --git a/src/common/components/follow-controls/index.tsx b/src/common/components/follow-controls/index.tsx
index 4b370863468..8efae611fbb 100644
--- a/src/common/components/follow-controls/index.tsx
+++ b/src/common/components/follow-controls/index.tsx
@@ -191,6 +191,14 @@ export default class FollowControls extends BaseComponent<Props, State> {
       )
     });
 
+    if (where && where === "chat-box" && following) {
+      return <>{btnUnfollow}</>;
+    }
+
+    if (where && where === "chat-box" && !following) {
+      return <>{btnFollow}</>;
+    }
+
     if (fetching) {
       return (
         <>
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 400280b205a..a67d415a94b 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -136,7 +136,9 @@ export default function JoinCommunityChatBtn(props: Props) {
         about: community.description,
         communityName: community.name,
         picture: "",
-        communityModerators: communityRoles
+        communityModerators: communityRoles,
+        hiddenMessageIds: [],
+        removedUserIds: []
       });
 
       const content = JSON.parse(data?.content!);
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 80536ad083f..8185497409f 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -275,6 +275,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadProfiles(pubs: string[]) {
+    console.log("lod profiles");
     pubs.forEach((p) => {
       this.fetch(
         [
@@ -400,7 +401,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async createChannel(meta: Metadata) {
-    // console.log("create channel run", meta);
+    console.log("create channel run", meta);
     return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
   }
 
@@ -423,6 +424,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
+    console.log("Update profile run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -560,6 +562,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (profileUpdates.length > 0) {
+      console.log("Profile Updates", profileUpdates);
       this.emit(MessageEvents.ProfileUpdate, profileUpdates);
     }
 
@@ -589,6 +592,8 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
               created: ev.created_at,
               communityName: content.communityName,
               communityModerators: content.communityModerators,
+              hiddenMessageIds: content.hiddenMessageIds,
+              removedUserIds: content.removedUserIds,
               ...MessageService.normalizeMetadata(content)
             }
           : null;
@@ -602,7 +607,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       .filter((x) => x.kind === Kind.ChannelMetadata)
       .map((ev) => {
         const content = MessageService.parseJson(ev.content);
-        console.log("content", content);
         const channelId = MessageService.findTagValue(ev, "e");
         if (!channelId) return null;
         return content
@@ -612,6 +616,8 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
               created: ev.created_at,
               communityName: content.communityName,
               communityModerators: content.communityModerators,
+              hiddenMessageIds: content.hiddenMessageIds,
+              removedUserIds: content.removedUserIds,
               channelId,
               ...MessageService.normalizeMetadata(content)
             }
@@ -619,6 +625,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (channelUpdates.length > 0) {
+      console.log("channelUpdates", channelUpdates);
       this.emit(MessageEvents.ChannelUpdate, channelUpdates);
     }
 
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 4fe1e7da76b..8ef29a4ef61 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2115,3 +2115,20 @@ export const editSVG = (
     <polygon points="16 3 21 8 8 21 3 21 3 16 16 3" />
   </svg>
 );
+
+export const hideSvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+    />
+  </svg>
+);
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index d6f67e474eb..4bc4d51ec34 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -4,7 +4,9 @@ import React, { Fragment, useEffect, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getCommunity, getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
+import { Channel } from "../../providers/message-provider-types";
 import { usePrevious } from "../util/use-previous";
+import * as ls from "../util/local-storage";
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -45,7 +47,7 @@ import {
   setProfileMetaData
 } from "../helper/chat-utils";
 import { useMappedStore } from "../store/use-mapped-store";
-import { Channel } from "../../providers/message-provider-types";
+import { setNostrkeys } from "../../providers/message-provider";
 
 interface MatchParams {
   filter: string;
@@ -249,7 +251,9 @@ export const CommunityPage = (props: Props) => {
   const handleJoinChat = async () => {
     setInProgress(true);
     const keys = createNoStrAccount();
-    await setProfileMetaData(props.activeUser, keys);
+    ls.set(`${props.activeUser?.username}_noStrPrivKey`, keys.priv);
+    await setProfileMetaData(props.activeUser, keys.pub);
+    setNostrkeys(keys);
     setHasUserJoinedChat(true);
     window.messageService?.updateProfile({
       name: props.activeUser?.username!,
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 6d09ef6d6ce..53570eacf5e 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -96,9 +96,14 @@ export default (state: Chat = initialState, action: Actions): Chat => {
 
     case ActionTypes.PROFILES: {
       const { data } = action;
+
+      const filteredProfiles = data.filter((profile) => {
+        return !state.profiles.some((existingProfile) => existingProfile.id === profile.id);
+      });
+
       return {
         ...state,
-        profiles: [...state.profiles, ...data]
+        profiles: [...state.profiles, ...filteredProfiles]
       };
     }
 
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index 8fd832af5d5..9ed1b199a02 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -15,6 +15,8 @@ export type Metadata = {
   picture: string;
   communityName?: string;
   communityModerators?: communityModerator[];
+  hiddenMessageIds?: string[];
+  removedUserIds?: string[];
 };
 
 export type communityModerator = {
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index d46124bfe34..4f78ea8d3fa 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -123,7 +123,7 @@ const MessageProvider = (props: Props) => {
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
-    // console.log("handleProfileUpdate", data);
+    console.log("handleProfileUpdate", data);
     props.addProfile(data);
   };
 
@@ -137,7 +137,7 @@ const MessageProvider = (props: Props) => {
 
   //Direct contact handler
   const handleDirectContact = (data: DirectContact[]) => {
-    // console.log("handleDirectContact", data)
+    console.log("handleDirectContact", data);
     const result = [...chat.directContacts];
     data.forEach(({ name, pubkey }) => {
       const isPresent = chat.directContacts.some(
@@ -211,7 +211,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    // console.log("handleChannelCreation", data);
+    console.log("handleChannelCreation", data);
 
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
@@ -228,7 +228,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel update handler
   const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    // console.log("handleChannelUpdate", data);
+    console.log("handleChannelUpdate", data);
     props.UpdateChannels(data);
   };
 
@@ -247,7 +247,7 @@ const MessageProvider = (props: Props) => {
     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
 
     for (const item of data) {
-      const isCreatorMatch = chat.profiles.some((firstItem) => firstItem.creator === item.creator);
+      const isCreatorMatch = chat.profiles.some((profile) => profile.creator === item.creator);
 
       if (!isCreatorMatch) {
         let uniqueUsers: string[] = [];

From 63e0c228eded55a17f8b421be46909f0987e4195 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 1 Aug 2023 15:23:15 +0500
Subject: [PATCH 029/179] show warning modal if user click on create new
 account button

---
 .../components/chat-box/chat-constants.ts     |   5 +-
 src/common/components/chat-box/index.tsx      | 308 ++++++++++++++----
 .../join-community-chat-btn/index.tsx         |  13 +-
 src/common/helper/chat-utils.ts               |  47 ++-
 src/common/helper/message-service.ts          |  17 +-
 src/common/img/svg.tsx                        |  23 +-
 src/providers/message-provider.tsx            |   8 +-
 7 files changed, 324 insertions(+), 97 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index 68cb398cae4..f947ea75c46 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -32,5 +32,8 @@ export const UPLOADING = "Uploading";
 export const GIPHGY = "giphy";
 export const HIDEMESSAGE = "hideMessage";
 export const ADDROLE = "addRole";
-export const REMOVEUSER = "removeUser";
+export const BLOCKUSER = "blockUser";
 export const LEAVECOMMUNITY = "leaveCommunity";
+export const UNBLOCKUSER = "unblockUser";
+export const NEWCHATACCOUNT = "newChatAccount";
+export const CHATIMPORT = "chatImport";
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 9487b62276c..8b992bd05bb 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -41,6 +41,7 @@ import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
 import DropDown, { MenuItem } from "../dropdown";
 import FollowControls from "../follow-controls";
+import OrDivider from "../or-divider";
 
 import {
   addMessageSVG,
@@ -59,7 +60,8 @@ import {
   editSVG,
   keySvg,
   syncSvg,
-  hideSvg
+  hideSvg,
+  removeUserSvg
 } from "../../img/svg";
 
 import {
@@ -72,8 +74,11 @@ import {
   GifImagesStyle,
   ADDROLE,
   HIDEMESSAGE,
-  REMOVEUSER,
-  LEAVECOMMUNITY
+  BLOCKUSER,
+  LEAVECOMMUNITY,
+  UNBLOCKUSER,
+  NEWCHATACCOUNT,
+  CHATIMPORT
 } from "./chat-constants";
 
 import { getPublicKey } from "../../../lib/nostr-tools/keys";
@@ -173,13 +178,15 @@ export default function ChatBox(props: Props) {
   const [removedUserId, setRemovedUserID] = useState("");
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
+  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
+  const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
 
   useEffect(() => {
-    console.log(isActveUserRemoved, "isActveUserRemoved");
-  }, [isActveUserRemoved]);
+    // console.log("communityAdmins", communityAdmins);
+  }, [communityAdmins]);
 
   useEffect(() => {
-    console.log(currentChannel, "currentChannel");
+    // console.log(currentChannel, "currentChannel");
   }, [currentChannel]);
 
   useEffect(() => {
@@ -242,6 +249,7 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     currentChannel?.communityModerators && getPrivilegedUsers(currentChannel?.communityModerators!);
+    currentChannel?.removedUserIds && getBlockedUsers(currentChannel?.removedUserIds!);
     currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
     currentChannel && scrollerClicked();
     if (removedUsers) {
@@ -380,11 +388,29 @@ export default function ChatBox(props: Props) {
   );
 
   const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
-    const filteredUsers =
-      communityModerators &&
-      communityModerators.filter((user) => ["owner", "admin", "mod"].includes(user.role));
-    const privilegedUsersName = filteredUsers?.map((user) => user.name);
-    setPrivilegedUsers(privilegedUsersName!);
+    const privilegedRoles = ["owner", "admin", "mod"];
+    const communityAdminRoles = ["owner", "admin"];
+
+    const privilegedUsers = communityModerators.filter((user) =>
+      privilegedRoles.includes(user.role)
+    );
+    const communityAdmins = communityModerators.filter((user) =>
+      communityAdminRoles.includes(user.role)
+    );
+
+    const privilegedUserNames = privilegedUsers.map((user) => user.name);
+    const communityAdminNames = communityAdmins.map((user) => user.name);
+
+    setPrivilegedUsers(privilegedUserNames);
+    setCommunityAdmins(communityAdminNames);
+  };
+
+  const getBlockedUsers = (blockedUser: string[]) => {
+    const blockedUsers = props.chat.profiles
+      .filter((item) => blockedUser.includes(item.creator))
+      .map((item) => ({ name: item.name, pubkey: item.creator }));
+    // console.log("blockedUsers", blockedUsers);
+    setBlockedUsers(blockedUsers);
   };
 
   const fetchCommunity = async () => {
@@ -399,13 +425,13 @@ export default function ChatBox(props: Props) {
 
   const fetchCurrentChannel = (communityName: string) => {
     const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
-    console.log("fetch current chanel", channel);
+    // console.log("fetch current chanel", channel);
     if (channel) {
       const updated: ChannelUpdate = props.chat.updatedChannel
         .filter((x) => x.channelId === channel.id)
         .sort((a, b) => b.created - a.created)[0];
       if (updated) {
-        console.log("updated", updated);
+        // console.log("updated", updated);
         const channel = {
           name: updated.name,
           about: updated.about,
@@ -787,28 +813,50 @@ export default function ChatBox(props: Props) {
       const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
       newUpdatedModerator.role = selectedRole;
       newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
-      console.log("Update role", newUpdatedChannel);
       setCurrentChannel(newUpdatedChannel);
       window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
       success("Roles updated succesfully");
     }
   };
 
-  const handleConfirmaButton = (actionType: string) => {
-    if (actionType === HIDEMESSAGE) {
-      handleChannelUpdate(HIDEMESSAGE);
-    } else if (actionType === REMOVEUSER) {
-      handleChannelUpdate(REMOVEUSER);
-    } else if (actionType === LEAVECOMMUNITY) {
-      window?.messageService
-        ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
-        .then(() => {})
-        .finally(() => {
-          setKeyDialog(false);
-          setStep(0);
-          setIsCommunity(false);
-          setCommunityName("");
-        });
+  const handleConfirmButton = (actionType: string) => {
+    switch (actionType) {
+      case HIDEMESSAGE:
+        handleChannelUpdate(HIDEMESSAGE);
+        break;
+      case BLOCKUSER:
+        handleChannelUpdate(BLOCKUSER);
+        break;
+      case UNBLOCKUSER:
+        handleChannelUpdate(UNBLOCKUSER);
+        break;
+      case LEAVECOMMUNITY:
+        window?.messageService
+          ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
+          .then(() => {})
+          .finally(() => {
+            setKeyDialog(false);
+            setStep(0);
+            setIsCommunity(false);
+            setCommunityName("");
+          });
+        break;
+      case NEWCHATACCOUNT:
+        setInProgress(true);
+        resetProfile(props.activeUser)
+          .then((updatedProfile) => {
+            handleJoinChat();
+            setStep(10);
+            setInProgress(false);
+          })
+          .catch((err) => {
+            error(err);
+            console.error("Error:", error);
+          });
+
+        break;
+      default:
+        break;
     }
   };
 
@@ -839,7 +887,6 @@ export default function ChatBox(props: Props) {
                     value={user}
                     onChange={userChanged}
                     className={addRoleError ? "is-invalid" : ""}
-                    // ref={this._input}
                   />
                 </InputGroup>
                 {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
@@ -874,8 +921,8 @@ export default function ChatBox(props: Props) {
               <table className="table table-striped table-bordered table-roles">
                 <thead>
                   <tr>
-                    <th style={{ width: "200px" }}>{_t("community.roles-account")}</th>
-                    <th style={{ width: "200px" }}>{_t("community.roles-role")}</th>
+                    <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
+                    <th style={{ width: "50%" }}>{_t("community.roles-role")}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -924,6 +971,62 @@ export default function ChatBox(props: Props) {
     );
   };
 
+  const blockedUsersModal = () => {
+    return (
+      <>
+        <div className="blocked-user-header" style={{ marginBottom: "1rem" }}>
+          <h4 className="blocked-user-title">Blocked Users</h4>
+        </div>
+
+        {blockedUsers.length !== 0 ? (
+          <>
+            <table className="table table-striped table-bordered table-roles">
+              <thead>
+                <tr>
+                  <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
+                  <th style={{ width: "50%" }}>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {blockedUsers &&
+                  blockedUsers.map((user, i) => {
+                    return (
+                      <tr key={i}>
+                        <td>
+                          <span className="d-flex user">
+                            <UserAvatar username={user.name} size="medium" />{" "}
+                            <span className="username" style={{ margin: "10px 0 0 10px" }}>
+                              @{user.name}
+                            </span>
+                          </span>
+                        </td>
+                        <td>
+                          <Button
+                            variant="outline-primary"
+                            onClick={() => {
+                              setKeyDialog(true);
+                              setStep(7);
+                              setRemovedUserID(user.pubkey);
+                            }}
+                          >
+                            Unblock
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+              </tbody>
+            </table>
+          </>
+        ) : (
+          <div className="text-center">
+            <p>No Blocked user yet.</p>
+          </div>
+        )}
+      </>
+    );
+  };
+
   const ImportChatModal = () => {
     return (
       <>
@@ -963,7 +1066,7 @@ export default function ChatBox(props: Props) {
     );
   };
 
-  const chatSuccessModal = () => {
+  const successModal = (message: string) => {
     return (
       <>
         <div className="import-chat-dialog-header border-bottom">
@@ -977,7 +1080,13 @@ export default function ChatBox(props: Props) {
         </div>
         <div className="success-dialog-body">
           <div className="success-dialog-content">
-            <span>Chats imported successfully </span>
+            <span>
+              {message === CHATIMPORT
+                ? "Chats imported successfully"
+                : message === NEWCHATACCOUNT
+                ? "New Account created successfully"
+                : ""}
+            </span>
           </div>
           <div className="d-flex justify-content-center">
             <span className="hr-6px-btn-spacer" />
@@ -993,11 +1102,16 @@ export default function ChatBox(props: Props) {
       <>
         <div className="join-community-dialog-header border-bottom">
           <div className="join-community-dialog-titles">
-            <h2 className="join-community-main-title">Confirmaton</h2>
+            <h2 className="join-community-main-title">
+              {actionType === NEWCHATACCOUNT ? "Warning" : "Confirmation"}
+            </h2>
           </div>
         </div>
+        {inProgress && actionType === NEWCHATACCOUNT && <LinearProgress />}
         <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
-          Are you sure?
+          {actionType === NEWCHATACCOUNT
+            ? "creating new account will reset your chats"
+            : "Are you sure?"}
         </div>
         <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
           <Button
@@ -1014,7 +1128,7 @@ export default function ChatBox(props: Props) {
           <Button
             variant="outline-primary"
             className="confirm-btn"
-            onClick={() => handleConfirmaButton(actionType)}
+            onClick={() => handleConfirmButton(actionType)}
           >
             Confirm
           </Button>
@@ -1088,15 +1202,33 @@ export default function ChatBox(props: Props) {
         const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
         updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
         break;
-      case REMOVEUSER:
+      case BLOCKUSER:
         const updatedRemovedUsers = [...(currentChannel?.removedUserIds || []), removedUserId!];
         updatedMetaData.removedUserIds = updatedRemovedUsers;
+
+        const isRemovedUserModerator = currentChannel?.communityModerators?.find(
+          (x) => x.pubkey === removedUserId
+        );
+        const isModerator = !!isRemovedUserModerator;
+        if (isModerator) {
+          const NewUpdatedRoles = currentChannel?.communityModerators?.filter(
+            (item) => item.pubkey !== removedUserId
+          );
+          updatedMetaData.communityModerators = NewUpdatedRoles;
+        }
+        break;
+      case UNBLOCKUSER:
+        const NewUpdatedRemovedUsers = currentChannel?.removedUserIds?.filter(
+          (item) => item !== removedUserId
+        );
+        updatedMetaData.removedUserIds = NewUpdatedRemovedUsers;
+        // console.log("NewUpdatedRemovedUsers", NewUpdatedRemovedUsers);
         break;
       default:
         break;
     }
 
-    console.log(updatedMetaData, "updatedMetaData");
+    // console.log(updatedMetaData, "updatedMetaData");
     try {
       window.messageService?.updateChannel(currentChannel!, updatedMetaData);
       setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
@@ -1106,7 +1238,7 @@ export default function ChatBox(props: Props) {
         fetchCommunityMessages(currentChannel?.id!);
         setHiddenMsgId("");
       }
-      if (operationType === REMOVEUSER) {
+      if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
         setStep(0);
         setKeyDialog(false);
         // fetchCommunityMessages(currentChannel?.id!);
@@ -1127,11 +1259,16 @@ export default function ChatBox(props: Props) {
     setStep(1);
   };
 
-  const editRolesClicked = () => {
+  const handleEditRoles = () => {
     setKeyDialog(true);
     setStep(2);
   };
 
+  const handleBlockedUsers = () => {
+    setKeyDialog(true);
+    setStep(8);
+  };
+
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
     setUser("");
@@ -1172,10 +1309,19 @@ export default function ChatBox(props: Props) {
       ? [
           {
             label: "Edit Roles",
-            onClick: editRolesClicked,
+            onClick: handleEditRoles,
             icon: editSVG
           }
         ]
+      : []),
+    ...(communityAdmins.includes(props.activeUser?.username!)
+      ? [
+          {
+            label: "Blocked Users",
+            onClick: handleBlockedUsers,
+            icon: removeUserSvg
+          }
+        ]
       : [])
   ];
 
@@ -1443,25 +1589,54 @@ export default function ChatBox(props: Props) {
                                       </div>
 
                                       <p className="d-flex justify-content-center profile-name">
-                                        {name!}
+                                        {`@${name!}`}
                                       </p>
-                                      <div className="d-flex justify-content-between profile-box-buttons">
+                                      <div
+                                        className={`d-flex ${
+                                          communityAdmins.includes(props.activeUser?.username!)
+                                            ? "justify-content-between"
+                                            : "justify-content-center"
+                                        }  profile-box-buttons`}
+                                      >
                                         <FollowControls
                                           {...props}
                                           targetUsername={name!}
                                           where={"chat-box"}
                                         />
 
-                                        <Button
-                                          variant="primary"
-                                          onClick={() => {
-                                            setKeyDialog(true);
-                                            setStep(6);
-                                            setClickedMessage("");
-                                          }}
-                                        >
-                                          Remove
-                                        </Button>
+                                        {communityAdmins.includes(props.activeUser?.username!) && (
+                                          <>
+                                            {currentChannel?.removedUserIds?.includes(
+                                              pMsg.creator
+                                            ) ? (
+                                              <>
+                                                <Button
+                                                  variant="primary"
+                                                  onClick={() => {
+                                                    setKeyDialog(true);
+                                                    setStep(7);
+                                                    setClickedMessage("");
+                                                  }}
+                                                >
+                                                  Unblock
+                                                </Button>
+                                              </>
+                                            ) : (
+                                              <>
+                                                <Button
+                                                  variant="primary"
+                                                  onClick={() => {
+                                                    setKeyDialog(true);
+                                                    setStep(6);
+                                                    setClickedMessage("");
+                                                  }}
+                                                >
+                                                  Block
+                                                </Button>
+                                              </>
+                                            )}
+                                          </>
+                                        )}
                                       </div>
 
                                       <Form
@@ -1557,7 +1732,7 @@ export default function ChatBox(props: Props) {
                                       {formatMessageTime(pMsg.created)}
                                     </p>
                                     <div className="sender-message">
-                                      {hoveredMessageId === pMsg.id && (
+                                      {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
                                         <Tooltip content={"Hide Message"}>
                                           <div
                                             className="hide-msg"
@@ -1694,12 +1869,23 @@ export default function ChatBox(props: Props) {
                       </React.Fragment>
                     ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
                       <>
-                        {/* <p className="no-chat">{_t("chat.no-chat")}</p> */}
                         <div className="start-chat-btn" style={{ marginTop: "25%" }}>
                           <Button variant="primary" onClick={handleImportChat}>
                             Import Chat
                           </Button>
                         </div>
+                        {<OrDivider />}
+                        <div className="start-chat-btn">
+                          <Button
+                            variant="primary"
+                            onClick={() => {
+                              setKeyDialog(true);
+                              setStep(9);
+                            }}
+                          >
+                            Create New Account
+                          </Button>
+                        </div>
                       </>
                     ) : (
                       <>
@@ -1737,7 +1923,7 @@ export default function ChatBox(props: Props) {
             )}
             {isActveUserRemoved && isCommunity && (
               <p className="d-flex justify-content-center mt-4 mb-0">
-                You have been removed from this community
+                You have been blocked from this community
               </p>
             )}
           </div>
@@ -1862,10 +2048,14 @@ export default function ChatBox(props: Props) {
           <Modal.Body className="chat-modals-body">
             {step === 1 && confirmationModal(LEAVECOMMUNITY)}
             {step === 5 && confirmationModal(HIDEMESSAGE)}
-            {step === 6 && confirmationModal(REMOVEUSER)}
+            {step === 6 && confirmationModal(BLOCKUSER)}
+            {step === 7 && confirmationModal(UNBLOCKUSER)}
+            {step === 9 && confirmationModal(NEWCHATACCOUNT)}
             {step === 2 && EditRolesModal()}
             {step === 3 && ImportChatModal()}
-            {step === 4 && chatSuccessModal()}
+            {step === 4 && successModal(CHATIMPORT)}
+            {step === 10 && successModal(NEWCHATACCOUNT)}
+            {step === 8 && blockedUsersModal()}
           </Modal.Body>
         </Modal>
       )}
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index a67d415a94b..1e2e98b9f49 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -79,9 +79,9 @@ export default function JoinCommunityChatBtn(props: Props) {
       setCurrentChannel(communityProfile.channel);
     }
 
-    if (!haschannelMetaData && currentChannel) {
-      await setChannelMetaData(props.community.name, currentChannel!);
-    }
+    // if (!haschannelMetaData && currentChannel) {
+    //   // await setChannelMetaData(props.community.name, currentChannel!);
+    // }
   };
 
   const checkIsChatJoined = () => {
@@ -103,7 +103,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const ownerData = await getProfileMetaData(community.name);
     const ownerRole = {
       name: activeUser!.username,
-      pubkey: ownerData.noStrKey || activeUserKeys?.pub,
+      pubkey: activeUserKeys?.pub || ownerData.noStrKey,
       role: "owner"
     };
 
@@ -151,8 +151,9 @@ export default function JoinCommunityChatBtn(props: Props) {
         about: content.about,
         picture: content.picture
       };
-      await setChannelMetaData(community.name, currentChannel!);
-      setCurrentChannel(channelMetaData);
+      setChannelMetaData(community.name, channelMetaData).then(() =>
+        setCurrentChannel(channelMetaData)
+      );
     } finally {
       setInProgress(false);
       setIsJoinChat(true);
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 67ba159bff1..f78325b0e75 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -21,14 +21,20 @@ export const getProfileMetaData = async (username: string) => {
   }
 };
 
-export const resetProfile = async (activeUser: ActiveUser | null) => {
-  const profile = await getProfileMetaData(activeUser?.username!);
-  delete profile.noStrKey;
-  delete profile.channel;
-  ls.remove(`${activeUser?.username}_noStrPrivKey`);
-  const response = await getAccountFull(activeUser?.username!);
-  const updatedProfile = await updateProfile(response, { ...profile });
-  console.log(updatedProfile, profile);
+export const resetProfile = (activeUser: ActiveUser | null) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const profile = await getProfileMetaData(activeUser?.username!);
+      delete profile.noStrKey;
+      delete profile.channel;
+      ls.remove(`${activeUser?.username}_noStrPrivKey`);
+      const response = await getAccountFull(activeUser?.username!);
+      const updatedProfile = await updateProfile(response, { ...profile });
+      resolve(updatedProfile);
+    } catch (error) {
+      reject(error);
+    }
+  });
 };
 
 export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
@@ -44,16 +50,21 @@ export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPub
   return updatedProfile;
 };
 
-export const setChannelMetaData = async (username: string, channel: Channel) => {
-  const response = await getAccountFull(username!);
-  const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
-  const newProfile = {
-    channel: channel
-  };
-  console.log({ ...profile, ...newProfile });
-  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-  return updatedProfile;
+export const setChannelMetaData = (username: string, channel: Channel) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const response = await getAccountFull(username!);
+      const { posting_json_metadata } = response;
+      const profile = JSON.parse(posting_json_metadata!).profile;
+      const newProfile = {
+        channel: channel
+      };
+      const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+      resolve(updatedProfile);
+    } catch (error) {
+      reject(error);
+    }
+  });
 };
 
 export const createNoStrAccount = () => {
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 8185497409f..cd85cca4bee 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -275,7 +275,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadProfiles(pubs: string[]) {
-    console.log("lod profiles");
+    // console.log("lod profiles");
     pubs.forEach((p) => {
       this.fetch(
         [
@@ -344,6 +344,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
+      console.log("Event in fetch", event);
       event.kind === Kind.Metadata && isDirectContact
         ? this.addDirectContact(event)
         : this.pushToEventBuffer(event);
@@ -401,12 +402,12 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async createChannel(meta: Metadata) {
-    console.log("create channel run", meta);
+    // console.log("create channel run", meta);
     return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
   }
 
   public async updateChannel(channel: Channel, meta: Metadata) {
-    console.log(channel, meta, "Update channel run");
+    // console.log(channel, meta, "Update channel run");
     return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
       return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
     });
@@ -424,7 +425,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    console.log("Update profile run", profile);
+    // console.log("Update profile run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -464,7 +465,8 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         content,
         created_at: Math.floor(Date.now() / 1000),
         id: "",
-        sig: ""
+        sig: "",
+        sent: false
       })
         .then((event) => {
           if (!event) {
@@ -562,7 +564,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (profileUpdates.length > 0) {
-      console.log("Profile Updates", profileUpdates);
+      // console.log("Profile Updates", profileUpdates);
       this.emit(MessageEvents.ProfileUpdate, profileUpdates);
     }
 
@@ -625,7 +627,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (channelUpdates.length > 0) {
-      console.log("channelUpdates", channelUpdates);
+      // console.log("channelUpdates", channelUpdates);
       this.emit(MessageEvents.ChannelUpdate, channelUpdates);
     }
 
@@ -638,6 +640,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           .map((x) => x?.[1])
           .filter(notEmpty);
         if (!root) return null;
+        console.log(ev, "evenet");
         return ev.content
           ? {
               id: ev.id,
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 8ef29a4ef61..8daf25b4214 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2103,8 +2103,8 @@ export const chatLeaveSvg = (
 export const editSVG = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="14"
+    width="16"
+    height="16"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -2132,3 +2132,22 @@ export const hideSvg = (
     />
   </svg>
 );
+
+export const removeUserSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+    <circle cx="8.5" cy="7" r="4" />
+    <line x1="18" y1="8" x2="23" y2="13" />
+    <line x1="23" y1="8" x2="18" y2="13" />
+  </svg>
+);
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 4f78ea8d3fa..8b6e082bdd9 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -123,7 +123,7 @@ const MessageProvider = (props: Props) => {
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
-    console.log("handleProfileUpdate", data);
+    // console.log("handleProfileUpdate", data);
     props.addProfile(data);
   };
 
@@ -137,7 +137,7 @@ const MessageProvider = (props: Props) => {
 
   //Direct contact handler
   const handleDirectContact = (data: DirectContact[]) => {
-    console.log("handleDirectContact", data);
+    // console.log("handleDirectContact", data);
     const result = [...chat.directContacts];
     data.forEach(({ name, pubkey }) => {
       const isPresent = chat.directContacts.some(
@@ -211,7 +211,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    console.log("handleChannelCreation", data);
+    // console.log("handleChannelCreation", data);
 
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
@@ -228,7 +228,7 @@ const MessageProvider = (props: Props) => {
 
   // Channel update handler
   const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    console.log("handleChannelUpdate", data);
+    // console.log("handleChannelUpdate", data);
     props.UpdateChannels(data);
   };
 

From da64edd1bf3875f02cc4078e3dca0e438b757542 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 7 Aug 2023 18:07:28 +0500
Subject: [PATCH 030/179] Add pagination in public chat and add spinner feature
 in public chat

---
 src/common/components/chat-box/index.scss |   2 +-
 src/common/components/chat-box/index.tsx  | 172 ++++++++++++++++++++--
 src/common/helper/chat-utils.ts           |   1 +
 src/common/helper/message-service.ts      |  89 ++++++++---
 src/common/img/svg.tsx                    |   2 +-
 src/common/store/actions.ts               |   8 +-
 src/common/store/chat/index.ts            |  87 ++++++++++-
 src/common/store/chat/types.ts            |  20 ++-
 src/providers/message-provider-types.ts   |   2 +
 src/providers/message-provider.tsx        | 123 ++++++++++++----
 10 files changed, 438 insertions(+), 68 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index eb5d5f9fc75..9008afe51ed 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -477,7 +477,7 @@
           margin-bottom: 2px;
         }
         .sender-message {
-          max-width: 320px;
+          // max-width: 320px;
           margin-left: auto;
 
           display: flex;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 8b992bd05bb..43da0b8e0a3 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -61,7 +61,8 @@ import {
   keySvg,
   syncSvg,
   hideSvg,
-  removeUserSvg
+  removeUserSvg,
+  alertCircleSvg
 } from "../../img/svg";
 
 import {
@@ -92,7 +93,8 @@ import {
   setProfileMetaData,
   resetProfile,
   getCommunities,
-  getPrivateKey
+  getPrivateKey,
+  notEmpty
 } from "../../helper/chat-utils";
 import * as ls from "../../util/local-storage";
 import { renderPostBody } from "@ecency/render-helper";
@@ -180,10 +182,12 @@ export default function ChatBox(props: Props) {
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
+  const [isTop, setIsTop] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
 
   useEffect(() => {
-    // console.log("communityAdmins", communityAdmins);
-  }, [communityAdmins]);
+    console.log("isTop", isTop);
+  }, [isTop]);
 
   useEffect(() => {
     // console.log(currentChannel, "currentChannel");
@@ -193,13 +197,14 @@ export default function ChatBox(props: Props) {
     const updated: ChannelUpdate = props.chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
       .sort((a, b) => b.created - a.created)[0];
-    if (currentChannel) {
+    if (currentChannel && updated) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(
         currentChannel.id,
         updated.hiddenMessageIds
       );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
+      console.log("community messages", messages);
       const channel = {
         name: updated.name,
         about: updated.about,
@@ -216,6 +221,14 @@ export default function ChatBox(props: Props) {
     }
   }, [props.chat.updatedChannel]);
 
+  useEffect(() => {
+    console.log("isTop", isTop);
+    if (isTop) {
+      fetchPrevMessages();
+      console.log("event is dispatched");
+    }
+  }, [isTop]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
@@ -243,7 +256,11 @@ export default function ChatBox(props: Props) {
   }, [clickedMessage]);
 
   useEffect(() => {
-    setInProgress(false);
+    //what if there is no channel or there is no direct contact in store. handle this thing too.
+    if (props.chat.channels.length !== 0 || props.chat.directContacts.length !== 0) {
+      setInProgress(false);
+    }
+
     console.log("chat in store", props.chat);
   }, [props.chat]);
 
@@ -256,7 +273,7 @@ export default function ChatBox(props: Props) {
       const removed = removedUsers.includes(activeUserKeys?.pub!);
       setIsActiveUserRemoved(removed);
     }
-    scrollerClicked();
+    // scrollerClicked();
   }, [currentChannel, removedUsers]);
 
   useEffect(() => {
@@ -283,6 +300,7 @@ export default function ChatBox(props: Props) {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
+    // if(messages)
   }, [props.chat.directMessages]);
 
   useEffect(() => {
@@ -300,11 +318,18 @@ export default function ChatBox(props: Props) {
   }, [props.global.theme, props.activeUser]);
 
   useEffect(() => {
-    scrollerClicked();
     if (directMessagesList.length !== 0 || publicMessages.length !== 0) {
       //Initialize the zooming effect
       zoomInitializer();
     }
+    if (directMessagesList.length !== 0) {
+      scrollerClicked();
+    }
+
+    if (!isTop && !isScrollToTop && publicMessages.length !== 0) {
+      console.log("I want this");
+      scrollerClicked();
+    }
   }, [directMessagesList, publicMessages]);
 
   useEffect(() => {
@@ -313,8 +338,9 @@ export default function ChatBox(props: Props) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(currentChannel.id);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
+      console.log("community messages", messages);
     }
-    scrollerClicked();
+    // scrollerClicked();
   }, [currentChannel, isCommunity, props.chat.publicMessages]);
 
   useEffect(() => {
@@ -368,7 +394,7 @@ export default function ChatBox(props: Props) {
       setIsCurrentUserJoined(true);
       setMessage("");
       setInProgress(false);
-      scrollerClicked();
+      // scrollerClicked();
     }
   }, [currentUser]);
 
@@ -537,11 +563,18 @@ export default function ChatBox(props: Props) {
 
   const sendMessage = () => {
     if (message.length !== 0 && !message.includes(UPLOADING)) {
+      if (isCommunity) {
+        if (!isActveUserRemoved) {
+          window?.messageService?.sendPublicMessage(currentChannel!, message, [], "");
+        } else {
+          error("You cannot send messages in this group.");
+        }
+      }
+      if (isCurrentUser) {
+        window.messageService?.sendDirectMessage(receiverPubKey, message);
+      }
       setMessage("");
       setIsMessageText(false);
-      isCommunity
-        ? window?.messageService?.sendPublicMessage(currentChannel!, message, [], "")
-        : window.messageService?.sendDirectMessage(receiverPubKey, message);
     }
     if (
       receiverPubKey &&
@@ -552,7 +585,67 @@ export default function ChatBox(props: Props) {
     }
   };
 
+  const fetchPrevMessages = () => {
+    if (!hasMore || inProgress) return;
+
+    setInProgress(true);
+    window.messageService
+      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
+      .then((events) => {
+        console.log("events in chatbox", events);
+
+        const newMessages = events
+          .map((ev) => {
+            const eTags = ev.tags.filter(([t]) => t === "e");
+            const root = eTags.find((x) => x[3] === "root")?.[1];
+            const mentions = ev.tags
+              .filter(([t]) => t === "p")
+              .map((x) => x?.[1])
+              .filter(notEmpty);
+
+            if (!root) return null;
+
+            return ev.content
+              ? {
+                  id: ev.id,
+                  root,
+                  content: ev.content,
+                  creator: ev.pubkey,
+                  mentions,
+                  created: ev.created_at,
+                  sent: 1
+                }
+              : null;
+          })
+          .filter(notEmpty);
+
+        const filteredNewMessages = newMessages.filter((newMsg) => {
+          return !publicMessages.some((pubMsg) => pubMsg.id === newMsg.id);
+        });
+
+        const messages = filteredNewMessages.sort((a, b) => a.created - b.created);
+
+        setPublicMessages((prevMessages) => [...messages, ...prevMessages]);
+
+        setInProgress(false);
+        console.log("num", events.length);
+        if (events.length < 30 - 5) {
+          setHasMore(false);
+        }
+        console.log("number", events.length);
+      })
+      .finally(() => {
+        setInProgress(false);
+        setIsTop(false);
+      });
+  };
+
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    // if (isTop) {
+    //   console.log("Hurrah");
+    //   event.preventDefault();
+    //   return;
+    // }
     var element = event.currentTarget;
     let srollHeight: number = (element.scrollHeight / 100) * 25;
     const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
@@ -561,9 +654,17 @@ export default function ChatBox(props: Props) {
       element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight;
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
+    const scrollerTop = element.scrollTop <= 600;
+    console.log("scrollerTop", scrollerTop);
+    if (isCommunity && scrollerTop) {
+      setIsTop(true);
+    } else {
+      setIsTop(false); // Set isTop to false when the condition is not met
+    }
   };
 
   const scrollerClicked = () => {
+    console.log("scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
@@ -575,6 +676,9 @@ export default function ChatBox(props: Props) {
   };
 
   const handleRefreshSvgClick = () => {
+    const { resetChat } = props;
+    resetChat();
+    handleBackArrowSvg();
     if (getPrivateKey(props.activeUser?.username!)) {
       setInProgress(true);
       const keys = {
@@ -1283,6 +1387,8 @@ export default function ChatBox(props: Props) {
     setClickedMessage("");
     setShowSearchUser(false);
     setSearchText("");
+    setMessage("");
+    setHasMore(true);
   };
 
   const handleImportChat = () => {
@@ -1405,7 +1511,12 @@ export default function ChatBox(props: Props) {
               )}
               <div className="arrow-image">
                 <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                  <p className="arrow-svg" onClick={() => setExpanded(!expanded)}>
+                  <p
+                    className="arrow-svg"
+                    onClick={() => {
+                      setExpanded(!expanded);
+                    }}
+                  >
                     {expanded ? expandArrow : collapseArrow}
                   </p>
                 </Tooltip>
@@ -1440,7 +1551,13 @@ export default function ChatBox(props: Props) {
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${!hasUserJoinedChat ? "join-chat" : clickedMessage ? "no-scroll" : ""}`}
+            } ${
+              !hasUserJoinedChat
+                ? "join-chat"
+                : clickedMessage || (isTop && hasMore)
+                ? "no-scroll"
+                : ""
+            }`}
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
@@ -1758,6 +1875,29 @@ export default function ChatBox(props: Props) {
                                         }`}
                                         dangerouslySetInnerHTML={{ __html: renderedPreview }}
                                       />
+                                      {pMsg.sent === 0 && (
+                                        <span style={{ margin: "10px 0 0 5px" }}>
+                                          <Spinner animation="border" variant="primary" size="sm" />
+                                        </span>
+                                      )}
+                                      {pMsg.sent === 2 && (
+                                        <Tooltip content={"Sending failed"}>
+                                          <span style={{ margin: "14px 0 0 5px" }}>
+                                            {/* <Spinner animation="border" variant="danger" size="sm" /> */}
+                                            <div
+                                              className="sent-failed"
+                                              style={{
+                                                width: "10px",
+                                                height: "10px",
+                                                borderRadius: "50%",
+                                                backgroundColor: "white",
+                                                border: "2px solid red",
+                                                cursor: "pointer"
+                                              }}
+                                            />
+                                          </span>
+                                        </Tooltip>
+                                      )}
                                     </div>
                                   </div>
                                 )}
@@ -1887,6 +2027,8 @@ export default function ChatBox(props: Props) {
                           </Button>
                         </div>
                       </>
+                    ) : inProgress ? (
+                      <h3 className="no-chat">Loading...</h3>
                     ) : (
                       <>
                         <p className="no-chat">{_t("chat.no-chat")}</p>
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index f78325b0e75..68f46d77891 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -30,6 +30,7 @@ export const resetProfile = (activeUser: ActiveUser | null) => {
       ls.remove(`${activeUser?.username}_noStrPrivKey`);
       const response = await getAccountFull(activeUser?.username!);
       const updatedProfile = await updateProfile(response, { ...profile });
+      console.log("Updated profile", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index cd85cca4bee..78c6c85d283 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -24,6 +24,7 @@ const relays = {
   "wss://relay.snort.social": { read: true, write: true },
   "wss://nos.lol": { read: true, write: true }
 };
+const MESSAGE_PAGE_SIZE = 30;
 
 enum NewKinds {
   MuteList = 10000,
@@ -38,7 +39,8 @@ export enum MessageEvents {
   ChannelCreation = "channel_creation",
   DirectMessage = "direct_message",
   DirectContact = "direct_contact",
-  PublicMessage = "public_message"
+  PublicMessageBeforeSent = "public_message_before_sent",
+  PublicMessageAfterSent = "public_message_after_sent"
 }
 
 type EventHandlerMap = {
@@ -47,7 +49,8 @@ type EventHandlerMap = {
   [MessageEvents.DirectMessage]: (data: DirectMessage[]) => void;
   [MessageEvents.ChannelCreation]: (data: Channel[]) => void;
   [MessageEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
-  [MessageEvents.PublicMessage]: (data: PublicMessage[]) => void;
+  [MessageEvents.PublicMessageBeforeSent]: (data: PublicMessage[]) => void;
+  [MessageEvents.PublicMessageAfterSent]: (data: PublicMessage[]) => void;
   [MessageEvents.LeftChannelList]: (data: string[]) => void;
   [MessageEvents.DirectContact]: (data: DirectContact[]) => void;
 };
@@ -148,6 +151,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             .filter(notEmpty)
         )
       );
+      console.log("channels", channels);
       if (channels.length !== 0) {
         this.fetchChannels(channels);
       }
@@ -157,6 +161,29 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     });
   }
 
+  public fetchPrevMessages(channel: string, until: number) {
+    console.log("check plz", channel, until);
+    return this.fetchP(
+      [
+        {
+          kinds: [Kind.ChannelMessage],
+          "#e": [channel],
+          until,
+          limit: MESSAGE_PAGE_SIZE
+        }
+      ],
+      false
+    ).then((events) => {
+      console.log("events", events);
+      return events;
+      // events.forEach((ev) => {
+      //   this.pushToEventBuffer(ev);
+      // });
+      // console.log('events ki length',events.length)
+      // return events.length;
+    });
+  }
+
   public fetchChannels(channels: string[]) {
     // console.log("fetch channels run");
     const filters: Filter[] = [
@@ -171,7 +198,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       ...channels.map((c) => ({
         kinds: [Kind.ChannelMessage],
         "#e": [c],
-        limit: 30
+        limit: MESSAGE_PAGE_SIZE
       }))
     ];
 
@@ -267,7 +294,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       {
         kinds: [Kind.ChannelMessage],
         "#e": [id],
-        limit: 30
+        limit: MESSAGE_PAGE_SIZE
       }
     ];
 
@@ -344,7 +371,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      console.log("Event in fetch", event);
+      // console.log("Event in fetch", event);
       event.kind === Kind.Metadata && isDirectContact
         ? this.addDirectContact(event)
         : this.pushToEventBuffer(event);
@@ -465,15 +492,41 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         content,
         created_at: Math.floor(Date.now() / 1000),
         id: "",
-        sig: "",
-        sent: false
+        sig: ""
       })
         .then((event) => {
           if (!event) {
-            console.log("Event not found");
+            // console.log("Event not found");
             reject("Couldn't sign event!");
             return;
           }
+          if (event.kind === Kind.ChannelMessage) {
+            let eventArray = [];
+
+            const eTags = MessageService.filterTagValue(event, "e");
+            const root = eTags.find((x) => x[3] === "root")?.[1];
+            const mentions = MessageService.filterTagValue(event, "p")
+              .map((x) => x?.[1])
+              .filter(notEmpty);
+            const formattedEvent = event.content
+              ? {
+                  id: event.id,
+                  root,
+                  content: event.content,
+                  creator: event.pubkey,
+                  mentions,
+                  created: event.created_at,
+                  sent: 0
+                }
+              : null;
+            // console.log("mery mtlb ka event", event);
+            eventArray.push(formattedEvent);
+            const filteredEventArray = eventArray.filter(
+              (item) => item !== null
+            ) as PublicMessage[];
+            this.emit(MessageEvents.PublicMessageBeforeSent, filteredEventArray);
+          }
+
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
@@ -484,12 +537,12 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           });
 
           pub.on("failed", () => {
-            console.log("Failed to sign event");
+            // console.log("Failed to sign event");
             reject("Couldn't sign event!");
           });
         })
         .catch(() => {
-          console.log("Catch run event not");
+          // console.log("Catch run event not");
           reject("Couldn't sign event!");
         });
     });
@@ -508,7 +561,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   pushToEventBuffer(event: Event) {
-    // console.log("event reaches in event buffer");
+    // console.log("event reaches in event buffer", event);
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {
@@ -640,7 +693,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           .map((x) => x?.[1])
           .filter(notEmpty);
         if (!root) return null;
-        console.log(ev, "evenet");
         return ev.content
           ? {
               id: ev.id,
@@ -648,13 +700,15 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
               content: ev.content,
               creator: ev.pubkey,
               mentions,
-              created: ev.created_at
+              created: ev.created_at,
+              sent: 1
             }
           : null;
       })
       .filter(notEmpty);
     if (publicMessages.length > 0) {
-      this.emit(MessageEvents.PublicMessage, publicMessages);
+      // console.log("publicMessages", publicMessages);
+      this.emit(MessageEvents.PublicMessageAfterSent, publicMessages);
     }
 
     Promise.all(
@@ -674,7 +728,8 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             peer,
             creator: ev.pubkey,
             created: ev.created_at,
-            decrypted: false
+            decrypted: false,
+            sent: 1
           };
 
           if (this.priv === "nip07") {
@@ -731,7 +786,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 export default MessageService;
 
 export const initMessageService = (keys: Keys): MessageService | undefined => {
-  // console.log("keys in raven instance", keys)
+  // console.log("keys in raven instance", keys);
   if (window.messageService) {
     window.messageService.close();
     window.messageService = undefined;
@@ -739,7 +794,7 @@ export const initMessageService = (keys: Keys): MessageService | undefined => {
 
   if (keys) {
     window.messageService = new MessageService(keys.priv, keys.pub);
-    // console.log("window messageService", window.messageService);
+    console.log("window messageService", window.messageService);
   }
 
   return window.messageService;
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 8daf25b4214..6ba12684e14 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2096,7 +2096,7 @@ export const chatLeaveSvg = (
       strokeLinecap="round"
       strokeLinejoin="round"
       d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
-    ></path>
+    />
   </svg>
 );
 
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index da195eab229..66d26fe90f5 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -49,7 +49,9 @@ import {
   addPublicMessage,
   addProfile,
   addleftChannels,
-  UpdateChannels
+  UpdateChannels,
+  replacePublicMessage,
+  verifyMessageSending
 } from "./chat";
 
 // @note Do not use it directly
@@ -107,7 +109,9 @@ export const ACTIONS = {
   addPublicMessage,
   addProfile,
   addleftChannels,
-  UpdateChannels
+  UpdateChannels,
+  replacePublicMessage,
+  verifyMessageSending
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 53570eacf5e..4913987211c 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -20,7 +20,9 @@ import {
   PublicMessagesAction,
   ProfilesAction,
   LeftChannelsAction,
-  UpdateChannelAction
+  UpdateChannelAction,
+  ReplacePublicMessagesAction,
+  VerifySendingMessageAction
 } from "./types";
 
 export const initialState: Chat = {
@@ -82,6 +84,7 @@ export default (state: Chat = initialState, action: Actions): Chat => {
 
     case ActionTypes.PUBLICMESSAGES: {
       const { channelId, data } = action;
+
       return {
         ...state,
         publicMessages: [
@@ -123,6 +126,56 @@ export default (state: Chat = initialState, action: Actions): Chat => {
       };
     }
 
+    case ActionTypes.REPLACEPUBLICMESSAGE: {
+      const { channelId, data } = action;
+      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
+      const publicChat = publicChatObject?.PublicMessage!;
+
+      const updatedMainArray = publicChat?.map((message) => {
+        const matchingMessage = data.find((subMessage) => subMessage.id === message.id);
+        return matchingMessage ? matchingMessage : message;
+      });
+
+      // Add new messages from subArray that do not exist in the mainArray
+      data.forEach((subMessage) => {
+        const existsInMainArray = publicChat.some((message) => message.id === subMessage.id);
+        if (!existsInMainArray) {
+          updatedMainArray.push(subMessage);
+        }
+      });
+
+      return {
+        ...state,
+        publicMessages: [
+          ...state.publicMessages.map((obj) =>
+            obj.channelId === channelId
+              ? { channelId: channelId, PublicMessage: [...updatedMainArray] }
+              : obj
+          )
+        ]
+      };
+    }
+
+    case ActionTypes.VERIFYMESSAGESENDING: {
+      const { channelId, data } = action;
+
+      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
+      const publicChat = publicChatObject?.PublicMessage || [];
+
+      const updatedPublicChat = publicChat.map((item) =>
+        data.some((object) => object.id === item.id && item.sent === 0)
+          ? { ...item, sent: 2 }
+          : item
+      );
+      console.log("updatedPublicChat", updatedPublicChat);
+      return {
+        ...state,
+        publicMessages: state.publicMessages.map((obj) =>
+          obj.channelId === channelId ? { channelId, PublicMessage: updatedPublicChat } : obj
+        )
+      };
+    }
+
     default:
       return state;
   }
@@ -162,6 +215,16 @@ export const UpdateChannels = (data: ChannelUpdate[]) => (dispatch: Dispatch) =>
   dispatch(UpdateChannelsAct(data));
 };
 
+export const replacePublicMessage =
+  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
+    dispatch(replacePublicMessagesAct(channelId, data));
+  };
+
+export const verifyMessageSending =
+  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
+    dispatch(verifyMessageSendingAct(channelId, data));
+  };
+
 /* Action Creators */
 
 export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
@@ -190,6 +253,17 @@ export const addPublicMessagesAct = (
   };
 };
 
+export const replacePublicMessagesAct = (
+  channelId: string,
+  data: PublicMessage[]
+): ReplacePublicMessagesAction => {
+  return {
+    type: ActionTypes.REPLACEPUBLICMESSAGE,
+    channelId,
+    data
+  };
+};
+
 export const resetChatAct = (): ResetChatAction => {
   return {
     type: ActionTypes.RESET
@@ -223,3 +297,14 @@ export const UpdateChannelsAct = (data: ChannelUpdate[]): UpdateChannelAction =>
     data
   };
 };
+
+export const verifyMessageSendingAct = (
+  channelId: string,
+  data: PublicMessage[]
+): VerifySendingMessageAction => {
+  return {
+    type: ActionTypes.VERIFYMESSAGESENDING,
+    channelId,
+    data
+  };
+};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 3b795570922..04ed357ce67 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -39,7 +39,9 @@ export enum ActionTypes {
   PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
   PROFILES = "@chat/PROFILES",
   LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST",
-  UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL"
+  UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL",
+  REPLACEPUBLICMESSAGE = "@chat/REPLACEPUBLICMESSAGE",
+  VERIFYMESSAGESENDING = "@chat/VERIFYMESSAGESENDING"
 }
 
 export interface DirectContactsAction {
@@ -82,6 +84,18 @@ export interface UpdateChannelAction {
   data: ChannelUpdate[];
 }
 
+export interface ReplacePublicMessagesAction {
+  type: ActionTypes.REPLACEPUBLICMESSAGE;
+  data: PublicMessage[];
+  channelId: string;
+}
+
+export interface VerifySendingMessageAction {
+  type: ActionTypes.VERIFYMESSAGESENDING;
+  data: PublicMessage[];
+  channelId: string;
+}
+
 export type Actions =
   | DirectContactsAction
   | DirectMessagesAction
@@ -90,4 +104,6 @@ export type Actions =
   | PublicMessagesAction
   | ProfilesAction
   | LeftChannelsAction
-  | UpdateChannelAction;
+  | UpdateChannelAction
+  | ReplacePublicMessagesAction
+  | VerifySendingMessageAction;
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index 9ed1b199a02..509fde38dae 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -43,6 +43,7 @@ export type PublicMessage = {
   created: number;
   children?: PublicMessage[];
   mentions: string[];
+  sent?: number;
 };
 
 export type DirectMessage = {
@@ -54,6 +55,7 @@ export type DirectMessage = {
   created: number;
   children?: DirectMessage[];
   decrypted: boolean;
+  sent?: number;
 };
 
 export type Message = PublicMessage | DirectMessage;
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 8b6e082bdd9..b147060b650 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -14,7 +14,6 @@ import {
 
 import { initMessageService, MessageEvents } from "../common/helper/message-service";
 import { getProfileMetaData, NostrKeysType, getPrivateKey } from "../common/helper/chat-utils";
-import * as ls from "../common/util/local-storage";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
 
@@ -36,6 +35,8 @@ interface Props {
   addProfile: (data: Profile[]) => void;
   addleftChannels: (data: string[]) => void;
   UpdateChannels: (data: ChannelUpdate[]) => void;
+  replacePublicMessage: (channelId: string, data?: PublicMessage[]) => void;
+  verifyMessageSending: (channelId: string, data?: PublicMessage[]) => void;
 }
 
 const MessageProvider = (props: Props) => {
@@ -46,6 +47,18 @@ const MessageProvider = (props: Props) => {
   const [messageService, setMessageService] = useState<any>();
   const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
   const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
+  const [isCommunityCreated, setIsCommunityCreated] = useState(false);
+  const [replacedMessagesBuffer, setReplacedMessagesBuffer] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (chat.channels.length !== 0) {
+      setIsCommunityCreated(true);
+    }
+  }, [chat.channels]);
+
+  useEffect(() => {
+    // console.log("replacedMessagesBuffer", replacedMessagesBuffer);
+  }, [replacedMessagesBuffer]);
 
   useEffect(() => {
     window.addEventListener("createMSInstance", createMSInstance);
@@ -55,6 +68,10 @@ const MessageProvider = (props: Props) => {
     };
   }, []);
 
+  useEffect(() => {
+    // console.log("publicMessageBuffer", publicMessageBuffer);
+  }, [publicMessageBuffer]);
+
   useEffect(() => {
     if (!window.messageService && keys?.priv) {
       // console.log(keys, "keys")
@@ -241,10 +258,60 @@ const MessageProvider = (props: Props) => {
     };
   }, [messageService]);
 
-  //Public Message handler
-  const handlePublicMessage = (data: PublicMessage[]) => {
-    // console.log("handlePublicMessage", data);
-    setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer!, ...data]);
+  const checkMessageSending = (channelId: string, data: PublicMessage[]) => {
+    setTimeout(() => {
+      props.verifyMessageSending(channelId, data);
+    }, 20000);
+  };
+
+  //public message handle before sent
+
+  const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
+    console.log("handlePublicMessageBeeforeSent", data);
+    data.map((m) => {
+      const { id, root } = m;
+      setReplacedMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+      props.addPublicMessage(root, [m]);
+      checkMessageSending(root, [m]);
+    });
+  };
+
+  useEffect(() => {
+    messageService?.removeListener(
+      MessageEvents.PublicMessageBeforeSent,
+      handlePublicMessageBeforeSent
+    );
+    messageService?.addListener(
+      MessageEvents.PublicMessageBeforeSent,
+      handlePublicMessageBeforeSent
+    );
+
+    return () => {
+      messageService?.removeListener(
+        MessageEvents.PublicMessageBeforeSent,
+        handlePublicMessageBeforeSent
+      );
+    };
+  }, [messageService, chat.profiles, chat.publicMessages]);
+
+  //Public Message handler after sent
+  const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
+    console.log("handlePublicMessageAfterSent", data, chat);
+    if (isCommunityCreated) {
+      data.forEach((message) => {
+        const { root, id } = message;
+        if (replacedMessagesBuffer.includes(id)) {
+          setReplacedMessagesBuffer((prevBuffer) =>
+            prevBuffer.filter((messageId) => messageId !== id)
+          );
+          props.replacePublicMessage(root, [message]);
+        } else {
+          props.addPublicMessage(root, [message]);
+        }
+      });
+    } else {
+      setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
+    }
 
     for (const item of data) {
       const isCreatorMatch = chat.profiles.some((profile) => profile.creator === item.creator);
@@ -262,16 +329,22 @@ const MessageProvider = (props: Props) => {
   };
 
   useEffect(() => {
-    messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
-    messageService?.addListener(MessageEvents.PublicMessage, handlePublicMessage);
+    messageService?.removeListener(
+      MessageEvents.PublicMessageAfterSent,
+      handlePublicMessageAfterSent
+    );
+    messageService?.addListener(MessageEvents.PublicMessageAfterSent, handlePublicMessageAfterSent);
 
     return () => {
-      messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
+      messageService?.removeListener(
+        MessageEvents.PublicMessageAfterSent,
+        handlePublicMessageAfterSent
+      );
     };
   }, [messageService, chat.profiles, chat.publicMessages]);
 
   useEffect(() => {
-    if (chat.channels.length !== 0) {
+    if (chat.channels.length !== 0 && publicMessageBuffer.length !== 0) {
       setPublicMessages();
     }
   }, [chat.publicMessages, publicMessageBuffer]);
@@ -283,25 +356,10 @@ const MessageProvider = (props: Props) => {
         (stateItem) => stateItem.channelId === root
       );
       if (matchingStateItem) {
-        if (matchingStateItem.PublicMessage.length === 0) {
-          props.addPublicMessage(root, [obj]);
-          setPublicMessageBuffer((prevMessageBuffer) =>
-            prevMessageBuffer.filter((message) => message.id !== obj.id)
-          );
-        } else {
-          let itemExists = false;
-          matchingStateItem.PublicMessage.forEach((item) => {
-            if (item.id === obj.id) {
-              itemExists = true;
-            }
-          });
-          if (!itemExists) {
-            props.addPublicMessage(root, [obj]);
-            setPublicMessageBuffer((prevMessageBuffer) =>
-              prevMessageBuffer.filter((message) => message.id !== obj.id)
-            );
-          }
-        }
+        props.addPublicMessage(root, [obj]);
+        setPublicMessageBuffer((prevMessageBuffer) =>
+          prevMessageBuffer.filter((message) => message.id !== obj.id)
+        );
       }
     });
   };
@@ -330,7 +388,14 @@ const MessageProvider = (props: Props) => {
       messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
       messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
       messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
-      messageService?.removeListener(MessageEvents.PublicMessage, handlePublicMessage);
+      messageService?.removeListener(
+        MessageEvents.PublicMessageBeforeSent,
+        handlePublicMessageBeforeSent
+      );
+      messageService?.removeListener(
+        MessageEvents.PublicMessageAfterSent,
+        handlePublicMessageAfterSent
+      );
       messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
     };
   }, [messageService]);

From b6c5f3334dcdd0be3024a5d7163777b0c09b0a48 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 10 Aug 2023 12:50:17 +0500
Subject: [PATCH 031/179] add resend functionality and also add the previous
 messages handler for public chat

---
 .../components/chat-box/chat-constants.ts     |   1 +
 src/common/components/chat-box/index.scss     |  36 ++-
 src/common/components/chat-box/index.tsx      | 200 ++++++------
 src/common/helper/message-service.ts          | 147 ++++++---
 src/common/img/svg.tsx                        |  12 +
 src/common/store/actions.ts                   |  14 +-
 src/common/store/chat/index.ts                | 304 ++++++++++++++----
 src/common/store/chat/types.ts                |  60 +++-
 src/providers/message-provider-types.ts       |   4 +
 src/providers/message-provider.tsx            | 190 ++++++++---
 10 files changed, 705 insertions(+), 263 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index f947ea75c46..f70fbf93bff 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -37,3 +37,4 @@ export const LEAVECOMMUNITY = "leaveCommunity";
 export const UNBLOCKUSER = "unblockUser";
 export const NEWCHATACCOUNT = "newChatAccount";
 export const CHATIMPORT = "chatImport";
+export const RESENDMESSAGE = "resendMessage";
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 9008afe51ed..9aa7a44914e 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -482,7 +482,36 @@
 
           display: flex;
           justify-content: flex-end;
-          margin-right: 15px;
+          margin-right: 17px;
+
+          .resend-svg {
+            margin: 5px 15px 0 0;
+            cursor: pointer;
+            svg {
+              @include themify(day) {
+                fill: $light-black;
+              }
+              @include themify(night) {
+                fill: $white;
+              }
+            }
+          }
+
+          .failed-svg {
+            margin: 8px 0 0 5px;
+            svg {
+              width: 16px;
+              height: 16px;
+              fill: $red !important;
+            }
+          }
+
+          &.sending {
+            margin-right: 5px;
+          }
+          &.failed {
+            margin-right: 7px;
+          }
 
           .sender-message-content {
             border-radius: 10px 10px 0px;
@@ -522,14 +551,15 @@
         }
       }
       .hide-msg {
-        margin-left: 6px;
-        margin-top: 22px;
+        margin-right: 15px;
+        margin-top: 5px;
         svg {
           height: 14px;
           width: 14px;
         }
         .hide-msg-svg {
           cursor: pointer;
+          margin-bottom: 0;
         }
       }
     }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 43da0b8e0a3..da68d889903 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -62,7 +62,8 @@ import {
   syncSvg,
   hideSvg,
   removeUserSvg,
-  alertCircleSvg
+  resendMessageSvg,
+  failedMessageSvg
 } from "../../img/svg";
 
 import {
@@ -79,7 +80,8 @@ import {
   LEAVECOMMUNITY,
   UNBLOCKUSER,
   NEWCHATACCOUNT,
-  CHATIMPORT
+  CHATIMPORT,
+  RESENDMESSAGE
 } from "./chat-constants";
 
 import { getPublicKey } from "../../../lib/nostr-tools/keys";
@@ -128,6 +130,8 @@ interface Props {
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
+  deletePublicMessage: (channelId: string, msgId: string) => void;
+  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -142,7 +146,7 @@ export default function ChatBox(props: Props) {
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
   const [message, setMessage] = useState("");
-  const [dMMessage, setDMMessage] = useState("");
+  const [dmMessage, setDmMessage] = useState("");
   const [isMessageText, setIsMessageText] = useState(false);
   const [profileData, setProfileData] = useState<profileData>();
   const [isScrollToTop, setIsScrollToTop] = useState(false);
@@ -184,10 +188,11 @@ export default function ChatBox(props: Props) {
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
+  const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
 
   useEffect(() => {
-    console.log("isTop", isTop);
-  }, [isTop]);
+    console.log("publicMessages", publicMessages);
+  }, [publicMessages]);
 
   useEffect(() => {
     // console.log(currentChannel, "currentChannel");
@@ -204,7 +209,7 @@ export default function ChatBox(props: Props) {
       );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
-      console.log("community messages", messages);
+      // console.log("community messages", messages);
       const channel = {
         name: updated.name,
         about: updated.about,
@@ -222,10 +227,10 @@ export default function ChatBox(props: Props) {
   }, [props.chat.updatedChannel]);
 
   useEffect(() => {
-    console.log("isTop", isTop);
+    // console.log("isTop", isTop);
     if (isTop) {
       fetchPrevMessages();
-      console.log("event is dispatched");
+      // console.log("event is dispatched");
     }
   }, [isTop]);
 
@@ -285,10 +290,16 @@ export default function ChatBox(props: Props) {
   }, []);
 
   // useEffect(() => {
+  //   console.log("Use effect run");
   //   if (window.messageService) {
   //     setHasUserJoinedChat(true);
-  //     setInProgress(false);
+  //     // setInProgress(false);
   //   }
+  //   setTimeout(() => {
+  //     if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
+  //       setInProgress(false);
+  //     }
+  //   }, 5000);
   // }, [window?.messageService]);
 
   useEffect(() => {
@@ -300,7 +311,6 @@ export default function ChatBox(props: Props) {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
-    // if(messages)
   }, [props.chat.directMessages]);
 
   useEffect(() => {
@@ -327,7 +337,6 @@ export default function ChatBox(props: Props) {
     }
 
     if (!isTop && !isScrollToTop && publicMessages.length !== 0) {
-      console.log("I want this");
       scrollerClicked();
     }
   }, [directMessagesList, publicMessages]);
@@ -338,7 +347,7 @@ export default function ChatBox(props: Props) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(currentChannel.id);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
-      console.log("community messages", messages);
+      // console.log("community messages", messages);
     }
     // scrollerClicked();
   }, [currentChannel, isCommunity, props.chat.publicMessages]);
@@ -507,7 +516,7 @@ export default function ChatBox(props: Props) {
   const fetchDirectMessages = (peer: string) => {
     for (const item of props.chat.directMessages) {
       if (item.peer === peer) {
-        return item.chat;
+        return Object.values(item.chat);
       }
     }
     return [];
@@ -517,7 +526,10 @@ export default function ChatBox(props: Props) {
     const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
     for (const item of props.chat.publicMessages) {
       if (item.channelId === channelId) {
-        return item.PublicMessage.filter((message) => !hideMessageIds.includes(message.id));
+        const filteredPublicMessages = Object.values(item.PublicMessage).filter(
+          (message) => !hideMessageIds.includes(message.id)
+        );
+        return filteredPublicMessages;
       }
     }
     return [];
@@ -591,48 +603,10 @@ export default function ChatBox(props: Props) {
     setInProgress(true);
     window.messageService
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
-      .then((events) => {
-        console.log("events in chatbox", events);
-
-        const newMessages = events
-          .map((ev) => {
-            const eTags = ev.tags.filter(([t]) => t === "e");
-            const root = eTags.find((x) => x[3] === "root")?.[1];
-            const mentions = ev.tags
-              .filter(([t]) => t === "p")
-              .map((x) => x?.[1])
-              .filter(notEmpty);
-
-            if (!root) return null;
-
-            return ev.content
-              ? {
-                  id: ev.id,
-                  root,
-                  content: ev.content,
-                  creator: ev.pubkey,
-                  mentions,
-                  created: ev.created_at,
-                  sent: 1
-                }
-              : null;
-          })
-          .filter(notEmpty);
-
-        const filteredNewMessages = newMessages.filter((newMsg) => {
-          return !publicMessages.some((pubMsg) => pubMsg.id === newMsg.id);
-        });
-
-        const messages = filteredNewMessages.sort((a, b) => a.created - b.created);
-
-        setPublicMessages((prevMessages) => [...messages, ...prevMessages]);
-
-        setInProgress(false);
-        console.log("num", events.length);
-        if (events.length < 30 - 5) {
+      .then((num) => {
+        if (num < 25) {
           setHasMore(false);
         }
-        console.log("number", events.length);
       })
       .finally(() => {
         setInProgress(false);
@@ -641,11 +615,6 @@ export default function ChatBox(props: Props) {
   };
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    // if (isTop) {
-    //   console.log("Hurrah");
-    //   event.preventDefault();
-    //   return;
-    // }
     var element = event.currentTarget;
     let srollHeight: number = (element.scrollHeight / 100) * 25;
     const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
@@ -655,16 +624,14 @@ export default function ChatBox(props: Props) {
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
     const scrollerTop = element.scrollTop <= 600;
-    console.log("scrollerTop", scrollerTop);
     if (isCommunity && scrollerTop) {
       setIsTop(true);
     } else {
-      setIsTop(false); // Set isTop to false when the condition is not met
+      setIsTop(false);
     }
   };
 
   const scrollerClicked = () => {
-    console.log("scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
@@ -841,20 +808,20 @@ export default function ChatBox(props: Props) {
   };
 
   const sendDM = (name: string, pubkey: string) => {
-    if (dMMessage) {
-      window.messageService?.sendDirectMessage(pubkey, dMMessage);
+    if (dmMessage) {
+      window.messageService?.sendDirectMessage(pubkey, dmMessage);
 
       setIsCurrentUser(true);
       setCurrentUser(name);
       setIsCommunity(false);
       setCommunityName("");
       setClickedMessage("");
-      setDMMessage("");
+      setDmMessage("");
     }
   };
 
   const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    setDMMessage(e.target.value);
+    setDmMessage(e.target.value);
   };
 
   const handleImageClick = (msgId: string, pubkey: string) => {
@@ -923,6 +890,20 @@ export default function ChatBox(props: Props) {
     }
   };
 
+  const handleResendMessage = () => {
+    setKeyDialog(false);
+    setStep(0);
+    if (resendMessage) {
+      if (currentChannel) {
+        props.deletePublicMessage(currentChannel.id, resendMessage.id);
+        window?.messageService?.sendPublicMessage(currentChannel!, resendMessage.content, [], "");
+      } else if (isCurrentUser && receiverPubKey) {
+        props.deleteDirectMessage(receiverPubKey, resendMessage.id);
+        window.messageService?.sendDirectMessage(receiverPubKey, resendMessage.content);
+      }
+    }
+  };
+
   const handleConfirmButton = (actionType: string) => {
     switch (actionType) {
       case HIDEMESSAGE:
@@ -955,9 +936,10 @@ export default function ChatBox(props: Props) {
           })
           .catch((err) => {
             error(err);
-            console.error("Error:", error);
           });
-
+        break;
+      case RESENDMESSAGE:
+        handleResendMessage();
         break;
       default:
         break;
@@ -1326,13 +1308,11 @@ export default function ChatBox(props: Props) {
           (item) => item !== removedUserId
         );
         updatedMetaData.removedUserIds = NewUpdatedRemovedUsers;
-        // console.log("NewUpdatedRemovedUsers", NewUpdatedRemovedUsers);
         break;
       default:
         break;
     }
 
-    // console.log(updatedMetaData, "updatedMetaData");
     try {
       window.messageService?.updateChannel(currentChannel!, updatedMetaData);
       setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
@@ -1345,7 +1325,6 @@ export default function ChatBox(props: Props) {
       if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
         setStep(0);
         setKeyDialog(false);
-        // fetchCommunityMessages(currentChannel?.id!);
         setRemovedUserID("");
       }
     } catch (err) {
@@ -1662,13 +1641,41 @@ export default function ChatBox(props: Props) {
                                     <p className="sender-message-time">
                                       {formatMessageTime(msg.created)}
                                     </p>
-                                    <div className="sender-message">
+                                    <div
+                                      className={`sender-message ${
+                                        msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
+                                      }`}
+                                    >
+                                      {msg.sent === 2 && (
+                                        <Tooltip content={"Resend"}>
+                                          <span
+                                            className="resend-svg"
+                                            onClick={() => {
+                                              setKeyDialog(true);
+                                              setStep(11);
+                                              setResendMessage(msg);
+                                            }}
+                                          >
+                                            {resendMessageSvg}
+                                          </span>
+                                        </Tooltip>
+                                      )}
                                       <div
                                         className={`sender-message-content ${isGif ? "gif" : ""} ${
                                           isImage ? "chat-image" : ""
                                         }`}
                                         dangerouslySetInnerHTML={{ __html: renderedPreview }}
                                       />
+                                      {msg.sent === 0 && (
+                                        <span style={{ margin: "10px 0 0 5px" }}>
+                                          <Spinner animation="border" variant="primary" size="sm" />
+                                        </span>
+                                      )}
+                                      {msg.sent === 2 && (
+                                        <Tooltip content={"Failed"}>
+                                          <span className="failed-svg">{failedMessageSvg}</span>
+                                        </Tooltip>
+                                      )}
                                     </div>
                                   </div>
                                 )}
@@ -1765,7 +1772,7 @@ export default function ChatBox(props: Props) {
                                       >
                                         <InputGroup className="dm-input-group">
                                           <Form.Control
-                                            value={dMMessage}
+                                            value={dmMessage}
                                             autoFocus={true}
                                             onChange={handleDMChange}
                                             required={true}
@@ -1848,13 +1855,18 @@ export default function ChatBox(props: Props) {
                                     <p className="sender-message-time">
                                       {formatMessageTime(pMsg.created)}
                                     </p>
-                                    <div className="sender-message">
+                                    <div
+                                      className={`sender-message ${
+                                        pMsg.sent === 2
+                                          ? "failed"
+                                          : pMsg.sent === 0
+                                          ? "sending"
+                                          : ""
+                                      }`}
+                                    >
                                       {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
                                         <Tooltip content={"Hide Message"}>
-                                          <div
-                                            className="hide-msg"
-                                            style={{ marginTop: 0, marginRight: "6px" }}
-                                          >
+                                          <div className="hide-msg">
                                             <p
                                               className="hide-msg-svg"
                                               onClick={() => {
@@ -1869,6 +1881,20 @@ export default function ChatBox(props: Props) {
                                           </div>
                                         </Tooltip>
                                       )}
+                                      {pMsg.sent === 2 && (
+                                        <Tooltip content={"Resend"}>
+                                          <span
+                                            className="resend-svg"
+                                            onClick={() => {
+                                              setKeyDialog(true);
+                                              setStep(11);
+                                              setResendMessage(pMsg);
+                                            }}
+                                          >
+                                            {resendMessageSvg}
+                                          </span>
+                                        </Tooltip>
+                                      )}
                                       <div
                                         className={`sender-message-content ${isGif ? "gif" : ""} ${
                                           isImage ? "chat-image" : ""
@@ -1881,21 +1907,8 @@ export default function ChatBox(props: Props) {
                                         </span>
                                       )}
                                       {pMsg.sent === 2 && (
-                                        <Tooltip content={"Sending failed"}>
-                                          <span style={{ margin: "14px 0 0 5px" }}>
-                                            {/* <Spinner animation="border" variant="danger" size="sm" /> */}
-                                            <div
-                                              className="sent-failed"
-                                              style={{
-                                                width: "10px",
-                                                height: "10px",
-                                                borderRadius: "50%",
-                                                backgroundColor: "white",
-                                                border: "2px solid red",
-                                                cursor: "pointer"
-                                              }}
-                                            />
-                                          </span>
+                                        <Tooltip content={"Failed"}>
+                                          <span className="failed-svg">{failedMessageSvg}</span>
                                         </Tooltip>
                                       )}
                                     </div>
@@ -2193,6 +2206,7 @@ export default function ChatBox(props: Props) {
             {step === 6 && confirmationModal(BLOCKUSER)}
             {step === 7 && confirmationModal(UNBLOCKUSER)}
             {step === 9 && confirmationModal(NEWCHATACCOUNT)}
+            {step === 11 && confirmationModal(RESENDMESSAGE)}
             {step === 2 && EditRolesModal()}
             {step === 3 && ImportChatModal()}
             {step === 4 && successModal(CHATIMPORT)}
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 78c6c85d283..cb44128d88f 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -37,20 +37,24 @@ export enum MessageEvents {
   LeftChannelList = "left_channel_list",
   ChannelUpdate = "channel_update",
   ChannelCreation = "channel_creation",
-  DirectMessage = "direct_message",
+  DirectMessageBeforeSent = "direct_message_before_sent",
+  DirectMessageAfterSent = "direct_message_after_sent",
   DirectContact = "direct_contact",
   PublicMessageBeforeSent = "public_message_before_sent",
-  PublicMessageAfterSent = "public_message_after_sent"
+  PublicMessageAfterSent = "public_message_after_sent",
+  PreviousPublicMessages = "previous_public_messages"
 }
 
 type EventHandlerMap = {
   [MessageEvents.Ready]: () => void;
   [MessageEvents.ProfileUpdate]: (data: Profile[]) => void;
-  [MessageEvents.DirectMessage]: (data: DirectMessage[]) => void;
+  [MessageEvents.DirectMessageBeforeSent]: (data: DirectMessage[]) => void;
+  [MessageEvents.DirectMessageAfterSent]: (data: DirectMessage[]) => void;
   [MessageEvents.ChannelCreation]: (data: Channel[]) => void;
   [MessageEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
   [MessageEvents.PublicMessageBeforeSent]: (data: PublicMessage[]) => void;
   [MessageEvents.PublicMessageAfterSent]: (data: PublicMessage[]) => void;
+  [MessageEvents.PreviousPublicMessages]: (data: PublicMessage[]) => void;
   [MessageEvents.LeftChannelList]: (data: string[]) => void;
   [MessageEvents.DirectContact]: (data: DirectContact[]) => void;
 };
@@ -174,13 +178,32 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       ],
       false
     ).then((events) => {
-      console.log("events", events);
-      return events;
-      // events.forEach((ev) => {
-      //   this.pushToEventBuffer(ev);
-      // });
-      // console.log('events ki length',events.length)
-      // return events.length;
+      if (events.length > 0) {
+        const formattedEvents = events
+          .map((ev) => {
+            const eTags = MessageService.filterTagValue(ev, "e");
+            const root = eTags.find((x) => x[3] === "root")?.[1];
+            const mentions = MessageService.filterTagValue(ev, "p")
+              .map((x) => x?.[1])
+              .filter(notEmpty);
+            if (!root) return null;
+            return ev.content
+              ? {
+                  id: ev.id,
+                  root,
+                  content: ev.content,
+                  creator: ev.pubkey,
+                  mentions,
+                  created: ev.created_at,
+                  sent: 1
+                }
+              : null;
+          })
+          .filter(notEmpty);
+        this.emit(MessageEvents.PreviousPublicMessages, formattedEvents);
+      }
+
+      return events.length;
     });
   }
 
@@ -302,7 +325,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadProfiles(pubs: string[]) {
-    // console.log("lod profiles");
+    // console.log("load profiles");
     pubs.forEach((p) => {
       this.fetch(
         [
@@ -440,6 +463,72 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     });
   }
 
+  public emitPublicMessageBeforeSent(event: Event) {
+    let publiMessagesEventArray = [];
+
+    const eTags = MessageService.filterTagValue(event, "e");
+    const root = eTags.find((x) => x[3] === "root")?.[1];
+    const mentions = MessageService.filterTagValue(event, "p")
+      .map((x) => x?.[1])
+      .filter(notEmpty);
+    const formattedEvent = event.content
+      ? {
+          id: event.id,
+          root,
+          content: event.content,
+          creator: event.pubkey,
+          mentions,
+          created: event.created_at,
+          sent: 0
+        }
+      : null;
+    publiMessagesEventArray.push(formattedEvent);
+    const filteredEventArray = publiMessagesEventArray.filter(
+      (item) => item !== null
+    ) as PublicMessage[];
+    this.emit(MessageEvents.PublicMessageBeforeSent, filteredEventArray);
+  }
+
+  public async emitDirectMessageBeforeSent(event: Event) {
+    const eventArray = [];
+    const receiver = MessageService.findTagValue(event, "p");
+
+    if (!receiver) {
+      return;
+    }
+
+    const eTags = MessageService.filterTagValue(event, "e");
+    const root = eTags.find((x) => x[3] === "root")?.[1];
+
+    const peer = receiver === this.pub ? event.pubkey : receiver;
+    const msg = {
+      id: event.id,
+      root,
+      content: event.content,
+      peer,
+      creator: event.pubkey,
+      created: event.created_at,
+      decrypted: false,
+      sent: 0
+    };
+    if (this.priv === "nip07") {
+      eventArray.push(msg);
+    }
+
+    try {
+      const content = await decrypt(this.priv, peer, event.content);
+      const decrypted = {
+        ...msg,
+        content,
+        decrypted: true
+      };
+      eventArray.push(decrypted);
+    } catch (error) {
+      console.error("Error decrypting:", error);
+    }
+    this.emit(MessageEvents.DirectMessageBeforeSent, eventArray);
+  }
+
   private async findHealthyRelay(relays: string[]) {
     for (const relay of relays) {
       try {
@@ -483,7 +572,10 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     return this.publish(Kind.ChannelMessage, tags, message);
   }
 
+  public resendMessage(kind: number, tags: Array<any>[], content: string) {}
+
   private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
+    console.log("kind", kind, "tags", tags, "content", content);
     return new Promise((resolve, reject) => {
       this.signEvent({
         kind,
@@ -496,37 +588,14 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
         .then((event) => {
           if (!event) {
-            // console.log("Event not found");
             reject("Couldn't sign event!");
             return;
           }
           if (event.kind === Kind.ChannelMessage) {
-            let eventArray = [];
-
-            const eTags = MessageService.filterTagValue(event, "e");
-            const root = eTags.find((x) => x[3] === "root")?.[1];
-            const mentions = MessageService.filterTagValue(event, "p")
-              .map((x) => x?.[1])
-              .filter(notEmpty);
-            const formattedEvent = event.content
-              ? {
-                  id: event.id,
-                  root,
-                  content: event.content,
-                  creator: event.pubkey,
-                  mentions,
-                  created: event.created_at,
-                  sent: 0
-                }
-              : null;
-            // console.log("mery mtlb ka event", event);
-            eventArray.push(formattedEvent);
-            const filteredEventArray = eventArray.filter(
-              (item) => item !== null
-            ) as PublicMessage[];
-            this.emit(MessageEvents.PublicMessageBeforeSent, filteredEventArray);
+            this.emitPublicMessageBeforeSent(event);
+          } else if (event.kind === Kind.EncryptedDirectMessage) {
+            this.emitDirectMessageBeforeSent(event);
           }
-
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
@@ -746,7 +815,9 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         })
         .filter(notEmpty)
     ).then((directMessages: DirectMessage[]) => {
-      this.emit(MessageEvents.DirectMessage, directMessages);
+      if (directMessages.length > 0) {
+        this.emit(MessageEvents.DirectMessageAfterSent, directMessages);
+      }
     });
 
     this.eventQueue = [];
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 6ba12684e14..79f1e1b852b 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2151,3 +2151,15 @@ export const removeUserSvg = (
     <line x1="23" y1="8" x2="18" y2="13" />
   </svg>
 );
+
+export const resendMessageSvg = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+    <path d="M19.0003 10.0003L19.0004 19.0002L17.0004 19.0002L17.0003 12.0003L6.82845 12.0002L10.7782 15.9499L9.36396 17.3642L3 11.0002L9.36396 4.63623L10.7782 6.05044L6.8284 10.0002L19.0003 10.0003Z" />
+  </svg>
+);
+
+export const failedMessageSvg = (
+  <svg viewBox="0 0 24 24">
+    <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+  </svg>
+);
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index 66d26fe90f5..972e04a5886 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -51,7 +51,12 @@ import {
   addleftChannels,
   UpdateChannels,
   replacePublicMessage,
-  verifyMessageSending
+  verifyPublicMessageSending,
+  replaceDirectMessage,
+  verifyDirectMessageSending,
+  deletePublicMessage,
+  deleteDirectMessage,
+  addPreviousPublicMessages
 } from "./chat";
 
 // @note Do not use it directly
@@ -111,7 +116,12 @@ export const ACTIONS = {
   addleftChannels,
   UpdateChannels,
   replacePublicMessage,
-  verifyMessageSending
+  verifyPublicMessageSending,
+  replaceDirectMessage,
+  verifyDirectMessageSending,
+  deletePublicMessage,
+  deleteDirectMessage,
+  addPreviousPublicMessages
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 4913987211c..5f1c195e302 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -3,7 +3,8 @@ import {
   DirectMessage,
   PublicMessage,
   Profile,
-  ChannelUpdate
+  ChannelUpdate,
+  MessagesObject
 } from "./../../../providers/message-provider-types";
 import { Dispatch } from "redux";
 
@@ -15,14 +16,18 @@ import {
   DirectContactsType,
   DirectMessagesAction,
   ResetChatAction,
-  directMessagesList,
   AddChannelsAction,
   PublicMessagesAction,
   ProfilesAction,
   LeftChannelsAction,
   UpdateChannelAction,
   ReplacePublicMessagesAction,
-  VerifySendingMessageAction
+  VerifyPublicMessageSendingAction,
+  ReplaceDirectMessagesAction,
+  VerifyDirectMessageSendingAction,
+  DeletePublicMessagesAction,
+  DeleteDirectMessagesAction,
+  AddPreviousPublicMessagesAction
 } from "./types";
 
 export const initialState: Chat = {
@@ -50,7 +55,7 @@ export default (state: Chat = initialState, action: Actions): Chat => {
         directContacts: [...state.directContacts, ...uniqueDirectContacts],
         directMessages: [
           ...state.directMessages,
-          ...uniqueDirectContacts.map((contact) => ({ chat: [], peer: contact.pubkey }))
+          ...uniqueDirectContacts.map((contact) => ({ chat: {}, peer: contact.pubkey }))
         ]
       };
     }
@@ -58,11 +63,11 @@ export default (state: Chat = initialState, action: Actions): Chat => {
       const { peer, data } = action;
       return {
         ...state,
-        directMessages: [
-          ...state.directMessages.map((contact) =>
-            contact.peer === peer ? { peer: peer, chat: [...contact.chat, ...data] } : contact
-          )
-        ]
+        directMessages: state.directMessages.map((contact) =>
+          contact.peer === peer
+            ? { peer: peer, chat: { ...contact.chat, [data.id]: data } }
+            : contact
+        )
       };
     }
 
@@ -72,13 +77,15 @@ export default (state: Chat = initialState, action: Actions): Chat => {
     case ActionTypes.CHANNELS: {
       const { data } = action;
 
+      const defaultPublicMessages = data.map((channel) => ({
+        channelId: channel.id,
+        PublicMessage: {}
+      }));
+
       return {
         ...state,
         channels: [...state.channels, ...data],
-        publicMessages: [
-          ...state.publicMessages,
-          ...data.map((channel) => ({ channelId: channel.id, PublicMessage: [] }))
-        ]
+        publicMessages: [...state.publicMessages, ...defaultPublicMessages]
       };
     }
 
@@ -87,13 +94,17 @@ export default (state: Chat = initialState, action: Actions): Chat => {
 
       return {
         ...state,
-        publicMessages: [
-          ...state.publicMessages.map((obj) =>
-            obj.channelId === channelId
-              ? { channelId: channelId, PublicMessage: [...obj.PublicMessage, ...data] }
-              : obj
-          )
-        ]
+        publicMessages: state.publicMessages.map((obj) =>
+          obj.channelId === channelId
+            ? {
+                channelId: channelId,
+                PublicMessage: {
+                  ...obj.PublicMessage,
+                  [data.id]: data // Add the new message object with its ID as the key
+                }
+              }
+            : obj
+        )
       };
     }
 
@@ -129,49 +140,134 @@ export default (state: Chat = initialState, action: Actions): Chat => {
     case ActionTypes.REPLACEPUBLICMESSAGE: {
       const { channelId, data } = action;
       const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage!;
-
-      const updatedMainArray = publicChat?.map((message) => {
-        const matchingMessage = data.find((subMessage) => subMessage.id === message.id);
-        return matchingMessage ? matchingMessage : message;
-      });
+      const publicChat = publicChatObject?.PublicMessage || {};
 
-      // Add new messages from subArray that do not exist in the mainArray
-      data.forEach((subMessage) => {
-        const existsInMainArray = publicChat.some((message) => message.id === subMessage.id);
-        if (!existsInMainArray) {
-          updatedMainArray.push(subMessage);
-        }
-      });
+      if (publicChat.hasOwnProperty(data.id)) {
+        publicChat[data.id] = data;
+      } else {
+        publicChat[data.id] = data;
+      }
 
       return {
         ...state,
         publicMessages: [
           ...state.publicMessages.map((obj) =>
             obj.channelId === channelId
-              ? { channelId: channelId, PublicMessage: [...updatedMainArray] }
+              ? { channelId: channelId, PublicMessage: { ...publicChat } }
               : obj
           )
         ]
       };
     }
 
-    case ActionTypes.VERIFYMESSAGESENDING: {
+    case ActionTypes.VERIFYPUBLICMESSAGESENDING: {
+      const { channelId, data } = action;
+
+      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
+      const publicChat = publicChatObject?.PublicMessage || {};
+
+      if (publicChat.hasOwnProperty(data.id)) {
+        if (publicChat[data.id].sent === 0) {
+          publicChat[data.id].sent = 2;
+        }
+      }
+      return {
+        ...state,
+        publicMessages: state.publicMessages.map((obj) =>
+          obj.channelId === channelId ? { channelId, PublicMessage: { ...publicChat } } : obj
+        )
+      };
+    }
+
+    case ActionTypes.REPLACEDIRECTMESSAGE: {
+      const { peer, data } = action;
+      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
+      const directMessages = directMessagesObject?.chat || {};
+
+      if (directMessages.hasOwnProperty(data.id)) {
+        directMessages[data.id] = data;
+      } else {
+        directMessages[data.id] = data;
+      }
+
+      return {
+        ...state,
+        directMessages: [
+          ...state.directMessages.map((obj) =>
+            obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
+          )
+        ]
+      };
+    }
+
+    case ActionTypes.VERIFYDIRECTMESSAGESENDING: {
+      const { peer, data } = action;
+
+      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
+      const directMessages = directMessagesObject?.chat || {};
+
+      if (directMessages.hasOwnProperty(data.id)) {
+        if (directMessages[data.id].sent === 0) {
+          directMessages[data.id].sent = 2;
+        }
+      }
+      return {
+        ...state,
+        directMessages: state.directMessages.map((obj) =>
+          obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
+        )
+      };
+    }
+
+    case ActionTypes.DELETEPUBLICMESSAGE: {
+      const { channelId, msgId } = action;
+
+      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
+      const publicChat = publicChatObject?.PublicMessage || {};
+
+      if (publicChat[msgId]) {
+        delete publicChat[msgId];
+      }
+      return {
+        ...state,
+        publicMessages: state.publicMessages.map((obj) =>
+          obj.channelId === channelId ? { channelId, PublicMessage: { ...publicChat } } : obj
+        )
+      };
+    }
+
+    case ActionTypes.DELETEDIRECTMESSAGE: {
+      const { peer, msgId } = action;
+
+      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
+      const directMessages = directMessagesObject?.chat || {};
+
+      if (directMessages[msgId]) {
+        delete directMessages[msgId];
+      }
+
+      return {
+        ...state,
+        directMessages: [
+          ...state.directMessages.map((obj) =>
+            obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
+          )
+        ]
+      };
+    }
+
+    case ActionTypes.ADDPREVIOUSPUBLICMESSAGES: {
       const { channelId, data } = action;
 
       const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage || [];
-
-      const updatedPublicChat = publicChat.map((item) =>
-        data.some((object) => object.id === item.id && item.sent === 0)
-          ? { ...item, sent: 2 }
-          : item
-      );
-      console.log("updatedPublicChat", updatedPublicChat);
+      const publicChat = publicChatObject?.PublicMessage || {};
+
       return {
         ...state,
         publicMessages: state.publicMessages.map((obj) =>
-          obj.channelId === channelId ? { channelId, PublicMessage: updatedPublicChat } : obj
+          obj.channelId === channelId
+            ? { channelId, PublicMessage: { ...data, ...publicChat } }
+            : obj
         )
       };
     }
@@ -186,7 +282,7 @@ export const addDirectContacts = (data: DirectContactsType[]) => (dispatch: Disp
   dispatch(addDirectContactsAct(data));
 };
 
-export const addDirectMessages = (peer: string, data: DirectMessage[]) => (dispatch: Dispatch) => {
+export const addDirectMessages = (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
   dispatch(addDirectMessagesAct(peer, data));
 };
 
@@ -199,7 +295,7 @@ export const addChannels = (data: Channel[]) => (dispatch: Dispatch) => {
 };
 
 export const addPublicMessage =
-  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
+  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
     dispatch(addPublicMessagesAct(channelId, data));
   };
 
@@ -216,13 +312,35 @@ export const UpdateChannels = (data: ChannelUpdate[]) => (dispatch: Dispatch) =>
 };
 
 export const replacePublicMessage =
-  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
+  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
     dispatch(replacePublicMessagesAct(channelId, data));
   };
 
-export const verifyMessageSending =
-  (channelId: string, data: PublicMessage[]) => (dispatch: Dispatch) => {
-    dispatch(verifyMessageSendingAct(channelId, data));
+export const verifyPublicMessageSending =
+  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
+    dispatch(verifyPublicMessageSendingAct(channelId, data));
+  };
+
+export const replaceDirectMessage = (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
+  dispatch(replaceDirectMessagesAct(peer, data));
+};
+
+export const verifyDirectMessageSending =
+  (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
+    dispatch(verifyDirectMessageSendingAct(peer, data));
+  };
+
+export const deletePublicMessage = (channelId: string, msgId: string) => (dispatch: Dispatch) => {
+  dispatch(deletePublicMessageAct(channelId, msgId));
+};
+
+export const deleteDirectMessage = (peer: string, msgId: string) => (dispatch: Dispatch) => {
+  dispatch(deleteDirectMessageAct(peer, msgId));
+};
+
+export const addPreviousPublicMessages =
+  (channelId: string, data: MessagesObject) => (dispatch: Dispatch) => {
+    dispatch(addPreviousPublicMessagesAct(channelId, data));
   };
 
 /* Action Creators */
@@ -234,7 +352,7 @@ export const addDirectContactsAct = (data: DirectContactsType[]): DirectContacts
   };
 };
 
-export const addDirectMessagesAct = (peer: string, data: DirectMessage[]): DirectMessagesAction => {
+export const addDirectMessagesAct = (peer: string, data: DirectMessage): DirectMessagesAction => {
   return {
     type: ActionTypes.DIRECTMESSAGES,
     peer,
@@ -244,7 +362,7 @@ export const addDirectMessagesAct = (peer: string, data: DirectMessage[]): Direc
 
 export const addPublicMessagesAct = (
   channelId: string,
-  data: PublicMessage[]
+  data: PublicMessage
 ): PublicMessagesAction => {
   return {
     type: ActionTypes.PUBLICMESSAGES,
@@ -253,17 +371,6 @@ export const addPublicMessagesAct = (
   };
 };
 
-export const replacePublicMessagesAct = (
-  channelId: string,
-  data: PublicMessage[]
-): ReplacePublicMessagesAction => {
-  return {
-    type: ActionTypes.REPLACEPUBLICMESSAGE,
-    channelId,
-    data
-  };
-};
-
 export const resetChatAct = (): ResetChatAction => {
   return {
     type: ActionTypes.RESET
@@ -298,12 +405,75 @@ export const UpdateChannelsAct = (data: ChannelUpdate[]): UpdateChannelAction =>
   };
 };
 
-export const verifyMessageSendingAct = (
+export const replacePublicMessagesAct = (
+  channelId: string,
+  data: PublicMessage
+): ReplacePublicMessagesAction => {
+  return {
+    type: ActionTypes.REPLACEPUBLICMESSAGE,
+    channelId,
+    data
+  };
+};
+
+export const verifyPublicMessageSendingAct = (
+  channelId: string,
+  data: PublicMessage
+): VerifyPublicMessageSendingAction => {
+  return {
+    type: ActionTypes.VERIFYPUBLICMESSAGESENDING,
+    channelId,
+    data
+  };
+};
+
+export const replaceDirectMessagesAct = (
+  peer: string,
+  data: DirectMessage
+): ReplaceDirectMessagesAction => {
+  return {
+    type: ActionTypes.REPLACEDIRECTMESSAGE,
+    peer,
+    data
+  };
+};
+
+export const verifyDirectMessageSendingAct = (
+  peer: string,
+  data: DirectMessage
+): VerifyDirectMessageSendingAction => {
+  return {
+    type: ActionTypes.VERIFYDIRECTMESSAGESENDING,
+    peer,
+    data
+  };
+};
+
+export const deletePublicMessageAct = (
+  channelId: string,
+  msgId: string
+): DeletePublicMessagesAction => {
+  return {
+    type: ActionTypes.DELETEPUBLICMESSAGE,
+    channelId,
+    msgId
+  };
+};
+
+export const deleteDirectMessageAct = (peer: string, msgId: string): DeleteDirectMessagesAction => {
+  return {
+    type: ActionTypes.DELETEDIRECTMESSAGE,
+    peer,
+    msgId
+  };
+};
+
+export const addPreviousPublicMessagesAct = (
   channelId: string,
-  data: PublicMessage[]
-): VerifySendingMessageAction => {
+  data: MessagesObject
+): AddPreviousPublicMessagesAction => {
   return {
-    type: ActionTypes.VERIFYMESSAGESENDING,
+    type: ActionTypes.ADDPREVIOUSPUBLICMESSAGES,
     channelId,
     data
   };
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 04ed357ce67..f2cda78d603 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -2,6 +2,7 @@ import {
   Channel,
   ChannelUpdate,
   DirectMessage,
+  MessagesObject,
   Profile,
   PublicMessage
 } from "./../../../providers/message-provider-types";
@@ -13,12 +14,12 @@ export interface DirectContactsType {
 
 export interface directMessagesList {
   peer: string;
-  chat: DirectMessage[];
+  chat: { [messageId: string]: DirectMessage };
 }
 
 export interface publicMessagesList {
   channelId: string;
-  PublicMessage: PublicMessage[];
+  PublicMessage: { [messageId: string]: PublicMessage };
 }
 
 export interface Chat {
@@ -41,7 +42,12 @@ export enum ActionTypes {
   LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST",
   UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL",
   REPLACEPUBLICMESSAGE = "@chat/REPLACEPUBLICMESSAGE",
-  VERIFYMESSAGESENDING = "@chat/VERIFYMESSAGESENDING"
+  VERIFYPUBLICMESSAGESENDING = "@chat/VERIFYMESSAGESENDING",
+  REPLACEDIRECTMESSAGE = "@chat/REPLACEDIRECTMESSAGE",
+  VERIFYDIRECTMESSAGESENDING = "@chat/VERIFYDIRECTMESSAGESENDING",
+  DELETEPUBLICMESSAGE = "@chat/DELETEPUBLICMESSAGE",
+  DELETEDIRECTMESSAGE = "@chat/DELETEDIRECTMESSAGE",
+  ADDPREVIOUSPUBLICMESSAGES = "@chat/ADDPREVIOUSPUBLICMESSAGES"
 }
 
 export interface DirectContactsAction {
@@ -55,13 +61,13 @@ export interface ResetChatAction {
 
 export interface DirectMessagesAction {
   type: ActionTypes.DIRECTMESSAGES;
-  data: DirectMessage[];
+  data: DirectMessage;
   peer: string;
 }
 
 export interface PublicMessagesAction {
   type: ActionTypes.PUBLICMESSAGES;
-  data: PublicMessage[];
+  data: PublicMessage;
   channelId: string;
 }
 
@@ -86,14 +92,43 @@ export interface UpdateChannelAction {
 
 export interface ReplacePublicMessagesAction {
   type: ActionTypes.REPLACEPUBLICMESSAGE;
-  data: PublicMessage[];
+  data: PublicMessage;
   channelId: string;
 }
 
-export interface VerifySendingMessageAction {
-  type: ActionTypes.VERIFYMESSAGESENDING;
-  data: PublicMessage[];
+export interface ReplaceDirectMessagesAction {
+  type: ActionTypes.REPLACEDIRECTMESSAGE;
+  data: DirectMessage;
+  peer: string;
+}
+
+export interface VerifyPublicMessageSendingAction {
+  type: ActionTypes.VERIFYPUBLICMESSAGESENDING;
+  data: PublicMessage;
+  channelId: string;
+}
+
+export interface VerifyDirectMessageSendingAction {
+  type: ActionTypes.VERIFYDIRECTMESSAGESENDING;
+  data: DirectMessage;
+  peer: string;
+}
+export interface DeletePublicMessagesAction {
+  type: ActionTypes.DELETEPUBLICMESSAGE;
+  msgId: string;
+  channelId: string;
+}
+
+export interface DeleteDirectMessagesAction {
+  type: ActionTypes.DELETEDIRECTMESSAGE;
+  msgId: string;
+  peer: string;
+}
+
+export interface AddPreviousPublicMessagesAction {
+  type: ActionTypes.ADDPREVIOUSPUBLICMESSAGES;
   channelId: string;
+  data: MessagesObject;
 }
 
 export type Actions =
@@ -106,4 +141,9 @@ export type Actions =
   | LeftChannelsAction
   | UpdateChannelAction
   | ReplacePublicMessagesAction
-  | VerifySendingMessageAction;
+  | VerifyPublicMessageSendingAction
+  | ReplaceDirectMessagesAction
+  | VerifyDirectMessageSendingAction
+  | DeletePublicMessagesAction
+  | DeleteDirectMessagesAction
+  | AddPreviousPublicMessagesAction;
diff --git a/src/providers/message-provider-types.ts b/src/providers/message-provider-types.ts
index 509fde38dae..6a434f87608 100644
--- a/src/providers/message-provider-types.ts
+++ b/src/providers/message-provider-types.ts
@@ -58,6 +58,10 @@ export type DirectMessage = {
   sent?: number;
 };
 
+export type MessagesObject = {
+  [key: string]: PublicMessage;
+};
+
 export type Message = PublicMessage | DirectMessage;
 
 export type ChannelMessageHide = { id: string; reason: string };
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index b147060b650..a0b9a3dc01a 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -9,7 +9,8 @@ import {
   DirectContact,
   Channel,
   PublicMessage,
-  ChannelUpdate
+  ChannelUpdate,
+  MessagesObject
 } from "./message-provider-types";
 
 import { initMessageService, MessageEvents } from "../common/helper/message-service";
@@ -29,14 +30,17 @@ export const setNostrkeys = (keys: NostrKeysType) => {
 
 interface Props {
   addDirectContacts: (data?: DirectContactsType[]) => void;
-  addDirectMessages: (peer: string, data?: DirectMessage[]) => void;
-  addPublicMessage: (channelId: string, data?: PublicMessage[]) => void;
+  addDirectMessages: (peer: string, data?: DirectMessage) => void;
+  addPublicMessage: (channelId: string, data?: PublicMessage) => void;
   addChannels: (data: Channel[]) => void;
   addProfile: (data: Profile[]) => void;
   addleftChannels: (data: string[]) => void;
   UpdateChannels: (data: ChannelUpdate[]) => void;
-  replacePublicMessage: (channelId: string, data?: PublicMessage[]) => void;
-  verifyMessageSending: (channelId: string, data?: PublicMessage[]) => void;
+  replacePublicMessage: (channelId: string, data?: PublicMessage) => void;
+  verifyPublicMessageSending: (channelId: string, data?: PublicMessage) => void;
+  replaceDirectMessage: (peer: string, data: DirectMessage) => void;
+  verifyDirectMessageSending: (peer: string, data: DirectMessage) => void;
+  addPreviousPublicMessages: (channelId: string, data: MessagesObject) => void;
 }
 
 const MessageProvider = (props: Props) => {
@@ -48,17 +52,23 @@ const MessageProvider = (props: Props) => {
   const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
   const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
   const [isCommunityCreated, setIsCommunityCreated] = useState(false);
-  const [replacedMessagesBuffer, setReplacedMessagesBuffer] = useState<string[]>([]);
+  const [replacedPublicMessagesBuffer, setReplacedPublicMessagesBuffer] = useState<string[]>([]);
+  const [isDirectChatCreated, setIsDirectChatCreated] = useState(false);
+  const [replacedDirectMessagesBuffer, setReplacedDirectMessagesBuffer] = useState<string[]>([]);
 
   useEffect(() => {
     if (chat.channels.length !== 0) {
       setIsCommunityCreated(true);
     }
-  }, [chat.channels]);
+
+    if (chat.directMessages.length !== 0) {
+      setIsDirectChatCreated(true);
+    }
+  }, [chat.channels, chat.directMessages]);
 
   useEffect(() => {
-    // console.log("replacedMessagesBuffer", replacedMessagesBuffer);
-  }, [replacedMessagesBuffer]);
+    console.log("replacedDirectMessagesBuffer", replacedDirectMessagesBuffer);
+  }, [replacedDirectMessagesBuffer]);
 
   useEffect(() => {
     window.addEventListener("createMSInstance", createMSInstance);
@@ -100,7 +110,6 @@ const MessageProvider = (props: Props) => {
       pub: profile.noStrKey,
       priv: noStrPrivKey
     };
-    // console.log('keys', keys)
     setKeys(keys);
   };
 
@@ -177,10 +186,61 @@ const MessageProvider = (props: Props) => {
     };
   }, [messageService]);
 
-  // // Direct message handler
-  const handleDirectMessage = (data: DirectMessage[]) => {
-    setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
-    // console.log("HandleDirectMessage", data);
+  //Direct message ahandle before sent
+
+  const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
+    console.log("handleDirectMessageBeeforeSent", data);
+    data.map((m) => {
+      const { peer, id } = m;
+      setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+      props.addDirectMessages(peer, m);
+      checkDirectMessageSending(peer, m);
+    });
+  };
+
+  useEffect(() => {
+    messageService?.removeListener(
+      MessageEvents.DirectMessageBeforeSent,
+      handleDirectMessageBeforeSent
+    );
+    messageService?.addListener(
+      MessageEvents.DirectMessageBeforeSent,
+      handleDirectMessageBeforeSent
+    );
+
+    return () => {
+      messageService?.removeListener(
+        MessageEvents.DirectMessageBeforeSent,
+        handleDirectMessageBeforeSent
+      );
+    };
+  }, [messageService, chat.directMessages]);
+
+  const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
+    setTimeout(() => {
+      props.verifyDirectMessageSending(peer, data);
+    }, 20000);
+  };
+
+  // // Direct message handler after sent
+  const handleDirectMessageAfterSent = (data: DirectMessage[]) => {
+    console.log("handleDirectMessageAfterSent", data);
+    if (isDirectChatCreated) {
+      data.forEach((message) => {
+        const { peer, id } = message;
+        if (replacedDirectMessagesBuffer.includes(id)) {
+          setReplacedDirectMessagesBuffer((prevBuffer) =>
+            prevBuffer.filter((messageId) => messageId !== id)
+          );
+          console.log("I reached");
+          props.replaceDirectMessage(peer, message);
+        } else {
+          props.addDirectMessages(peer, message);
+        }
+      });
+    } else {
+      setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
+    }
     messageService?.checkProfiles(data.map((x) => x.peer));
   };
 
@@ -189,25 +249,10 @@ const MessageProvider = (props: Props) => {
       const { peer } = obj;
       const matchingStateItem = chat.directMessages.find((stateItem) => stateItem.peer === peer);
       if (matchingStateItem) {
-        if (matchingStateItem.chat.length === 0) {
-          props.addDirectMessages(peer, [obj]);
-          setDirectMessageBuffer((prevMessageBuffer) =>
-            prevMessageBuffer.filter((message) => message.id !== obj.id)
-          );
-        } else {
-          let itemExists = false;
-          matchingStateItem.chat.forEach((item) => {
-            if (item.id === obj.id) {
-              itemExists = true;
-            }
-          });
-          if (!itemExists) {
-            props.addDirectMessages(peer, [obj]);
-            setDirectMessageBuffer((prevMessageBuffer) =>
-              prevMessageBuffer.filter((message) => message.id !== obj.id)
-            );
-          }
-        }
+        props.addDirectMessages(peer, obj);
+        setDirectMessageBuffer((prevMessageBuffer) =>
+          prevMessageBuffer.filter((message) => message.id !== obj.id)
+        );
       }
     });
   };
@@ -219,12 +264,19 @@ const MessageProvider = (props: Props) => {
   }, [chat.directContacts, directMessageBuffer]);
 
   useEffect(() => {
-    messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
-    messageService?.addListener(MessageEvents.DirectMessage, handleDirectMessage);
+    messageService?.removeListener(
+      MessageEvents.DirectMessageAfterSent,
+      handleDirectMessageAfterSent
+    );
+    messageService?.addListener(MessageEvents.DirectMessageAfterSent, handleDirectMessageAfterSent);
+
     return () => {
-      messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
+      messageService?.removeListener(
+        MessageEvents.DirectMessageAfterSent,
+        handleDirectMessageAfterSent
+      );
     };
-  }, [messageService]);
+  }, [messageService, chat.directMessages]);
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
@@ -258,9 +310,9 @@ const MessageProvider = (props: Props) => {
     };
   }, [messageService]);
 
-  const checkMessageSending = (channelId: string, data: PublicMessage[]) => {
+  const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
     setTimeout(() => {
-      props.verifyMessageSending(channelId, data);
+      props.verifyPublicMessageSending(channelId, data);
     }, 20000);
   };
 
@@ -270,9 +322,9 @@ const MessageProvider = (props: Props) => {
     console.log("handlePublicMessageBeeforeSent", data);
     data.map((m) => {
       const { id, root } = m;
-      setReplacedMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-      props.addPublicMessage(root, [m]);
-      checkMessageSending(root, [m]);
+      setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+      props.addPublicMessage(root, m);
+      checkPublicMessageSending(root, m);
     });
   };
 
@@ -300,32 +352,32 @@ const MessageProvider = (props: Props) => {
     if (isCommunityCreated) {
       data.forEach((message) => {
         const { root, id } = message;
-        if (replacedMessagesBuffer.includes(id)) {
-          setReplacedMessagesBuffer((prevBuffer) =>
+        if (replacedPublicMessagesBuffer.includes(id)) {
+          setReplacedPublicMessagesBuffer((prevBuffer) =>
             prevBuffer.filter((messageId) => messageId !== id)
           );
-          props.replacePublicMessage(root, [message]);
+          props.replacePublicMessage(root, message);
         } else {
-          props.addPublicMessage(root, [message]);
+          props.addPublicMessage(root, message);
         }
       });
     } else {
       setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
     }
 
+    let uniqueUsers: string[] = [];
     for (const item of data) {
       const isCreatorMatch = chat.profiles.some((profile) => profile.creator === item.creator);
 
       if (!isCreatorMatch) {
-        let uniqueUsers: string[] = [];
         for (const item of data) {
           if (!uniqueUsers.includes(item.creator)) {
             uniqueUsers.push(item.creator);
           }
         }
-        messageService?.loadProfiles(uniqueUsers);
       }
     }
+    window?.messageService?.loadProfiles(uniqueUsers);
   };
 
   useEffect(() => {
@@ -356,7 +408,7 @@ const MessageProvider = (props: Props) => {
         (stateItem) => stateItem.channelId === root
       );
       if (matchingStateItem) {
-        props.addPublicMessage(root, [obj]);
+        props.addPublicMessage(root, obj);
         setPublicMessageBuffer((prevMessageBuffer) =>
           prevMessageBuffer.filter((message) => message.id !== obj.id)
         );
@@ -364,6 +416,33 @@ const MessageProvider = (props: Props) => {
     });
   };
 
+  //previous public messages handler
+  const handlePreviousPublicMessages = (data: PublicMessage[]) => {
+    console.log("handlePreviousPublicMessages", data);
+    const channelId = data[0].root;
+    const messagesObject: MessagesObject = data.reduce((result, message) => {
+      result[message.id] = message;
+      return result;
+    }, {});
+
+    props.addPreviousPublicMessages(channelId, messagesObject);
+  };
+
+  useEffect(() => {
+    messageService?.removeListener(
+      MessageEvents.PreviousPublicMessages,
+      handlePreviousPublicMessages
+    );
+    messageService?.addListener(MessageEvents.PreviousPublicMessages, handlePreviousPublicMessages);
+
+    return () => {
+      messageService?.removeListener(
+        MessageEvents.PreviousPublicMessages,
+        handlePreviousPublicMessages
+      );
+    };
+  }, [messageService, chat.profiles, chat.publicMessages]);
+
   // Left channel handler
   const handleLeftChannelList = (data: string[]) => {
     // console.log("handleLeftChannelList", data);
@@ -388,6 +467,10 @@ const MessageProvider = (props: Props) => {
       messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
       messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
       messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
+      messageService?.removeListener(
+        MessageEvents.PreviousPublicMessages,
+        handlePreviousPublicMessages
+      );
       messageService?.removeListener(
         MessageEvents.PublicMessageBeforeSent,
         handlePublicMessageBeforeSent
@@ -396,7 +479,14 @@ const MessageProvider = (props: Props) => {
         MessageEvents.PublicMessageAfterSent,
         handlePublicMessageAfterSent
       );
-      messageService?.removeListener(MessageEvents.DirectMessage, handleDirectMessage);
+      messageService?.removeListener(
+        MessageEvents.DirectMessageBeforeSent,
+        handleDirectMessageBeforeSent
+      );
+      messageService?.removeListener(
+        MessageEvents.DirectMessageAfterSent,
+        handleDirectMessageAfterSent
+      );
     };
   }, [messageService]);
 

From 0cab694b8eec17a428453ee6d8edf5de80b640f8 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 10 Aug 2023 18:34:05 +0500
Subject: [PATCH 032/179] Show join community chat button on community page
 instead of join chat button if user hasn't join chat yet

---
 src/common/components/chat-box/index.tsx      | 22 ++++++++++++++-----
 .../join-community-chat-btn/index.tsx         | 21 +++++++++++++-----
 src/common/helper/message-service.ts          |  2 +-
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index da68d889903..3ad06c6fad8 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -227,10 +227,10 @@ export default function ChatBox(props: Props) {
   }, [props.chat.updatedChannel]);
 
   useEffect(() => {
-    // console.log("isTop", isTop);
+    console.log("isTop", isTop);
     if (isTop) {
       fetchPrevMessages();
-      // console.log("event is dispatched");
+      console.log("event is dispatched");
     }
   }, [isTop]);
 
@@ -261,11 +261,9 @@ export default function ChatBox(props: Props) {
   }, [clickedMessage]);
 
   useEffect(() => {
-    //what if there is no channel or there is no direct contact in store. handle this thing too.
     if (props.chat.channels.length !== 0 || props.chat.directContacts.length !== 0) {
       setInProgress(false);
     }
-
     console.log("chat in store", props.chat);
   }, [props.chat]);
 
@@ -305,6 +303,7 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
     setCommunities(communities);
+    fetchProfileData();
   }, [props.chat.channels, props.chat.leftChannelsList]);
 
   useEffect(() => {
@@ -336,7 +335,18 @@ export default function ChatBox(props: Props) {
       scrollerClicked();
     }
 
-    if (!isTop && !isScrollToTop && publicMessages.length !== 0) {
+    console.log(
+      "isTop",
+      !isTop,
+      "isScrollToTop",
+      !isScrollToTop,
+      "publicMessages",
+      publicMessages.length,
+      "isCommunity",
+      isCommunity
+    );
+    if (!isTop && !isScrollToTop && publicMessages.length !== 0 && isCommunity) {
+      console.log("yes i run");
       scrollerClicked();
     }
   }, [directMessagesList, publicMessages]);
@@ -604,6 +614,7 @@ export default function ChatBox(props: Props) {
     window.messageService
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
+        console.log("number", num);
         if (num < 25) {
           setHasMore(false);
         }
@@ -632,6 +643,7 @@ export default function ChatBox(props: Props) {
   };
 
   const scrollerClicked = () => {
+    console.log("Scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 1e2e98b9f49..83696c2d574 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -37,6 +37,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
+  const [loadCommunity, setLoadCommunity] = useState(false);
 
   useEffect(() => {
     getCommunityRoles();
@@ -55,8 +56,11 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (window.messageService && activeUserKeys) {
       getCommunityRoles();
       setHasUserJoinedChat(true);
+      if (loadCommunity) {
+        window?.messageService?.loadChannel(currentChannel?.id!);
+      }
     }
-  }, [window?.messageService, activeUserKeys]);
+  }, [window?.messageService, activeUserKeys, loadCommunity]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -161,6 +165,12 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const joinCommunityChat = () => {
+    if (!hasUserJoinedChat) {
+      handleJoinChat();
+      setLoadCommunity(true);
+      setIsJoinChat(true);
+      return;
+    }
     if (chat.leftChannelsList.includes(currentChannel?.id!)) {
       window?.messageService?.updateLeftChannelList(
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
@@ -221,10 +231,11 @@ export default function JoinCommunityChatBtn(props: Props) {
         ) : (
           <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat</Button>
         )
-      ) : isChatEnabled && !isJoinChat && hasUserJoinedChat ? (
-        <Button onClick={joinCommunityChat}>{_t("community.join-community-chat")}</Button>
-      ) : !hasUserJoinedChat ? (
-        <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat </Button>
+      ) : isChatEnabled && !isJoinChat ? (
+        <Button onClick={joinCommunityChat}>
+          {inProgress && chatButtonSpinner}
+          {_t("community.join-community-chat")}
+        </Button>
       ) : isJoinChat ? (
         <Button variant="outline-primary">Chat Joined</Button>
       ) : (
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index cb44128d88f..3d28ecfc511 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -304,7 +304,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadChannel(id: string) {
-    // console.log(id, "id");
+    // console.log(id, "load channel id");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],

From 2f3a8f3e4a3f50d170ec4d00583f512de2dadc97 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 11 Aug 2023 17:46:13 +0500
Subject: [PATCH 033/179] code formatting and cleaning

---
 src/common/components/chat-box/index.tsx      | 91 ++++++-------------
 .../join-community-chat-btn/index.tsx         | 52 +++++++----
 src/common/helper/chat-utils.ts               |  1 +
 src/common/helper/message-service.ts          | 27 ------
 src/common/i18n/locales/en-US.json            | 28 +++++-
 src/common/store/chat/index.ts                |  2 +-
 src/providers/message-provider.tsx            | 25 -----
 7 files changed, 89 insertions(+), 137 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 3ad06c6fad8..52fd916002b 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -95,8 +95,7 @@ import {
   setProfileMetaData,
   resetProfile,
   getCommunities,
-  getPrivateKey,
-  notEmpty
+  getPrivateKey
 } from "../../helper/chat-utils";
 import * as ls from "../../util/local-storage";
 import { renderPostBody } from "@ecency/render-helper";
@@ -190,14 +189,6 @@ export default function ChatBox(props: Props) {
   const [hasMore, setHasMore] = useState(true);
   const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
 
-  useEffect(() => {
-    console.log("publicMessages", publicMessages);
-  }, [publicMessages]);
-
-  useEffect(() => {
-    // console.log(currentChannel, "currentChannel");
-  }, [currentChannel]);
-
   useEffect(() => {
     const updated: ChannelUpdate = props.chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -209,7 +200,6 @@ export default function ChatBox(props: Props) {
       );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
-      // console.log("community messages", messages);
       const channel = {
         name: updated.name,
         about: updated.about,
@@ -227,10 +217,8 @@ export default function ChatBox(props: Props) {
   }, [props.chat.updatedChannel]);
 
   useEffect(() => {
-    console.log("isTop", isTop);
     if (isTop) {
       fetchPrevMessages();
-      console.log("event is dispatched");
     }
   }, [isTop]);
 
@@ -264,7 +252,6 @@ export default function ChatBox(props: Props) {
     if (props.chat.channels.length !== 0 || props.chat.directContacts.length !== 0) {
       setInProgress(false);
     }
-    console.log("chat in store", props.chat);
   }, [props.chat]);
 
   useEffect(() => {
@@ -276,7 +263,6 @@ export default function ChatBox(props: Props) {
       const removed = removedUsers.includes(activeUserKeys?.pub!);
       setIsActiveUserRemoved(removed);
     }
-    // scrollerClicked();
   }, [currentChannel, removedUsers]);
 
   useEffect(() => {
@@ -288,7 +274,6 @@ export default function ChatBox(props: Props) {
   }, []);
 
   // useEffect(() => {
-  //   console.log("Use effect run");
   //   if (window.messageService) {
   //     setHasUserJoinedChat(true);
   //     // setInProgress(false);
@@ -328,25 +313,12 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     if (directMessagesList.length !== 0 || publicMessages.length !== 0) {
-      //Initialize the zooming effect
       zoomInitializer();
     }
     if (directMessagesList.length !== 0) {
       scrollerClicked();
     }
-
-    console.log(
-      "isTop",
-      !isTop,
-      "isScrollToTop",
-      !isScrollToTop,
-      "publicMessages",
-      publicMessages.length,
-      "isCommunity",
-      isCommunity
-    );
-    if (!isTop && !isScrollToTop && publicMessages.length !== 0 && isCommunity) {
-      console.log("yes i run");
+    if (!isScrollToBottom && publicMessages.length !== 0 && isCommunity) {
       scrollerClicked();
     }
   }, [directMessagesList, publicMessages]);
@@ -357,9 +329,7 @@ export default function ChatBox(props: Props) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(currentChannel.id);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
-      // console.log("community messages", messages);
     }
-    // scrollerClicked();
   }, [currentChannel, isCommunity, props.chat.publicMessages]);
 
   useEffect(() => {
@@ -454,7 +424,6 @@ export default function ChatBox(props: Props) {
     const blockedUsers = props.chat.profiles
       .filter((item) => blockedUser.includes(item.creator))
       .map((item) => ({ name: item.name, pubkey: item.creator }));
-    // console.log("blockedUsers", blockedUsers);
     setBlockedUsers(blockedUsers);
   };
 
@@ -470,13 +439,11 @@ export default function ChatBox(props: Props) {
 
   const fetchCurrentChannel = (communityName: string) => {
     const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
-    // console.log("fetch current chanel", channel);
     if (channel) {
       const updated: ChannelUpdate = props.chat.updatedChannel
         .filter((x) => x.channelId === channel.id)
         .sort((a, b) => b.created - a.created)[0];
       if (updated) {
-        // console.log("updated", updated);
         const channel = {
           name: updated.name,
           about: updated.about,
@@ -589,7 +556,7 @@ export default function ChatBox(props: Props) {
         if (!isActveUserRemoved) {
           window?.messageService?.sendPublicMessage(currentChannel!, message, [], "");
         } else {
-          error("You cannot send messages in this group.");
+          error(_t("chat.message-warning"));
         }
       }
       if (isCurrentUser) {
@@ -614,7 +581,6 @@ export default function ChatBox(props: Props) {
     window.messageService
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
-        console.log("number", num);
         if (num < 25) {
           setHasMore(false);
         }
@@ -631,7 +597,7 @@ export default function ChatBox(props: Props) {
     const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
     const isScrollToBottom =
       (isCurrentUser || isCommunity) &&
-      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight;
+      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
     const scrollerTop = element.scrollTop <= 600;
@@ -643,7 +609,6 @@ export default function ChatBox(props: Props) {
   };
 
   const scrollerClicked = () => {
-    console.log("Scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
@@ -963,7 +928,7 @@ export default function ChatBox(props: Props) {
       <>
         <div className="add-dialog-header">
           <div className="add-dialog-titles">
-            <h4 className="add-main-title">Edit Community Roles</h4>
+            <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
           </div>
         </div>
         <div className="community-chat-role-edit-dialog-content">
@@ -1010,7 +975,7 @@ export default function ChatBox(props: Props) {
                 onClick={() => handleChannelUpdate(ADDROLE)}
                 disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
               >
-                Add
+                {_t("chat.add")}
               </Button>
             </div>
           </div>
@@ -1061,7 +1026,7 @@ export default function ChatBox(props: Props) {
             </>
           ) : (
             <div className="text-center">
-              <p>No admin or moderator for this community chat.</p>
+              <p>{_t("chat.no-admin")}</p>
             </div>
           )}
         </div>
@@ -1073,7 +1038,7 @@ export default function ChatBox(props: Props) {
     return (
       <>
         <div className="blocked-user-header" style={{ marginBottom: "1rem" }}>
-          <h4 className="blocked-user-title">Blocked Users</h4>
+          <h4 className="blocked-user-title">{_t("chat.blocked-users")}</h4>
         </div>
 
         {blockedUsers.length !== 0 ? (
@@ -1082,7 +1047,7 @@ export default function ChatBox(props: Props) {
               <thead>
                 <tr>
                   <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
-                  <th style={{ width: "50%" }}>Action</th>
+                  <th style={{ width: "50%" }}>{_t("chat.action")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -1107,7 +1072,7 @@ export default function ChatBox(props: Props) {
                               setRemovedUserID(user.pubkey);
                             }}
                           >
-                            Unblock
+                            {_t("chat.unblock")}
                           </Button>
                         </td>
                       </tr>
@@ -1118,7 +1083,7 @@ export default function ChatBox(props: Props) {
           </>
         ) : (
           <div className="text-center">
-            <p>No Blocked user yet.</p>
+            <p> {_t("chat.no-locked-user")}</p>
           </div>
         )}
       </>
@@ -1131,8 +1096,8 @@ export default function ChatBox(props: Props) {
         <div className="import-chat-dialog-header border-bottom">
           <div className="step-no">1</div>
           <div className="import-chat-dialog-titles">
-            <div className="import-chat-main-title">Enter Chat private key</div>
-            <div className="import-chat-sub-title">Enter chat private key to import all chats</div>
+            <div className="import-chat-main-title">{_t("chat.enter-private-key")}</div>
+            <div className="import-chat-sub-title">{_t("chat.enter-private-key-detail")}</div>
           </div>
         </div>
         <div className="private-key">
@@ -1221,14 +1186,14 @@ export default function ChatBox(props: Props) {
               setKeyDialog(false);
             }}
           >
-            Close
+            {_t("chat.close")}
           </Button>
           <Button
             variant="outline-primary"
             className="confirm-btn"
             onClick={() => handleConfirmButton(actionType)}
           >
-            Confirm
+            {_t("chat.confirm")}
           </Button>
         </p>
       </>
@@ -1340,7 +1305,7 @@ export default function ChatBox(props: Props) {
         setRemovedUserID("");
       }
     } catch (err) {
-      error("Error occurred while updating community");
+      error(_t("chat.error-updating-community"));
     }
   };
 
@@ -1398,14 +1363,14 @@ export default function ChatBox(props: Props) {
       icon: linkSvg
     },
     {
-      label: "Leave",
+      label: _t("chat.leave"),
       onClick: leaveClicked,
       icon: chatLeaveSvg
     },
     ...(props.activeUser?.username === currentChannel?.communityName
       ? [
           {
-            label: "Edit Roles",
+            label: _t("chat.edit-roles"),
             onClick: handleEditRoles,
             icon: editSVG
           }
@@ -1414,7 +1379,7 @@ export default function ChatBox(props: Props) {
     ...(communityAdmins.includes(props.activeUser?.username!)
       ? [
           {
-            label: "Blocked Users",
+            label: _t("chat.blocked-users"),
             onClick: handleBlockedUsers,
             icon: removeUserSvg
           }
@@ -1431,7 +1396,7 @@ export default function ChatBox(props: Props) {
 
   const menuItems: MenuItem[] = [
     {
-      label: "Copy private key",
+      label: _t("chat.copy-private-key"),
       onClick: () => inviteClicked(noStrPrivKey),
       icon: linkSvg
     }
@@ -1754,7 +1719,7 @@ export default function ChatBox(props: Props) {
                                                     setClickedMessage("");
                                                   }}
                                                 >
-                                                  Unblock
+                                                  {_t("chat.unblock")}
                                                 </Button>
                                               </>
                                             ) : (
@@ -1767,7 +1732,7 @@ export default function ChatBox(props: Props) {
                                                     setClickedMessage("");
                                                   }}
                                                 >
-                                                  Block
+                                                  {_t("chat.block")}
                                                 </Button>
                                               </>
                                             )}
@@ -1980,7 +1945,7 @@ export default function ChatBox(props: Props) {
                       <React.Fragment>
                         {props.chat.channels.length !== 0 && communities.length !== 0 && (
                           <>
-                            <div className="community-header">Communities</div>
+                            <div className="community-header">{_t("chat.communities")}</div>
                             {communities.map((channel) => {
                               return (
                                 <div key={channel.id} className="chat-content">
@@ -2009,7 +1974,7 @@ export default function ChatBox(props: Props) {
                               );
                             })}
                             {props.chat.directContacts.length !== 0 && (
-                              <div className="dm-header">DMs</div>
+                              <div className="dm-header">{_t("chat.dms")}</div>
                             )}
                           </>
                         )}
@@ -2036,7 +2001,7 @@ export default function ChatBox(props: Props) {
                       <>
                         <div className="start-chat-btn" style={{ marginTop: "25%" }}>
                           <Button variant="primary" onClick={handleImportChat}>
-                            Import Chat
+                            {_t("chat.import-chat")}
                           </Button>
                         </div>
                         {<OrDivider />}
@@ -2048,12 +2013,12 @@ export default function ChatBox(props: Props) {
                               setStep(9);
                             }}
                           >
-                            Create New Account
+                            {_t("chat.create-new-account")}
                           </Button>
                         </div>
                       </>
                     ) : inProgress ? (
-                      <h3 className="no-chat">Loading...</h3>
+                      <h3 className="no-chat">{_t("chat.loading")}</h3>
                     ) : (
                       <>
                         <p className="no-chat">{_t("chat.no-chat")}</p>
@@ -2090,7 +2055,7 @@ export default function ChatBox(props: Props) {
             )}
             {isActveUserRemoved && isCommunity && (
               <p className="d-flex justify-content-center mt-4 mb-0">
-                You have been blocked from this community
+                {_t("chat.blocked-user-message")}
               </p>
             )}
           </div>
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 83696c2d574..8f10d83603f 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -31,7 +31,7 @@ interface Props {
 export default function JoinCommunityChatBtn(props: Props) {
   const { chat } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
-  const [isJoinChat, setIsJoinChat] = useState(false);
+  const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
   const [isChatEnabled, setIsChatEnabled] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
@@ -43,6 +43,17 @@ export default function JoinCommunityChatBtn(props: Props) {
     getCommunityRoles();
   }, []);
 
+  useEffect(() => {
+    console.log(
+      "isCommunityChatJoined",
+      isCommunityChatJoined,
+      "isChatEnabled",
+      isChatEnabled,
+      "hasUserJoinedChat",
+      hasUserJoinedChat
+    );
+  }, [isCommunityChatJoined, isChatEnabled, hasUserJoinedChat]);
+
   useEffect(() => {
     fetchCommunityProfile();
     fetchUserProfileData();
@@ -66,7 +77,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     checkIsChatJoined();
 
     fetchCurrentChannel();
-  }, [isJoinChat, props.community, chat.channels, chat.leftChannelsList]);
+  }, [isCommunityChatJoined, props.community, chat.channels, chat.leftChannelsList]);
 
   const fetchUserProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
@@ -82,10 +93,6 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (!currentChannel) {
       setCurrentChannel(communityProfile.channel);
     }
-
-    // if (!haschannelMetaData && currentChannel) {
-    //   // await setChannelMetaData(props.community.name, currentChannel!);
-    // }
   };
 
   const checkIsChatJoined = () => {
@@ -94,9 +101,9 @@ export default function JoinCommunityChatBtn(props: Props) {
         item.communityName === props.community.name &&
         !chat.leftChannelsList.includes(currentChannel?.id!)
       ) {
-        setIsJoinChat(true);
+        setIsCommunityChatJoined(true);
       } else {
-        setIsJoinChat(false);
+        setIsCommunityChatJoined(false);
       }
     }
   };
@@ -160,7 +167,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       );
     } finally {
       setInProgress(false);
-      setIsJoinChat(true);
+      setIsCommunityChatJoined(true);
     }
   };
 
@@ -168,7 +175,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (!hasUserJoinedChat) {
       handleJoinChat();
       setLoadCommunity(true);
-      setIsJoinChat(true);
+      setIsCommunityChatJoined(true);
       return;
     }
     if (chat.leftChannelsList.includes(currentChannel?.id!)) {
@@ -177,7 +184,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       );
     }
     window?.messageService?.loadChannel(currentChannel?.id!);
-    setIsJoinChat(true);
+    setIsCommunityChatJoined(true);
   };
 
   const fetchCurrentChannel = () => {
@@ -216,28 +223,33 @@ export default function JoinCommunityChatBtn(props: Props) {
   return (
     <>
       {props.community["context"].role === "owner" ? (
-        isJoinChat ? (
-          <Button variant="outline-primary">Chat Joined</Button>
+        isCommunityChatJoined ? (
+          <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
         ) : hasUserJoinedChat && !isChatEnabled ? (
           <Button onClick={createCommunityChat}>
             {inProgress && chatButtonSpinner}
-            Start Community Chat
+            {_t("chat.start-community-chat")}
           </Button>
-        ) : !isJoinChat && isChatEnabled && hasUserJoinedChat ? (
+        ) : !isCommunityChatJoined && isChatEnabled && hasUserJoinedChat ? (
           <Button onClick={joinCommunityChat}>
             {" "}
-            {inProgress && chatButtonSpinner}Join Community Chat
+            {inProgress && chatButtonSpinner}
+            {_t("chat.join-community-chat")}
           </Button>
         ) : (
-          <Button onClick={handleJoinChat}> {inProgress && chatButtonSpinner}Join Chat</Button>
+          <Button onClick={handleJoinChat}>
+            {" "}
+            {inProgress && chatButtonSpinner}
+            {_t("chat.join-chat")}
+          </Button>
         )
-      ) : isChatEnabled && !isJoinChat ? (
+      ) : isChatEnabled && !isCommunityChatJoined ? (
         <Button onClick={joinCommunityChat}>
           {inProgress && chatButtonSpinner}
           {_t("community.join-community-chat")}
         </Button>
-      ) : isJoinChat ? (
-        <Button variant="outline-primary">Chat Joined</Button>
+      ) : isCommunityChatJoined ? (
+        <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
       ) : (
         <></>
       )}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 68f46d77891..5f7dfe6b9f2 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -61,6 +61,7 @@ export const setChannelMetaData = (username: string, channel: Channel) => {
         channel: channel
       };
       const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+      console.log("Channel metadata updated successfully", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 3d28ecfc511..faaa7fe536f 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -155,7 +155,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             .filter(notEmpty)
         )
       );
-      console.log("channels", channels);
       if (channels.length !== 0) {
         this.fetchChannels(channels);
       }
@@ -166,7 +165,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public fetchPrevMessages(channel: string, until: number) {
-    console.log("check plz", channel, until);
     return this.fetchP(
       [
         {
@@ -208,7 +206,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public fetchChannels(channels: string[]) {
-    // console.log("fetch channels run");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -231,7 +228,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public fetchChannel(id: string) {
-    // console.log("fetchChannel run", id);
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -247,7 +243,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateLeftChannelList(channelIds: string[]) {
-    // console.log(channelIds, "channelIds");
     const tags = [["d", "left-channel-list"]];
     return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
   }
@@ -286,7 +281,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       // If the name doesn't exist, add the element to the direct contacts array
       if (!nameExist) {
         this.directContacts.push(newUser);
-        // console.log("Event is fired");
         this.publish(Kind.Contacts, this.directContacts, "");
         return;
       }
@@ -304,7 +298,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadChannel(id: string) {
-    // console.log(id, "load channel id");
     const filters: Filter[] = [
       {
         kinds: [Kind.ChannelCreation],
@@ -325,7 +318,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public loadProfiles(pubs: string[]) {
-    // console.log("load profiles");
     pubs.forEach((p) => {
       this.fetch(
         [
@@ -390,11 +382,9 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   private fetch(filters: Filter[], unsub: boolean = true, isDirectContact: boolean = false) {
-    // console.log("Fetch run", filters);
     const sub = this.pool.sub(this.readRelays, filters);
 
     sub.on("event", (event: Event) => {
-      // console.log("Event in fetch", event);
       event.kind === Kind.Metadata && isDirectContact
         ? this.addDirectContact(event)
         : this.pushToEventBuffer(event);
@@ -452,12 +442,10 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async createChannel(meta: Metadata) {
-    // console.log("create channel run", meta);
     return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
   }
 
   public async updateChannel(channel: Channel, meta: Metadata) {
-    // console.log(channel, meta, "Update channel run");
     return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
       return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
     });
@@ -541,7 +529,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    // console.log("Update profile run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -572,10 +559,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     return this.publish(Kind.ChannelMessage, tags, message);
   }
 
-  public resendMessage(kind: number, tags: Array<any>[], content: string) {}
-
   private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
-    console.log("kind", kind, "tags", tags, "content", content);
     return new Promise((resolve, reject) => {
       this.signEvent({
         kind,
@@ -599,19 +583,16 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
-            console.log("event is send", event);
             if (event.kind === Kind.Contacts) {
               this.getContacts();
             }
           });
 
           pub.on("failed", () => {
-            // console.log("Failed to sign event");
             reject("Couldn't sign event!");
           });
         })
         .catch(() => {
-          // console.log("Catch run event not");
           reject("Couldn't sign event!");
         });
     });
@@ -630,7 +611,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   pushToEventBuffer(event: Event) {
-    // console.log("event reaches in event buffer", event);
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {
@@ -652,7 +632,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   async processEventQueue() {
-    // console.log("Event reaches in process queue");
     this.eventQueueFlag = false;
     const directContacts = this.eventQueue
       .filter((x) => x.kind === Kind.Contacts)
@@ -666,7 +645,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
 
       if (directContactsProfile.length > 0) {
-        // console.log(directContactsProfile, "directContactsProfile");
         this.emit(MessageEvents.DirectContact, directContactsProfile);
       }
     }
@@ -686,7 +664,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (profileUpdates.length > 0) {
-      // console.log("Profile Updates", profileUpdates);
       this.emit(MessageEvents.ProfileUpdate, profileUpdates);
     }
 
@@ -749,7 +726,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (channelUpdates.length > 0) {
-      // console.log("channelUpdates", channelUpdates);
       this.emit(MessageEvents.ChannelUpdate, channelUpdates);
     }
 
@@ -776,7 +752,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
       })
       .filter(notEmpty);
     if (publicMessages.length > 0) {
-      // console.log("publicMessages", publicMessages);
       this.emit(MessageEvents.PublicMessageAfterSent, publicMessages);
     }
 
@@ -857,7 +832,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 export default MessageService;
 
 export const initMessageService = (keys: Keys): MessageService | undefined => {
-  // console.log("keys in raven instance", keys);
   if (window.messageService) {
     window.messageService.close();
     window.messageService = undefined;
@@ -865,7 +839,6 @@ export const initMessageService = (keys: Keys): MessageService | undefined => {
 
   if (keys) {
     window.messageService = new MessageService(keys.priv, keys.pub);
-    console.log("window messageService", window.messageService);
   }
 
   return window.messageService;
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 64b5d753799..c21fa4d8443 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1666,7 +1666,33 @@
     "subscribers": "Subscribers",
     "invite": "Invite",
     "leave:": "Leave",
-    "refresh": "Refresh"
+    "refresh": "Refresh",
+    "message-warning": "You cannot send messages in this group.",
+    "edit-community-roles": "Edit Community Roles",
+    "add": "Add",
+    "no-admin": "No admin or moderator for this community chat.",
+    "blocked-users": "Blocked Users",
+    "action": "Action",
+    "unblock": "Unblock",
+    "no-locked-user": "No Blocked user yet.",
+    "enter-private-key": "Enter Chat private key",
+    "enter-private-key-detail": "Enter chat private key to import all chats",
+    "close": "Close",
+    "confirm": "Confirm",
+    "error-updating-community": "Error occurred while updating community",
+    "leave": "Leave",
+    "edit-roles": "Edit Roles",
+    "copy-private-key": "Copy private key",
+    "block": "Block",
+    "communities": "Communities",
+    "dms": "DMs",
+    "import-chat": "Import Chat",
+    "create-new-account": "Create New Account",
+    "loading": "Loading...",
+    "blocked-user-message": "You have been blocked from this community",
+    "chat-joined": "Chat Joined",
+    "start-community-chat": "Start Community Chat",
+    "join-community-chat": "Join Community Chat"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 5f1c195e302..80e4c8088e4 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -49,7 +49,7 @@ export default (state: Chat = initialState, action: Actions): Chat => {
           return existingContact.name === contact.name && existingContact.pubkey === contact.pubkey;
         });
       });
-      // console.log(uniqueDirectContacts, "uniqueDirectContacts");
+
       return {
         ...state,
         directContacts: [...state.directContacts, ...uniqueDirectContacts],
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index a0b9a3dc01a..4b4c0cda2e7 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -23,7 +23,6 @@ export const setNostrkeys = (keys: NostrKeysType) => {
     pub: keys.pub,
     priv: keys.priv
   };
-  // console.log("detail", detail)
   const ev = new CustomEvent("createMSInstance", { detail });
   window.dispatchEvent(ev);
 };
@@ -60,16 +59,11 @@ const MessageProvider = (props: Props) => {
     if (chat.channels.length !== 0) {
       setIsCommunityCreated(true);
     }
-
     if (chat.directMessages.length !== 0) {
       setIsDirectChatCreated(true);
     }
   }, [chat.channels, chat.directMessages]);
 
-  useEffect(() => {
-    console.log("replacedDirectMessagesBuffer", replacedDirectMessagesBuffer);
-  }, [replacedDirectMessagesBuffer]);
-
   useEffect(() => {
     window.addEventListener("createMSInstance", createMSInstance);
 
@@ -78,13 +72,8 @@ const MessageProvider = (props: Props) => {
     };
   }, []);
 
-  useEffect(() => {
-    // console.log("publicMessageBuffer", publicMessageBuffer);
-  }, [publicMessageBuffer]);
-
   useEffect(() => {
     if (!window.messageService && keys?.priv) {
-      // console.log(keys, "keys")
       const messageServiceInstance = initMessageService(keys);
       setMessageService(messageServiceInstance);
     }
@@ -98,7 +87,6 @@ const MessageProvider = (props: Props) => {
 
   const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeysType;
-    // console.log(detail, "details")
     const messageServiceInstance = initMessageService(detail);
     setMessageService(messageServiceInstance);
   };
@@ -149,7 +137,6 @@ const MessageProvider = (props: Props) => {
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
-    // console.log("handleProfileUpdate", data);
     props.addProfile(data);
   };
 
@@ -163,7 +150,6 @@ const MessageProvider = (props: Props) => {
 
   //Direct contact handler
   const handleDirectContact = (data: DirectContact[]) => {
-    // console.log("handleDirectContact", data);
     const result = [...chat.directContacts];
     data.forEach(({ name, pubkey }) => {
       const isPresent = chat.directContacts.some(
@@ -189,7 +175,6 @@ const MessageProvider = (props: Props) => {
   //Direct message ahandle before sent
 
   const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
-    console.log("handleDirectMessageBeeforeSent", data);
     data.map((m) => {
       const { peer, id } = m;
       setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
@@ -224,7 +209,6 @@ const MessageProvider = (props: Props) => {
 
   // // Direct message handler after sent
   const handleDirectMessageAfterSent = (data: DirectMessage[]) => {
-    console.log("handleDirectMessageAfterSent", data);
     if (isDirectChatCreated) {
       data.forEach((message) => {
         const { peer, id } = message;
@@ -232,7 +216,6 @@ const MessageProvider = (props: Props) => {
           setReplacedDirectMessagesBuffer((prevBuffer) =>
             prevBuffer.filter((messageId) => messageId !== id)
           );
-          console.log("I reached");
           props.replaceDirectMessage(peer, message);
         } else {
           props.addDirectMessages(peer, message);
@@ -280,8 +263,6 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    // console.log("handleChannelCreation", data);
-
     const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
     props.addChannels(append);
   };
@@ -297,7 +278,6 @@ const MessageProvider = (props: Props) => {
 
   // Channel update handler
   const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    // console.log("handleChannelUpdate", data);
     props.UpdateChannels(data);
   };
 
@@ -319,7 +299,6 @@ const MessageProvider = (props: Props) => {
   //public message handle before sent
 
   const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
-    console.log("handlePublicMessageBeeforeSent", data);
     data.map((m) => {
       const { id, root } = m;
       setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
@@ -348,7 +327,6 @@ const MessageProvider = (props: Props) => {
 
   //Public Message handler after sent
   const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
-    console.log("handlePublicMessageAfterSent", data, chat);
     if (isCommunityCreated) {
       data.forEach((message) => {
         const { root, id } = message;
@@ -418,7 +396,6 @@ const MessageProvider = (props: Props) => {
 
   //previous public messages handler
   const handlePreviousPublicMessages = (data: PublicMessage[]) => {
-    console.log("handlePreviousPublicMessages", data);
     const channelId = data[0].root;
     const messagesObject: MessagesObject = data.reduce((result, message) => {
       result[message.id] = message;
@@ -445,8 +422,6 @@ const MessageProvider = (props: Props) => {
 
   // Left channel handler
   const handleLeftChannelList = (data: string[]) => {
-    // console.log("handleLeftChannelList", data);
-    // setLeftChannelList(data);
     props.addleftChannels(data);
   };
 

From 35f66ce43b5d2846967d6399068b4d62a1ec9de3 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 11 Aug 2023 17:49:30 +0500
Subject: [PATCH 034/179] Remove console and uncomment the useEffect

---
 src/common/components/chat-box/index.tsx      | 22 +++++++++----------
 .../join-community-chat-btn/index.tsx         | 11 ----------
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 52fd916002b..e7625517bf3 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -273,17 +273,17 @@ export default function ChatBox(props: Props) {
     setNoStrPrivKey(noStrPrivKey);
   }, []);
 
-  // useEffect(() => {
-  //   if (window.messageService) {
-  //     setHasUserJoinedChat(true);
-  //     // setInProgress(false);
-  //   }
-  //   setTimeout(() => {
-  //     if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
-  //       setInProgress(false);
-  //     }
-  //   }, 5000);
-  // }, [window?.messageService]);
+  useEffect(() => {
+    if (window.messageService) {
+      setHasUserJoinedChat(true);
+      // setInProgress(false);
+    }
+    setTimeout(() => {
+      if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
+        setInProgress(false);
+      }
+    }, 5000);
+  }, [window?.messageService]);
 
   useEffect(() => {
     const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 8f10d83603f..67aafdde63f 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -43,17 +43,6 @@ export default function JoinCommunityChatBtn(props: Props) {
     getCommunityRoles();
   }, []);
 
-  useEffect(() => {
-    console.log(
-      "isCommunityChatJoined",
-      isCommunityChatJoined,
-      "isChatEnabled",
-      isChatEnabled,
-      "hasUserJoinedChat",
-      hasUserJoinedChat
-    );
-  }, [isCommunityChatJoined, isChatEnabled, hasUserJoinedChat]);
-
   useEffect(() => {
     fetchCommunityProfile();
     fetchUserProfileData();

From fbb4226b525720860cf40c610b8228a533ca841b Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 11 Aug 2023 18:36:22 +0500
Subject: [PATCH 035/179] fetch previous message called when current data is
 gretaer than 25

---
 src/common/components/chat-box/index.tsx | 2 +-
 src/common/helper/chat-utils.ts          | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index e7625517bf3..5048a83ad02 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -600,7 +600,7 @@ export default function ChatBox(props: Props) {
       element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
-    const scrollerTop = element.scrollTop <= 600;
+    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
     if (isCommunity && scrollerTop) {
       setIsTop(true);
     } else {
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 5f7dfe6b9f2..549473a8916 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -30,7 +30,7 @@ export const resetProfile = (activeUser: ActiveUser | null) => {
       ls.remove(`${activeUser?.username}_noStrPrivKey`);
       const response = await getAccountFull(activeUser?.username!);
       const updatedProfile = await updateProfile(response, { ...profile });
-      console.log("Updated profile", updatedProfile);
+      // console.log("Updated profile", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);
@@ -61,7 +61,6 @@ export const setChannelMetaData = (username: string, channel: Channel) => {
         channel: channel
       };
       const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-      console.log("Channel metadata updated successfully", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);

From 835148df52781fabddb04d25139d106b4fd2f8c2 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 15 Aug 2023 11:13:24 +0500
Subject: [PATCH 036/179] Commenting the unused code for the time

---
 src/common/components/chat-box/index.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 5048a83ad02..9e0fbac1300 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -273,17 +273,17 @@ export default function ChatBox(props: Props) {
     setNoStrPrivKey(noStrPrivKey);
   }, []);
 
-  useEffect(() => {
-    if (window.messageService) {
-      setHasUserJoinedChat(true);
-      // setInProgress(false);
-    }
-    setTimeout(() => {
-      if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
-        setInProgress(false);
-      }
-    }, 5000);
-  }, [window?.messageService]);
+  // useEffect(() => {
+  //   if (window.messageService) {
+  //     setHasUserJoinedChat(true);
+  //     // setInProgress(false);
+  //   }
+  //   setTimeout(() => {
+  //     if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
+  //       setInProgress(false);
+  //     }
+  //   }, 5000);
+  // }, [window?.messageService]);
 
   useEffect(() => {
     const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);

From 8336684462aeeabed663321ff8cb66901c498a6b Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 16 Aug 2023 12:10:10 +0500
Subject: [PATCH 037/179] Handle useEffect when window object is undefined

---
 src/common/components/chat-box/index.tsx      | 21 +++++++++----------
 .../join-community-chat-btn/index.tsx         |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 9e0fbac1300..42208750cdb 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -273,17 +273,16 @@ export default function ChatBox(props: Props) {
     setNoStrPrivKey(noStrPrivKey);
   }, []);
 
-  // useEffect(() => {
-  //   if (window.messageService) {
-  //     setHasUserJoinedChat(true);
-  //     // setInProgress(false);
-  //   }
-  //   setTimeout(() => {
-  //     if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
-  //       setInProgress(false);
-  //     }
-  //   }, 5000);
-  // }, [window?.messageService]);
+  useEffect(() => {
+    if (window.messageService) {
+      setHasUserJoinedChat(true);
+    }
+    setTimeout(() => {
+      if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
+        setInProgress(false);
+      }
+    }, 5000);
+  }, [typeof window !== "undefined" && window?.messageService]);
 
   useEffect(() => {
     const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 67aafdde63f..7a56ec6562b 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -60,7 +60,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         window?.messageService?.loadChannel(currentChannel?.id!);
       }
     }
-  }, [window?.messageService, activeUserKeys, loadCommunity]);
+  }, [typeof window !== "undefined" && window?.messageService, activeUserKeys, loadCommunity]);
 
   useEffect(() => {
     checkIsChatJoined();

From 19c5877363bf700e664a77f3a38d519d215a0676 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 16 Aug 2023 16:07:54 +0500
Subject: [PATCH 038/179] Show import chat modal within chat popup

---
 src/common/components/chat-box/index.scss |   6 +-
 src/common/components/chat-box/index.tsx  | 171 +++++++++++++---------
 src/common/helper/chat-utils.ts           |   2 +-
 src/common/i18n/locales/en-US.json        |   2 +-
 src/common/img/svg.tsx                    |  17 +++
 5 files changed, 121 insertions(+), 77 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 9aa7a44914e..cef78ee4acc 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -69,7 +69,7 @@
     }
 
     .message-header-content {
-      margin-top: 0.9rem;
+      margin: 0.8rem 0;
       font-weight: 700;
       line-height: 24px;
       font-size: 21px;
@@ -668,10 +668,6 @@
         margin-bottom: 1.4rem;
       }
     }
-
-    .private-key {
-      margin: 2rem 0;
-    }
   }
   .add-dialog-header {
     margin-bottom: 20px;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 42208750cdb..ebf63da4632 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -63,7 +63,8 @@ import {
   hideSvg,
   removeUserSvg,
   resendMessageSvg,
-  failedMessageSvg
+  failedMessageSvg,
+  chatKeySvg
 } from "../../img/svg";
 
 import {
@@ -188,6 +189,15 @@ export default function ChatBox(props: Props) {
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
+  const [importPrivKey, setImportPrivKey] = useState(false);
+
+  useEffect(() => {
+    // resetProfile(props.activeUser);
+    fetchProfileData();
+    setShow(!!props.activeUser?.username);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    setNoStrPrivKey(noStrPrivKey);
+  }, []);
 
   useEffect(() => {
     const updated: ChannelUpdate = props.chat.updatedChannel
@@ -265,14 +275,6 @@ export default function ChatBox(props: Props) {
     }
   }, [currentChannel, removedUsers]);
 
-  useEffect(() => {
-    // resetProfile(props.activeUser);
-    fetchProfileData();
-    setShow(!!props.activeUser?.username);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
-    setNoStrPrivKey(noStrPrivKey);
-  }, []);
-
   useEffect(() => {
     if (window.messageService) {
       setHasUserJoinedChat(true);
@@ -642,6 +644,7 @@ export default function ChatBox(props: Props) {
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
+    console.log("keys", keys);
     ls.set(`${props.activeUser?.username}_noStrPrivKey`, keys.priv);
     setNoStrPrivKey(keys.priv);
     await setProfileMetaData(props.activeUser, keys.pub);
@@ -1089,44 +1092,44 @@ export default function ChatBox(props: Props) {
     );
   };
 
-  const ImportChatModal = () => {
-    return (
-      <>
-        <div className="import-chat-dialog-header border-bottom">
-          <div className="step-no">1</div>
-          <div className="import-chat-dialog-titles">
-            <div className="import-chat-main-title">{_t("chat.enter-private-key")}</div>
-            <div className="import-chat-sub-title">{_t("chat.enter-private-key-detail")}</div>
-          </div>
-        </div>
-        <div className="private-key">
-          <Form
-            onSubmit={(e: React.FormEvent) => {
-              e.preventDefault();
-            }}
-          >
-            <InputGroup>
-              <InputGroup.Prepend>
-                <InputGroup.Text>{keySvg}</InputGroup.Text>
-              </InputGroup.Prepend>
-              <Form.Control
-                value={chatPrivKey}
-                type="password"
-                autoFocus={true}
-                autoComplete="off"
-                placeholder="Chat private key"
-                onChange={(e) => setChatPrivkey(e.target.value)}
-              />
-              <InputGroup.Append>
-                <Button onClick={handleImportChatSubmit}>{_t("key-or-hot.sign")}</Button>
-              </InputGroup.Append>
-            </InputGroup>
-            {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
-          </Form>
-        </div>
-      </>
-    );
-  };
+  // const ImportChatModal = () => {
+  //   return (
+  //     <>
+  //       <div className="import-chat-dialog-header border-bottom">
+  //         <div className="step-no">1</div>
+  //         <div className="import-chat-dialog-titles">
+  //           <div className="import-chat-main-title">{_t("chat.enter-private-key")}</div>
+  //           <div className="import-chat-sub-title">{_t("chat.enter-private-key-detail")}</div>
+  //         </div>
+  //       </div>
+  //       <div className="private-key">
+  //         <Form
+  //           onSubmit={(e: React.FormEvent) => {
+  //             e.preventDefault();
+  //           }}
+  //         >
+  //           <InputGroup>
+  //             <InputGroup.Prepend>
+  //               <InputGroup.Text>{keySvg}</InputGroup.Text>
+  //             </InputGroup.Prepend>
+  //             <Form.Control
+  //               value={chatPrivKey}
+  //               type="password"
+  //               autoFocus={true}
+  //               autoComplete="off"
+  //               placeholder="Chat private key"
+  //               onChange={(e) => setChatPrivkey(e.target.value)}
+  //             />
+  //             <InputGroup.Append>
+  //               <Button onClick={handleImportChatSubmit}>{_t("key-or-hot.sign")}</Button>
+  //             </InputGroup.Append>
+  //           </InputGroup>
+  //           {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
+  //         </Form>
+  //       </div>
+  //     </>
+  //   );
+  // };
 
   const successModal = (message: string) => {
     return (
@@ -1346,12 +1349,6 @@ export default function ChatBox(props: Props) {
     setHasMore(true);
   };
 
-  const handleImportChat = () => {
-    setKeyDialog(true);
-
-    setStep(3);
-  };
-
   const communityMenuItems: MenuItem[] = [
     {
       label: _t("chat.invite"),
@@ -1395,9 +1392,9 @@ export default function ChatBox(props: Props) {
 
   const menuItems: MenuItem[] = [
     {
-      label: _t("chat.copy-private-key"),
+      label: _t("chat.manage-chat-key"),
       onClick: () => inviteClicked(noStrPrivKey),
-      icon: linkSvg
+      icon: chatKeySvg
     }
   ];
 
@@ -1464,18 +1461,6 @@ export default function ChatBox(props: Props) {
                   </Tooltip>
                 </div>
               )}
-              <div className="arrow-image">
-                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                  <p
-                    className="arrow-svg"
-                    onClick={() => {
-                      setExpanded(!expanded);
-                    }}
-                  >
-                    {expanded ? expandArrow : collapseArrow}
-                  </p>
-                </Tooltip>
-              </div>
               {isCommunity && (
                 <div className="community-menu">
                   <DropDown
@@ -1498,6 +1483,18 @@ export default function ChatBox(props: Props) {
                   />
                 </div>
               )}
+              <div className="arrow-image">
+                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+                  <p
+                    className="arrow-svg"
+                    onClick={() => {
+                      setExpanded(!expanded);
+                    }}
+                  >
+                    {expanded ? expandArrow : collapseArrow}
+                  </p>
+                </Tooltip>
+              </div>
             </div>
           </div>
 
@@ -1998,11 +1995,46 @@ export default function ChatBox(props: Props) {
                       </React.Fragment>
                     ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
                       <>
-                        <div className="start-chat-btn" style={{ marginTop: "25%" }}>
-                          <Button variant="primary" onClick={handleImportChat}>
+                        <div className="start-chat-btn" style={{ marginTop: "20%" }}>
+                          <Button
+                            variant="primary"
+                            onClick={() => setImportPrivKey(!importPrivKey)}
+                          >
                             {_t("chat.import-chat")}
                           </Button>
                         </div>
+                        {importPrivKey && (
+                          <div className="private-key" style={{ margin: "15px 10px" }}>
+                            <Form
+                              onSubmit={(e: React.FormEvent) => {
+                                e.preventDefault();
+                              }}
+                            >
+                              <InputGroup>
+                                <InputGroup.Prepend>
+                                  <InputGroup.Text>{keySvg}</InputGroup.Text>
+                                </InputGroup.Prepend>
+                                <Form.Control
+                                  value={chatPrivKey}
+                                  type="password"
+                                  autoFocus={true}
+                                  autoComplete="off"
+                                  placeholder="Chat private key"
+                                  onChange={(e) => setChatPrivkey(e.target.value)}
+                                />
+                                <InputGroup.Append>
+                                  <Button onClick={handleImportChatSubmit}>
+                                    {_t("key-or-hot.sign")}
+                                  </Button>
+                                </InputGroup.Append>
+                              </InputGroup>
+                              {addRoleError && (
+                                <Form.Text className="text-danger">{addRoleError}</Form.Text>
+                              )}
+                            </Form>
+                          </div>
+                        )}
+
                         {<OrDivider />}
                         <div className="start-chat-btn">
                           <Button
@@ -2184,7 +2216,6 @@ export default function ChatBox(props: Props) {
             {step === 9 && confirmationModal(NEWCHATACCOUNT)}
             {step === 11 && confirmationModal(RESENDMESSAGE)}
             {step === 2 && EditRolesModal()}
-            {step === 3 && ImportChatModal()}
             {step === 4 && successModal(CHATIMPORT)}
             {step === 10 && successModal(NEWCHATACCOUNT)}
             {step === 8 && blockedUsersModal()}
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 549473a8916..68f46d77891 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -30,7 +30,7 @@ export const resetProfile = (activeUser: ActiveUser | null) => {
       ls.remove(`${activeUser?.username}_noStrPrivKey`);
       const response = await getAccountFull(activeUser?.username!);
       const updatedProfile = await updateProfile(response, { ...profile });
-      // console.log("Updated profile", updatedProfile);
+      console.log("Updated profile", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index c21fa4d8443..6452a39adf8 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1682,7 +1682,7 @@
     "error-updating-community": "Error occurred while updating community",
     "leave": "Leave",
     "edit-roles": "Edit Roles",
-    "copy-private-key": "Copy private key",
+    "manage-chat-key": "Manage chat key",
     "block": "Block",
     "communities": "Communities",
     "dms": "DMs",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 79f1e1b852b..6efe54f15ae 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2163,3 +2163,20 @@ export const failedMessageSvg = (
     <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
   </svg>
 );
+
+export const chatKeySvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+    />
+  </svg>
+);

From c93d7532708a3467378127f97e82365b64fafb46 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 17 Aug 2023 19:31:02 +0500
Subject: [PATCH 039/179] Make a chat-popup mobile responsive

---
 src/common/components/chat-box/index.scss     |  75 +++++++-
 src/common/components/chat-box/index.tsx      | 163 +++++++++++-------
 src/common/components/floating-faq/index.scss |   2 +-
 .../components/scroll-to-top/_index.scss      |   1 -
 src/common/img/svg.tsx                        |  15 ++
 5 files changed, 184 insertions(+), 72 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index cef78ee4acc..e4a734b88f8 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -6,7 +6,7 @@
 .chatbox-container {
   position: fixed;
   z-index: 99;
-  right: 15rem;
+  right: 13rem;
   bottom: 0rem;
   height: 53px;
   width: 410px;
@@ -228,13 +228,16 @@
         }
 
         .search-user-title {
+          display: flex;
           margin-left: 1rem;
           .search-username {
-            margin-top: 7px;
-            margin-bottom: 0;
+            margin: 7px 0 0 0;
             font-size: 20px;
             font-weight: 700;
           }
+          .search-reputation {
+            margin: 9px 0 0 6px;
+          }
         }
         &:hover {
           @include themify(day) {
@@ -563,6 +566,33 @@
         }
       }
     }
+    .manage-chat-key {
+      .private-key {
+        margin-top: 2.5rem;
+        margin-left: 14px;
+        margin-right: 7px;
+      }
+      .chat-priv-key {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .copy-svg {
+        margin-top: 3px;
+        margin-left: 2px;
+        cursor: pointer;
+
+        svg {
+          @include themify(day) {
+            color: #a1a1a1;
+          }
+          @include themify(night) {
+            color: $white-two;
+          }
+        }
+      }
+    }
   }
   .chat {
     display: flex;
@@ -634,6 +664,30 @@
       }
     }
   }
+  &.small-screen {
+    right: 0;
+    width: 100vw;
+    .chat-header {
+      width: 100vw;
+    }
+    .message-header-content {
+      max-width: 30vw !important;
+    }
+    .sender-message-content,
+    .receiver-message-content {
+      max-width: 75vw !important;
+    }
+    &.expanded {
+      height: 90vh;
+    }
+    .message-header-title {
+      max-width: 100vw;
+      margin-right: 0.3rem;
+    }
+    .chat-body {
+      height: 73vh;
+    }
+  }
 }
 
 .chats-dialog {
@@ -702,3 +756,18 @@
     }
   }
 }
+
+.chat-button {
+  position: fixed;
+  z-index: 99;
+  right: 6rem;
+  bottom: 20px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50% !important;
+  // .chat-btn {
+  //   width: 40px;
+  //   border-radius: 50% !important;
+  //   padding: 0 !important;
+  // }
+}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index ebf63da4632..5700db843dc 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -64,7 +64,9 @@ import {
   removeUserSvg,
   resendMessageSvg,
   failedMessageSvg,
-  chatKeySvg
+  chatKeySvg,
+  copyOutlinSvg,
+  copyContent
 } from "../../img/svg";
 
 import {
@@ -103,12 +105,13 @@ import { renderPostBody } from "@ecency/render-helper";
 import { getAccessToken } from "../../helper/user-token";
 import { _t } from "../../i18n";
 
-import { getAccountFull, lookupAccounts } from "../../api/hive";
+import { getAccountFull, getAccountReputations, lookupAccounts } from "../../api/hive";
 import { uploadImage } from "../../api/misc";
 import { addImage } from "../../api/private-api";
 import { getCommunity } from "../../api/bridge";
 
 import "./index.scss";
+import accountReputation from "../../helper/account-reputation";
 
 export interface profileData {
   joiningData: string;
@@ -116,6 +119,11 @@ export interface profileData {
   followers: number | undefined;
 }
 
+export interface AccountWithReputation {
+  account: string;
+  reputation: number;
+}
+
 interface Props {
   users: User[];
   activeUser: ActiveUser | null;
@@ -171,7 +179,7 @@ export default function ChatBox(props: Props) {
   const [step, setStep] = useState(0);
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [searchtext, setSearchText] = useState("");
-  const [userList, setUserList] = useState<string[]>([]);
+  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
   const [user, setUser] = useState("");
   const [role, setRole] = useState("admin");
   const [addRoleError, setAddRoleError] = useState("");
@@ -190,6 +198,12 @@ export default function ChatBox(props: Props) {
   const [hasMore, setHasMore] = useState(true);
   const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
   const [importPrivKey, setImportPrivKey] = useState(false);
+  const [revelPrivateKey, setRevealPrivateKey] = useState(false);
+  const [innerWidth, setInnerWidth] = useState(0);
+
+  useEffect(() => {
+    console.log("innerWidth", innerWidth);
+  }, [innerWidth]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -197,6 +211,7 @@ export default function ChatBox(props: Props) {
     setShow(!!props.activeUser?.username);
     const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
+    setInnerWidth(window.innerWidth);
   }, []);
 
   useEffect(() => {
@@ -360,6 +375,13 @@ export default function ChatBox(props: Props) {
     }
   }, [isCommunity, communityName]);
 
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (currentUser) {
       const isCurrentUserFound = props.chat.directContacts.some(
@@ -372,8 +394,7 @@ export default function ChatBox(props: Props) {
         fetchCurrentUserData();
       }
 
-      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? null;
-      setReceiverPubKey(peer!);
+      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
       const msgsList = fetchDirectMessages(peer!);
       const messages = msgsList.sort((a, b) => a.created - b.created);
       setDirectMessagesList(messages);
@@ -384,15 +405,15 @@ export default function ChatBox(props: Props) {
       setIsCurrentUserJoined(true);
       setMessage("");
       setInProgress(false);
-      // scrollerClicked();
     }
   }, [currentUser]);
 
   useDebounce(
     async () => {
       if (searchtext.length !== 0) {
-        const resp = await lookupAccounts(searchtext, 7);
-        setUserList(resp);
+        const resp = await getAccountReputations(searchtext, 20);
+        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
+        setUserList(sortedByReputation);
         setInProgress(false);
       } else {
         setInProgress(false);
@@ -464,6 +485,10 @@ export default function ChatBox(props: Props) {
     }
   };
 
+  const handleResize = () => {
+    setInnerWidth(window.innerWidth);
+  };
+
   const formatFollowers = (count: number | undefined) => {
     if (count) {
       return count >= 1e6
@@ -514,6 +539,7 @@ export default function ChatBox(props: Props) {
   };
 
   const fetchCurrentUserData = async () => {
+    console.log("fetch currenyt user data run");
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
@@ -1092,45 +1118,6 @@ export default function ChatBox(props: Props) {
     );
   };
 
-  // const ImportChatModal = () => {
-  //   return (
-  //     <>
-  //       <div className="import-chat-dialog-header border-bottom">
-  //         <div className="step-no">1</div>
-  //         <div className="import-chat-dialog-titles">
-  //           <div className="import-chat-main-title">{_t("chat.enter-private-key")}</div>
-  //           <div className="import-chat-sub-title">{_t("chat.enter-private-key-detail")}</div>
-  //         </div>
-  //       </div>
-  //       <div className="private-key">
-  //         <Form
-  //           onSubmit={(e: React.FormEvent) => {
-  //             e.preventDefault();
-  //           }}
-  //         >
-  //           <InputGroup>
-  //             <InputGroup.Prepend>
-  //               <InputGroup.Text>{keySvg}</InputGroup.Text>
-  //             </InputGroup.Prepend>
-  //             <Form.Control
-  //               value={chatPrivKey}
-  //               type="password"
-  //               autoFocus={true}
-  //               autoComplete="off"
-  //               placeholder="Chat private key"
-  //               onChange={(e) => setChatPrivkey(e.target.value)}
-  //             />
-  //             <InputGroup.Append>
-  //               <Button onClick={handleImportChatSubmit}>{_t("key-or-hot.sign")}</Button>
-  //             </InputGroup.Append>
-  //           </InputGroup>
-  //           {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
-  //         </Form>
-  //       </div>
-  //     </>
-  //   );
-  // };
-
   const successModal = (message: string) => {
     return (
       <>
@@ -1347,6 +1334,8 @@ export default function ChatBox(props: Props) {
     setSearchText("");
     setMessage("");
     setHasMore(true);
+    setRevealPrivateKey(false);
+    setAddRoleError("");
   };
 
   const communityMenuItems: MenuItem[] = [
@@ -1393,7 +1382,7 @@ export default function ChatBox(props: Props) {
   const menuItems: MenuItem[] = [
     {
       label: _t("chat.manage-chat-key"),
-      onClick: () => inviteClicked(noStrPrivKey),
+      onClick: () => setRevealPrivateKey(!revelPrivateKey),
       icon: chatKeySvg
     }
   ];
@@ -1408,9 +1397,13 @@ export default function ChatBox(props: Props) {
   return (
     <>
       {show && (
-        <div className={`chatbox-container ${expanded ? "expanded" : ""}`}>
+        <div
+          className={`chatbox-container ${expanded ? "expanded" : ""} ${
+            innerWidth <= 666 ? "small-screen" : ""
+          }`}
+        >
           <div className="chat-header">
-            {(currentUser || communityName || showSearchUser) && expanded && (
+            {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
               <Tooltip content={_t("chat.back")}>
                 <div className="back-arrow-image">
                   <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
@@ -1439,20 +1432,26 @@ export default function ChatBox(props: Props) {
                   ? currentCommunity?.title
                   : showSearchUser
                   ? "New Message"
+                  : revelPrivateKey
+                  ? "Manage chat key"
                   : "Messages"}
               </p>
             </div>
             <div className="actionable-imgs">
-              {!currentUser && hasUserJoinedChat && noStrPrivKey && !isCommunity && (
-                <>
-                  <div className="message-image" onClick={handleMessageSvgClick}>
-                    <Tooltip content={_t("chat.new-message")}>
-                      <p className="message-svg">{addMessageSVG}</p>
-                    </Tooltip>
-                  </div>
-                </>
-              )}
-              {hasUserJoinedChat && noStrPrivKey && (
+              {!currentUser &&
+                hasUserJoinedChat &&
+                noStrPrivKey &&
+                !isCommunity &&
+                !revelPrivateKey && (
+                  <>
+                    <div className="message-image" onClick={handleMessageSvgClick}>
+                      <Tooltip content={_t("chat.new-message")}>
+                        <p className="message-svg">{addMessageSVG}</p>
+                      </Tooltip>
+                    </div>
+                  </>
+                )}
+              {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
                 <div className="message-image" onClick={handleRefreshSvgClick}>
                   <Tooltip content={_t("chat.refresh")}>
                     <p className="message-svg" style={{ paddingTop: "10px" }}>
@@ -1513,7 +1512,7 @@ export default function ChatBox(props: Props) {
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
-            {hasUserJoinedChat ? (
+            {hasUserJoinedChat && !revelPrivateKey ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
                   <div className="chats">
@@ -1915,18 +1914,21 @@ export default function ChatBox(props: Props) {
                             key={index}
                             className="search-content"
                             onClick={() => {
-                              setCurrentUser(user);
+                              setCurrentUser(user.account);
                               setIsCurrentUser(true);
                             }}
                           >
                             <div className="search-user-img">
                               <span>
-                                <UserAvatar username={user} size="medium" />
+                                <UserAvatar username={user.account} size="medium" />
                               </span>
                             </div>
 
                             <div className="search-user-title">
-                              <p className="search-username">{user}</p>
+                              <p className="search-username">{user.account}</p>
+                              <p className="search-reputation">
+                                ({accountReputation(user.reputation)})
+                              </p>
                             </div>
                           </div>
                         );
@@ -2063,6 +2065,35 @@ export default function ChatBox(props: Props) {
                   </>
                 )}
               </>
+            ) : revelPrivateKey ? (
+              <>
+                <div className="manage-chat-key">
+                  <div className="private-key">
+                    <Form.Group controlId="private-key">
+                      <Form.Label>Private key</Form.Label>
+                      <div className="d-flex private-key-input">
+                        <Form.Control
+                          className="chat-priv-key"
+                          type="text"
+                          readOnly={true}
+                          value={noStrPrivKey}
+                        />
+                        <Tooltip content={"Copy Private key"}>
+                          <p
+                            className="copy-svg"
+                            onClick={() => {
+                              inviteClicked(noStrPrivKey);
+                            }}
+                          >
+                            {copyContent}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    </Form.Group>
+                  </div>
+                  <OrDivider />
+                </div>
+              </>
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
                 {showSpinner && chatButtonSpinner}
@@ -2179,8 +2210,7 @@ export default function ChatBox(props: Props) {
                     style={{ maxWidth: "100%", overflowWrap: "break-word" }}
                     disabled={
                       inProgress ||
-                      receiverPubKey === null ||
-                      receiverPubKey === undefined ||
+                      (isCurrentUser && receiverPubKey) === undefined ||
                       isActveUserRemoved
                     }
                   />
@@ -2216,7 +2246,6 @@ export default function ChatBox(props: Props) {
             {step === 9 && confirmationModal(NEWCHATACCOUNT)}
             {step === 11 && confirmationModal(RESENDMESSAGE)}
             {step === 2 && EditRolesModal()}
-            {step === 4 && successModal(CHATIMPORT)}
             {step === 10 && successModal(NEWCHATACCOUNT)}
             {step === 8 && blockedUsersModal()}
           </Modal.Body>
diff --git a/src/common/components/floating-faq/index.scss b/src/common/components/floating-faq/index.scss
index 28ea7b0971a..1b5e57ed2cc 100644
--- a/src/common/components/floating-faq/index.scss
+++ b/src/common/components/floating-faq/index.scss
@@ -7,7 +7,7 @@
   position: fixed;
   z-index: 99;
   right: 2rem;
-  bottom: 1rem;
+  bottom: 20px;
   border-radius: 20px 2px 20px 20px !important;
   height: 40px;
   .help {
diff --git a/src/common/components/scroll-to-top/_index.scss b/src/common/components/scroll-to-top/_index.scss
index dcfac95f136..953e21b8249 100644
--- a/src/common/components/scroll-to-top/_index.scss
+++ b/src/common/components/scroll-to-top/_index.scss
@@ -28,7 +28,6 @@
 
     & ~ .floating-faq-button {
       & > .help-btn {
-        bottom: 1.3rem;
         right: 5rem;
       }
 
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index fbb3c0b49cd..f58a105e94c 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2238,3 +2238,18 @@ export const uploadSvgV = (
     <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
   </svg>
 );
+export const chatSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="21"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+  </svg>
+);

From 98245839f791c7717c899b89b16375832c42664d Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 18 Aug 2023 18:13:59 +0500
Subject: [PATCH 040/179] adjust the position of emoji and gif picker on mobile
 view

---
 .../components/chat-box/chat-constants.ts     |  6 ++---
 src/common/components/chat-box/index.scss     | 24 ++++++++++++++-----
 src/common/components/chat-box/index.tsx      | 20 +++++++---------
 src/common/components/emoji-picker/index.tsx  |  2 +-
 src/common/components/floating-faq/index.scss |  7 ++++++
 src/common/components/floating-faq/index.tsx  | 12 ++++++++--
 src/common/components/gif-picker/index.tsx    |  2 +-
 .../join-community-chat-btn/index.tsx         |  6 ++---
 src/common/components/login/index.tsx         |  4 ++--
 .../components/scroll-to-top/_index.scss      |  5 ++--
 src/common/components/scroll-to-top/index.tsx |  5 ++++
 src/common/helper/chat-utils.ts               |  8 +++----
 src/common/pages/community-functional.tsx     |  2 +-
 src/providers/message-provider.tsx            |  2 +-
 14 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index f70fbf93bff..6d0bac26bbf 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -1,6 +1,6 @@
 export const EmojiPickerStyle = {
   width: "94%",
-  top: "255px",
+  bottom: "40px",
   left: "0px",
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
@@ -10,7 +10,7 @@ export const EmojiPickerStyle = {
 
 export const GifPickerStyle = {
   width: "94%",
-  top: "76px",
+  bottom: "45px",
   left: 0,
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
@@ -27,7 +27,7 @@ export const GifImagesStyle = {
   width: "170px"
 };
 
-export const NOSTRKEY = "noStrKey";
+export const NOSTRKEY = "nsKey";
 export const UPLOADING = "Uploading";
 export const GIPHGY = "giphy";
 export const HIDEMESSAGE = "hideMessage";
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index e4a734b88f8..687a821e202 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -665,13 +665,20 @@
     }
   }
   &.small-screen {
-    right: 0;
-    width: 100vw;
+    right: 0.7rem;
+    width: 94vw;
+    display: grid;
+    grid-template-rows: repeat(18, 1fr);
+    grid-template-columns: repeat(1, 1fr);
     .chat-header {
-      width: 100vw;
+      width: 94vw;
+      grid-row: span 1;
+    }
+    .back-arrow-svg {
+      padding: 0;
     }
     .message-header-content {
-      max-width: 30vw !important;
+      max-width: 40vw !important;
     }
     .sender-message-content,
     .receiver-message-content {
@@ -681,11 +688,16 @@
       height: 90vh;
     }
     .message-header-title {
-      max-width: 100vw;
+      width: 100vw;
       margin-right: 0.3rem;
+      margin: 0;
     }
     .chat-body {
-      height: 73vh;
+      grid-row: span 16;
+      height: 100%;
+    }
+    .chat {
+      grid-row: span 1;
     }
   }
 }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 5700db843dc..73016895878 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -201,10 +201,6 @@ export default function ChatBox(props: Props) {
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
 
-  useEffect(() => {
-    console.log("innerWidth", innerWidth);
-  }, [innerWidth]);
-
   useEffect(() => {
     // resetProfile(props.activeUser);
     fetchProfileData();
@@ -539,7 +535,6 @@ export default function ChatBox(props: Props) {
   };
 
   const fetchCurrentUserData = async () => {
-    console.log("fetch currenyt user data run");
     const response = await getAccountFull(currentUser);
     setProfileData({
       joiningData: response.created,
@@ -548,9 +543,9 @@ export default function ChatBox(props: Props) {
     });
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
-    const { noStrKey } = profile || {};
-    setReceiverPubKey(noStrKey);
-    setIsCurrentUserJoined(!!noStrKey);
+    const { nsKey } = profile || {};
+    setReceiverPubKey(nsKey);
+    setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
 
@@ -558,7 +553,7 @@ export default function ChatBox(props: Props) {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
     const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
     const activeUserKeys = {
-      pub: profileData?.noStrKey,
+      pub: profileData?.nsKey,
       priv: noStrPrivKey
     };
     setActiveUserKeys(activeUserKeys);
@@ -671,7 +666,7 @@ export default function ChatBox(props: Props) {
     resetChat();
     const keys = createNoStrAccount();
     console.log("keys", keys);
-    ls.set(`${props.activeUser?.username}_noStrPrivKey`, keys.priv);
+    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
     setNoStrPrivKey(keys.priv);
     await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
@@ -855,7 +850,7 @@ export default function ChatBox(props: Props) {
       const pubKey = getPublicKey(chatPrivKey);
       if (pubKey === activeUserKeys?.pub) {
         setNoStrPrivKey(chatPrivKey);
-        ls.set(`${props.activeUser?.username}_noStrPrivKey`, chatPrivKey);
+        ls.set(`${props.activeUser?.username}_nsPrivKey`, chatPrivKey);
         const keys = {
           pub: activeUserKeys?.pub!,
           priv: chatPrivKey
@@ -866,6 +861,7 @@ export default function ChatBox(props: Props) {
       } else {
         setAddRoleError("Invalid Private key");
       }
+      setImportPrivKey(false);
     } catch (error) {
       setAddRoleError("Invalid Private key");
     }
@@ -1210,7 +1206,7 @@ export default function ChatBox(props: Props) {
           }
           const moderator = {
             name: user,
-            pubkey: profileData.noStrKey,
+            pubkey: profileData.nsKey,
             role: role
           };
           setModerator(moderator);
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 24e92f44267..edc870fd271 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -41,7 +41,7 @@ interface Props {
   fallback?: (e: string) => void;
   style?: {
     width: string;
-    top: string;
+    bottom: string;
     left: string | number;
     marginLeft: string;
     borderTopLeftRadius: string;
diff --git a/src/common/components/floating-faq/index.scss b/src/common/components/floating-faq/index.scss
index 1b5e57ed2cc..928bd1cafc7 100644
--- a/src/common/components/floating-faq/index.scss
+++ b/src/common/components/floating-faq/index.scss
@@ -20,6 +20,9 @@
   .help-button-content {
     margin-top: -3px;
   }
+  &.small-screen {
+    bottom: 65px;
+  }
 }
 
 @media (max-width: 791px) {
@@ -40,6 +43,10 @@
   border-radius: 18px;
   overflow: hidden;
 
+  &.small-screen {
+    bottom: 7rem;
+  }
+
   &.submit {
     position: fixed;
     right: 23.7rem !important;
diff --git a/src/common/components/floating-faq/index.tsx b/src/common/components/floating-faq/index.tsx
index ff3f4e2dcc5..57a23f01ba8 100644
--- a/src/common/components/floating-faq/index.tsx
+++ b/src/common/components/floating-faq/index.tsx
@@ -154,7 +154,11 @@ const FloatingFAQ = () => {
             onClickAway={() => show && setShow(false)}
           >
             {display && !isSubmitPage && (
-              <Button className="help-btn" variant="primary" onClick={handleShow}>
+              <Button
+                className={`help-btn ${innerWidth <= 666 ? "small-screen" : ""} `}
+                variant="primary"
+                onClick={handleShow}
+              >
                 {helpIconSvg}
 
                 {innerWidth >= 792 && <div className="help">{_t("floating-faq.help")}</div>}
@@ -162,7 +166,11 @@ const FloatingFAQ = () => {
             )}
 
             {show && display ? (
-              <div className={`floating-container ${isSubmitPage ? className : ""}`}>
+              <div
+                className={`floating-container ${isSubmitPage ? className : ""} ${
+                  innerWidth <= 666 ? "small-screen" : ""
+                }`}
+              >
                 <div className="faq-welcome">
                   <h3 className="faq-welcome-message">{_t("floating-faq.welcome")}</h3>
                   <Button
diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index 729bdbea4cc..be66b870e1e 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -13,7 +13,7 @@ interface Props {
   changeState: (gifState?: boolean) => void;
   style?: {
     width: string;
-    top: string;
+    bottom: string;
     left: string | number;
     marginLeft: string;
     borderTopLeftRadius: string;
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index fe544cf1c34..9d2eefc8dd6 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -103,7 +103,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const ownerData = await getProfileMetaData(community.name);
     const ownerRole = {
       name: activeUser!.username,
-      pubkey: activeUserKeys?.pub || ownerData.noStrKey,
+      pubkey: activeUserKeys?.pub || ownerData.nsKey,
       role: "owner"
     };
 
@@ -116,7 +116,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
           const roleInfo: communityModerator = {
             name: item[0],
-            pubkey: profileData.noStrKey,
+            pubkey: profileData.nsKey,
             role: item[1]
           };
 
@@ -191,7 +191,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     setInProgress(true);
     const keys = createNoStrAccount();
     setActiveUserKeys(keys);
-    ls.set(`${activeUser?.username}_noStrPrivKey`, keys.priv);
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
     await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 4fe3d82bf10..6abd54bf919 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -773,9 +773,9 @@ class LoginDialog extends Component<Props> {
       resetChat();
 
       //create new message service instance for newly logged in user
-      if (profile && profile.noStrKey && getPrivateKey(account.name)) {
+      if (profile && profile.nsKey && getPrivateKey(account.name)) {
         const keys = {
-          pub: profile.noStrKey,
+          pub: profile.nsKey,
           priv: getPrivateKey(account.name)
         };
         setNostrkeys(keys);
diff --git a/src/common/components/scroll-to-top/_index.scss b/src/common/components/scroll-to-top/_index.scss
index 953e21b8249..6fbcccd63e4 100644
--- a/src/common/components/scroll-to-top/_index.scss
+++ b/src/common/components/scroll-to-top/_index.scss
@@ -32,12 +32,13 @@
       }
 
       & > .floating-container {
-        bottom: 4.4rem;
         right: 5rem;
       }
     }
   }
-
+  &.small-screen {
+    bottom: 65px;
+  }
   svg {
     width: 20px;
     height: 20px;
diff --git a/src/common/components/scroll-to-top/index.tsx b/src/common/components/scroll-to-top/index.tsx
index 9148f0a73c6..24dad4d6e43 100644
--- a/src/common/components/scroll-to-top/index.tsx
+++ b/src/common/components/scroll-to-top/index.tsx
@@ -37,6 +37,11 @@ export default class ScrollToTop extends Component {
     }
 
     if (this.shouldShow()) {
+      if (window.innerWidth <= 666) {
+        this.button.current.classList.add("small-screen");
+      } else {
+        this.button.current.classList.remove("small-screen");
+      }
       this.button.current.classList.add("visible");
       return;
     }
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 68f46d77891..ef33baad54b 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -25,9 +25,9 @@ export const resetProfile = (activeUser: ActiveUser | null) => {
   return new Promise(async (resolve, reject) => {
     try {
       const profile = await getProfileMetaData(activeUser?.username!);
-      delete profile.noStrKey;
+      delete profile.nsKey;
       delete profile.channel;
-      ls.remove(`${activeUser?.username}_noStrPrivKey`);
+      ls.remove(`${activeUser?.username}_nsPrivKey`);
       const response = await getAccountFull(activeUser?.username!);
       const updatedProfile = await updateProfile(response, { ...profile });
       console.log("Updated profile", updatedProfile);
@@ -44,7 +44,7 @@ export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPub
   const { posting_json_metadata } = response;
   const profile = JSON.parse(posting_json_metadata!).profile;
   const newProfile = {
-    noStrKey: noStrPubKey
+    nsKey: noStrPubKey
   };
 
   const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
@@ -89,5 +89,5 @@ export const getCommunities = (channels: Channel[], leftChannels: string[]) => {
 };
 
 export const getPrivateKey = (username: string) => {
-  return ls.get(`${username}_noStrPrivKey`);
+  return ls.get(`${username}_nsPrivKey`);
 };
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index a2ed3226766..ecde9a4d210 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -242,7 +242,7 @@ export const CommunityPage = (props: Props) => {
   const handleJoinChat = async () => {
     setInProgress(true);
     const keys = createNoStrAccount();
-    ls.set(`${props.activeUser?.username}_noStrPrivKey`, keys.priv);
+    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
     await setProfileMetaData(props.activeUser, keys.pub);
     setNostrkeys(keys);
     setHasUserJoinedChat(true);
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index 4b4c0cda2e7..ae00c1f05fb 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -95,7 +95,7 @@ const MessageProvider = (props: Props) => {
     const profile = await getProfileMetaData(activeUser.username);
     const noStrPrivKey = getPrivateKey(activeUser.username);
     const keys = {
-      pub: profile.noStrKey,
+      pub: profile.nsKey,
       priv: noStrPrivKey
     };
     setKeys(keys);

From a97fd5b5a9e7fe8addfb4d322b300750244866f3 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 18 Aug 2023 18:34:21 +0500
Subject: [PATCH 041/179] Change bottom for emoji picker

---
 src/common/components/chat-box/chat-constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index 6d0bac26bbf..cb39c187f30 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -1,6 +1,6 @@
 export const EmojiPickerStyle = {
   width: "94%",
-  bottom: "40px",
+  bottom: "45px",
   left: "0px",
   marginLeft: "14px",
   borderTopLeftRadius: "8px",

From 70fd1f3b2f87e2654db68614d87edfd1b4ece331 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 18 Aug 2023 19:12:40 +0500
Subject: [PATCH 042/179] Change Label in manage chat key

---
 src/common/components/chat-box/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 73016895878..773be0c2f76 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -2066,7 +2066,7 @@ export default function ChatBox(props: Props) {
                 <div className="manage-chat-key">
                   <div className="private-key">
                     <Form.Group controlId="private-key">
-                      <Form.Label>Private key</Form.Label>
+                      <Form.Label>Chat Private key</Form.Label>
                       <div className="d-flex private-key-input">
                         <Form.Control
                           className="chat-priv-key"

From 2f11eaca791a5b6ff7c3bcd7f4058927439de631 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 21 Aug 2023 11:36:54 +0500
Subject: [PATCH 043/179] Fix zoom in effect in chat images

---
 src/common/components/chat-box/index.scss | 9 ++++-----
 src/common/components/chat-box/index.tsx  | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 687a821e202..062c4e35717 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -777,9 +777,8 @@
   width: 40px;
   height: 40px;
   border-radius: 50% !important;
-  // .chat-btn {
-  //   width: 40px;
-  //   border-radius: 50% !important;
-  //   padding: 0 !important;
-  // }
+}
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
 }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 773be0c2f76..af34ab6c34a 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -835,7 +835,7 @@ export default function ChatBox(props: Props) {
     }
   };
 
-  const inviteClicked = (content: string) => {
+  const copyToClipboard = (content: string) => {
     const textField = document.createElement("textarea");
     textField.innerText = content;
     document.body.appendChild(textField);
@@ -1338,7 +1338,7 @@ export default function ChatBox(props: Props) {
     {
       label: _t("chat.invite"),
       onClick: () =>
-        inviteClicked(
+        copyToClipboard(
           `http://localhost:3000/created/${currentCommunity?.name}?communityid=${currentChannel?.id}`
         ),
       icon: linkSvg
@@ -2078,7 +2078,7 @@ export default function ChatBox(props: Props) {
                           <p
                             className="copy-svg"
                             onClick={() => {
-                              inviteClicked(noStrPrivKey);
+                              copyToClipboard(noStrPrivKey);
                             }}
                           >
                             {copyContent}

From 537889854454a78d26f373bc282cae3ea70d7d63 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 21 Aug 2023 13:05:10 +0500
Subject: [PATCH 044/179] Make separate component to manage chat private key

---
 src/common/components/chat-box/index.scss     | 27 -----------
 src/common/components/chat-box/index.tsx      | 48 +++++--------------
 .../join-community-chat-btn/index.tsx         | 38 ++++++++++-----
 .../components/manage-chat-key/index.scss     | 33 +++++++++++++
 .../components/manage-chat-key/index.tsx      | 46 ++++++++++++++++++
 src/common/i18n/locales/en-US.json            |  5 +-
 6 files changed, 122 insertions(+), 75 deletions(-)
 create mode 100644 src/common/components/manage-chat-key/index.scss
 create mode 100644 src/common/components/manage-chat-key/index.tsx

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 062c4e35717..2a3d32fd19a 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -566,33 +566,6 @@
         }
       }
     }
-    .manage-chat-key {
-      .private-key {
-        margin-top: 2.5rem;
-        margin-left: 14px;
-        margin-right: 7px;
-      }
-      .chat-priv-key {
-        width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .copy-svg {
-        margin-top: 3px;
-        margin-left: 2px;
-        cursor: pointer;
-
-        svg {
-          @include themify(day) {
-            color: #a1a1a1;
-          }
-          @include themify(night) {
-            color: $white-two;
-          }
-        }
-      }
-    }
   }
   .chat {
     display: flex;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index af34ab6c34a..f76eed01f57 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -42,6 +42,7 @@ import { setNostrkeys } from "../../../providers/message-provider";
 import DropDown, { MenuItem } from "../dropdown";
 import FollowControls from "../follow-controls";
 import OrDivider from "../or-divider";
+import ManageChatKey from "../manage-chat-key";
 
 import {
   addMessageSVG,
@@ -64,9 +65,7 @@ import {
   removeUserSvg,
   resendMessageSvg,
   failedMessageSvg,
-  chatKeySvg,
-  copyOutlinSvg,
-  copyContent
+  chatKeySvg
 } from "../../img/svg";
 
 import {
@@ -103,6 +102,7 @@ import {
 import * as ls from "../../util/local-storage";
 import { renderPostBody } from "@ecency/render-helper";
 import { getAccessToken } from "../../helper/user-token";
+import accountReputation from "../../helper/account-reputation";
 import { _t } from "../../i18n";
 
 import { getAccountFull, getAccountReputations, lookupAccounts } from "../../api/hive";
@@ -111,7 +111,6 @@ import { addImage } from "../../api/private-api";
 import { getCommunity } from "../../api/bridge";
 
 import "./index.scss";
-import accountReputation from "../../helper/account-reputation";
 
 export interface profileData {
   joiningData: string;
@@ -289,6 +288,8 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     if (window.messageService) {
       setHasUserJoinedChat(true);
+      const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+      setNoStrPrivKey(noStrPrivKey);
     }
     setTimeout(() => {
       if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
@@ -1993,7 +1994,10 @@ export default function ChatBox(props: Props) {
                       </React.Fragment>
                     ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
                       <>
-                        <div className="start-chat-btn" style={{ marginTop: "20%" }}>
+                        <div
+                          className="d-flex justify-content-center import-chat-btn"
+                          style={{ marginTop: "20%" }}
+                        >
                           <Button
                             variant="primary"
                             onClick={() => setImportPrivKey(!importPrivKey)}
@@ -2022,7 +2026,7 @@ export default function ChatBox(props: Props) {
                                 />
                                 <InputGroup.Append>
                                   <Button onClick={handleImportChatSubmit}>
-                                    {_t("key-or-hot.sign")}
+                                    {_t("chat.submit")}
                                   </Button>
                                 </InputGroup.Append>
                               </InputGroup>
@@ -2032,9 +2036,8 @@ export default function ChatBox(props: Props) {
                             </Form>
                           </div>
                         )}
-
                         {<OrDivider />}
-                        <div className="start-chat-btn">
+                        <div className="d-flex justify-content-center create-new-chat-btn">
                           <Button
                             variant="primary"
                             onClick={() => {
@@ -2062,34 +2065,7 @@ export default function ChatBox(props: Props) {
                 )}
               </>
             ) : revelPrivateKey ? (
-              <>
-                <div className="manage-chat-key">
-                  <div className="private-key">
-                    <Form.Group controlId="private-key">
-                      <Form.Label>Chat Private key</Form.Label>
-                      <div className="d-flex private-key-input">
-                        <Form.Control
-                          className="chat-priv-key"
-                          type="text"
-                          readOnly={true}
-                          value={noStrPrivKey}
-                        />
-                        <Tooltip content={"Copy Private key"}>
-                          <p
-                            className="copy-svg"
-                            onClick={() => {
-                              copyToClipboard(noStrPrivKey);
-                            }}
-                          >
-                            {copyContent}
-                          </p>
-                        </Tooltip>
-                      </div>
-                    </Form.Group>
-                  </div>
-                  <OrDivider />
-                </div>
-              </>
+              <ManageChatKey noStrPrivKey={noStrPrivKey} copyPrivateKey={copyToClipboard} />
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
                 {showSpinner && chatButtonSpinner}
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 9d2eefc8dd6..364d82fc94d 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -37,10 +37,10 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [loadCommunity, setLoadCommunity] = useState(false);
+  const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
 
   useEffect(() => {
     getCommunityRoles();
-    console.log("Community", props.community);
   }, []);
 
   useEffect(() => {
@@ -53,14 +53,22 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [props.activeUser]);
 
   useEffect(() => {
-    if (window.messageService && activeUserKeys) {
+    if (window.messageService) {
       getCommunityRoles();
-      setHasUserJoinedChat(true);
+      fetchUserProfileData();
       if (loadCommunity) {
         window?.messageService?.loadChannel(currentChannel?.id!);
       }
+      if (initiateCommunityChat) {
+        createCommunityChat();
+      }
     }
-  }, [typeof window !== "undefined" && window?.messageService, activeUserKeys, loadCommunity]);
+  }, [
+    typeof window !== "undefined" && window?.messageService,
+    activeUserKeys,
+    loadCommunity,
+    initiateCommunityChat
+  ]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -176,6 +184,18 @@ export default function JoinCommunityChatBtn(props: Props) {
     setIsCommunityChatJoined(true);
   };
 
+  const startCommunityChat = () => {
+    if (!hasUserJoinedChat) {
+      handleJoinChat();
+      setInitiateCommunityChat(true);
+      setIsCommunityChatJoined(true);
+      console.log("if true");
+    } else {
+      createCommunityChat();
+      console.log("Else true");
+    }
+  };
+
   const fetchCurrentChannel = () => {
     for (const item of chat.channels) {
       if (item.communityName === props.community.name) {
@@ -214,8 +234,8 @@ export default function JoinCommunityChatBtn(props: Props) {
       {props.community.name === props.activeUser?.username ? (
         isCommunityChatJoined ? (
           <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
-        ) : hasUserJoinedChat && !isChatEnabled ? (
-          <Button onClick={createCommunityChat}>
+        ) : !isChatEnabled ? (
+          <Button onClick={startCommunityChat}>
             {inProgress && chatButtonSpinner}
             {_t("chat.start-community-chat")}
           </Button>
@@ -226,11 +246,7 @@ export default function JoinCommunityChatBtn(props: Props) {
             {_t("chat.join-community-chat")}
           </Button>
         ) : (
-          <Button onClick={handleJoinChat}>
-            {" "}
-            {inProgress && chatButtonSpinner}
-            {_t("chat.join-chat")}
-          </Button>
+          <></>
         )
       ) : isChatEnabled && !isCommunityChatJoined ? (
         <Button onClick={joinCommunityChat}>
diff --git a/src/common/components/manage-chat-key/index.scss b/src/common/components/manage-chat-key/index.scss
new file mode 100644
index 00000000000..777c9c5a110
--- /dev/null
+++ b/src/common/components/manage-chat-key/index.scss
@@ -0,0 +1,33 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
+
+.manage-chat-key {
+  .private-key {
+    margin-top: 2.5rem;
+    margin-left: 14px;
+    margin-right: 7px;
+  }
+  .chat-priv-key {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .copy-svg {
+    margin-top: 3px;
+    margin-left: 2px;
+    cursor: pointer;
+
+    svg {
+      @include themify(day) {
+        color: #a1a1a1;
+      }
+      @include themify(night) {
+        color: $white-two;
+      }
+    }
+  }
+}
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
new file mode 100644
index 00000000000..499ab1593b1
--- /dev/null
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { _t } from "../../i18n";
+import { copyContent } from "../../img/svg";
+import OrDivider from "../or-divider";
+import Tooltip from "../tooltip";
+
+import "./index.scss";
+
+interface Props {
+  noStrPrivKey: string;
+  copyPrivateKey: (privKey: string) => void;
+}
+
+export default function ManageChatKey(props: Props) {
+  return (
+    <>
+      <div className="manage-chat-key">
+        <div className="private-key">
+          <Form.Group controlId="private-key">
+            <Form.Label>{_t("chat.chat-priv-key")}</Form.Label>
+            <div className="d-flex private-key-input">
+              <Form.Control
+                className="chat-priv-key"
+                type="text"
+                readOnly={true}
+                value={props.noStrPrivKey}
+              />
+              <Tooltip content={_t("chat.copy-priv-key")}>
+                <p
+                  className="copy-svg"
+                  onClick={() => {
+                    props.copyPrivateKey(props.noStrPrivKey);
+                  }}
+                >
+                  {copyContent}
+                </p>
+              </Tooltip>
+            </div>
+          </Form.Group>
+        </div>
+        <OrDivider />
+      </div>
+    </>
+  );
+}
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 0fd7ddf2877..55e11fb65ea 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1850,7 +1850,10 @@
     "blocked-user-message": "You have been blocked from this community",
     "chat-joined": "Chat Joined",
     "start-community-chat": "Start Community Chat",
-    "join-community-chat": "Join Community Chat"
+    "join-community-chat": "Join Community Chat",
+    "submit": "Submit",
+    "chat-priv-key": "Chat Private key",
+    "copy-priv-key": "Copy Private key"
   },
   "add-image": {
     "title": "Add Image",

From de754c15e435d63a19dcf2d4171a84d852c3d80e Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 21 Aug 2023 16:59:54 +0500
Subject: [PATCH 045/179] Show start community chat button instead of join chat
 button if user has not created chat account yet in community page

---
 src/common/components/chat-box/index.tsx           |  1 -
 .../components/join-community-chat-btn/index.tsx   | 14 ++++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index f76eed01f57..a7aa64f5157 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -666,7 +666,6 @@ export default function ChatBox(props: Props) {
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
-    console.log("keys", keys);
     ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
     setNoStrPrivKey(keys.priv);
     await setProfileMetaData(props.activeUser, keys.pub);
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 364d82fc94d..553e0c54e42 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -39,10 +39,6 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [loadCommunity, setLoadCommunity] = useState(false);
   const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
 
-  useEffect(() => {
-    getCommunityRoles();
-  }, []);
-
   useEffect(() => {
     fetchCommunityProfile();
     fetchUserProfileData();
@@ -61,11 +57,11 @@ export default function JoinCommunityChatBtn(props: Props) {
       }
       if (initiateCommunityChat) {
         createCommunityChat();
+        setInitiateCommunityChat(false);
       }
     }
   }, [
     typeof window !== "undefined" && window?.messageService,
-    activeUserKeys,
     loadCommunity,
     initiateCommunityChat
   ]);
@@ -79,6 +75,9 @@ export default function JoinCommunityChatBtn(props: Props) {
   const fetchUserProfileData = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
     const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
+    if (hasNoStrKey) {
+      setActiveUserKeys(profileData.nsKey);
+    }
     setHasUserJoinedChat(hasNoStrKey);
   };
 
@@ -86,7 +85,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const communityProfile = await getProfileMetaData(props.community?.name);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty("channel");
     setIsChatEnabled(haschannelMetaData);
-    const hasNoStrKey = communityProfile && communityProfile.hasOwnProperty(NOSTRKEY);
+
     if (!currentChannel) {
       setCurrentChannel(communityProfile.channel);
     }
@@ -189,10 +188,9 @@ export default function JoinCommunityChatBtn(props: Props) {
       handleJoinChat();
       setInitiateCommunityChat(true);
       setIsCommunityChatJoined(true);
-      console.log("if true");
+      return;
     } else {
       createCommunityChat();
-      console.log("Else true");
     }
   };
 

From 28593e619ece4156fbdc8f5b5b5e100b6eb02858 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 21 Aug 2023 18:09:57 +0500
Subject: [PATCH 046/179] Add community team at the time of community chat
 creation

---
 .../join-community-chat-btn/index.tsx         | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 553e0c54e42..3e981a7903c 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -49,20 +49,25 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [props.activeUser]);
 
   useEffect(() => {
-    if (window.messageService) {
+    if (activeUserKeys) {
       getCommunityRoles();
+    }
+  }, [activeUserKeys]);
+
+  useEffect(() => {
+    if (window.messageService) {
       fetchUserProfileData();
       if (loadCommunity) {
         window?.messageService?.loadChannel(currentChannel?.id!);
       }
-      if (initiateCommunityChat) {
+      if (initiateCommunityChat && communityRoles.length !== 0) {
         createCommunityChat();
-        setInitiateCommunityChat(false);
       }
     }
   }, [
     typeof window !== "undefined" && window?.messageService,
     loadCommunity,
+    communityRoles,
     initiateCommunityChat
   ]);
 
@@ -105,7 +110,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const getCommunityRoles = async () => {
-    let communityRoles: communityModerator[] = [];
+    let communityTeam: communityModerator[] = [];
     const { community, activeUser } = props;
     const ownerData = await getProfileMetaData(community.name);
     const ownerRole = {
@@ -114,7 +119,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       role: "owner"
     };
 
-    communityRoles.push(ownerRole);
+    communityTeam.push(ownerRole);
 
     for (let i = 0; i < community.team.length; i++) {
       const item = community.team[i];
@@ -127,11 +132,11 @@ export default function JoinCommunityChatBtn(props: Props) {
             role: item[1]
           };
 
-          communityRoles.push(roleInfo);
+          communityTeam.push(roleInfo);
         }
       }
     }
-    setCommunityRoles(communityRoles);
+    setCommunityRoles(communityTeam);
   };
 
   const createCommunityChat = async () => {
@@ -164,6 +169,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     } finally {
       setInProgress(false);
       setIsCommunityChatJoined(true);
+      setInitiateCommunityChat(false);
     }
   };
 

From 57f60626a33ee566d533a00f9f8926969470a798 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 22 Aug 2023 14:21:45 +0500
Subject: [PATCH 047/179] Disable hovering on gif component in chat popup

---
 .../components/chat-box/chat-constants.ts     |  4 +-
 src/common/components/chat-box/index.scss     | 16 +---
 src/common/components/chat-box/index.tsx      | 82 +++++++++++--------
 .../components/emoji-picker/_index.scss       |  2 +-
 src/common/components/gif-picker/_index.scss  |  2 +-
 5 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index cb39c187f30..71578f5d1ab 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -1,6 +1,6 @@
 export const EmojiPickerStyle = {
   width: "94%",
-  bottom: "45px",
+  bottom: "49px",
   left: "0px",
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
@@ -10,7 +10,7 @@ export const EmojiPickerStyle = {
 
 export const GifPickerStyle = {
   width: "94%",
-  bottom: "45px",
+  bottom: "49px",
   left: 0,
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 2a3d32fd19a..c1922e26349 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -587,9 +587,6 @@
 
     .chatbox-emoji-picker {
       .chatbox-emoji {
-        .emoji-picker {
-          display: none;
-        }
         margin: 8px 0 0 7px;
         cursor: pointer;
 
@@ -598,13 +595,6 @@
           fill: rgb(60, 68, 73);
         }
       }
-      &:hover {
-        .chatbox-emoji {
-          .emoji-picker {
-            display: block;
-          }
-        }
-      }
     }
     .chatbox-image {
       cursor: pointer;
@@ -638,8 +628,8 @@
     }
   }
   &.small-screen {
-    right: 0.7rem;
-    width: 94vw;
+    right: 0;
+    width: 100vw;
     display: grid;
     grid-template-rows: repeat(18, 1fr);
     grid-template-columns: repeat(1, 1fr);
@@ -658,7 +648,7 @@
       max-width: 75vw !important;
     }
     &.expanded {
-      height: 90vh;
+      height: 100vh;
     }
     .message-header-title {
       width: 100vw;
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index a7aa64f5157..a7465e7adf2 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -43,6 +43,7 @@ import DropDown, { MenuItem } from "../dropdown";
 import FollowControls from "../follow-controls";
 import OrDivider from "../or-divider";
 import ManageChatKey from "../manage-chat-key";
+import ClickAwayListener from "../clickaway-listener";
 
 import {
   addMessageSVG,
@@ -199,6 +200,7 @@ export default function ChatBox(props: Props) {
   const [importPrivKey, setImportPrivKey] = useState(false);
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
@@ -2096,45 +2098,57 @@ export default function ChatBox(props: Props) {
 
           {(currentUser || isCommunity) && (
             <div className={`chat ${isActveUserRemoved ? "disable" : ""}`}>
-              <div className="chatbox-emoji-picker">
-                <div className="chatbox-emoji">
-                  <Tooltip content={_t("editor-toolbar.emoji")}>
-                    <div className="emoji-icon">{emoticonHappyOutlineSvg}</div>
-                  </Tooltip>
-                  <EmojiPicker
-                    style={EmojiPickerStyle}
-                    fallback={(e) => {
-                      handleEmojiSelection(e);
-                    }}
-                  />
+              <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
+                <div className="chatbox-emoji-picker">
+                  <div className="chatbox-emoji">
+                    <Tooltip content={_t("editor-toolbar.emoji")}>
+                      <div
+                        className="emoji-icon"
+                        onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                      >
+                        {emoticonHappyOutlineSvg}
+                      </div>
+                    </Tooltip>
+                    {showEmojiPicker && (
+                      <EmojiPicker
+                        style={EmojiPickerStyle}
+                        fallback={(e) => {
+                          handleEmojiSelection(e);
+                        }}
+                      />
+                    )}
+                  </div>
                 </div>
-              </div>
+              </ClickAwayListener>
 
               {message.length === 0 && (
                 <React.Fragment>
-                  <div className="chatbox-emoji-picker">
-                    <div className="chatbox-emoji">
-                      <Tooltip content={_t("Gif")}>
-                        <div className="emoji-icon" onClick={toggleGif}>
-                          {" "}
-                          {gifIcon}
-                        </div>
-                      </Tooltip>
-                      {shGif && (
-                        <GifPicker
-                          style={GifPickerStyle}
-                          gifImagesStyle={GifImagesStyle}
-                          shGif={true}
-                          changeState={(gifState) => {
-                            setShGif(gifState!);
-                          }}
-                          fallback={(e) => {
-                            handleGifSelection(e);
-                          }}
-                        />
-                      )}
+                  <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
+                    <div className="chatbox-emoji-picker">
+                      <div className="chatbox-emoji">
+                        <Tooltip content={_t("Gif")}>
+                          <div className="emoji-icon" onClick={toggleGif}>
+                            {" "}
+                            {gifIcon}
+                          </div>
+                        </Tooltip>
+                        {shGif && (
+                          <GifPicker
+                            style={GifPickerStyle}
+                            gifImagesStyle={GifImagesStyle}
+                            shGif={true}
+                            changeState={(gifState) => {
+                              setShGif(gifState!);
+                            }}
+                            fallback={(e) => {
+                              handleGifSelection(e);
+                            }}
+                          />
+                        )}
+                      </div>
                     </div>
-                  </div>
+                  </ClickAwayListener>
+
                   <Tooltip content={"Image"}>
                     <div
                       className="chatbox-image"
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index c478b0df909..db99e703f4b 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -13,7 +13,7 @@
   padding: 14px 6px;
 
   @media (max-width: $sm-break) {
-    width: 160px !important;
+    width: 160px;
   }
 
   @include themify(day) {
diff --git a/src/common/components/gif-picker/_index.scss b/src/common/components/gif-picker/_index.scss
index edba9650abc..b35fbd0230a 100644
--- a/src/common/components/gif-picker/_index.scss
+++ b/src/common/components/gif-picker/_index.scss
@@ -14,7 +14,7 @@
   padding: 14px 6px;
 
   @media (max-width: $sm-break) {
-    width: 160px !important;
+    width: 160px;
   }
 
   @include themify(day) {

From 3d4e40eea33c7d3a070f6f50412dbf2547a63719 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 22 Aug 2023 16:12:41 +0500
Subject: [PATCH 048/179] Fix console errors and fix position of
 hide-message-svg in community chat

---
 src/common/components/chat-box/index.scss |  4 ++++
 src/common/components/chat-box/index.tsx  | 18 +++++++++++++-----
 src/lib/nostr-tools/filter.ts             |  6 +++---
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index c1922e26349..c06bdfca627 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -564,6 +564,10 @@
           cursor: pointer;
           margin-bottom: 0;
         }
+        &.receiver {
+          margin-top: 33px;
+          margin-left: 10px;
+        }
       }
     }
   }
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index a7465e7adf2..772ba107aeb 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { History } from "history";
 import {
@@ -147,7 +147,7 @@ const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
 export default function ChatBox(props: Props) {
   const prevPropsRef = useRef(props);
-  const popoverRef = useRef(null);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
   const fileInput = React.createRef<HTMLInputElement>();
   const [expanded, setExpanded] = useState(false);
@@ -247,12 +247,17 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
+
+      if (!popoverRef.current) {
+        return;
+      }
+
       const isAvatarClicked =
         clickedElement.classList.contains("user-avatar") &&
         clickedElement.classList.contains("medium");
       if (
         popoverRef.current &&
-        !(popoverRef.current as HTMLElement).contains(event.target as Node) &&
+        !popoverRef.current?.contains(event.target as Node) &&
         !isAvatarClicked
       ) {
         setClickedMessage("");
@@ -1676,7 +1681,10 @@ export default function ChatBox(props: Props) {
                                 className="profile-popover"
                               >
                                 <Popover.Content>
-                                  <div className="profile-box" ref={popoverRef}>
+                                  <div
+                                    className="profile-box"
+                                    ref={popoverRef as RefObject<HTMLDivElement>}
+                                  >
                                     <div className="profile-box-content">
                                       <div className="profile-box-logo d-flex justify-content-center">
                                         <UserAvatar username={name!} size="large" />
@@ -1799,7 +1807,7 @@ export default function ChatBox(props: Props) {
                                     {hoveredMessageId === pMsg.id &&
                                       privilegedUsers.includes(props.activeUser?.username!) && (
                                         <Tooltip content={"Hide Message"}>
-                                          <div className="hide-msg">
+                                          <div className="hide-msg receiver">
                                             <p
                                               className="hide-msg-svg"
                                               onClick={() => {
diff --git a/src/lib/nostr-tools/filter.ts b/src/lib/nostr-tools/filter.ts
index b995c795391..07b241a9c3f 100644
--- a/src/lib/nostr-tools/filter.ts
+++ b/src/lib/nostr-tools/filter.ts
@@ -8,7 +8,7 @@ export type Filter = {
   since?: number;
   until?: number;
   limit?: number;
-  [key: `#${string}`]: string[];
+  [key: string]: string[] | number | number[] | undefined;
 };
 
 export function matchFilter(filter: Filter, event: Event & { id: string }): boolean {
@@ -25,8 +25,8 @@ export function matchFilter(filter: Filter, event: Event & { id: string }): bool
   for (let f in filter) {
     if (f[0] === "#") {
       let tagName = f.slice(1);
-      let values = filter[`#${tagName}`];
-      if (values && !event.tags?.find(([t, v]) => t === f.slice(1) && values.indexOf(v) !== -1))
+      let values = filter[`#${tagName}`] as string[];
+      if (values && !event.tags?.find(([t, v]) => t === f.slice(1) && values!.indexOf(v) !== -1))
         return false;
     }
   }

From 1543e566fb0ffa67ca1468974fb06563cb1076db Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 23 Aug 2023 15:27:58 +0500
Subject: [PATCH 049/179] test update

---
 package-lock.json                             | 21723 ++++++++++++++++
 src/common/components/chat-box/index.tsx      |     4 +-
 .../comment/__snapshots__/index.spec.tsx.snap |    14 +-
 .../components/community-cover/index.spec.tsx |     3 +-
 .../__snapshots__/index.spec.tsx.snap         |     1 +
 .../__snapshots__/index.spec.tsx.snap         |     3 +
 .../__snapshots__/index.spec.tsx.snap         |     1 +
 .../friends/__snapshots__/index.spec.tsx.snap |     1 +
 .../__snapshots__/index.spec.tsx.snap         |     1 +
 .../components/manage-chat-key/index.tsx      |     2 +-
 .../__snapshots__/index.spec.tsx.snap         |     2 +
 .../__snapshots__/index.spec.tsx.snap         |     2 +
 12 files changed, 21747 insertions(+), 10 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000000..a45c98e0490
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,21723 @@
+{
+  "name": "ecency-vision",
+  "version": "3.0.35",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@ampproject/toolbox-core": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-core/-/toolbox-core-2.8.0.tgz",
+      "integrity": "sha512-YrMRrE9zfAChPlFLT+B4yoGEH6CR/Yerjm6SCxuFSPARK/LaytUV+ZhZ03tlMv5wUHDH2Lq8e/lGymME0CXBhA==",
+      "requires": {
+        "cross-fetch": "3.1.2",
+        "lru-cache": "6.0.0"
+      }
+    },
+    "@ampproject/toolbox-optimizer": {
+      "version": "2.8.10",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-optimizer/-/toolbox-optimizer-2.8.10.tgz",
+      "integrity": "sha512-GuXkLHmGJ3pko6aozHa3msxxahiUJM163eG8LEji/MTfNGf0QJCWSQ46a+yHG3tBzYtLexVHWU7A8QMfRbxWGw==",
+      "requires": {
+        "@ampproject/toolbox-core": "2.8.0",
+        "@ampproject/toolbox-runtime-version": "2.8.0",
+        "@ampproject/toolbox-script-csp": "2.8.0",
+        "@ampproject/toolbox-validator-rules": "2.8.0",
+        "abort-controller": "3.0.0",
+        "cross-fetch": "3.1.2",
+        "cssnano-simple": "2.0.0",
+        "dom-serializer": "1.3.2",
+        "domhandler": "4.2.2",
+        "domutils": "2.8.0",
+        "htmlparser2": "7.2.0",
+        "https-proxy-agent": "5.0.0",
+        "lru-cache": "6.0.0",
+        "normalize-html-whitespace": "1.0.0",
+        "postcss": "8.2.13",
+        "postcss-safe-parser": "5.0.2",
+        "terser": "5.5.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
+          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+        },
+        "htmlparser2": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.2",
+            "domutils": "^2.8.0",
+            "entities": "^3.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="
+        },
+        "terser": {
+          "version": "5.5.1",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
+          "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
+          "requires": {
+            "commander": "^2.20.0",
+            "source-map": "~0.7.2",
+            "source-map-support": "~0.5.19"
+          }
+        }
+      }
+    },
+    "@ampproject/toolbox-runtime-version": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.8.0.tgz",
+      "integrity": "sha512-vkotDc6S3Q3Xm6LIPzWo2T1+yxvj+bIDrD4SObk6J4SVqilIlPEunLayS602Su+ZXqNC82VjEeD1ARAtc613dQ==",
+      "requires": {
+        "@ampproject/toolbox-core": "^2.8.0"
+      }
+    },
+    "@ampproject/toolbox-script-csp": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.8.0.tgz",
+      "integrity": "sha512-5/ytdTzhmdIyOkcEBskh5ZlLJ8V4bbe+1pY9LZQ8DfWrSOVD1pJ+LtAO/7lmTM+HXxMAKPYDRpvsJc0vvbY0tw=="
+    },
+    "@ampproject/toolbox-validator-rules": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.8.0.tgz",
+      "integrity": "sha512-kbInwnzpEPVZkKigpKFkF/DQ2LsuZ5b8vrEFHjJ4P+meKVQg2QF/UWAQpIMMdjGe1AQBT+DWm91n9UyjgqfnWQ==",
+      "requires": {
+        "cross-fetch": "3.1.2"
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.14.5"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
+      "integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz",
+      "integrity": "sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==",
+      "dev": true,
+      "requires": {
+        "@ampproject/remapping": "^2.1.0",
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-compilation-targets": "^7.17.10",
+        "@babel/helper-module-transforms": "^7.17.7",
+        "@babel/helpers": "^7.17.9",
+        "@babel/parser": "^7.17.10",
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.17.10",
+        "@babel/types": "^7.17.10",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.10",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
+      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz",
+      "integrity": "sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.10"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz",
+      "integrity": "sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.17.10",
+        "@babel/helper-validator-option": "^7.16.7",
+        "browserslist": "^4.20.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.21.10",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001517",
+            "electron-to-chromium": "^1.4.477",
+            "node-releases": "^2.0.13",
+            "update-browserslist-db": "^1.0.11"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001522",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
+          "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.4.499",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
+          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "2.0.13",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
+      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-member-expression-to-functions": "^7.17.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
+      "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        }
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
+      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
+      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
+      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.16.7",
+        "@babel/types": "^7.17.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "chalk": "^2.4.2",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
+      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+      "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
+      "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-simple-access": "^7.17.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.17.3",
+        "@babel/types": "^7.17.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "chalk": "^2.4.2",
+            "js-tokens": "^4.0.0"
+          },
+          "dependencies": {
+            "@babel/helper-validator-identifier": {
+              "version": "7.22.5",
+              "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+              "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+              "dev": true
+            }
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
+      "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-wrap-function": "^7.22.9"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
+      "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
+      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "dev": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "dev": true
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz",
+      "integrity": "sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/types": "^7.22.10"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
+      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.10",
+        "@babel/types": "^7.22.10"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.10",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+          "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
+          "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.10",
+            "@babel/generator": "^7.22.10",
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-function-name": "^7.22.5",
+            "@babel/helper-hoist-variables": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "@babel/parser": "^7.22.10",
+            "@babel/types": "^7.22.10",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/parser": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+      "dev": true
+    },
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+      "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+      "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "dependencies": {
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
+      "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-class-static-block": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
+      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.22.5",
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-function-name": "^7.22.5",
+            "@babel/helper-member-expression-to-functions": "^7.22.5",
+            "@babel/helper-optimise-call-expression": "^7.22.5",
+            "@babel/helper-replace-supers": "^7.22.9",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
+      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
+      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
+      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
+      "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
+      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
+      "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.17.0",
+        "@babel/helper-compilation-targets": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.16.7"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.22.5",
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-function-name": "^7.22.5",
+            "@babel/helper-member-expression-to-functions": "^7.22.5",
+            "@babel/helper-optimise-call-expression": "^7.22.5",
+            "@babel/helper-replace-supers": "^7.22.9",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.22.5",
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-function-name": "^7.22.5",
+            "@babel/helper-member-expression-to-functions": "^7.22.5",
+            "@babel/helper-optimise-call-expression": "^7.22.5",
+            "@babel/helper-replace-supers": "^7.22.9",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
+      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz",
+      "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+      "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+      "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+      "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.10.tgz",
+      "integrity": "sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
+      "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.22.9",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+          "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
+          "dev": true
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
+          "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.22.9",
+            "@babel/helper-validator-option": "^7.22.5",
+            "browserslist": "^4.21.9",
+            "lru-cache": "^5.1.1",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+          "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.21.10",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001517",
+            "electron-to-chromium": "^1.4.477",
+            "node-releases": "^2.0.13",
+            "update-browserslist-db": "^1.0.11"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.4.499",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
+          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "node-releases": {
+          "version": "2.0.13",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+      "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz",
+      "integrity": "sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+      "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+      "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+      "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+      "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+      "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.22.9",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+          "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
+          "dev": true
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
+          "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.22.9",
+            "@babel/helper-validator-option": "^7.22.5",
+            "browserslist": "^4.21.9",
+            "lru-cache": "^5.1.1",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+          "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
+          "dev": true
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.21.10",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001517",
+            "electron-to-chromium": "^1.4.477",
+            "node-releases": "^2.0.13",
+            "update-browserslist-db": "^1.0.11"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.4.499",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
+          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "node-releases": {
+          "version": "2.0.13",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+      "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+      "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+      "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.22.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-module-imports": "^7.22.5",
+            "@babel/helper-simple-access": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "@babel/helper-validator-identifier": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
+      "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-simple-access": "^7.17.7",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "dependencies": {
+        "@babel/helper-simple-access": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+          "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.22.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-module-imports": "^7.22.5",
+            "@babel/helper-simple-access": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "@babel/helper-validator-identifier": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+      "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.22.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-module-imports": "^7.22.5",
+            "@babel/helper-simple-access": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "@babel/helper-validator-identifier": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+      "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+      "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
+      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+      "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+      "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-react-display-name": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
+      "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
+      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-react-jsx-development": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
+      "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz",
+      "integrity": "sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+      "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz",
+      "integrity": "sha512-6jrMilUAJhktTr56kACL8LnWC5hx3Lf27BS0R0DSyW/OoJfb/iTHeE96V3b1dgKG3FSFdd/0culnYWMkjcKCig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "babel-plugin-polyfill-corejs2": "^0.3.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
+        "babel-plugin-polyfill-regenerator": "^0.3.0",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+      "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+      "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+      "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+      "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+      "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.10.tgz",
+      "integrity": "sha512-7++c8I/ymsDo4QQBAgbraXLzIM6jmfao11KgIBEYZRReWzNWH9NtNgJcyrZiXsOPh523FQm6LfpLyy/U5fn46A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.10",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-typescript": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
+          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.22.5",
+            "@babel/helper-environment-visitor": "^7.22.5",
+            "@babel/helper-function-name": "^7.22.5",
+            "@babel/helper-member-expression-to-functions": "^7.22.5",
+            "@babel/helper-optimise-call-expression": "^7.22.5",
+            "@babel/helper-replace-supers": "^7.22.9",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+            "@babel/helper-split-export-declaration": "^7.22.6",
+            "semver": "^6.3.1"
+          }
+        },
+        "@babel/helper-environment-visitor": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+          "dev": true
+        },
+        "@babel/helper-function-name": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.22.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.22.5",
+            "@babel/parser": "^7.22.5",
+            "@babel/types": "^7.22.5"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz",
+      "integrity": "sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+      "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.17.10.tgz",
+      "integrity": "sha512-YNgyBHZQpeoBSRBg0xixsZzfT58Ze1iZrajvv0lJc70qDDGuGfonEnMGfWeSY0mQ3JTuCWFbMkzFRVafOyJx4g==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.17.10",
+        "@babel/helper-compilation-targets": "^7.17.10",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
+        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
+        "@babel/plugin-proposal-class-properties": "^7.16.7",
+        "@babel/plugin-proposal-class-static-block": "^7.17.6",
+        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
+        "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
+        "@babel/plugin-proposal-json-strings": "^7.16.7",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+        "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
+        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+        "@babel/plugin-proposal-private-methods": "^7.16.11",
+        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.16.7",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-transform-arrow-functions": "^7.16.7",
+        "@babel/plugin-transform-async-to-generator": "^7.16.8",
+        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
+        "@babel/plugin-transform-block-scoping": "^7.16.7",
+        "@babel/plugin-transform-classes": "^7.16.7",
+        "@babel/plugin-transform-computed-properties": "^7.16.7",
+        "@babel/plugin-transform-destructuring": "^7.17.7",
+        "@babel/plugin-transform-dotall-regex": "^7.16.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.16.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
+        "@babel/plugin-transform-for-of": "^7.16.7",
+        "@babel/plugin-transform-function-name": "^7.16.7",
+        "@babel/plugin-transform-literals": "^7.16.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
+        "@babel/plugin-transform-modules-amd": "^7.16.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.17.9",
+        "@babel/plugin-transform-modules-systemjs": "^7.17.8",
+        "@babel/plugin-transform-modules-umd": "^7.16.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.17.10",
+        "@babel/plugin-transform-new-target": "^7.16.7",
+        "@babel/plugin-transform-object-super": "^7.16.7",
+        "@babel/plugin-transform-parameters": "^7.16.7",
+        "@babel/plugin-transform-property-literals": "^7.16.7",
+        "@babel/plugin-transform-regenerator": "^7.17.9",
+        "@babel/plugin-transform-reserved-words": "^7.16.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
+        "@babel/plugin-transform-spread": "^7.16.7",
+        "@babel/plugin-transform-sticky-regex": "^7.16.7",
+        "@babel/plugin-transform-template-literals": "^7.16.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.16.7",
+        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
+        "@babel/plugin-transform-unicode-regex": "^7.16.7",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.17.10",
+        "babel-plugin-polyfill-corejs2": "^0.3.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
+        "babel-plugin-polyfill-regenerator": "^0.3.0",
+        "core-js-compat": "^3.22.1",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6.tgz",
+      "integrity": "sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/preset-react": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.7.tgz",
+      "integrity": "sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-transform-react-display-name": "^7.16.7",
+        "@babel/plugin-transform-react-jsx": "^7.16.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.16.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.16.7"
+      }
+    },
+    "@babel/preset-typescript": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz",
+      "integrity": "sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-transform-typescript": "^7.16.7"
+      }
+    },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "@babel/runtime": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
+      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
+    "@babel/template": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/types": "^7.22.5"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
+      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.17.10",
+        "@babel/types": "^7.17.10",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
+          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.22.10",
+            "chalk": "^2.4.2"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
+          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.10",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
+          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.22.5",
+            "chalk": "^2.4.2",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.22.10",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
+          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
+          "dev": true
+        },
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+          "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@babel/types": {
+      "version": "7.22.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
+      "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.22.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+          "dev": true
+        }
+      }
+    },
+    "@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "@cnakazawa/watch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
+      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
+      "dev": true,
+      "requires": {
+        "exec-sh": "^0.3.2",
+        "minimist": "^1.2.0"
+      }
+    },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true
+    },
+    "@ecency/render-helper": {
+      "version": "2.2.25",
+      "requires": {
+        "he": "^1.2.0",
+        "lolight": "^1.4.0",
+        "lru-cache": "^6.0.0",
+        "multihashes": "0.4.13",
+        "path": "^0.12.7",
+        "querystring": "^0.2.0",
+        "react-native-crypto-js": "^1.0.0",
+        "remarkable": "^2.0.1",
+        "url": "^0.11.0",
+        "xmldom": "^0.5.0",
+        "xss": "^1.0.9"
+      },
+      "dependencies": {
+        "remarkable": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.1.tgz",
+          "integrity": "sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==",
+          "requires": {
+            "argparse": "^1.0.10",
+            "autolinker": "^3.11.0"
+          },
+          "dependencies": {
+            "argparse": {
+              "version": "1.0.10",
+              "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+              "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+              "requires": {
+                "sprintf-js": "~1.0.2"
+              }
+            },
+            "autolinker": {
+              "version": "3.16.2",
+              "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.16.2.tgz",
+              "integrity": "sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==",
+              "requires": {
+                "tslib": "^2.3.0"
+              }
+            }
+          }
+        },
+        "xss": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.9.tgz",
+          "integrity": "sha512-2t7FahYnGJys6DpHLhajusId7R0Pm2yTmuL0GV9+mV0ZlaLSnb2toBmppATfg5sWIhZQGlsTLoecSzya+l4EAQ==",
+          "requires": {
+            "commander": "^2.20.3",
+            "cssfilter": "0.0.10"
+          }
+        }
+      }
+    },
+    "@ecency/render-helper-amp": {
+      "version": "1.1.0",
+      "requires": {
+        "@ampproject/toolbox-optimizer": "^2.8.10",
+        "amphtml-validator": "^1.0.35",
+        "cheerio": "^1.0.0-rc.11",
+        "he": "^1.2.0",
+        "lru-cache": "^5.1.1",
+        "multihashes": "0.4.13",
+        "path": "^0.12.7",
+        "probe-image-size": "^7.2.1",
+        "querystring": "^0.2.0",
+        "remarkable": "^1.7.3",
+        "url": "^0.11.0",
+        "xmldom": "^0.5.0",
+        "xss": "^1.0.8"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "xss": {
+          "version": "1.0.14",
+          "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+          "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+          "requires": {
+            "commander": "^2.20.3",
+            "cssfilter": "0.0.10"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
+      }
+    },
+    "@firebase/analytics": {
+      "version": "0.8.0",
+      "requires": {
+        "@firebase/component": "0.5.17",
+        "@firebase/installations": "0.5.12",
+        "@firebase/logger": "0.3.3",
+        "@firebase/util": "1.6.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/app": {
+      "version": "0.7.28",
+      "requires": {
+        "@firebase/component": "0.5.17",
+        "@firebase/logger": "0.3.3",
+        "@firebase/util": "1.6.3",
+        "idb": "7.0.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/component": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.17.tgz",
+      "integrity": "sha512-mTM5CBSIlmI+i76qU4+DhuExnWtzcPS3cVgObA3VAjliPPr3GrUlTaaa8KBGfxsD27juQxMsYA0TvCR5X+GQ3Q==",
+      "requires": {
+        "@firebase/util": "1.6.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/installations": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.5.12.tgz",
+      "integrity": "sha512-Zq43fCE0PB5tGJ3ojzx5RNQzKdej1188qgAk22rwjuhP7npaG/PlJqDG1/V0ZjTLRePZ1xGrfXSPlA17c/vtNw==",
+      "requires": {
+        "@firebase/component": "0.5.17",
+        "@firebase/util": "1.6.3",
+        "idb": "7.0.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/logger": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.3.3.tgz",
+      "integrity": "sha512-POTJl07jOKTOevLXrTvJD/VZ0M6PnJXflbAh5J9VGkmtXPXNG6MdZ9fmRgqYhXKTaDId6AQenQ262uwgpdtO0Q==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/messaging": {
+      "version": "0.9.16",
+      "requires": {
+        "@firebase/component": "0.5.17",
+        "@firebase/installations": "0.5.12",
+        "@firebase/messaging-interop-types": "0.1.0",
+        "@firebase/util": "1.6.3",
+        "idb": "7.0.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@firebase/messaging-interop-types": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.1.0.tgz",
+      "integrity": "sha512-DbvUl/rXAZpQeKBnwz0NYY5OCqr2nFA0Bj28Fmr3NXGqR4PAkfTOHuQlVtLO1Nudo3q0HxAYLa68ZDAcuv2uKQ=="
+    },
+    "@firebase/util": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.6.3.tgz",
+      "integrity": "sha512-FujteO6Zjv6v8A4HS+t7c+PjU0Kaxj+rOnka0BsI/twUaCC9t8EQPmXpWZdk7XfszfahJn2pqsflUWUhtUkRlg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@gar/promisify": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
+      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
+      "dev": true
+    },
+    "@hiveio/dhive": {
+      "version": "1.2.5",
+      "requires": {
+        "bigi": "^1.4.2",
+        "bs58": "^4.0.1",
+        "bytebuffer": "^5.0.1",
+        "core-js": "^3.6.4",
+        "cross-fetch": "^3.0.4",
+        "ecurve": "^1.0.6",
+        "https": "^1.0.0",
+        "jsbi": "^3.1.4",
+        "node-fetch": "^2.6.0",
+        "ripemd160": "^2.0.2",
+        "secp256k1": "^3.8.0",
+        "verror": "^1.10.0",
+        "whatwg-fetch": "^3.0.0"
+      },
+      "dependencies": {
+        "bs58": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
+          "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
+          "requires": {
+            "base-x": "^3.0.2"
+          }
+        },
+        "cross-fetch": {
+          "version": "3.1.5",
+          "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+          "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+          "requires": {
+            "node-fetch": "2.6.7"
+          }
+        },
+        "node-fetch": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@hiveio/hivescript": {
+      "version": "1.2.7"
+    },
+    "@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true
+    },
+    "@jest/console": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.2.tgz",
+      "integrity": "sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@jest/core": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.3.tgz",
+      "integrity": "sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/reporters": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-changed-files": "^26.6.2",
+        "jest-config": "^26.6.3",
+        "jest-haste-map": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-resolve-dependencies": "^26.6.3",
+        "jest-runner": "^26.6.3",
+        "jest-runtime": "^26.6.3",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "jest-watcher": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "p-each-series": "^2.1.0",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "@jest/environment": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.2.tgz",
+      "integrity": "sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==",
+      "dev": true,
+      "requires": {
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@jest/fake-timers": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.2.tgz",
+      "integrity": "sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@sinonjs/fake-timers": "^6.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^26.6.2",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@jest/globals": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.2.tgz",
+      "integrity": "sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "expect": "^26.6.2"
+      }
+    },
+    "@jest/reporters": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.2.tgz",
+      "integrity": "sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==",
+      "dev": true,
+      "requires": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.4",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^4.0.3",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.0.2",
+        "jest-haste-map": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^7.0.0"
+      }
+    },
+    "@jest/source-map": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-26.6.2.tgz",
+      "integrity": "sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.4",
+        "source-map": "^0.6.0"
+      }
+    },
+    "@jest/test-result": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.2.tgz",
+      "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      }
+    },
+    "@jest/test-sequencer": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz",
+      "integrity": "sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==",
+      "dev": true,
+      "requires": {
+        "@jest/test-result": "^26.6.2",
+        "graceful-fs": "^4.2.4",
+        "jest-haste-map": "^26.6.2",
+        "jest-runner": "^26.6.3",
+        "jest-runtime": "^26.6.3"
+      }
+    },
+    "@jest/transform": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
+      "integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^26.6.2",
+        "babel-plugin-istanbul": "^6.0.0",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.4",
+        "jest-haste-map": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-util": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "pirates": "^4.0.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      },
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": {
+          "version": "1.4.14",
+          "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+          "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+        }
+      }
+    },
+    "@loadable/component": {
+      "version": "5.15.2",
+      "requires": {
+        "@babel/runtime": "^7.7.7",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.17.9",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+          "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        }
+      }
+    },
+    "@loadable/server": {
+      "version": "5.15.2",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "@loadable/webpack-plugin": {
+      "version": "5.15.2",
+      "dev": true,
+      "requires": {
+        "make-dir": "^3.0.2"
+      }
+    },
+    "@noble/curves": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.0.0.tgz",
+      "integrity": "sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==",
+      "requires": {
+        "@noble/hashes": "1.3.0"
+      }
+    },
+    "@noble/hashes": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.0.tgz",
+      "integrity": "sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg=="
+    },
+    "@noble/secp256k1": {
+      "version": "1.7.1"
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@npmcli/fs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
+      "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
+      "dev": true,
+      "requires": {
+        "@gar/promisify": "^1.0.1",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@npmcli/move-file": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
+      "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^1.0.4",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
+      }
+    },
+    "@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@redis/bloom": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
+      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
+      "dev": true
+    },
+    "@redis/client": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.5.8.tgz",
+      "integrity": "sha512-xzElwHIO6rBAqzPeVnCzgvrnBEcFL1P0w8P65VNLRkdVW8rOE58f52hdj0BDgmsdOm4f1EoXPZtH4Fh7M/qUpw==",
+      "dev": true,
+      "requires": {
+        "cluster-key-slot": "1.1.2",
+        "generic-pool": "3.9.0",
+        "yallist": "4.0.0"
+      }
+    },
+    "@redis/graph": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
+      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
+      "dev": true
+    },
+    "@redis/json": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
+      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
+      "dev": true
+    },
+    "@redis/search": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.3.tgz",
+      "integrity": "sha512-4Dg1JjvCevdiCBTZqjhKkGoC5/BcB7k9j99kdMnaXFXg8x4eyOIVg9487CMv7/BUVkFLZCaIh8ead9mU15DNng==",
+      "dev": true
+    },
+    "@redis/time-series": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.4.tgz",
+      "integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==",
+      "dev": true
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.27",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@scure/base": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz",
+      "integrity": "sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA=="
+    },
+    "@scure/bip32": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.3.0.tgz",
+      "integrity": "sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==",
+      "requires": {
+        "@noble/curves": "~1.0.0",
+        "@noble/hashes": "~1.3.0",
+        "@scure/base": "~1.1.0"
+      }
+    },
+    "@scure/bip39": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.2.0.tgz",
+      "integrity": "sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==",
+      "requires": {
+        "@noble/hashes": "~1.3.0",
+        "@scure/base": "~1.1.0"
+      }
+    },
+    "@sinonjs/commons": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
+      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "@tanstack/match-sorter-utils": {
+      "version": "8.8.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
+      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
+      "requires": {
+        "remove-accents": "0.4.2"
+      }
+    },
+    "@tanstack/query-core": {
+      "version": "4.29.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.7.tgz",
+      "integrity": "sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA=="
+    },
+    "@tanstack/react-query": {
+      "version": "4.29.7",
+      "requires": {
+        "@tanstack/query-core": "4.29.7",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
+    "@tanstack/react-query-devtools": {
+      "version": "4.29.7",
+      "requires": {
+        "@tanstack/match-sorter-utils": "^8.7.0",
+        "superjson": "^1.10.0",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
+    "@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "dev": true
+    },
+    "@types/babel__core": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
+      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__traverse": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/bs58": {
+      "version": "4.0.1",
+      "dev": true,
+      "requires": {
+        "base-x": "^3.0.6"
+      },
+      "dependencies": {
+        "base-x": {
+          "version": "3.0.9",
+          "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
+          "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "^5.0.1"
+          }
+        }
+      }
+    },
+    "@types/bytebuffer": {
+      "version": "5.0.42",
+      "dev": true,
+      "requires": {
+        "@types/long": "*",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.4.1",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.1.tgz",
+          "integrity": "sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==",
+          "dev": true
+        }
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/cookie-parser": {
+      "version": "1.4.2",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/diff-match-patch": {
+      "version": "1.0.32",
+      "dev": true
+    },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.36",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.36.tgz",
+      "integrity": "sha512-zbivROJ0ZqLAtMzgzIUC4oNqDG9iF0lSsAqpOD9kbs5xcIM3dTiyuHvBc7R8MtWBp3AAWGaovJa+wzWPjLYW7Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
+    "@types/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
+      "dev": true,
+      "requires": {
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/graceful-fs": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/highcharts": {
+      "version": "5.0.44",
+      "resolved": "https://registry.npmjs.org/@types/highcharts/-/highcharts-5.0.44.tgz",
+      "integrity": "sha512-Rby1gj3GbK7zzsbK/g9T9hoybUfM+x0sBIXrOlTnj25TIvuTkLend3nKRLLz2upvLJNo36GntO6KmTFoVQXWZA==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
+    "@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
+      "dev": true
+    },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "@types/html-minifier-terser": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
+      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
+      "dev": true
+    },
+    "@types/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==",
+      "dev": true
+    },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "dev": true
+    },
+    "@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/jest": {
+      "version": "26.0.24",
+      "dev": true,
+      "requires": {
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      }
+    },
+    "@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
+    "@types/js-md5": {
+      "version": "0.7.0",
+      "dev": true
+    },
+    "@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "dev": true
+    },
+    "@types/loadable__component": {
+      "version": "5.13.4",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/loadable__server": {
+      "version": "5.12.6",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "dev": true
+    },
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==",
+      "dev": true
+    },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
+    "@types/minimatch": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
+      "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
+      "dev": true
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "@types/numeral": {
+      "version": "2.0.2",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/path-to-regexp": {
+      "version": "1.7.0",
+      "dev": true,
+      "requires": {
+        "path-to-regexp": "*"
+      },
+      "dependencies": {
+        "path-to-regexp": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
+          "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==",
+          "dev": true
+        }
+      }
+    },
+    "@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
+      "dev": true
+    },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "@types/q": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
+      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
+      "dev": true
+    },
+    "@types/qrcode": {
+      "version": "1.4.2",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "16.4.1",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.1.tgz",
+          "integrity": "sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==",
+          "dev": true
+        }
+      }
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "16.14.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.11.tgz",
+      "integrity": "sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-beautiful-dnd": {
+      "version": "13.1.2",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-dom": {
+      "version": "16.9.14",
+      "dev": true,
+      "requires": {
+        "@types/react": "^16"
+      }
+    },
+    "@types/react-google-recaptcha": {
+      "version": "2.1.5",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-grid-layout": {
+      "version": "1.3.2",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-helmet": {
+      "version": "6.1.2",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-highcharts": {
+      "version": "16.0.3",
+      "dev": true,
+      "requires": {
+        "@types/highcharts": "^5.0.44",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-redux": {
+      "version": "7.1.18",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz",
+      "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      },
+      "dependencies": {
+        "redux": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+          "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "symbol-observable": "^1.2.0"
+          }
+        }
+      }
+    },
+    "@types/react-router": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
+      "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "4.3.5",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "@types/react-test-renderer": {
+      "version": "16.9.5",
+      "dev": true,
+      "requires": {
+        "@types/react": "^16"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-virtualized": {
+      "version": "9.21.21",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "^17"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "17.0.65",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
+          "integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
+          "dev": true,
+          "requires": {
+            "@types/prop-types": "*",
+            "@types/scheduler": "*",
+            "csstype": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@types/redis": {
+      "version": "4.0.11",
+      "dev": true,
+      "requires": {
+        "redis": "*"
+      },
+      "dependencies": {
+        "redis": {
+          "version": "4.6.7",
+          "resolved": "https://registry.npmjs.org/redis/-/redis-4.6.7.tgz",
+          "integrity": "sha512-KrkuNJNpCwRm5vFJh0tteMxW8SaUzkm5fBH7eL5hd/D0fAkzvapxbfGPP/r+4JAXdQuX7nebsBkBqA2RHB7Usw==",
+          "dev": true,
+          "requires": {
+            "@redis/bloom": "1.2.0",
+            "@redis/client": "1.5.8",
+            "@redis/graph": "1.1.0",
+            "@redis/json": "1.0.4",
+            "@redis/search": "1.1.3",
+            "@redis/time-series": "1.0.4"
+          }
+        }
+      }
+    },
+    "@types/resize-observer-browser": {
+      "version": "0.1.7",
+      "dev": true
+    },
+    "@types/rss": {
+      "version": "0.0.29",
+      "dev": true
+    },
+    "@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
+    "@types/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/serialize-javascript": {
+      "version": "1.5.0",
+      "dev": true
+    },
+    "@types/serve-static": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz",
+      "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==",
+      "dev": true,
+      "requires": {
+        "@types/http-errors": "*",
+        "@types/mime": "*",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/sortablejs": {
+      "version": "1.15.0",
+      "dev": true
+    },
+    "@types/source-list-map": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
+      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
+      "dev": true
+    },
+    "@types/speakingurl": {
+      "version": "13.0.3",
+      "dev": true
+    },
+    "@types/stack-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "dev": true
+    },
+    "@types/tapable": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
+      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
+      "dev": true
+    },
+    "@types/text-encoding-utf-8": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz",
+      "integrity": "sha512-AQ6zewa0ucLJvtUi5HsErbOFKAcQfRLt9zFLlUOvcXBy2G36a+ZDpCHSGdzJVUD8aNURtIjh9aSjCStNMRCcRQ==",
+      "dev": true
+    },
+    "@types/tus-js-client": {
+      "version": "2.1.0",
+      "requires": {
+        "tus-js-client": "*"
+      },
+      "dependencies": {
+        "js-base64": {
+          "version": "3.7.5",
+          "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+          "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+        },
+        "tus-js-client": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-3.1.0.tgz",
+          "integrity": "sha512-Hfpc8ho4C9Lhs/OflPUA/nHUHZJUrKD5upoPBq7dYJJ9DQhWocsjJU2RZYfN16Y5n19j9dFDszwCvVZ5sfcogw==",
+          "requires": {
+            "buffer-from": "^1.1.2",
+            "combine-errors": "^3.0.3",
+            "is-stream": "^2.0.0",
+            "js-base64": "^3.7.2",
+            "lodash.throttle": "^4.1.1",
+            "proper-lockfile": "^4.1.2",
+            "url-parse": "^1.5.7"
+          }
+        }
+      }
+    },
+    "@types/uglify-js": {
+      "version": "3.17.1",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz",
+      "integrity": "sha512-GkewRA4i5oXacU/n4MA9+bLgt5/L3F1mKrYvFGm7r2ouLXhRKjuWwo9XHNnbx6WF3vlGW21S3fCvgqxvxXXc5g==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "@types/uuid": {
+      "version": "9.0.0",
+      "dev": true
+    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
+    "@types/webpack": {
+      "version": "4.41.30",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
+      "integrity": "sha512-GUHyY+pfuQ6haAfzu4S14F+R5iGRwN6b2FRNJY7U0NilmFAqbsOfK6j1HwuLBAqwRIT+pVdNDJGJ6e8rpp0KHA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/tapable": "^1",
+        "@types/uglify-js": "*",
+        "@types/webpack-sources": "*",
+        "anymatch": "^3.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/webpack-env": {
+      "version": "1.16.2",
+      "dev": true
+    },
+    "@types/webpack-sources": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
+      "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/source-list-map": "*",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
+      }
+    },
+    "@types/webscopeio__react-textarea-autocomplete": {
+      "version": "4.7.2",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/yargs": {
+      "version": "15.0.15",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
+      "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
+      "dev": true,
+      "requires": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "dev": true
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+      "dev": true,
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+      "dev": true,
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
+      "dev": true
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
+      }
+    },
+    "@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webscopeio/react-textarea-autocomplete": {
+      "version": "4.8.1",
+      "requires": {
+        "custom-event": "^1.0.1",
+        "textarea-caret": "3.0.2"
+      }
+    },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+      "dev": true
+    },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.52.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+          "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.35",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+          "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+          "dev": true,
+          "requires": {
+            "mime-db": "1.52.0"
+          }
+        }
+      }
+    },
+    "acorn": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+      "dev": true
+    },
+    "acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+          "dev": true
+        }
+      }
+    },
+    "acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true
+    },
+    "address": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
+      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
+      "dev": true
+    },
+    "adjust-sourcemap-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
+      "integrity": "sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      }
+    },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      }
+    },
+    "aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "dev": true
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true
+    },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==",
+      "dev": true
+    },
+    "amphtml-validator": {
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/amphtml-validator/-/amphtml-validator-1.0.35.tgz",
+      "integrity": "sha512-C67JzC5EI6pE2C0sAo/zuCp8ARDl1Vtt6/s0nr+3NuXDNOdkjclZUkaNAd/ZnsEvvYodkXZ6T/uww890IQh9dQ==",
+      "requires": {
+        "colors": "1.4.0",
+        "commander": "7.2.0",
+        "promise": "8.1.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        }
+      }
+    },
+    "ansi-colors": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
+      "dev": true
+    },
+    "ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
+      }
+    },
+    "ansi-html": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
+      "integrity": "sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        }
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "arity-n": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
+      "integrity": "sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==",
+      "dev": true
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
+      "dev": true
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "dev": true
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "dev": true
+    },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
+      "dev": true
+    },
+    "array.prototype.reduce": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
+      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      }
+    },
+    "arraybuffer.prototype.slice": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
+      "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      }
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "dev": true
+    },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
+    "async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "async-each": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.6.tgz",
+      "integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==",
+      "dev": true
+    },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
+    "autolinker": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-0.28.1.tgz",
+      "integrity": "sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==",
+      "requires": {
+        "gulp-header": "^1.7.1"
+      }
+    },
+    "autoprefixer": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
+      "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-lite": "^1.0.30001243",
+        "colorette": "^1.2.2",
+        "fraction.js": "^4.1.1",
+        "normalize-range": "^0.1.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
+    },
+    "axios": {
+      "version": "0.21.2",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
+    "axios-cookiejar-support": {
+      "version": "4.0.6",
+      "requires": {
+        "http-cookie-agent": "^5.0.2"
+      }
+    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+          "dev": true
+        }
+      }
+    },
+    "babel-jest": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz",
+      "integrity": "sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==",
+      "dev": true,
+      "requires": {
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/babel__core": "^7.1.7",
+        "babel-plugin-istanbul": "^6.0.0",
+        "babel-preset-jest": "^26.6.2",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "slash": "^3.0.0"
+      }
+    },
+    "babel-loader": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
+      "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^1.4.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      },
+      "dependencies": {
+        "istanbul-lib-instrument": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+          "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.12.3",
+            "@babel/parser": "^7.14.7",
+            "@istanbuljs/schema": "^0.1.2",
+            "istanbul-lib-coverage": "^3.2.0",
+            "semver": "^6.3.0"
+          }
+        }
+      }
+    },
+    "babel-plugin-jest-hoist": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz",
+      "integrity": "sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      }
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
+      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.3",
+        "semver": "^6.1.1"
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
+      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "core-js-compat": "^3.21.0"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==",
+      "dev": true
+    },
+    "babel-plugin-transform-define": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-define/-/babel-plugin-transform-define-2.0.0.tgz",
+      "integrity": "sha512-0dv5RNRUlUKxGYIIErl01lpvi8b7W2R04Qcl1mCj70ahwZcgiklfXnFlh4FGnRh6aayCfSZKdhiMryVzcq5Dmg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.11",
+        "traverse": "0.6.6"
+      }
+    },
+    "babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
+      "dev": true
+    },
+    "babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      }
+    },
+    "babel-preset-jest": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz",
+      "integrity": "sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==",
+      "dev": true,
+      "requires": {
+        "babel-plugin-jest-hoist": "^26.6.2",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      }
+    },
+    "babel-preset-razzle": {
+      "version": "4.2.16",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.11.1",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
+        "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
+        "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+        "@babel/plugin-transform-runtime": "^7.9.0",
+        "@babel/preset-env": "^7.9.5",
+        "@babel/preset-react": "^7.9.4",
+        "@babel/preset-typescript": "^7.9.0",
+        "@babel/runtime": "^7.9.2",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+        "chalk": "^4.1.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "dev": true,
+      "requires": {
+        "cache-base": "^1.0.1",
+        "class-utils": "^0.3.5",
+        "component-emitter": "^1.2.1",
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.1",
+        "mixin-deep": "^1.2.0",
+        "pascalcase": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        }
+      }
+    },
+    "base-x": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
+      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
+    "bigi": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/bigi/-/bigi-1.4.2.tgz",
+      "integrity": "sha512-ddkU+dFIuEIW8lE7ZwdIAf2UPoM90eaprg5m3YXAVVTmKlqV/9BX4A2M8BOK2yOq6/VgZFVhK6QAxJebhlbhzw=="
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bip66": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/bip66/-/bip66-1.1.5.tgz",
+      "integrity": "sha512-nemMHz95EmS38a26XbbdxIYj5csHd3RMP3H5bwQknX0WYHF01qhpufP42mLOwVICuH2JmhIhXiWs89MfUGL7Xw==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
+    "bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+    },
+    "body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.9.7",
+        "raw-body": "2.4.3",
+        "type-is": "~1.6.18"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.9.7",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+          "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+          "dev": true
+        }
+      }
+    },
+    "bonjour": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
+      "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==",
+      "dev": true,
+      "requires": {
+        "array-flatten": "^2.1.0",
+        "deep-equal": "^1.0.1",
+        "dns-equal": "^1.0.0",
+        "dns-txt": "^2.0.2",
+        "multicast-dns": "^6.0.1",
+        "multicast-dns-service-types": "^1.1.0"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
+    },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+      "dev": true
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "requires": {
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dev": true,
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+          "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
+          "dev": true
+        }
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+          "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dev": true,
+      "requires": {
+        "pako": "~1.0.5"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      }
+    },
+    "bs-logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
+      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "dev": true,
+      "requires": {
+        "fast-json-stable-stringify": "2.x"
+      }
+    },
+    "bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "requires": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "buffer-indexof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
+      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
+      "dev": true
+    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
+    },
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==",
+      "dev": true
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
+      "dev": true
+    },
+    "bytebuffer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
+      "integrity": "sha512-IuzSdmADppkZ6DlpycMkm8l9zeEq16fWtLvunEwFiYciR/BHo4E8/xs5piFquG+Za8OWmMqHF8zuRviz2LHvRQ==",
+      "requires": {
+        "long": "~3"
+      }
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true
+    },
+    "cacache": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
+      "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
+      "dev": true,
+      "requires": {
+        "@npmcli/fs": "^1.0.0",
+        "@npmcli/move-file": "^1.0.1",
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "glob": "^7.1.4",
+        "infer-owner": "^1.0.4",
+        "lru-cache": "^6.0.0",
+        "minipass": "^3.1.1",
+        "minipass-collect": "^1.0.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.2",
+        "mkdirp": "^1.0.3",
+        "p-map": "^4.0.0",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^3.0.2",
+        "ssri": "^8.0.1",
+        "tar": "^6.0.2",
+        "unique-filename": "^1.1.1"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "dev": true,
+      "requires": {
+        "collection-visit": "^1.0.0",
+        "component-emitter": "^1.2.1",
+        "get-value": "^2.0.6",
+        "has-value": "^1.0.0",
+        "isobject": "^3.0.1",
+        "set-value": "^2.0.0",
+        "to-object-path": "^0.3.0",
+        "union-value": "^1.0.0",
+        "unset-value": "^1.0.0"
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
+      "dev": true
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==",
+          "dev": true
+        }
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001522",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
+      "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg=="
+    },
+    "capture-exit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
+      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
+      "dev": true,
+      "requires": {
+        "rsvp": "^4.8.4"
+      }
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "dev": true
+    },
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
+    },
+    "cheerio": {
+      "version": "1.0.0-rc.11",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.11.tgz",
+      "integrity": "sha512-bQwNaDIBKID5ts/DsdhxrjqFXYfLw4ste+wMKqWA8DyKcS4qwsPP4Bk8ZNaTJjvpiX/qW3BT4sU7d6Bh5i+dag==",
+      "requires": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "htmlparser2": "^8.0.1",
+        "parse5": "^7.0.0",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3"
+          }
+        },
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        },
+        "htmlparser2": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+          "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3",
+            "domutils": "^3.0.1",
+            "entities": "^4.4.0"
+          }
+        }
+      }
+    },
+    "cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+          "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^6.1.0",
+            "domhandler": "^5.0.2",
+            "domutils": "^3.0.1",
+            "nth-check": "^2.0.1"
+          }
+        },
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3"
+          }
+        },
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "dev": true
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "cjs-module-lexer": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
+      "integrity": "sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==",
+      "dev": true
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "clean-css": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.1.3.tgz",
+      "integrity": "sha512-qGXzUCDpLwAlPx0kYeU4QXjzQIcIYZbJjD4FNm7NnSjoP0hYMVZhHOpUYJ6AwfkMX2cceLRq54MeCgHy/va1cA==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      }
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-truncate": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz",
+      "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==",
+      "dev": true,
+      "requires": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^5.0.0"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "dev": true,
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
+      }
+    },
+    "cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "dev": true
+    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
+    "cluster-key-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
+      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
+      "dev": true
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "dev": true
+    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "collect-v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
+      "dev": true
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
+      "dev": true,
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        }
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "colorette": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
+      "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
+    },
+    "combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
+      "requires": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
+    },
+    "compose-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
+      "integrity": "sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==",
+      "dev": true,
+      "requires": {
+        "arity-n": "^1.0.4"
+      }
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true
+    },
+    "connected-react-router": {
+      "version": "6.9.1",
+      "requires": {
+        "immutable": "^3.8.1 || ^4.0.0-rc.1",
+        "lodash.isequalwith": "^4.4.0",
+        "prop-types": "^15.7.2",
+        "seamless-immutable": "^7.1.3"
+      }
+    },
+    "consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
+      "dev": true
+    },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+      "dev": true
+    },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
+      "dev": true
+    },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.2.1"
+      }
+    },
+    "content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-parser": {
+      "version": "1.4.5",
+      "requires": {
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6"
+      }
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "requires": {
+        "is-what": "^4.1.8"
+      }
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "fs-write-stream-atomic": "^1.0.8",
+        "iferr": "^0.1.5",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.0"
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
+      "dev": true
+    },
+    "copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "copy-webpack-plugin": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz",
+      "integrity": "sha512-MXyPCjdPVx5iiWyl40Va3JGh27bKzOTNY3NjUTrosD2q7dR/cLD0013uqJ3BpFbUjyONINjb6qI7nDIJujrMbA==",
+      "dev": true,
+      "requires": {
+        "cacache": "^15.0.5",
+        "fast-glob": "^3.2.4",
+        "find-cache-dir": "^3.3.1",
+        "glob-parent": "^5.1.1",
+        "globby": "^11.0.1",
+        "loader-utils": "^2.0.0",
+        "normalize-path": "^3.0.0",
+        "p-limit": "^3.0.2",
+        "schema-utils": "^3.0.0",
+        "serialize-javascript": "^5.0.1",
+        "webpack-sources": "^1.4.3"
+      },
+      "dependencies": {
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
+          "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        }
+      }
+    },
+    "core-js": {
+      "version": "3.15.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.2.tgz",
+      "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q=="
+    },
+    "core-js-compat": {
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.1.tgz",
+      "integrity": "sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.10"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.21.10",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001517",
+            "electron-to-chromium": "^1.4.477",
+            "node-releases": "^2.0.13",
+            "update-browserslist-db": "^1.0.11"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.4.499",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
+          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "2.0.13",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+          "dev": true
+        }
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+    },
+    "cosmiconfig": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "cross-fetch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.2.tgz",
+      "integrity": "sha512-+JhD65rDNqLbGmB3Gzs3HrEKC0aQnD+XA3SY6RjgkF88jV2q5cTc5+CwxlS3sdmLk98gpPt5CF9XRnPdlxZe6w==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+        }
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "dev": true,
+      "requires": {
+        "browserify-cipher": "^1.0.0",
+        "browserify-sign": "^4.0.0",
+        "create-ecdh": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.0",
+        "diffie-hellman": "^5.0.0",
+        "inherits": "^2.0.1",
+        "pbkdf2": "^3.0.3",
+        "public-encrypt": "^4.0.0",
+        "randombytes": "^2.0.0",
+        "randomfill": "^1.0.3"
+      }
+    },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
+      "dev": true
+    },
+    "css-declaration-sorter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
+      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.1",
+        "timsort": "^0.3.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "css-loader": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
+      "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.28",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+          "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "css-minimizer-webpack-plugin": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.3.0.tgz",
+      "integrity": "sha512-jFa0Siplmfef4ndKglpVaduY47oHQwioAOEGK0f0vAX0s+vc+SmP6cCMoc+8Adau5600RnOEld5VVdC8CQau7w==",
+      "dev": true,
+      "requires": {
+        "cacache": "^15.0.5",
+        "cssnano": "^4.1.10",
+        "find-cache-dir": "^3.3.1",
+        "jest-worker": "^26.3.0",
+        "p-limit": "^3.0.2",
+        "schema-utils": "^3.0.0",
+        "serialize-javascript": "^5.0.1",
+        "source-map": "^0.6.1",
+        "webpack-sources": "^1.4.3"
+      },
+      "dependencies": {
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
+          "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        }
+      }
+    },
+    "css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+          "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        }
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
+    "cssnano": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
+      "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "cssnano-preset-default": "^4.0.8",
+        "is-resolvable": "^1.0.0",
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+          "dev": true,
+          "requires": {
+            "import-fresh": "^2.0.0",
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.13.1",
+            "parse-json": "^4.0.0"
+          }
+        },
+        "import-fresh": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+          "integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
+          "dev": true,
+          "requires": {
+            "caller-path": "^2.0.0",
+            "resolve-from": "^3.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
+          "dev": true
+        }
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
+      "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^4.0.1",
+        "cssnano-util-raw-cache": "^4.0.1",
+        "postcss": "^7.0.0",
+        "postcss-calc": "^7.0.1",
+        "postcss-colormin": "^4.0.3",
+        "postcss-convert-values": "^4.0.1",
+        "postcss-discard-comments": "^4.0.2",
+        "postcss-discard-duplicates": "^4.0.2",
+        "postcss-discard-empty": "^4.0.1",
+        "postcss-discard-overridden": "^4.0.1",
+        "postcss-merge-longhand": "^4.0.11",
+        "postcss-merge-rules": "^4.0.3",
+        "postcss-minify-font-values": "^4.0.2",
+        "postcss-minify-gradients": "^4.0.2",
+        "postcss-minify-params": "^4.0.2",
+        "postcss-minify-selectors": "^4.0.2",
+        "postcss-normalize-charset": "^4.0.1",
+        "postcss-normalize-display-values": "^4.0.2",
+        "postcss-normalize-positions": "^4.0.2",
+        "postcss-normalize-repeat-style": "^4.0.2",
+        "postcss-normalize-string": "^4.0.2",
+        "postcss-normalize-timing-functions": "^4.0.2",
+        "postcss-normalize-unicode": "^4.0.1",
+        "postcss-normalize-url": "^4.0.1",
+        "postcss-normalize-whitespace": "^4.0.2",
+        "postcss-ordered-values": "^4.1.2",
+        "postcss-reduce-initial": "^4.0.3",
+        "postcss-reduce-transforms": "^4.0.2",
+        "postcss-svgo": "^4.0.3",
+        "postcss-unique-selectors": "^4.0.1"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "cssnano-preset-simple": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-2.0.0.tgz",
+      "integrity": "sha512-HkufSLkaBJbKBFx/7aj5HmCK9Ni/JedRQm0mT2qBzMG/dEuJOLnMt2lK6K1rwOOyV4j9aSY+knbW9WoS7BYpzg==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001202"
+      }
+    },
+    "cssnano-simple": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-2.0.0.tgz",
+      "integrity": "sha512-0G3TXaFxlh/szPEG/o3VcmCwl0N3E60XNb9YZZijew5eIs6fLjJuOPxQd9yEBaX2p/YfJtt49i4vYi38iH6/6w==",
+      "requires": {
+        "cssnano-preset-simple": "^2.0.0"
+      }
+    },
+    "cssnano-util-get-arguments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
+      "integrity": "sha512-6RIcwmV3/cBMG8Aj5gucQRsJb4vv4I4rn6YjPbVWd5+Pn/fuG+YseGvXGk00XLkoZkaj31QOD7vMUpNPC4FIuw==",
+      "dev": true
+    },
+    "cssnano-util-get-match": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
+      "integrity": "sha512-JPMZ1TSMRUPVIqEalIBNoBtAYbi8okvcFns4O0YIhcdGebeYZK7dMyHJiQ6GqNBA9kE0Hym4Aqym5rPdsV/4Cw==",
+      "dev": true
+    },
+    "cssnano-util-raw-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
+      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "cssnano-util-same-parent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
+      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
+      "dev": true
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+          "dev": true
+        }
+      }
+    },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
+    "currency-symbol-map": {
+      "version": "4.0.4"
+    },
+    "custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
+    },
+    "custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
+    },
+    "cyclist": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
+      "integrity": "sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==",
+      "dev": true
+    },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "dev": true,
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
+    "data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      }
+    },
+    "debounce": {
+      "version": "1.2.1"
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "requires": {
+        "ms": "2.1.2"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
+    "decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true
+    },
+    "decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
+    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dev": true,
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
+    "deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true
+    },
+    "default-gateway": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
+      "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==",
+      "dev": true,
+      "requires": {
+        "execa": "^1.0.0",
+        "ip-regex": "^2.1.0"
+      }
+    },
+    "define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dev": true,
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dev": true,
+      "requires": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        }
+      }
+    },
+    "del": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
+      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
+      "dev": true,
+      "requires": {
+        "@types/glob": "^7.1.1",
+        "globby": "^6.1.0",
+        "is-path-cwd": "^2.0.0",
+        "is-path-in-cwd": "^2.0.0",
+        "p-map": "^2.0.0",
+        "pify": "^4.0.1",
+        "rimraf": "^2.6.3"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+              "dev": true
+            }
+          }
+        },
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
+        }
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "dev": true
+    },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
+    "des.js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
+      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg==",
+      "dev": true
+    },
+    "detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true
+    },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true
+    },
+    "detect-port-alt": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+      "dev": true,
+      "requires": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true
+    },
+    "diff-match-patch": {
+      "version": "1.0.5"
+    },
+    "diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "dev": true
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "dev": true
+    },
+    "dns-packet": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
+      "dev": true,
+      "requires": {
+        "ip": "^1.1.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "dns-txt": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
+      "integrity": "sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==",
+      "dev": true,
+      "requires": {
+        "buffer-indexof": "^1.0.0"
+      }
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "requires": {
+        "utila": "~0.4"
+      }
+    },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+      "dev": true
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "dev": true,
+      "requires": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+          "dev": true
+        }
+      }
+    },
+    "domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dev": true,
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true
+    },
+    "dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
+    },
+    "drbg.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz",
+      "integrity": "sha512-F4wZ06PvqxYLFEZKkFxTDcns9oFNk34hvmJSEwdzsxVQ8YI5YaxtACgQatkYgv2VI2CFkUd2Y+xosPQnHv809g==",
+      "requires": {
+        "browserify-aes": "^1.0.6",
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4"
+      }
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
+    "ecurve": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/ecurve/-/ecurve-1.0.6.tgz",
+      "integrity": "sha512-/BzEjNfiSuB7jIWKcS/z8FK9jNjmEWvUV2YZ4RLSmcDtP7Lq0m6FvDuSnJpBlDpGRpfRQeTLGLBI8H+kEv0r+w==",
+      "requires": {
+        "bigi": "^1.1.0",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.3.785",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.785.tgz",
+      "integrity": "sha512-WmCgAeURsMFiyoJ646eUaJQ7GNfvMRLXo+GamUyKVNEM4MqTAsXyC0f38JEB4N3BtbD0tlAKozGP5E2T9K3YGg==",
+      "dev": true
+    },
+    "elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "requires": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "emittery": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
+      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
+    "encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        }
+      }
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
+      "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.1",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.2.1",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.0",
+        "safe-array-concat": "^1.0.0",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.10"
+      },
+      "dependencies": {
+        "is-regex": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-tostringtag": "^1.0.0"
+          }
+        },
+        "object-inspect": {
+          "version": "1.12.3",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+          "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+          "dev": true
+        }
+      }
+    },
+    "es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
+      "dev": true
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "es5-ext": {
+      "version": "0.10.62",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+      "dev": true,
+      "requires": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "next-tick": "^1.1.0"
+      },
+      "dependencies": {
+        "next-tick": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+          "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+          "dev": true
+        }
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "dev": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "dev": true,
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true
+    },
+    "escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2",
+        "source-map": "~0.6.1"
+      }
+    },
+    "eslint-scope": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+          "dev": true
+        }
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true
+    },
+    "event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
+    },
+    "eventsource": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.2.tgz",
+      "integrity": "sha512-xAH3zWhgO2/3KIniEKYPr8plNSzlGINOUqYj0m0u7AB81iRw8b/3E73W6AuU+6klLbaSFmZnaETQ2lXPfAydrA==",
+      "dev": true
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "exec-sh": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.6.tgz",
+      "integrity": "sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==",
+      "dev": true
+    },
+    "execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+          "dev": true
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+          "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+          "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+          "dev": true
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
+      "dev": true,
+      "requires": {
+        "debug": "^2.3.3",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "posix-character-classes": "^0.1.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "expect": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
+      "integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "ansi-styles": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-regex-util": "^26.0.0"
+      }
+    },
+    "ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "dev": true,
+      "requires": {
+        "type": "^2.7.2"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.7.2",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
+          "dev": true
+        }
+      }
+    },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dev": true,
+      "requires": {
+        "is-extendable": "^0.1.0"
+      }
+    },
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
+      "requires": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "dev": true,
+      "requires": {
+        "array-unique": "^0.3.2",
+        "define-property": "^1.0.0",
+        "expand-brackets": "^2.1.4",
+        "extend-shallow": "^2.0.1",
+        "fragment-cache": "^0.2.1",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
+      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA=="
+    },
+    "fancy-canvas": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-0.2.2.tgz",
+      "integrity": "sha512-50qi8xA0QkHbjmb8h7XQ6k2fvD7y/yMfiUw9YTarJ7rWrq6o5/3CCXPouYk+XSLASvvxtjyiQLRBFt3qkE3oyA=="
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
+    "fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "faye-websocket": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+      "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
+      "dev": true,
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+      "dev": true,
+      "requires": {
+        "bser": "2.1.1"
+      }
+    },
+    "figgy-pudding": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+      "dev": true
+    },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "file-loader": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
+      "integrity": "sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.5.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
+    },
+    "filesize": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
+      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "dependencies": {
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        }
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+      "dev": true
+    },
+    "form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true
+    },
+    "fraction.js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "dev": true
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
+      "dev": true,
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true
+    },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "generic-pool": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
+      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
+      "dev": true
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
+    "get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
+      "integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==",
+      "dev": true
+    },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^3.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
+    },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "growly": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+      "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==",
+      "dev": true,
+      "optional": true
+    },
+    "gulp-header": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/gulp-header/-/gulp-header-1.8.12.tgz",
+      "integrity": "sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==",
+      "requires": {
+        "concat-with-sourcemaps": "*",
+        "lodash.template": "^4.4.0",
+        "through2": "^2.0.0"
+      }
+    },
+    "gzip-size": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "pify": "^4.0.1"
+      }
+    },
+    "handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        }
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
+      "dev": true,
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
+    "hex-color-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
+      "dev": true
+    },
+    "highcharts": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-6.2.0.tgz",
+      "integrity": "sha512-A4E89MA+kto8giic7zyLU6ZxfXnVeCUlKOyzFsah3+n4BROx4bgonl92KIBtwLud/mIWir8ahqhuhe2by9LakQ=="
+    },
+    "hive-uri": {
+      "version": "0.2.3"
+    },
+    "hivesigner": {
+      "version": "3.3.4",
+      "requires": {
+        "@babel/runtime": "^7.13.9",
+        "cross-fetch": "^3.0.6",
+        "hive-uri": "^0.2.4"
+      },
+      "dependencies": {
+        "cross-fetch": {
+          "version": "3.1.5",
+          "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+          "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+          "requires": {
+            "node-fetch": "2.6.7"
+          },
+          "dependencies": {
+            "node-fetch": {
+              "version": "2.6.7",
+              "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+              "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+              "requires": {
+                "whatwg-url": "^5.0.0"
+              }
+            }
+          }
+        },
+        "hive-uri": {
+          "version": "0.2.4",
+          "resolved": "https://registry.npmjs.org/hive-uri/-/hive-uri-0.2.4.tgz",
+          "integrity": "sha512-c61F16oVARU+eLvGy20JN7M9YK+DUexHPFGBlG39VHI9Ahxos8YNCY6Btmw9AL7Jlq5b4HtY0LvsOIqHQoOWhw=="
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "hsl-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
+      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
+      "dev": true
+    },
+    "hsla-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
+      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
+      "dev": true
+    },
+    "html-dom-parser": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-1.0.1.tgz",
+      "integrity": "sha512-uKXISKlHzB/l9A08jrs2wseQJ9b864ZfEdmIZskj10cuP6HxCOMHSK0RdluV8NVQaWs0PwefN7d8wqG3jR0IbQ==",
+      "requires": {
+        "domhandler": "4.2.0",
+        "htmlparser2": "6.1.0"
+      }
+    },
+    "html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^1.0.5"
+      }
+    },
+    "html-entities": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
+      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
+      "dev": true
+    },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "html-minifier-terser": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.1",
+        "clean-css": "^4.2.3",
+        "commander": "^4.1.1",
+        "he": "^1.2.0",
+        "param-case": "^3.0.3",
+        "relateurl": "^0.2.7",
+        "terser": "^4.6.3"
+      },
+      "dependencies": {
+        "clean-css": {
+          "version": "4.2.4",
+          "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
+          "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
+          "dev": true,
+          "requires": {
+            "source-map": "~0.6.0"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        }
+      }
+    },
+    "html-react-parser": {
+      "version": "1.2.7",
+      "requires": {
+        "domhandler": "4.2.0",
+        "html-dom-parser": "1.0.1",
+        "react-property": "1.0.1",
+        "style-to-js": "1.1.0"
+      }
+    },
+    "html-webpack-plugin": {
+      "version": "4.5.2",
+      "dev": true,
+      "requires": {
+        "@types/html-minifier-terser": "^5.0.0",
+        "@types/tapable": "^1.0.5",
+        "@types/webpack": "^4.41.8",
+        "html-minifier-terser": "^5.0.1",
+        "loader-utils": "^1.2.3",
+        "lodash": "^4.17.20",
+        "pretty-error": "^2.1.1",
+        "tapable": "^1.1.3",
+        "util.promisify": "1.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "http-cookie-agent": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/http-cookie-agent/-/http-cookie-agent-5.0.2.tgz",
+      "integrity": "sha512-BiBmZyIMGl5mLKmY7KH2uCVlcNUl1jexjdtWXFCUF4DFOrNZg1c5iPPTzWDzU7Ngfb6fB03DPpJQ80KQWmycsg==",
+      "requires": {
+        "agent-base": "^6.0.2"
+      }
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "dev": true
+    },
+    "http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dev": true,
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "dev": true
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dev": true,
+      "requires": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+      "dev": true,
+      "requires": {
+        "http-proxy": "^1.17.0",
+        "is-glob": "^4.0.0",
+        "lodash": "^4.17.11",
+        "micromatch": "^3.1.10"
+      }
+    },
+    "https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
+    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
+      "dev": true
+    },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
+    "human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true
+    },
+    "husky": {
+      "version": "8.0.1",
+      "dev": true
+    },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
+    "i18next": {
+      "version": "19.9.2",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "4.3.1",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true
+    },
+    "idb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz",
+      "integrity": "sha512-UUxlE7vGWK5RfB/fDwEGgRf84DY/ieqNha6msMV99UsEMQhJ1RwbCd8AYBj3QMgnE3VZnfQvm4oKVCJTYlqIgg=="
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true
+    },
+    "immer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
+      "dev": true
+    },
+    "immutability-helper": {
+      "version": "3.1.1"
+    },
+    "immutable": {
+      "version": "4.0.0-rc.14",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.14.tgz",
+      "integrity": "sha512-pfkvmRKJSoW7JFx0QeYlAmT+kNYvn5j0u7bnpNq4N2RCvHSTlLT208G8jgaquNe+Q8kCPHKOSpxJkyvLDpYq0w==",
+      "optional": true
+    },
+    "import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dev": true,
+      "requires": {
+        "import-from": "^3.0.0"
+      }
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
+    "import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "import-local": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+      "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
+      "dev": true,
+      "requires": {
+        "pkg-dir": "^3.0.0",
+        "resolve-cwd": "^2.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==",
+      "dev": true
+    },
+    "infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
+    "inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "requires": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
+    "inquirer": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.19",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.6.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      }
+    },
+    "internal-ip": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
+      "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
+      "dev": true,
+      "requires": {
+        "default-gateway": "^4.2.0",
+        "ipaddr.js": "^1.9.0"
+      }
+    },
+    "internal-slot": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "invert-kv": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
+      "dev": true
+    },
+    "ip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
+      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "dev": true
+    },
+    "ip-regex": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
+      "integrity": "sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw==",
+      "dev": true
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true
+    },
+    "is-absolute-url": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+      "dev": true
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      }
+    },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dev": true,
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-color-stop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
+      "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
+      "dev": true,
+      "requires": {
+        "css-color-names": "^0.0.4",
+        "hex-color-regex": "^1.1.0",
+        "hsl-regex": "^1.0.0",
+        "hsla-regex": "^1.0.0",
+        "rgb-regex": "^1.0.1",
+        "rgba-regex": "^1.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
+      "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==",
+      "dev": true
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "dev": true,
+      "requires": {
+        "is-accessor-descriptor": "^0.1.6",
+        "is-data-descriptor": "^0.1.4",
+        "kind-of": "^5.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        }
+      }
+    },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==",
+      "dev": true
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
+    "is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      }
+    },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "dev": true
+    },
+    "is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "dev": true
+    },
+    "is-path-in-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
+      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
+      "dev": true,
+      "requires": {
+        "is-path-inside": "^2.1.0"
+      }
+    },
+    "is-path-inside": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
+      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
+      "dev": true,
+      "requires": {
+        "path-is-inside": "^1.0.2"
+      }
+    },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-resolvable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
+      "dev": true
+    },
+    "is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+      "dev": true
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
+      "requires": {
+        "which-typed-array": "^1.1.11"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-what": {
+      "version": "4.1.15",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.15.tgz",
+      "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA=="
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
+    },
+    "isomorphic-ws": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
+      "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw=="
+    },
+    "istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "dev": true
+    },
+    "istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      }
+    },
+    "istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "requires": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+          "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+          "dev": true,
+          "requires": {
+            "semver": "^7.5.3"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      }
+    },
+    "istanbul-reports": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
+      "integrity": "sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==",
+      "dev": true,
+      "requires": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      }
+    },
+    "jest": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.3.tgz",
+      "integrity": "sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==",
+      "dev": true,
+      "requires": {
+        "@jest/core": "^26.6.3",
+        "import-local": "^3.0.2",
+        "jest-cli": "^26.6.3"
+      },
+      "dependencies": {
+        "import-local": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+          "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+          "dev": true,
+          "requires": {
+            "pkg-dir": "^4.2.0",
+            "resolve-cwd": "^3.0.0"
+          }
+        },
+        "jest-cli": {
+          "version": "26.6.3",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
+          "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
+          "dev": true,
+          "requires": {
+            "@jest/core": "^26.6.3",
+            "@jest/test-result": "^26.6.2",
+            "@jest/types": "^26.6.2",
+            "chalk": "^4.0.0",
+            "exit": "^0.1.2",
+            "graceful-fs": "^4.2.4",
+            "import-local": "^3.0.2",
+            "is-ci": "^2.0.0",
+            "jest-config": "^26.6.3",
+            "jest-util": "^26.6.2",
+            "jest-validate": "^26.6.2",
+            "prompts": "^2.0.1",
+            "yargs": "^15.4.1"
+          }
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "resolve-cwd": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+          "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+          "dev": true,
+          "requires": {
+            "resolve-from": "^5.0.0"
+          }
+        }
+      }
+    },
+    "jest-changed-files": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
+      "integrity": "sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "execa": "^4.0.0",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "execa": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.0",
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        }
+      }
+    },
+    "jest-config": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.3.tgz",
+      "integrity": "sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.1.0",
+        "@jest/test-sequencer": "^26.6.3",
+        "@jest/types": "^26.6.2",
+        "babel-jest": "^26.6.3",
+        "chalk": "^4.0.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.4",
+        "jest-environment-jsdom": "^26.6.2",
+        "jest-environment-node": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "jest-jasmine2": "^26.6.3",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "jest-docblock": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
+      "integrity": "sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==",
+      "dev": true,
+      "requires": {
+        "detect-newline": "^3.0.0"
+      }
+    },
+    "jest-each": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.2.tgz",
+      "integrity": "sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "jest-util": "^26.6.2",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "jest-environment-jsdom": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz",
+      "integrity": "sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jsdom": "^16.4.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-environment-node": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.2.tgz",
+      "integrity": "sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "jest-mock": "^26.6.2",
+        "jest-util": "^26.6.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true
+    },
+    "jest-haste-map": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
+      "integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-regex-util": "^26.0.0",
+        "jest-serializer": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "micromatch": "^4.0.2",
+        "sane": "^4.0.3",
+        "walker": "^1.0.7"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-jasmine2": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
+      "integrity": "sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==",
+      "dev": true,
+      "requires": {
+        "@babel/traverse": "^7.1.0",
+        "@jest/environment": "^26.6.2",
+        "@jest/source-map": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^26.6.2",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^26.6.2",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-runtime": "^26.6.3",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "pretty-format": "^26.6.2",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-leak-detector": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz",
+      "integrity": "sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==",
+      "dev": true,
+      "requires": {
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "jest-matcher-utils": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
+      "integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "jest-message-util": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
+      "integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@jest/types": "^26.6.2",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "micromatch": "^4.0.2",
+        "pretty-format": "^26.6.2",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.2"
+      },
+      "dependencies": {
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-mock": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.2.tgz",
+      "integrity": "sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "dev": true
+    },
+    "jest-regex-util": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
+      "integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==",
+      "dev": true
+    },
+    "jest-resolve": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
+      "integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^26.6.2",
+        "read-pkg-up": "^7.0.1",
+        "resolve": "^1.18.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "jest-resolve-dependencies": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
+      "integrity": "sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-snapshot": "^26.6.2"
+      }
+    },
+    "jest-runner": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
+      "integrity": "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/environment": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.7.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.4",
+        "jest-config": "^26.6.3",
+        "jest-docblock": "^26.0.0",
+        "jest-haste-map": "^26.6.2",
+        "jest-leak-detector": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "jest-runtime": "^26.6.3",
+        "jest-util": "^26.6.2",
+        "jest-worker": "^26.6.2",
+        "source-map-support": "^0.5.6",
+        "throat": "^5.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-runtime": {
+      "version": "26.6.3",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.3.tgz",
+      "integrity": "sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==",
+      "dev": true,
+      "requires": {
+        "@jest/console": "^26.6.2",
+        "@jest/environment": "^26.6.2",
+        "@jest/fake-timers": "^26.6.2",
+        "@jest/globals": "^26.6.2",
+        "@jest/source-map": "^26.6.2",
+        "@jest/test-result": "^26.6.2",
+        "@jest/transform": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^0.6.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.4",
+        "jest-config": "^26.6.3",
+        "jest-haste-map": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-mock": "^26.6.2",
+        "jest-regex-util": "^26.0.0",
+        "jest-resolve": "^26.6.2",
+        "jest-snapshot": "^26.6.2",
+        "jest-util": "^26.6.2",
+        "jest-validate": "^26.6.2",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0",
+        "yargs": "^15.4.1"
+      }
+    },
+    "jest-serializer": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
+      "integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.4"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-snapshot": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
+      "integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0",
+        "@jest/types": "^26.6.2",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^26.6.2",
+        "graceful-fs": "^4.2.4",
+        "jest-diff": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "jest-haste-map": "^26.6.2",
+        "jest-matcher-utils": "^26.6.2",
+        "jest-message-util": "^26.6.2",
+        "jest-resolve": "^26.6.2",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^26.6.2",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "jest-util": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
+      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "is-ci": "^2.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-validate": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
+      "integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "camelcase": "^6.0.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^26.3.0",
+        "leven": "^3.1.0",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-watcher": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
+      "integrity": "sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==",
+      "dev": true,
+      "requires": {
+        "@jest/test-result": "^26.6.2",
+        "@jest/types": "^26.6.2",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^26.6.2",
+        "string-length": "^4.0.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.5.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
+          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
+          "dev": true
+        }
+      }
+    },
+    "js-md5": {
+      "version": "0.7.3"
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsbi": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-3.1.5.tgz",
+      "integrity": "sha512-w2BY0VOYC1ahe+w6Qhl4SFoPvPsZ9NPHY4bwass+LCgU7RK3PBoVQlQ3G1s7vI8W3CYyJiEXcbKF7FIM/L8q3Q=="
+    },
+    "jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+          "dev": true
+        },
+        "tough-cookie": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+          "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.33",
+            "punycode": "^2.1.1",
+            "universalify": "^0.2.0",
+            "url-parse": "^1.5.3"
+          }
+        },
+        "universalify": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+          "dev": true
+        },
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true
+        }
+      }
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json3": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
+      "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==",
+      "dev": true
+    },
+    "json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "killable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
+      "dev": true
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "^1.1.5"
+      }
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true
+    },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
+    "lcid": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+      "dev": true,
+      "requires": {
+        "invert-kv": "^2.0.0"
+      }
+    },
+    "leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true
+    },
+    "lightweight-charts": {
+      "version": "3.8.0",
+      "requires": {
+        "fancy-canvas": "0.2.2"
+      }
+    },
+    "lilconfig": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
+      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "lint-staged": {
+      "version": "13.0.3",
+      "dev": true,
+      "requires": {
+        "cli-truncate": "^3.1.0",
+        "colorette": "^2.0.17",
+        "commander": "^9.3.0",
+        "debug": "^4.3.4",
+        "execa": "^6.1.0",
+        "lilconfig": "2.0.5",
+        "listr2": "^4.0.5",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-inspect": "^1.12.2",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.1",
+        "yaml": "^2.1.1"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "2.0.19",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+          "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
+          "dev": true
+        },
+        "commander": {
+          "version": "9.4.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.0.tgz",
+          "integrity": "sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==",
+          "dev": true
+        },
+        "execa": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz",
+          "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.3",
+            "get-stream": "^6.0.1",
+            "human-signals": "^3.0.1",
+            "is-stream": "^3.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^5.1.0",
+            "onetime": "^6.0.0",
+            "signal-exit": "^3.0.7",
+            "strip-final-newline": "^3.0.0"
+          },
+          "dependencies": {
+            "human-signals": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
+              "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==",
+              "dev": true
+            },
+            "strip-final-newline": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+              "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+              "dev": true
+            }
+          }
+        },
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+          "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "mimic-fn": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+          "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+          "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+          "dev": true,
+          "requires": {
+            "path-key": "^4.0.0"
+          }
+        },
+        "object-inspect": {
+          "version": "1.12.2",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+          "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+          "dev": true
+        },
+        "onetime": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+          "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^4.0.0"
+          }
+        },
+        "path-key": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+          "dev": true
+        },
+        "picomatch": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+          "dev": true
+        },
+        "signal-exit": {
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+          "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+          "dev": true
+        },
+        "yaml": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
+          "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==",
+          "dev": true
+        }
+      }
+    },
+    "listr2": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.5.tgz",
+      "integrity": "sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==",
+      "dev": true,
+      "requires": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.16",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.5.5",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "cli-truncate": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+          "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+          "dev": true,
+          "requires": {
+            "slice-ansi": "^3.0.0",
+            "string-width": "^4.2.0"
+          }
+        },
+        "colorette": {
+          "version": "2.0.20",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+          "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+          "dev": true
+        },
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "dev": true,
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
+        "slice-ansi": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+          "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
+      }
+    },
+    "loadable-ts-transformer": {
+      "version": "1.0.0-alpha.3"
+    },
+    "loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
+      "requires": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw=="
+    },
+    "lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
+      "requires": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA=="
+    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA=="
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
+    },
+    "lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
+      "requires": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
+    "lodash.isequalwith": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
+      "integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true
+    },
+    "lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
+      "requires": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
+    "log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "dependencies": {
+        "slice-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+          "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        }
+      }
+    },
+    "loglevel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
+      "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
+      "dev": true
+    },
+    "lolight": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/lolight/-/lolight-1.4.0.tgz",
+      "integrity": "sha512-d64i6wBResbga3rnM9JYG6Jq/foHDZvSCxoof4kAU48rtzffgbiJlmjs+CfMNlXH2tG3ct+2T6+ht1h4GP7DSg=="
+    },
+    "long": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+      "integrity": "sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.0.0"
+      }
+    },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
+    "makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "requires": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
+      "dev": true
+    },
+    "map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
+      "dev": true
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
+      "dev": true,
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true
+    },
+    "medium-zoom": {
+      "version": "1.0.6"
+    },
+    "mem": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
+      "dev": true,
+      "requires": {
+        "map-age-cleaner": "^0.1.1",
+        "mimic-fn": "^2.0.0",
+        "p-is-promise": "^2.0.0"
+      }
+    },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==",
+      "dev": true,
+      "requires": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "dev": true
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true
+    },
+    "microevent.ts": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
+      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "braces": "^2.3.1",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "extglob": "^2.0.4",
+        "fragment-cache": "^0.2.1",
+        "kind-of": "^6.0.2",
+        "nanomatch": "^1.2.9",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.2"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "dev": true,
+              "requires": {
+                "is-plain-object": "^2.0.4"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
+      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.31",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
+      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.48.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
+    "mini-css-extract-plugin": {
+      "version": "0.9.0",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "normalize-url": "1.9.1",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          },
+          "dependencies": {
+            "ajv-errors": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg=="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
+    "minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.5.0",
+        "duplexify": "^3.4.2",
+        "end-of-stream": "^1.1.0",
+        "flush-write-stream": "^1.0.0",
+        "from2": "^2.1.0",
+        "parallel-transform": "^1.1.0",
+        "pump": "^3.0.0",
+        "pumpify": "^1.3.3",
+        "stream-each": "^1.1.0",
+        "through2": "^2.0.0"
+      }
+    },
+    "mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "mockdate": {
+      "version": "3.0.5",
+      "dev": true
+    },
+    "moment": {
+      "version": "2.29.4"
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "copy-concurrently": "^1.0.0",
+        "fs-write-stream-atomic": "^1.0.8",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.3"
+      }
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
+      "dev": true
+    },
+    "mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "multicast-dns": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
+      "dev": true,
+      "requires": {
+        "dns-packet": "^1.3.1",
+        "thunky": "^1.0.2"
+      }
+    },
+    "multicast-dns-service-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
+      "integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ==",
+      "dev": true
+    },
+    "multihashes": {
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/multihashes/-/multihashes-0.4.13.tgz",
+      "integrity": "sha512-HwJGEKPCpLlNlgGQA56CYh/Wsqa+c4JAq8+mheIgw7OK5T4QvNJqgp6TH8gZ4q4l1aiWeNat/H/MrFXmTuoFfQ==",
+      "requires": {
+        "bs58": "^4.0.1",
+        "varint": "^5.0.0"
+      },
+      "dependencies": {
+        "bs58": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
+          "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
+          "requires": {
+            "base-x": "^3.0.2"
+          }
+        }
+      }
+    },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
+    },
+    "nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
+    },
+    "nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "requires": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^4.0.0",
+        "array-unique": "^0.3.2",
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "fragment-cache": "^0.2.1",
+        "is-windows": "^1.0.2",
+        "kind-of": "^6.0.2",
+        "object.pick": "^1.3.0",
+        "regex-not": "^1.0.0",
+        "snapdragon": "^0.8.1",
+        "to-regex": "^3.0.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        }
+      }
+    },
+    "native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "requires": {
+        "querystring": "^0.2.0"
+      }
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "needle": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node-cache": {
+      "version": "5.1.2",
+      "requires": {
+        "clone": "2.x"
+      }
+    },
+    "node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "dev": true
+    },
+    "node-html-parser": {
+      "version": "5.3.3",
+      "requires": {
+        "css-select": "^4.2.1",
+        "he": "1.2.0"
+      }
+    },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true
+    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "dev": true,
+      "requires": {
+        "assert": "^1.1.1",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^4.3.0",
+        "console-browserify": "^1.1.0",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.11.0",
+        "domain-browser": "^1.1.1",
+        "events": "^3.0.0",
+        "https-browserify": "^1.0.0",
+        "os-browserify": "^0.3.0",
+        "path-browserify": "0.0.1",
+        "process": "^0.11.10",
+        "punycode": "^1.2.4",
+        "querystring-es3": "^0.2.0",
+        "readable-stream": "^2.3.3",
+        "stream-browserify": "^2.0.1",
+        "stream-http": "^2.7.2",
+        "string_decoder": "^1.0.0",
+        "timers-browserify": "^2.0.4",
+        "tty-browserify": "0.0.0",
+        "url": "^0.11.0",
+        "util": "^0.11.0",
+        "vm-browserify": "^1.0.1"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "4.9.2",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+          "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4",
+            "isarray": "^1.0.0"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+          "dev": true
+        },
+        "util": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
+    "node-notifier": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
+      "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "growly": "^1.3.0",
+        "is-wsl": "^2.2.0",
+        "semver": "^7.3.2",
+        "shellwords": "^0.1.1",
+        "uuid": "^8.3.0",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
+      "dev": true
+    },
+    "normalize-html-whitespace": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz",
+      "integrity": "sha512-9ui7CGtOOlehQu0t/OhhlmDyc71mKVlv+4vF+me4iZLPrNtRL2xoquEdfZxasC/bdQi/Hr3iTrpyRKIG+ocabA=="
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        }
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+      "integrity": "sha512-A48My/mtCklowHBlI8Fq2jFWK4tX4lJ5E6ytFsSOq1fzpvT0SQSgKhSg7lN5c2uYFOrUAOQp6zhhJnpp1eMloQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.0.1",
+        "prepend-http": "^1.0.0",
+        "query-string": "^4.1.0",
+        "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "nostr-relaypool": {
+      "version": "0.6.28",
+      "requires": {
+        "@jest/source-map": "^29.4.3",
+        "isomorphic-ws": "^5.0.0",
+        "nostr-tools": "^1.10.0",
+        "safe-stable-stringify": "^2.4.2"
+      },
+      "dependencies": {
+        "@jest/source-map": {
+          "version": "29.4.3",
+          "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.4.3.tgz",
+          "integrity": "sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==",
+          "requires": {
+            "@jridgewell/trace-mapping": "^0.3.15",
+            "callsites": "^3.0.0",
+            "graceful-fs": "^4.2.9"
+          }
+        }
+      }
+    },
+    "nostr-tools": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-1.12.0.tgz",
+      "integrity": "sha512-fsIXaNJPKaSrO9MxsCEWbhI4tG4pToQK4D4sgLRD0fRDfZ6ocCg8CLlh9lcNx0o8pVErCMLVASxbJ+w4WNK0MA==",
+      "requires": {
+        "@noble/curves": "1.0.0",
+        "@noble/hashes": "1.3.0",
+        "@scure/base": "1.1.1",
+        "@scure/bip32": "1.3.0",
+        "@scure/bip39": "1.2.0"
+      }
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      },
+      "dependencies": {
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+          "dev": true
+        }
+      }
+    },
+    "nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "null-loader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+      "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
+    "numeral": {
+      "version": "2.0.6"
+    },
+    "nwsapi": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
+      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
+      "dev": true,
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.6.tgz",
+      "integrity": "sha512-lq+61g26E/BgHv0ZTFgRvi7NMEPuAxLkFU7rukXjc/AlwH4Am5xXVnIXy3un1bg/JPbXHrixRkK1itUzzPiIjQ==",
+      "dev": true,
+      "requires": {
+        "array.prototype.reduce": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.21.2",
+        "safe-array-concat": "^1.0.0"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "object.values": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        }
+      }
+    },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
+    "opn": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
+      "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
+      "dev": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true
+    },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+      "dev": true
+    },
+    "p-each-series": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
+      "integrity": "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==",
+      "dev": true
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "dev": true
+    },
+    "p-is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "p-retry": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
+      "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
+      "dev": true,
+      "requires": {
+        "retry": "^0.12.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "dev": true,
+      "requires": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "dev": true,
+      "requires": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "requires": {
+        "entities": "^4.4.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
+      }
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "requires": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        }
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==",
+      "dev": true
+    },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
+    "path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
+      "dev": true
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
+    },
+    "path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
+    "pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "dev": true,
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+    },
+    "pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true
+    },
+    "pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "dev": true,
+      "requires": {
+        "find-up": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        }
+      }
+    },
+    "pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "dev": true,
+      "requires": {
+        "find-up": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        }
+      }
+    },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
+    "pnp-webpack-plugin": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
+      "integrity": "sha512-2Rb3vm+EXble/sMXNSu6eoBx8e79gKqhNq9F5ZWW6ERNCTE/Q0wQNne5541tE5vKjfM8hpNCYL+LGc1YTfI0dg==",
+      "dev": true,
+      "requires": {
+        "ts-pnp": "^1.1.6"
+      }
+    },
+    "portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.6"
+          }
+        }
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.2.13",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
+      "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==",
+      "requires": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.22",
+        "source-map": "^0.6.1"
+      }
+    },
+    "postcss-calc": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.27",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-colormin": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
+      "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "color": "^3.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-convert-values": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
+      "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
+      "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-discard-duplicates": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
+      "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-discard-empty": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
+      "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-discard-overridden": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
+      "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
+      "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
+      "dev": true,
+      "requires": {
+        "import-cwd": "^3.0.0",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "postcss-loader": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
+      "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
+      "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
+      "dev": true,
+      "requires": {
+        "css-color-names": "0.0.4",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "stylehacks": "^4.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
+      "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-api": "^3.0.0",
+        "cssnano-util-same-parent": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0",
+        "vendors": "^1.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "^5.2.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
+      "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
+      "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "is-color-stop": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-minify-params": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
+      "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.0",
+        "browserslist": "^4.0.0",
+        "cssnano-util-get-arguments": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "uniqs": "^2.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
+      "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "^5.2.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
+      "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-normalize-display-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
+      "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
+      "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
+      "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
+      "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
+      "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
+      "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
+      "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
+      "dev": true,
+      "requires": {
+        "is-absolute-url": "^2.0.0",
+        "normalize-url": "^3.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "is-absolute-url": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
+          "integrity": "sha512-vOx7VprsKyllwjSkLV79NIhpyLfr3jAp7VaTCMXOJHu4m0Ew1CZ2fcjASwmV1jI3BWuWHB013M48eyeldk9gYg==",
+          "dev": true
+        },
+        "normalize-url": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+          "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+          "dev": true
+        },
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
+      "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
+      "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
+      "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-api": "^3.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
+      "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "^4.0.0",
+        "has": "^1.0.0",
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-safe-parser": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz",
+      "integrity": "sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==",
+      "requires": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "postcss-scss": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-3.0.5.tgz",
+      "integrity": "sha512-3e0qYk87eczfzg5P73ZVuuxEGCBfatRhPze6KrSaIbEKVtmnFI1RYp1Fv+AyZi+w8kcNRSPeNX6ap4b65zEkiA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^8.2.7"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
+      "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0",
+        "postcss-value-parser": "^3.0.0",
+        "svgo": "^1.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
+      "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "^1.0.0",
+        "postcss": "^7.0.0",
+        "uniqs": "^2.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==",
+      "dev": true
+    },
+    "prettier": {
+      "version": "2.7.1",
+      "dev": true
+    },
+    "pretty-error": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
+      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.20",
+        "renderkid": "^2.0.4"
+      }
+    },
+    "pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "dev": true
+        }
+      }
+    },
+    "pretty-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+      "dev": true
+    },
+    "probe-image-size": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-7.2.3.tgz",
+      "integrity": "sha512-HubhG4Rb2UH8YtV4ba0Vp5bQ7L78RTONYu/ujmCu5nBI8wGv24s4E9xSKBi0N1MowRpxk76pFCpJtW0KPzOK0w==",
+      "requires": {
+        "lodash.merge": "^4.6.2",
+        "needle": "^2.5.2",
+        "stream-parser": "~0.3.1"
+      }
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "promise": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
+      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
+      "requires": {
+        "asap": "~2.0.6"
+      }
+    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "dev": true
+    },
+    "prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "requires": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
+    "proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true
+    },
+    "ps-tree": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.2.0.tgz",
+      "integrity": "sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==",
+      "dev": true,
+      "requires": {
+        "event-stream": "=3.3.4"
+      }
+    },
+    "psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "dev": true
+    },
+    "qrcode": {
+      "version": "1.5.1",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      }
+    },
+    "qs": {
+      "version": "6.10.3",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "query-string": {
+      "version": "6.14.1",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
+    "querystring": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
+      "dev": true
+    },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
+      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+          "dev": true
+        }
+      }
+    },
+    "razzle": {
+      "version": "4.0.5",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+        "autoprefixer": "^10.2.3",
+        "babel-jest": "^26.3.0",
+        "babel-loader": "^8.0.6",
+        "babel-plugin-transform-define": "^2.0.0",
+        "buffer": "^6.0.3",
+        "chalk": "^4.1.0",
+        "clean-css": "^5.0.1",
+        "copy-webpack-plugin": "^6.1.1",
+        "css-loader": "^5.0.0",
+        "css-minimizer-webpack-plugin": "^1.2.0",
+        "deepmerge": "^4.2.2",
+        "dotenv": "^8.2.0",
+        "dotenv-expand": "^5.1.0",
+        "file-loader": "^4.3.0",
+        "fs-extra": "^9.1.0",
+        "inquirer": "^7.3.3",
+        "jest": "^26.4.2",
+        "mri": "^1.1.4",
+        "null-loader": "^4.0.1",
+        "pnp-webpack-plugin": "^1.6.4",
+        "postcss": "^8.2.4",
+        "postcss-load-config": "^3.0.0",
+        "postcss-loader": "^4.2.0",
+        "process": "^0.11.10",
+        "razzle-start-server-webpack-plugin": "4.0.5",
+        "react-dev-utils": "^11.0.4",
+        "react-refresh": "^0.9.0",
+        "resolve": "^1.17.0",
+        "sade": "^1.4.2",
+        "source-map-support": "^0.5.16",
+        "string-hash": "^1.1.3",
+        "style-loader": "^2.0.0",
+        "terminate": "^2.1.2",
+        "terser-webpack-plugin": "^2.3.5",
+        "tiny-async-pool": "^1.1.0",
+        "url-loader": "^2.3.0",
+        "webpack-manifest-plugin": "^3.1.1",
+        "webpackbar": "~4||~5"
+      },
+      "dependencies": {
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
+          "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-simple-access": "^7.14.5",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          },
+          "dependencies": {
+            "@babel/helper-simple-access": {
+              "version": "7.22.5",
+              "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+              "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+              "dev": true,
+              "requires": {
+                "@babel/types": "^7.22.5"
+              }
+            }
+          }
+        },
+        "autoprefixer": {
+          "version": "10.3.1",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
+          "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.16.6",
+            "caniuse-lite": "^1.0.30001243",
+            "colorette": "^1.2.2",
+            "fraction.js": "^4.1.1",
+            "normalize-range": "^0.1.2",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "cacache": {
+          "version": "13.0.1",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
+          "integrity": "sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==",
+          "dev": true,
+          "requires": {
+            "chownr": "^1.1.2",
+            "figgy-pudding": "^3.5.1",
+            "fs-minipass": "^2.0.0",
+            "glob": "^7.1.4",
+            "graceful-fs": "^4.2.2",
+            "infer-owner": "^1.0.4",
+            "lru-cache": "^5.1.1",
+            "minipass": "^3.0.0",
+            "minipass-collect": "^1.0.2",
+            "minipass-flush": "^1.0.5",
+            "minipass-pipeline": "^1.2.2",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "p-map": "^3.0.0",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.7.1",
+            "ssri": "^7.0.0",
+            "unique-filename": "^1.1.1"
+          },
+          "dependencies": {
+            "chownr": {
+              "version": "1.1.4",
+              "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+              "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+              "dev": true
+            },
+            "figgy-pudding": {
+              "version": "3.5.2",
+              "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+              "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+              "dev": true
+            },
+            "lru-cache": {
+              "version": "5.1.1",
+              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+              "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+              "dev": true,
+              "requires": {
+                "yallist": "^3.0.2"
+              }
+            },
+            "move-concurrently": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+              "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
+              "dev": true,
+              "requires": {
+                "aproba": "^1.1.1",
+                "copy-concurrently": "^1.0.0",
+                "fs-write-stream-atomic": "^1.0.8",
+                "mkdirp": "^0.5.1",
+                "rimraf": "^2.5.4",
+                "run-queue": "^1.0.3"
+              }
+            }
+          }
+        },
+        "jest-worker": {
+          "version": "25.5.0",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
+          "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
+          "dev": true,
+          "requires": {
+            "merge-stream": "^2.0.0",
+            "supports-color": "^7.0.0"
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "p-map": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+          "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+          "dev": true,
+          "requires": {
+            "aggregate-error": "^3.0.0"
+          }
+        },
+        "postcss": {
+          "version": "8.3.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+          "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.23",
+            "source-map-js": "^0.6.2"
+          }
+        },
+        "postcss-loader": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
+          "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
+          "dev": true,
+          "requires": {
+            "cosmiconfig": "^7.0.0",
+            "klona": "^2.0.4",
+            "loader-utils": "^2.0.0",
+            "schema-utils": "^3.0.0",
+            "semver": "^7.3.4"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
+        "source-map-js": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+          "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+          "dev": true
+        },
+        "ssri": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.1.tgz",
+          "integrity": "sha512-w+daCzXN89PseTL99MkA+fxJEcU3wfaE/ah0i0lnOlpG1CYLJ2ZjzEry68YBKfLs4JfoTShrTEsJkAZuNZ/stw==",
+          "dev": true,
+          "requires": {
+            "figgy-pudding": "^3.5.1",
+            "minipass": "^3.1.1"
+          },
+          "dependencies": {
+            "figgy-pudding": {
+              "version": "3.5.2",
+              "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+              "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+              "dev": true
+            }
+          }
+        },
+        "terser-webpack-plugin": {
+          "version": "2.3.8",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
+          "integrity": "sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==",
+          "dev": true,
+          "requires": {
+            "cacache": "^13.0.1",
+            "find-cache-dir": "^3.3.1",
+            "jest-worker": "^25.4.0",
+            "p-limit": "^2.3.0",
+            "schema-utils": "^2.6.6",
+            "serialize-javascript": "^4.0.0",
+            "source-map": "^0.6.1",
+            "terser": "^4.6.12",
+            "webpack-sources": "^1.4.3"
+          },
+          "dependencies": {
+            "schema-utils": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+              "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+              "dev": true,
+              "requires": {
+                "@types/json-schema": "^7.0.5",
+                "ajv": "^6.12.4",
+                "ajv-keywords": "^3.5.2"
+              }
+            }
+          }
+        },
+        "url-loader": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-2.3.0.tgz",
+          "integrity": "sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==",
+          "dev": true,
+          "requires": {
+            "loader-utils": "^1.2.3",
+            "mime": "^2.4.4",
+            "schema-utils": "^2.5.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "1.4.2",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+              "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+              "dev": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^1.0.1"
+              }
+            },
+            "mime": {
+              "version": "2.5.2",
+              "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+              "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+              "dev": true
+            },
+            "schema-utils": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+              "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+              "dev": true,
+              "requires": {
+                "@types/json-schema": "^7.0.5",
+                "ajv": "^6.12.4",
+                "ajv-keywords": "^3.5.2"
+              }
+            }
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
+    "razzle-dev-utils": {
+      "version": "4.0.5",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.8.3",
+        "chalk": "^4.1.0",
+        "filesize": "^6.1.0",
+        "gzip-size": "^6.0.0",
+        "jest-message-util": "^26.3.0",
+        "react-dev-utils": "^11.0.4",
+        "react-error-overlay": "^6.0.7",
+        "recursive-readdir": "^2.2.2",
+        "resolve": "^1.17.0",
+        "sockjs-client": "~1.4.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "filesize": {
+          "version": "6.4.0",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
+          "integrity": "sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ==",
+          "dev": true
+        },
+        "gzip-size": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+          "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+          "dev": true,
+          "requires": {
+            "duplexer": "^0.1.2"
+          }
+        }
+      }
+    },
+    "razzle-plugin-scss": {
+      "version": "4.0.5",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^10.2.3",
+        "css-loader": "^5.0.0",
+        "deepmerge": "^4.2.2",
+        "postcss-load-config": "^3.0.0",
+        "postcss-loader": "^4.2.0",
+        "postcss-scss": "^3.0.4",
+        "resolve-url-loader": "^3.1.2",
+        "sass": "^1.29.0",
+        "sass-loader": "^10.0.3"
+      },
+      "dependencies": {
+        "sass": {
+          "version": "1.35.2",
+          "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
+          "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
+          "dev": true,
+          "requires": {
+            "chokidar": ">=3.0.0 <4.0.0"
+          }
+        }
+      }
+    },
+    "razzle-plugin-typescript": {
+      "version": "3.4.5",
+      "dev": true,
+      "requires": {
+        "fork-ts-checker-webpack-plugin": "^3.1.1",
+        "razzle-dev-utils": "3.4.5",
+        "ts-loader": "^5.2.1"
+      },
+      "dependencies": {
+        "@jest/console": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
+          "integrity": "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==",
+          "dev": true,
+          "requires": {
+            "@jest/source-map": "^24.9.0",
+            "chalk": "^2.0.1",
+            "slash": "^2.0.0"
+          }
+        },
+        "@jest/source-map": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.9.0.tgz",
+          "integrity": "sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==",
+          "dev": true,
+          "requires": {
+            "callsites": "^3.0.0",
+            "graceful-fs": "^4.1.15",
+            "source-map": "^0.6.0"
+          }
+        },
+        "@jest/test-result": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.9.0.tgz",
+          "integrity": "sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==",
+          "dev": true,
+          "requires": {
+            "@jest/console": "^24.9.0",
+            "@jest/types": "^24.9.0",
+            "@types/istanbul-lib-coverage": "^2.0.0"
+          }
+        },
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@nodelib/fs.stat": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "dev": true
+        },
+        "@types/istanbul-reports": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
+          "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "*",
+            "@types/istanbul-lib-report": "*"
+          }
+        },
+        "@types/stack-utils": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
+          "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
+          "dev": true
+        },
+        "@types/yargs": {
+          "version": "13.0.12",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.12.tgz",
+          "integrity": "sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+              "dev": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "browserslist": {
+          "version": "4.8.6",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz",
+          "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001023",
+            "electron-to-chromium": "^1.3.341",
+            "node-releases": "^1.1.47"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            }
+          }
+        },
+        "cli-width": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+          "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+              "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+              "dev": true
+            },
+            "string-width": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+              "dev": true,
+              "requires": {
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^4.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        },
+        "cookie": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+          "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "dir-glob": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
+          "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==",
+          "dev": true,
+          "requires": {
+            "arrify": "^1.0.1",
+            "path-type": "^3.0.0"
+          },
+          "dependencies": {
+            "arrify": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+              "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+              "dev": true
+            }
+          }
+        },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
+          "dev": true
+        },
+        "fast-glob": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "dev": true,
+          "requires": {
+            "@mrmlnc/readdir-enhanced": "^2.2.1",
+            "@nodelib/fs.stat": "^1.1.2",
+            "glob-parent": "^3.1.0",
+            "is-glob": "^4.0.0",
+            "merge2": "^1.2.3",
+            "micromatch": "^3.1.10"
+          },
+          "dependencies": {
+            "@mrmlnc/readdir-enhanced": {
+              "version": "2.2.1",
+              "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
+              "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+              "dev": true,
+              "requires": {
+                "call-me-maybe": "^1.0.1",
+                "glob-to-regexp": "^0.3.0"
+              }
+            }
+          }
+        },
+        "filesize": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
+          "integrity": "sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==",
+          "dev": true
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "fork-ts-checker-webpack-plugin": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz",
+          "integrity": "sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ==",
+          "dev": true,
+          "requires": {
+            "babel-code-frame": "^6.22.0",
+            "chalk": "^2.4.1",
+            "chokidar": "^3.3.0",
+            "micromatch": "^3.1.10",
+            "minimatch": "^3.0.4",
+            "semver": "^5.6.0",
+            "tapable": "^1.0.0",
+            "worker-rpc": "^0.1.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "5.7.2",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+              "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+              "dev": true
+            }
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "get-caller-file": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+              "dev": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            },
+            "path-dirname": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+              "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
+              "dev": true
+            }
+          }
+        },
+        "globby": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz",
+          "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "dir-glob": "2.0.0",
+            "fast-glob": "^2.0.2",
+            "glob": "^7.1.2",
+            "ignore": "^3.3.5",
+            "pify": "^3.0.0",
+            "slash": "^1.0.0"
+          },
+          "dependencies": {
+            "array-union": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+              "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+              "dev": true,
+              "requires": {
+                "array-uniq": "^1.0.1"
+              }
+            },
+            "slash": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+              "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+              "dev": true
+            }
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          },
+          "dependencies": {
+            "inherits": {
+              "version": "2.0.3",
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+              "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+              "dev": true
+            },
+            "setprototypeof": {
+              "version": "1.1.0",
+              "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+              "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+              "dev": true
+            }
+          }
+        },
+        "ignore": {
+          "version": "3.3.10",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
+          "dev": true
+        },
+        "immer": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
+          "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==",
+          "dev": true
+        },
+        "inquirer": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
+          "integrity": "sha512-Bu5Td5+j11sCkqfqmUTiwv+tWisMtP0L7Q8WrqA2C/BbBhy1YTdFrvjjlrKq8oagA/tLQBski2Gcx/Sqyi2qSQ==",
+          "dev": true,
+          "requires": {
+            "ansi-escapes": "^4.2.1",
+            "chalk": "^2.4.2",
+            "cli-cursor": "^3.1.0",
+            "cli-width": "^2.0.0",
+            "external-editor": "^3.0.3",
+            "figures": "^3.0.0",
+            "lodash": "^4.17.15",
+            "mute-stream": "0.0.8",
+            "run-async": "^2.2.0",
+            "rxjs": "^6.5.3",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^5.1.0",
+            "through": "^2.3.6"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
+        },
+        "jest-message-util": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz",
+          "integrity": "sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "@jest/test-result": "^24.9.0",
+            "@jest/types": "^24.9.0",
+            "@types/stack-utils": "^1.0.1",
+            "chalk": "^2.0.1",
+            "micromatch": "^3.1.10",
+            "slash": "^2.0.0",
+            "stack-utils": "^1.0.1"
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "mime": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "0.1.7",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+          "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+          "dev": true
+        },
+        "path-type": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.9.7",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+          "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+          "dev": true
+        },
+        "razzle-dev-utils": {
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/razzle-dev-utils/-/razzle-dev-utils-3.4.5.tgz",
+          "integrity": "sha512-4aosuS8aJPCq6SwCTH6DQbSKaO1lQf5P0YzJwkdxlzLbjuaP6yP+a4T/ttQ3Jd10LAjTw0ceug03z1guvsZD5A==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "chalk": "3.0.0",
+            "jest-message-util": "^24.9.0",
+            "react-dev-utils": "10.2.0",
+            "react-error-overlay": "^6.0.7",
+            "resolve": "1.17.0",
+            "sockjs-client": "~1.4.0",
+            "strip-ansi": "6.0.0",
+            "webpack-dev-server": "~3.10.3"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+              "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            },
+            "has-flag": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "react-dev-utils": {
+          "version": "10.2.0",
+          "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz",
+          "integrity": "sha512-MwrvQW2TFjLblhqpDNeqCXHBkz3G5vc7k4wntgutAJZX4ia3o07eGKo6uYGhUOeJ0hfOxcpJFNFk7+4XCc1S8g==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.8.3",
+            "address": "1.1.2",
+            "browserslist": "4.8.6",
+            "chalk": "2.4.2",
+            "cross-spawn": "7.0.1",
+            "detect-port-alt": "1.1.6",
+            "escape-string-regexp": "2.0.0",
+            "filesize": "6.0.1",
+            "find-up": "4.1.0",
+            "fork-ts-checker-webpack-plugin": "3.1.1",
+            "global-modules": "2.0.0",
+            "globby": "8.0.2",
+            "gzip-size": "5.1.1",
+            "immer": "1.10.0",
+            "inquirer": "7.0.4",
+            "is-root": "2.1.0",
+            "loader-utils": "1.2.3",
+            "open": "^7.0.2",
+            "pkg-up": "3.1.0",
+            "react-error-overlay": "^6.0.6",
+            "recursive-readdir": "2.2.2",
+            "shell-quote": "1.7.2",
+            "strip-ansi": "6.0.0",
+            "text-table": "0.2.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.8.3",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+              "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+              "dev": true,
+              "requires": {
+                "@babel/highlight": "^7.8.3"
+              }
+            },
+            "escape-string-regexp": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+              "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+              "dev": true
+            }
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          },
+          "dependencies": {
+            "ajv-errors": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+              "dev": true
+            }
+          }
+        },
+        "slash": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "dev": true
+        },
+        "sockjs": {
+          "version": "0.3.19",
+          "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
+          "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+          "dev": true,
+          "requires": {
+            "faye-websocket": "^0.10.0",
+            "uuid": "^3.0.1"
+          },
+          "dependencies": {
+            "faye-websocket": {
+              "version": "0.10.0",
+              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+              "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
+              "dev": true,
+              "requires": {
+                "websocket-driver": ">=0.5.1"
+              }
+            }
+          }
+        },
+        "stack-utils": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.5.tgz",
+          "integrity": "sha512-KZiTzuV3CnSnSvgMRrARVCj+Ht7rMbauGDK0LdVFRGyenwdylpajAp4Q0i6SX8rEmbTpMMf6ryq2gb8pPq2WgQ==",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^2.0.0"
+          },
+          "dependencies": {
+            "escape-string-regexp": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+              "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+              "dev": true
+            }
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        },
+        "webpack-dev-server": {
+          "version": "3.10.3",
+          "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz",
+          "integrity": "sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==",
+          "dev": true,
+          "requires": {
+            "ansi-html": "0.0.7",
+            "bonjour": "^3.5.0",
+            "chokidar": "^2.1.8",
+            "compression": "^1.7.4",
+            "connect-history-api-fallback": "^1.6.0",
+            "debug": "^4.1.1",
+            "del": "^4.1.1",
+            "express": "^4.17.1",
+            "html-entities": "^1.2.1",
+            "http-proxy-middleware": "0.19.1",
+            "import-local": "^2.0.0",
+            "internal-ip": "^4.3.0",
+            "ip": "^1.1.5",
+            "is-absolute-url": "^3.0.3",
+            "killable": "^1.0.1",
+            "loglevel": "^1.6.6",
+            "opn": "^5.5.0",
+            "p-retry": "^3.0.1",
+            "portfinder": "^1.0.25",
+            "schema-utils": "^1.0.0",
+            "selfsigned": "^1.10.7",
+            "semver": "^6.3.0",
+            "serve-index": "^1.9.1",
+            "sockjs": "0.3.19",
+            "sockjs-client": "1.4.0",
+            "spdy": "^4.0.1",
+            "strip-ansi": "^3.0.1",
+            "supports-color": "^6.1.0",
+            "url": "^0.11.0",
+            "webpack-dev-middleware": "^3.7.2",
+            "webpack-log": "^2.0.0",
+            "ws": "^6.2.1",
+            "yargs": "12.0.5"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+              "dev": true
+            },
+            "array-union": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+              "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+              "dev": true,
+              "requires": {
+                "array-uniq": "^1.0.1"
+              }
+            },
+            "async-each": {
+              "version": "1.0.3",
+              "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+              "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
+              "dev": true
+            },
+            "bonjour": {
+              "version": "3.5.0",
+              "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
+              "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==",
+              "dev": true,
+              "requires": {
+                "array-flatten": "^2.1.0",
+                "deep-equal": "^1.0.1",
+                "dns-equal": "^1.0.0",
+                "dns-txt": "^2.0.2",
+                "multicast-dns": "^6.0.1",
+                "multicast-dns-service-types": "^1.1.0"
+              }
+            },
+            "chokidar": {
+              "version": "2.1.8",
+              "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+              "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+              "dev": true,
+              "requires": {
+                "anymatch": "^2.0.0",
+                "async-each": "^1.0.1",
+                "braces": "^2.3.2",
+                "fsevents": "^1.2.7",
+                "glob-parent": "^3.1.0",
+                "inherits": "^2.0.3",
+                "is-binary-path": "^1.0.0",
+                "is-glob": "^4.0.0",
+                "normalize-path": "^3.0.0",
+                "path-is-absolute": "^1.0.0",
+                "readdirp": "^2.2.1",
+                "upath": "^1.1.1"
+              }
+            },
+            "compression": {
+              "version": "1.7.4",
+              "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+              "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+              "dev": true,
+              "requires": {
+                "accepts": "~1.3.5",
+                "bytes": "3.0.0",
+                "compressible": "~2.0.16",
+                "debug": "2.6.9",
+                "on-headers": "~1.0.2",
+                "safe-buffer": "5.1.2",
+                "vary": "~1.1.2"
+              },
+              "dependencies": {
+                "debug": {
+                  "version": "2.6.9",
+                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+                  "dev": true,
+                  "requires": {
+                    "ms": "2.0.0"
+                  }
+                }
+              }
+            },
+            "connect-history-api-fallback": {
+              "version": "1.6.0",
+              "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+              "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+              "dev": true
+            },
+            "del": {
+              "version": "4.1.1",
+              "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
+              "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
+              "dev": true,
+              "requires": {
+                "@types/glob": "^7.1.1",
+                "globby": "^6.1.0",
+                "is-path-cwd": "^2.0.0",
+                "is-path-in-cwd": "^2.0.0",
+                "p-map": "^2.0.0",
+                "pify": "^4.0.1",
+                "rimraf": "^2.6.3"
+              }
+            },
+            "express": {
+              "version": "4.17.3",
+              "resolved": "https://registry.npmjs.org/express/-/express-4.17.3.tgz",
+              "integrity": "sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==",
+              "dev": true,
+              "requires": {
+                "accepts": "~1.3.8",
+                "array-flatten": "1.1.1",
+                "body-parser": "1.19.2",
+                "content-disposition": "0.5.4",
+                "content-type": "~1.0.4",
+                "cookie": "0.4.2",
+                "cookie-signature": "1.0.6",
+                "debug": "2.6.9",
+                "depd": "~1.1.2",
+                "encodeurl": "~1.0.2",
+                "escape-html": "~1.0.3",
+                "etag": "~1.8.1",
+                "finalhandler": "~1.1.2",
+                "fresh": "0.5.2",
+                "merge-descriptors": "1.0.1",
+                "methods": "~1.1.2",
+                "on-finished": "~2.3.0",
+                "parseurl": "~1.3.3",
+                "path-to-regexp": "0.1.7",
+                "proxy-addr": "~2.0.7",
+                "qs": "6.9.7",
+                "range-parser": "~1.2.1",
+                "safe-buffer": "5.2.1",
+                "send": "0.17.2",
+                "serve-static": "1.14.2",
+                "setprototypeof": "1.2.0",
+                "statuses": "~1.5.0",
+                "type-is": "~1.6.18",
+                "utils-merge": "1.0.1",
+                "vary": "~1.1.2"
+              },
+              "dependencies": {
+                "array-flatten": {
+                  "version": "1.1.1",
+                  "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+                  "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+                  "dev": true
+                },
+                "debug": {
+                  "version": "2.6.9",
+                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+                  "dev": true,
+                  "requires": {
+                    "ms": "2.0.0"
+                  }
+                },
+                "safe-buffer": {
+                  "version": "5.2.1",
+                  "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+                  "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+                  "dev": true
+                }
+              }
+            },
+            "globby": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+              "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+              "dev": true,
+              "requires": {
+                "array-union": "^1.0.1",
+                "glob": "^7.0.3",
+                "object-assign": "^4.0.1",
+                "pify": "^2.0.0",
+                "pinkie-promise": "^2.0.0"
+              },
+              "dependencies": {
+                "pify": {
+                  "version": "2.3.0",
+                  "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+                  "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+                  "dev": true
+                }
+              }
+            },
+            "http-proxy-middleware": {
+              "version": "0.19.1",
+              "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+              "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+              "dev": true,
+              "requires": {
+                "http-proxy": "^1.17.0",
+                "is-glob": "^4.0.0",
+                "lodash": "^4.17.11",
+                "micromatch": "^3.1.10"
+              }
+            },
+            "import-local": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+              "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
+              "dev": true,
+              "requires": {
+                "pkg-dir": "^3.0.0",
+                "resolve-cwd": "^2.0.0"
+              }
+            },
+            "internal-ip": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
+              "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
+              "dev": true,
+              "requires": {
+                "default-gateway": "^4.2.0",
+                "ipaddr.js": "^1.9.0"
+              }
+            },
+            "ip": {
+              "version": "1.1.8",
+              "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
+              "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+              "dev": true
+            },
+            "is-absolute-url": {
+              "version": "3.0.3",
+              "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+              "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+              "dev": true
+            },
+            "killable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+              "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
+              "dev": true
+            },
+            "loglevel": {
+              "version": "1.7.1",
+              "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
+              "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
+              "dev": true
+            },
+            "opn": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
+              "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
+              "dev": true,
+              "requires": {
+                "is-wsl": "^1.1.0"
+              }
+            },
+            "p-retry": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
+              "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
+              "dev": true,
+              "requires": {
+                "retry": "^0.12.0"
+              }
+            },
+            "pify": {
+              "version": "4.0.1",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+              "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+              "dev": true
+            },
+            "portfinder": {
+              "version": "1.0.28",
+              "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+              "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+              "dev": true,
+              "requires": {
+                "async": "^2.6.2",
+                "debug": "^3.1.1",
+                "mkdirp": "^0.5.5"
+              },
+              "dependencies": {
+                "debug": {
+                  "version": "3.2.7",
+                  "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+                  "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+                  "dev": true,
+                  "requires": {
+                    "ms": "^2.1.1"
+                  }
+                },
+                "ms": {
+                  "version": "2.1.3",
+                  "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+                  "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+                  "dev": true
+                }
+              }
+            },
+            "selfsigned": {
+              "version": "1.10.11",
+              "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
+              "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+              "dev": true,
+              "requires": {
+                "node-forge": "^0.10.0"
+              }
+            },
+            "serve-index": {
+              "version": "1.9.1",
+              "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+              "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+              "dev": true,
+              "requires": {
+                "accepts": "~1.3.4",
+                "batch": "0.6.1",
+                "debug": "2.6.9",
+                "escape-html": "~1.0.3",
+                "http-errors": "~1.6.2",
+                "mime-types": "~2.1.17",
+                "parseurl": "~1.3.2"
+              },
+              "dependencies": {
+                "debug": {
+                  "version": "2.6.9",
+                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+                  "dev": true,
+                  "requires": {
+                    "ms": "2.0.0"
+                  }
+                }
+              }
+            },
+            "spdy": {
+              "version": "4.0.2",
+              "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+              "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+              "dev": true,
+              "requires": {
+                "debug": "^4.1.0",
+                "handle-thing": "^2.0.0",
+                "http-deceiver": "^1.2.7",
+                "select-hose": "^2.0.0",
+                "spdy-transport": "^3.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+              "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^2.0.0"
+              }
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            },
+            "upath": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+              "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+              "dev": true
+            },
+            "webpack-dev-middleware": {
+              "version": "3.7.3",
+              "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
+              "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
+              "dev": true,
+              "requires": {
+                "memory-fs": "^0.4.1",
+                "mime": "^2.4.4",
+                "mkdirp": "^0.5.1",
+                "range-parser": "^1.2.1",
+                "webpack-log": "^2.0.0"
+              }
+            },
+            "webpack-log": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
+              "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+              "dev": true,
+              "requires": {
+                "ansi-colors": "^3.0.0",
+                "uuid": "^3.3.2"
+              }
+            },
+            "ws": {
+              "version": "6.2.2",
+              "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+              "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+              "dev": true,
+              "requires": {
+                "async-limiter": "~1.0.0"
+              }
+            }
+          }
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
+          "dev": true,
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+              "dev": true
+            },
+            "code-point-at": {
+              "version": "1.1.0",
+              "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+              "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
+              "dev": true
+            },
+            "is-fullwidth-code-point": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+              "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+              "dev": true,
+              "requires": {
+                "number-is-nan": "^1.0.0"
+              }
+            },
+            "number-is-nan": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+              "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
+              "dev": true
+            },
+            "string-width": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+              "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+              "dev": true,
+              "requires": {
+                "code-point-at": "^1.0.0",
+                "is-fullwidth-code-point": "^1.0.0",
+                "strip-ansi": "^3.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+              "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^2.0.0"
+              }
+            }
+          }
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "3.0.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+              "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+              "dev": true
+            },
+            "find-up": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+              "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+              "dev": true,
+              "requires": {
+                "locate-path": "^3.0.0"
+              }
+            },
+            "os-locale": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+              "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+              "dev": true,
+              "requires": {
+                "execa": "^1.0.0",
+                "lcid": "^2.0.0",
+                "mem": "^4.0.0"
+              }
+            },
+            "string-width": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+              "dev": true,
+              "requires": {
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^4.0.0"
+              }
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "razzle-start-server-webpack-plugin": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.0.5.tgz",
+      "integrity": "sha512-IrsdXUsNdPYe4enEQseG/rFeggkVTvzopjICJxCxx/bco5pqcAZUdJ02ntuPPqa3f9KOr9mYFDKgBo6gh96UiQ==",
+      "dev": true
+    },
+    "react": {
+      "version": "16.14.0",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      }
+    },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "dependencies": {
+        "react-redux": {
+          "version": "7.2.4",
+          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
+          "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
+          "requires": {
+            "@babel/runtime": "^7.12.1",
+            "@types/react-redux": "^7.1.16",
+            "hoist-non-react-statics": "^3.3.2",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.13.1"
+          }
+        },
+        "redux": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+          "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+          "requires": {
+            "@babel/runtime": "^7.9.2"
+          }
+        }
+      }
+    },
+    "react-bootstrap": {
+      "version": "1.6.1",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.26",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^5.0.1",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-datetime": {
+      "version": "3.0.4",
+      "requires": {
+        "prop-types": "^15.5.7"
+      }
+    },
+    "react-dev-utils": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
+      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.10.4",
+        "address": "1.1.2",
+        "browserslist": "4.14.2",
+        "chalk": "2.4.2",
+        "cross-spawn": "7.0.3",
+        "detect-port-alt": "1.1.6",
+        "escape-string-regexp": "2.0.0",
+        "filesize": "6.1.0",
+        "find-up": "4.1.0",
+        "fork-ts-checker-webpack-plugin": "4.1.6",
+        "global-modules": "2.0.0",
+        "globby": "11.0.1",
+        "gzip-size": "5.1.1",
+        "immer": "8.0.1",
+        "is-root": "2.1.0",
+        "loader-utils": "2.0.0",
+        "open": "^7.0.2",
+        "pkg-up": "3.1.0",
+        "prompts": "2.4.0",
+        "react-error-overlay": "^6.0.9",
+        "recursive-readdir": "2.2.2",
+        "shell-quote": "1.7.2",
+        "strip-ansi": "6.0.0",
+        "text-table": "0.2.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.14.2",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
+          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001125",
+            "electron-to-chromium": "^1.3.564",
+            "escalade": "^3.0.2",
+            "node-releases": "^1.1.61"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "escape-string-regexp": {
+              "version": "1.0.5",
+              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+              "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+              "dev": true
+            }
+          }
+        },
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        },
+        "fork-ts-checker-webpack-plugin": {
+          "version": "4.1.6",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
+          "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.5.5",
+            "chalk": "^2.4.1",
+            "micromatch": "^3.1.10",
+            "minimatch": "^3.0.4",
+            "semver": "^5.6.0",
+            "tapable": "^1.0.0",
+            "worker-rpc": "^0.1.0"
+          }
+        },
+        "globby": {
+          "version": "11.0.1",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
+          "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "prompts": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
+          "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
+          "dev": true,
+          "requires": {
+            "kleur": "^3.0.3",
+            "sisteransi": "^1.0.5"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "react-dom": {
+      "version": "16.14.0",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      }
+    },
+    "react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
+      }
+    },
+    "react-error-overlay": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
+      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
+      "dev": true
+    },
+    "react-google-recaptcha": {
+      "version": "2.1.0",
+      "requires": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.1.1"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
+      }
+    },
+    "react-grid-layout": {
+      "version": "1.3.4",
+      "requires": {
+        "clsx": "^1.1.1",
+        "lodash.isequal": "^4.0.0",
+        "prop-types": "^15.8.1",
+        "react-draggable": "^4.0.0",
+        "react-resizable": "^3.0.4"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
+      }
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
+    "react-highcharts": {
+      "version": "16.1.0",
+      "requires": {
+        "highcharts": "^6.0.4"
+      }
+    },
+    "react-img-webp": {
+      "version": "2.0.2"
+    },
+    "react-in-viewport": {
+      "version": "1.0.0-alpha.30",
+      "requires": {
+        "hoist-non-react-statics": "^3.0.0"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-native-crypto-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",
+      "integrity": "sha512-FNbLuG/HAdapQoybeZSoes1PWdOj0w242gb+e1R0hicf3Gyj/Mf8M9NaED2AnXVOX01b2FXomwUiw1xP1K+8sA=="
+    },
+    "react-overlays": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
+      "integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.8.6",
+        "@restart/hooks": "^0.3.26",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-popper": {
+      "version": "2.3.0",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+          "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+        }
+      }
+    },
+    "react-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-1.0.1.tgz",
+      "integrity": "sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ=="
+    },
+    "react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "dev": true
+    },
+    "react-resizable": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
+      "integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
+      "requires": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      }
+    },
+    "react-resize-detector": {
+      "version": "7.1.2",
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        }
+      }
+    },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
+    "react-sortablejs": {
+      "version": "2.1.0",
+      "requires": {
+        "classnames": "^2.2.6",
+        "tiny-invariant": "^1.1.0"
+      }
+    },
+    "react-test-renderer": {
+      "version": "16.14.0",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.19.1"
+      }
+    },
+    "react-textarea-autosize": {
+      "version": "8.4.1",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.21.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+          "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+          "requires": {
+            "regenerator-runtime": "^0.13.11"
+          },
+          "dependencies": {
+            "regenerator-runtime": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+              "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+            }
+          }
+        }
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-twitter-embed": {
+      "version": "4.0.4",
+      "requires": {
+        "scriptjs": "^2.5.9"
+      }
+    },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw=="
+    },
+    "react-use": {
+      "version": "17.4.0",
+      "requires": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "js-cookie": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+          "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+        }
+      }
+    },
+    "react-virtualized": {
+      "version": "9.22.3",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
+          "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.11"
+          },
+          "dependencies": {
+            "regenerator-runtime": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+              "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+            }
+          }
+        }
+      }
+    },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.3.0"
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
+    "regenerator-transform": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "regex-parser": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
+      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
+      "dev": true
+    },
+    "regexp.prototype.flags": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "functions-have-names": "^1.2.3"
+      }
+    },
+    "regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "requires": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      }
+    },
+    "regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+          "dev": true
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true
+    },
+    "remarkable": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.4.tgz",
+      "integrity": "sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==",
+      "requires": {
+        "argparse": "^1.0.10",
+        "autolinker": "~0.28.0"
+      }
+    },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
+      "dev": true
+    },
+    "renderkid": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
+      "dev": true,
+      "requires": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
+    "repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "dev": true
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
+      "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
+          "dev": true
+        }
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true
+    },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
+      "dev": true
+    },
+    "resolve-url-loader": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz",
+      "integrity": "sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==",
+      "dev": true,
+      "requires": {
+        "adjust-sourcemap-loader": "3.0.0",
+        "camelcase": "5.3.1",
+        "compose-function": "3.0.3",
+        "convert-source-map": "1.7.0",
+        "es6-iterator": "2.0.3",
+        "loader-utils": "1.2.3",
+        "postcss": "7.0.36",
+        "rework": "1.0.1",
+        "rework-visit": "1.0.0",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "convert-source-map": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+          "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.1"
+          }
+        },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "dev": true
+    },
+    "retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rework": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz",
+      "integrity": "sha512-eEjL8FdkdsxApd0yWVZgBGzfCQiT8yqSc2H1p4jpZpQdtz7ohETiDMoje5PlM8I9WgkqkreVxFUKYOiJdVWDXw==",
+      "dev": true,
+      "requires": {
+        "convert-source-map": "^0.3.3",
+        "css": "^2.0.0"
+      },
+      "dependencies": {
+        "convert-source-map": {
+          "version": "0.3.5",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
+          "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg==",
+          "dev": true
+        }
+      }
+    },
+    "rework-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rework-visit/-/rework-visit-1.0.0.tgz",
+      "integrity": "sha512-W6V2fix7nCLUYX1v6eGPrBOZlc03/faqzP4sUxMAJMBMOPYhfV/RyLegTufn5gJKaOITyi+gvf0LXDZ9NzkHnQ==",
+      "dev": true
+    },
+    "rfdc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
+      "dev": true
+    },
+    "rgb-regex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
+      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
+      "dev": true
+    },
+    "rgba-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "rss": {
+      "version": "1.2.2",
+      "requires": {
+        "mime-types": "2.1.13",
+        "xml": "1.0.1"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.25.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.25.0.tgz",
+          "integrity": "sha512-5k547tI4Cy+Lddr/hdjNbBEWBwSl8EBc5aSdKvedav8DReADgWJzcYiktaRIw3GtGC1jjwldXtTzvqJZmtvC7w=="
+        },
+        "mime-types": {
+          "version": "2.1.13",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.13.tgz",
+          "integrity": "sha512-ryBDp1Z/6X90UvjUK3RksH0IBPM137T7cmg4OgD5wQBojlAiUwuok0QeELkim/72EtcYuNlmbkrcGuxj3Kl0YQ==",
+          "requires": {
+            "mime-db": "~1.25.0"
+          }
+        }
+      }
+    },
+    "rsvp": {
+      "version": "4.8.5",
+      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
+      "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
+      "dev": true
+    },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+    "run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "dev": true
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "sade": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
+      "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
+      "dev": true,
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "safe-array-concat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
+      "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
+      "dev": true,
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "dependencies": {
+        "is-regex": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-tostringtag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "safe-stable-stringify": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
+      "integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sane": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
+      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
+      "dev": true,
+      "requires": {
+        "@cnakazawa/watch": "^1.0.3",
+        "anymatch": "^2.0.0",
+        "capture-exit": "^2.0.0",
+        "exec-sh": "^0.3.2",
+        "execa": "^1.0.0",
+        "fb-watchman": "^2.0.0",
+        "micromatch": "^3.1.4",
+        "minimist": "^1.1.1",
+        "walker": "~1.0.5"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          }
+        },
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+          "dev": true,
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        }
+      }
+    },
+    "sass": {
+      "version": "1.56.2",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "dependencies": {
+        "immutable": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+          "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
+      "integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dev": true,
+      "requires": {
+        "xmlchars": "^2.2.0"
+      }
+    },
+    "scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      }
+    },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
+    "scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
+    "seamless-immutable": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
+      "integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
+      "optional": true
+    },
+    "secp256k1": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-3.8.0.tgz",
+      "integrity": "sha512-k5ke5avRZbtl9Tqx/SA7CbY3NF6Ro+Sj9cZxezFzuBlLDmyqPiL8hJJ+EmzD8Ig4LUDByHJ3/iPOVoRixs/hmw==",
+      "requires": {
+        "bindings": "^1.5.0",
+        "bip66": "^1.1.5",
+        "bn.js": "^4.11.8",
+        "create-hash": "^1.2.0",
+        "drbg.js": "^1.0.1",
+        "elliptic": "^6.5.2",
+        "nan": "^2.14.0",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true
+    },
+    "selfsigned": {
+      "version": "1.10.14",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
+      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
+      "dev": true,
+      "requires": {
+        "node-forge": "^0.10.0"
+      }
+    },
+    "semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true
+    },
+    "send": {
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
+      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "1.8.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "3.1.0",
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+          "dev": true
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
+      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
+      "dev": true,
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.2"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "shell-quote": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
+      "dev": true
+    },
+    "shellwords": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "dev": true,
+      "optional": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
+    "sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      }
+    },
+    "sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+          "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "dev": true,
+      "requires": {
+        "base": "^0.11.1",
+        "debug": "^2.2.0",
+        "define-property": "^0.2.5",
+        "extend-shallow": "^2.0.1",
+        "map-cache": "^0.2.2",
+        "source-map": "^0.5.6",
+        "source-map-resolve": "^0.5.0",
+        "use": "^3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.2.0"
+      }
+    },
+    "sockjs": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
+      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
+      "dev": true,
+      "requires": {
+        "faye-websocket": "^0.10.0",
+        "uuid": "^3.4.0",
+        "websocket-driver": "0.6.5"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        },
+        "websocket-driver": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+          "integrity": "sha512-oBx6ZM1Gs5q2jwZuSN/Qxyy/fbgomV8+vqsmipaPKB/74hjHlKuM07jNmRhn4qa2AdUwsgxrltq+gaPsHgcl0Q==",
+          "dev": true,
+          "requires": {
+            "websocket-extensions": ">=0.1.1"
+          }
+        }
+      }
+    },
+    "sockjs-client": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz",
+      "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.5",
+        "eventsource": "^1.0.7",
+        "faye-websocket": "~0.11.1",
+        "inherits": "^2.0.3",
+        "json3": "^3.3.2",
+        "url-parse": "^1.4.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "faye-websocket": {
+          "version": "0.11.4",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+          "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+          "dev": true,
+          "requires": {
+            "websocket-driver": ">=0.5.1"
+          }
+        }
+      }
+    },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "^1.0.0"
+      }
+    },
+    "sortablejs": {
+      "version": "1.14.0"
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "dev": true
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
+      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
+      "dev": true
+    },
+    "spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "speakingurl": {
+      "version": "14.0.1"
+    },
+    "split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dev": true,
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "ssri": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.1.1"
+      }
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        }
+      }
+    },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA=="
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
+      "dev": true,
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^0.1.0"
+          }
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true
+    },
+    "std-env": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-2.3.1.tgz",
+      "integrity": "sha512-eOsoKTWnr6C8aWrqJJ2KAReXoa7Vn5Ywyw6uCXgA/xDhxPoaIsBa5aNJmISY04dLwXPBnDHW4diGM7Sn5K4R/g==",
+      "dev": true,
+      "requires": {
+        "ci-info": "^3.1.1"
+      },
+      "dependencies": {
+        "ci-info": {
+          "version": "3.8.0",
+          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+          "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+          "dev": true
+        }
+      }
+    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1"
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "dev": true,
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.3.6",
+        "to-arraybuffer": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "stream-parser": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
+      "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
+      "requires": {
+        "debug": "2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
+      "dev": true
+    },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
+    },
+    "string-argv": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+      "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+      "dev": true
+    },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
+      "dev": true
+    },
+    "string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dev": true,
+      "requires": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        }
+      }
+    },
+    "strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true
+    },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
+      "dev": true
+    },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
+    "style-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
+      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
+    "style-to-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.0.tgz",
+      "integrity": "sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==",
+      "requires": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "requires": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
+    "stylehacks": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
+      "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "postcss": "^7.0.0",
+        "postcss-selector-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "^5.2.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
+    "superjson": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
+      "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
+      "requires": {
+        "copy-anything": "^3.0.2"
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        }
+      }
+    },
+    "supports-hyperlinks": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        }
+      }
+    },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "css-select": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^3.2.1",
+            "domutils": "^1.7.0",
+            "nth-check": "^1.0.2"
+          }
+        },
+        "css-tree": {
+          "version": "1.0.0-alpha.37",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.4",
+            "source-map": "^0.6.1"
+          }
+        },
+        "css-what": {
+          "version": "3.4.2",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+          "dev": true
+        },
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "domelementtype": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+              "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+              "dev": true
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+          "dev": true
+        },
+        "nth-check": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+          "dev": true,
+          "requires": {
+            "boolbase": "~1.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "dev": true
+    },
+    "tar": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
+      "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==",
+      "dev": true,
+      "requires": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "dev": true
+        },
+        "minipass": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+          "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        }
+      }
+    },
+    "terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      }
+    },
+    "terminate": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/terminate/-/terminate-2.2.1.tgz",
+      "integrity": "sha512-FPdUfP/UCw+rtEfT3bzqhHTQr5papNaiUXkJXA6jSBiHgZLh0693EpY1Sebd0rc4PNgdE2Ir+oNqiL5ugv3e0A==",
+      "dev": true,
+      "requires": {
+        "ps-tree": "^1.2.0"
+      }
+    },
+    "terser": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
+      "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "dev": true,
+      "requires": {
+        "cacache": "^12.0.2",
+        "find-cache-dir": "^2.1.0",
+        "is-wsl": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^4.0.0",
+        "source-map": "^0.6.1",
+        "terser": "^4.1.2",
+        "webpack-sources": "^1.4.0",
+        "worker-farm": "^1.7.0"
+      },
+      "dependencies": {
+        "cacache": {
+          "version": "12.0.4",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+          "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5",
+            "chownr": "^1.1.1",
+            "figgy-pudding": "^3.5.1",
+            "glob": "^7.1.4",
+            "graceful-fs": "^4.1.15",
+            "infer-owner": "^1.0.3",
+            "lru-cache": "^5.1.1",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.3",
+            "ssri": "^6.0.1",
+            "unique-filename": "^1.1.1",
+            "y18n": "^4.0.0"
+          }
+        },
+        "find-cache-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+          "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^2.0.0",
+            "pkg-dir": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
+        "ssri": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
+          "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+          "dev": true,
+          "requires": {
+            "figgy-pudding": "^3.5.1"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
+    "test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "requires": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "text-encoding-utf-8": {
+      "version": "1.0.2"
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "textarea-caret": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz",
+      "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg=="
+    },
+    "throat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
+      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
+      "dev": true
+    },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true
+    },
+    "timers": {
+      "version": "0.1.1",
+      "dev": true
+    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dev": true,
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
+    "timsort": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
+      "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
+      "dev": true
+    },
+    "tiny-async-pool": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-async-pool/-/tiny-async-pool-1.2.0.tgz",
+      "integrity": "sha512-PY/OiSenYGBU3c1nTuP1HLKRkhKFDXsAibYI5GeHbHw2WVpt6OFzAPIRP94dGnS66Jhrkheim2CHAXUNI4XwMg==",
+      "dev": true,
+      "requires": {
+        "semver": "^5.5.0",
+        "yaassertion": "^1.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        }
+      }
+    },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
+    "tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      }
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "dev": true,
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        }
+      }
+    },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true
+    },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true
+    },
+    "tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw==",
+      "dev": true
+    },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
+    "ts-jest": {
+      "version": "26.5.6",
+      "dev": true,
+      "requires": {
+        "bs-logger": "0.x",
+        "buffer-from": "1.x",
+        "fast-json-stable-stringify": "2.x",
+        "jest-util": "^26.1.0",
+        "json5": "2.x",
+        "lodash": "4.x",
+        "make-error": "1.x",
+        "mkdirp": "1.x",
+        "semver": "7.x",
+        "yargs-parser": "20.x"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+          "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "ts-loader": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-5.4.5.tgz",
+      "integrity": "sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^1.0.2",
+        "micromatch": "^3.1.4",
+        "semver": "^5.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "ts-pnp": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
+      "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "tslint": {
+      "version": "5.20.1",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^4.0.1",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.1",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.8.0",
+        "tsutils": "^2.29.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "tslint-react": {
+      "version": "4.2.0",
+      "dev": true,
+      "requires": {
+        "tsutils": "^3.9.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.21.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "tsutils": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==",
+      "dev": true
+    },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+      "dev": true
+    },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "dev": true
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dev": true,
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "typescript": {
+      "version": "4.1.6",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dev": true,
+      "requires": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      }
+    },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==",
+      "dev": true
+    },
+    "uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ==",
+      "dev": true
+    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "dev": true,
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "dev": true,
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true
+    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==",
+      "dev": true
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
+      "dev": true,
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
+          "dev": true,
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
+              "dev": true,
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==",
+          "dev": true
+        }
+      }
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true
+    },
+    "update-browserslist-db": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "dev": true,
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
+      "dev": true
+    },
+    "url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
+        },
+        "querystring": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+          "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
+        }
+      }
+    },
+    "url-loader": {
+      "version": "4.1.1",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      }
+    },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "dev": true
+    },
+    "use-async-effect": {
+      "version": "2.2.6"
+    },
+    "use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
+    },
+    "use-indexeddb": {
+      "version": "2.0.2"
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
+    },
+    "use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
+    },
+    "util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+        }
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "util.promisify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "object.getownpropertydescriptors": "^2.0.3"
+      }
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "dev": true
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true
+    },
+    "uuid": {
+      "version": "9.0.0"
+    },
+    "v8-to-istanbul": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz",
+      "integrity": "sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
+      }
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
+    "varint": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-5.0.2.tgz",
+      "integrity": "sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow=="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true
+    },
+    "vendors": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
+      "dev": true
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+      "dev": true
+    },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "dev": true,
+      "requires": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "dev": true,
+      "requires": {
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dev": true,
+      "requires": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "watchpack": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.4.1",
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true,
+          "optional": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.3",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^4.0.0",
+            "normalize-path": "^3.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.1"
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        }
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "requires": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "dev": true
+    },
+    "webpack": {
+      "version": "4.46.0",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
+        "ajv": "^6.10.2",
+        "ajv-keywords": "^3.4.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^4.5.0",
+        "eslint-scope": "^4.0.3",
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^2.4.0",
+        "loader-utils": "^1.2.3",
+        "memory-fs": "^0.4.1",
+        "micromatch": "^3.1.10",
+        "mkdirp": "^0.5.3",
+        "neo-async": "^2.6.1",
+        "node-libs-browser": "^2.2.1",
+        "schema-utils": "^1.0.0",
+        "tapable": "^1.1.3",
+        "terser-webpack-plugin": "^1.4.3",
+        "watchpack": "^1.7.4",
+        "webpack-sources": "^1.4.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          },
+          "dependencies": {
+            "ajv-errors": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "webpack-bundle-analyzer": {
+      "version": "4.8.0",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+          "dev": true
+        },
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "gzip-size": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+          "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+          "dev": true,
+          "requires": {
+            "duplexer": "^0.1.2"
+          }
+        }
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
+      "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
+      "dev": true,
+      "requires": {
+        "memory-fs": "^0.4.1",
+        "mime": "^2.4.4",
+        "mkdirp": "^0.5.1",
+        "range-parser": "^1.2.1",
+        "webpack-log": "^2.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-dev-server": {
+      "version": "3.11.0",
+      "dev": true,
+      "requires": {
+        "ansi-html": "0.0.7",
+        "bonjour": "^3.5.0",
+        "chokidar": "^2.1.8",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^1.6.0",
+        "debug": "^4.1.1",
+        "del": "^4.1.1",
+        "express": "^4.17.1",
+        "html-entities": "^1.3.1",
+        "http-proxy-middleware": "0.19.1",
+        "import-local": "^2.0.0",
+        "internal-ip": "^4.3.0",
+        "ip": "^1.1.5",
+        "is-absolute-url": "^3.0.3",
+        "killable": "^1.0.1",
+        "loglevel": "^1.6.8",
+        "opn": "^5.5.0",
+        "p-retry": "^3.0.1",
+        "portfinder": "^1.0.26",
+        "schema-utils": "^1.0.0",
+        "selfsigned": "^1.10.7",
+        "semver": "^6.3.0",
+        "serve-index": "^1.9.1",
+        "sockjs": "0.3.20",
+        "sockjs-client": "1.4.0",
+        "spdy": "^4.0.2",
+        "strip-ansi": "^3.0.1",
+        "supports-color": "^6.1.0",
+        "url": "^0.11.0",
+        "webpack-dev-middleware": "^3.7.2",
+        "webpack-log": "^2.0.0",
+        "ws": "^6.2.1",
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+              "dev": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+          "dev": true
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "dev": true
+        },
+        "body-parser": {
+          "version": "1.20.1",
+          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+          "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+          "dev": true,
+          "requires": {
+            "bytes": "3.1.2",
+            "content-type": "~1.0.4",
+            "debug": "2.6.9",
+            "depd": "2.0.0",
+            "destroy": "1.2.0",
+            "http-errors": "2.0.0",
+            "iconv-lite": "0.4.24",
+            "on-finished": "2.4.1",
+            "qs": "6.11.0",
+            "raw-body": "2.5.1",
+            "type-is": "~1.6.18",
+            "unpipe": "1.0.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "dev": true,
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "^1.1.0",
+            "array-unique": "^0.3.2",
+            "extend-shallow": "^2.0.1",
+            "fill-range": "^4.0.0",
+            "isobject": "^3.0.1",
+            "repeat-element": "^1.1.2",
+            "snapdragon": "^0.8.1",
+            "snapdragon-node": "^2.0.1",
+            "split-string": "^3.0.2",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+          "dev": true
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "dev": true,
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.3",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^4.0.0",
+            "normalize-path": "^3.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.1"
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "cookie": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+          "dev": true
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+          "dev": true
+        },
+        "destroy": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+          "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "express": {
+          "version": "4.18.2",
+          "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+          "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+          "dev": true,
+          "requires": {
+            "accepts": "~1.3.8",
+            "array-flatten": "1.1.1",
+            "body-parser": "1.20.1",
+            "content-disposition": "0.5.4",
+            "content-type": "~1.0.4",
+            "cookie": "0.5.0",
+            "cookie-signature": "1.0.6",
+            "debug": "2.6.9",
+            "depd": "2.0.0",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "etag": "~1.8.1",
+            "finalhandler": "1.2.0",
+            "fresh": "0.5.2",
+            "http-errors": "2.0.0",
+            "merge-descriptors": "1.0.1",
+            "methods": "~1.1.2",
+            "on-finished": "2.4.1",
+            "parseurl": "~1.3.3",
+            "path-to-regexp": "0.1.7",
+            "proxy-addr": "~2.0.7",
+            "qs": "6.11.0",
+            "range-parser": "~1.2.1",
+            "safe-buffer": "5.2.1",
+            "send": "0.18.0",
+            "serve-static": "1.15.0",
+            "setprototypeof": "1.2.0",
+            "statuses": "2.0.1",
+            "type-is": "~1.6.18",
+            "utils-merge": "1.0.1",
+            "vary": "~1.1.2"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "dev": true,
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "finalhandler": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+          "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "on-finished": "2.4.1",
+            "parseurl": "~1.3.3",
+            "statuses": "2.0.1",
+            "unpipe": "~1.0.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "dev": true,
+              "requires": {
+                "ms": "2.0.0"
+              }
+            }
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+              "dev": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "http-errors": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+          "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+          "dev": true,
+          "requires": {
+            "depd": "2.0.0",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.2.0",
+            "statuses": "2.0.1",
+            "toidentifier": "1.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "on-finished": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+          "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+          "dev": true,
+          "requires": {
+            "ee-first": "1.1.1"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "0.1.7",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+          "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
+        },
+        "raw-body": {
+          "version": "2.5.1",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+          "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+          "dev": true,
+          "requires": {
+            "bytes": "3.1.2",
+            "http-errors": "2.0.0",
+            "iconv-lite": "0.4.24",
+            "unpipe": "1.0.0"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "send": {
+          "version": "0.18.0",
+          "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+          "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "depd": "2.0.0",
+            "destroy": "1.2.0",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "etag": "~1.8.1",
+            "fresh": "0.5.2",
+            "http-errors": "2.0.0",
+            "mime": "1.6.0",
+            "ms": "2.1.3",
+            "on-finished": "2.4.1",
+            "range-parser": "~1.2.1",
+            "statuses": "2.0.1"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "dev": true,
+              "requires": {
+                "ms": "2.0.0"
+              },
+              "dependencies": {
+                "ms": {
+                  "version": "2.0.0",
+                  "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+                  "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+                  "dev": true
+                }
+              }
+            },
+            "ms": {
+              "version": "2.1.3",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+              "dev": true
+            }
+          }
+        },
+        "serve-static": {
+          "version": "1.15.0",
+          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+          "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+          "dev": true,
+          "requires": {
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "parseurl": "~1.3.3",
+            "send": "0.18.0"
+          }
+        },
+        "statuses": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+              "dev": true
+            }
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
+          "dev": true,
+          "requires": {
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "ws": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "webpack-log": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
+      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^3.0.0",
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-manifest-plugin": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-3.1.1.tgz",
+      "integrity": "sha512-r3vL8BBNVtyeNbaFwDQoOWqBd0Gp/Tbzo8Q3YGZDV+IG77gsB9VZry5XKKbfFNFHSmwW+f1z4/w2XPt6wBZJYg==",
+      "dev": true,
+      "requires": {
+        "tapable": "^2.0.0",
+        "webpack-sources": "^2.2.0"
+      },
+      "dependencies": {
+        "tapable": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+          "dev": true
+        },
+        "webpack-sources": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
+          "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
+          "dev": true,
+          "requires": {
+            "source-list-map": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "dev": true,
+      "requires": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "webpackbar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-4.0.0.tgz",
+      "integrity": "sha512-k1qRoSL/3BVuINzngj09nIwreD8wxV4grcuhHTD8VJgUbGcy8lQSPqv+bM00B7F+PffwIsQ8ISd4mIwRbr23eQ==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^2.4.2",
+        "consola": "^2.10.0",
+        "figures": "^3.0.0",
+        "pretty-time": "^1.1.0",
+        "std-env": "^2.2.1",
+        "text-table": "^0.2.0",
+        "wrap-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-fetch": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
+      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
+    "which-typed-array": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "dev": true,
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
+    "worker-rpc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
+      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
+      "dev": true,
+      "requires": {
+        "microevent.ts": "~0.1.1"
+      }
+    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dev": true,
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true
+    },
+    "xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
+    },
+    "xmldom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
+      "integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA=="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "yaassertion": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/yaassertion/-/yaassertion-1.0.2.tgz",
+      "integrity": "sha512-sBoJBg5vTr3lOpRX0yFD+tz7wv/l2UPMFthag4HGTMPrypBRKerjjS8jiEnNMjcAEtPXjbHiKE0UwRR1W1GXBg==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "dependencies": {
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    }
+  }
+}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 772ba107aeb..f6dfcadbbb8 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -106,7 +106,7 @@ import { getAccessToken } from "../../helper/user-token";
 import accountReputation from "../../helper/account-reputation";
 import { _t } from "../../i18n";
 
-import { getAccountFull, getAccountReputations, lookupAccounts } from "../../api/hive";
+import { getAccountFull, getAccountReputations } from "../../api/hive";
 import { uploadImage } from "../../api/misc";
 import { addImage } from "../../api/private-api";
 import { getCommunity } from "../../api/bridge";
@@ -415,7 +415,7 @@ export default function ChatBox(props: Props) {
   useDebounce(
     async () => {
       if (searchtext.length !== 0) {
-        const resp = await getAccountReputations(searchtext, 20);
+        const resp = await getAccountReputations(searchtext, 30);
         const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
         setUserList(sortedByReputation);
         setInProgress(false);
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index a9d9262bdb1..77680626640 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -207,11 +207,11 @@ exports[`(1) Default render 1`] = `
       title="Emoji"
     >
       <svg
+        fill="currentColor"
         viewBox="0 0 24 24"
       >
         <path
           d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-          fill="currentColor"
         />
       </svg>
     </div>
@@ -226,9 +226,10 @@ exports[`(1) Default render 1`] = `
       >
         <svg
           fill="currentColor"
-          height="16"
+          height="18"
+          strokeWidth="2"
           viewBox="0 0 16 16"
-          width="16"
+          width="18"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -548,11 +549,11 @@ exports[`(2) Cancellable, in progress 1`] = `
       title="Emoji"
     >
       <svg
+        fill="currentColor"
         viewBox="0 0 24 24"
       >
         <path
           d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-          fill="currentColor"
         />
       </svg>
     </div>
@@ -567,9 +568,10 @@ exports[`(2) Cancellable, in progress 1`] = `
       >
         <svg
           fill="currentColor"
-          height="16"
+          height="18"
+          strokeWidth="2"
           viewBox="0 0 16 16"
-          width="16"
+          width="18"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/src/common/components/community-cover/index.spec.tsx b/src/common/components/community-cover/index.spec.tsx
index ede94ab5f2c..d81d84fa613 100644
--- a/src/common/components/community-cover/index.spec.tsx
+++ b/src/common/components/community-cover/index.spec.tsx
@@ -38,7 +38,8 @@ const defProps = {
   deleteUser: () => {},
   toggleUIProp: () => {},
   updateSubscriptions: () => {},
-  addAccount: () => {}
+  addAccount: () => {},
+  resetChat: () => {}
 };
 
 it("(1) Render with loaded account object", () => {
diff --git a/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
index 8bea023feb6..2e56cab1af0 100644
--- a/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
@@ -100,6 +100,7 @@ exports[`(2) Hot filter 1`] = `
           </div>
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
diff --git a/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap b/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
index 1d7d60537e3..2f3c416b651 100644
--- a/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`(1) Default full render 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
@@ -11106,6 +11107,7 @@ exports[`(1) Default full render 1`] = `
 exports[`(2) Filter 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
@@ -11180,6 +11182,7 @@ exports[`(2) Filter 1`] = `
 exports[`(3) Filter - No result 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
diff --git a/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
index bf56f3b52ee..27c3ba578a8 100644
--- a/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
@@ -84,6 +84,7 @@ exports[`(2) Separated sharing buttons 1`] = `
       
       <div
         className="menu-down"
+        style={Object {}}
       >
         <svg
           viewBox="0 0 24 24"
diff --git a/src/common/components/friends/__snapshots__/index.spec.tsx.snap b/src/common/components/friends/__snapshots__/index.spec.tsx.snap
index 90006a3e7f3..dc4d3e243d2 100644
--- a/src/common/components/friends/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/friends/__snapshots__/index.spec.tsx.snap
@@ -31,6 +31,7 @@ exports[`(1) Render list 1`] = `
                 </div>
                 <div
                   className="menu-down"
+                  style={Object {}}
                 >
                   <svg
                     viewBox="0 0 24 24"
diff --git a/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap b/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
index 1bd25ed3ce7..fbed79811e8 100644
--- a/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
@@ -24,6 +24,7 @@ exports[`(1) Render with data. 1`] = `
           
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index 499ab1593b1..47919e8f915 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -39,7 +39,7 @@ export default function ManageChatKey(props: Props) {
             </div>
           </Form.Group>
         </div>
-        <OrDivider />
+        {/* <OrDivider /> */}
       </div>
     </>
   );
diff --git a/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
index 693c7ca7996..94bb2b4e430 100644
--- a/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
@@ -89,6 +89,7 @@ exports[`(2) With active user 1`] = `
           </div>
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
@@ -156,6 +157,7 @@ exports[`(2) With active user 1`] = `
           
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               fill="none"
diff --git a/src/common/components/wallet-ecency/__snapshots__/index.spec.tsx.snap b/src/common/components/wallet-ecency/__snapshots__/index.spec.tsx.snap
index 15970220f89..d4a48a844c8 100644
--- a/src/common/components/wallet-ecency/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/wallet-ecency/__snapshots__/index.spec.tsx.snap
@@ -513,6 +513,7 @@ exports[`(2) With active user 1`] = `
                   
                   <div
                     className="menu-down"
+                    style={Object {}}
                   >
                     <svg
                       viewBox="0 0 24 24"
@@ -1007,6 +1008,7 @@ exports[`(3) Active user with unclaimed points 1`] = `
                   
                   <div
                     className="menu-down"
+                    style={Object {}}
                   >
                     <svg
                       viewBox="0 0 24 24"

From e6a55346b33795dd87c6832fa3aee76f88942d46 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 23 Aug 2023 15:33:04 +0500
Subject: [PATCH 050/179] delete package-lock file

---
 package-lock.json | 21723 --------------------------------------------
 1 file changed, 21723 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index a45c98e0490..00000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,21723 +0,0 @@
-{
-  "name": "ecency-vision",
-  "version": "3.0.35",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dev": true,
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      }
-    },
-    "@ampproject/toolbox-core": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-core/-/toolbox-core-2.8.0.tgz",
-      "integrity": "sha512-YrMRrE9zfAChPlFLT+B4yoGEH6CR/Yerjm6SCxuFSPARK/LaytUV+ZhZ03tlMv5wUHDH2Lq8e/lGymME0CXBhA==",
-      "requires": {
-        "cross-fetch": "3.1.2",
-        "lru-cache": "6.0.0"
-      }
-    },
-    "@ampproject/toolbox-optimizer": {
-      "version": "2.8.10",
-      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-optimizer/-/toolbox-optimizer-2.8.10.tgz",
-      "integrity": "sha512-GuXkLHmGJ3pko6aozHa3msxxahiUJM163eG8LEji/MTfNGf0QJCWSQ46a+yHG3tBzYtLexVHWU7A8QMfRbxWGw==",
-      "requires": {
-        "@ampproject/toolbox-core": "2.8.0",
-        "@ampproject/toolbox-runtime-version": "2.8.0",
-        "@ampproject/toolbox-script-csp": "2.8.0",
-        "@ampproject/toolbox-validator-rules": "2.8.0",
-        "abort-controller": "3.0.0",
-        "cross-fetch": "3.1.2",
-        "cssnano-simple": "2.0.0",
-        "dom-serializer": "1.3.2",
-        "domhandler": "4.2.2",
-        "domutils": "2.8.0",
-        "htmlparser2": "7.2.0",
-        "https-proxy-agent": "5.0.0",
-        "lru-cache": "6.0.0",
-        "normalize-html-whitespace": "1.0.0",
-        "postcss": "8.2.13",
-        "postcss-safe-parser": "5.0.2",
-        "terser": "5.5.1"
-      },
-      "dependencies": {
-        "domhandler": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
-          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
-          "requires": {
-            "domelementtype": "^2.2.0"
-          }
-        },
-        "entities": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
-        },
-        "htmlparser2": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.2",
-            "domutils": "^2.8.0",
-            "entities": "^3.0.1"
-          }
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="
-        },
-        "terser": {
-          "version": "5.5.1",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
-          "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
-          "requires": {
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.19"
-          }
-        }
-      }
-    },
-    "@ampproject/toolbox-runtime-version": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.8.0.tgz",
-      "integrity": "sha512-vkotDc6S3Q3Xm6LIPzWo2T1+yxvj+bIDrD4SObk6J4SVqilIlPEunLayS602Su+ZXqNC82VjEeD1ARAtc613dQ==",
-      "requires": {
-        "@ampproject/toolbox-core": "^2.8.0"
-      }
-    },
-    "@ampproject/toolbox-script-csp": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.8.0.tgz",
-      "integrity": "sha512-5/ytdTzhmdIyOkcEBskh5ZlLJ8V4bbe+1pY9LZQ8DfWrSOVD1pJ+LtAO/7lmTM+HXxMAKPYDRpvsJc0vvbY0tw=="
-    },
-    "@ampproject/toolbox-validator-rules": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.8.0.tgz",
-      "integrity": "sha512-kbInwnzpEPVZkKigpKFkF/DQ2LsuZ5b8vrEFHjJ4P+meKVQg2QF/UWAQpIMMdjGe1AQBT+DWm91n9UyjgqfnWQ==",
-      "requires": {
-        "cross-fetch": "3.1.2"
-      }
-    },
-    "@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
-      "requires": {
-        "@babel/highlight": "^7.14.5"
-      }
-    },
-    "@babel/compat-data": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
-      "integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==",
-      "dev": true
-    },
-    "@babel/core": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz",
-      "integrity": "sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==",
-      "dev": true,
-      "requires": {
-        "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.17.10",
-        "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helpers": "^7.17.9",
-        "@babel/parser": "^7.17.10",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.10",
-        "@babel/types": "^7.17.10",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.1",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
-          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.10",
-            "@jridgewell/gen-mapping": "^0.3.2",
-            "@jridgewell/trace-mapping": "^0.3.17",
-            "jsesc": "^2.5.1"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz",
-      "integrity": "sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.22.10"
-      }
-    },
-    "@babel/helper-compilation-targets": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz",
-      "integrity": "sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.20.2",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "browserslist": {
-          "version": "4.21.10",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
-          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001517",
-            "electron-to-chromium": "^1.4.477",
-            "node-releases": "^2.0.13",
-            "update-browserslist-db": "^1.0.11"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001522",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
-          "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.4.499",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
-          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "2.0.13",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
-      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7"
-      }
-    },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz",
-      "integrity": "sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "regexpu-core": "^5.3.1",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        }
-      }
-    },
-    "@babel/helper-define-polyfill-provider": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz",
-      "integrity": "sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.17.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2",
-        "semver": "^6.1.2"
-      }
-    },
-    "@babel/helper-environment-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
-      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-function-name": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
-      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.17.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
-          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.22.5",
-            "chalk": "^2.4.2",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-member-expression-to-functions": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
-      "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.22.5"
-      }
-    },
-    "@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-module-transforms": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
-      "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
-          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.22.5",
-            "chalk": "^2.4.2",
-            "js-tokens": "^4.0.0"
-          },
-          "dependencies": {
-            "@babel/helper-validator-identifier": {
-              "version": "7.22.5",
-              "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-              "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-              "dev": true
-            }
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-optimise-call-expression": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
-      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.22.5"
-      }
-    },
-    "@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-      "dev": true
-    },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz",
-      "integrity": "sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-wrap-function": "^7.22.9"
-      },
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-replace-supers": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz",
-      "integrity": "sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-member-expression-to-functions": "^7.22.5",
-        "@babel/helper-optimise-call-expression": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
-      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.22.5"
-      }
-    },
-    "@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "dev": true
-    },
-    "@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-      "dev": true
-    },
-    "@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
-      "dev": true
-    },
-    "@babel/helper-wrap-function": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz",
-      "integrity": "sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.22.5",
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.10"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helpers": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.10.tgz",
-      "integrity": "sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.10",
-        "@babel/types": "^7.22.10"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
-          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.10",
-            "@jridgewell/gen-mapping": "^0.3.2",
-            "@jridgewell/trace-mapping": "^0.3.17",
-            "jsesc": "^2.5.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-hoist-variables": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-          "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz",
-          "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.10",
-            "@babel/generator": "^7.22.10",
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-function-name": "^7.22.5",
-            "@babel/helper-hoist-variables": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "@babel/parser": "^7.22.10",
-            "@babel/types": "^7.22.10",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
-      "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/parser": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-      "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-      "dev": true
-    },
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
-      "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
-      "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
-      "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-remap-async-to-generator": "^7.18.9",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
-      },
-      "dependencies": {
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
-      "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
-      }
-    },
-    "@babel/plugin-proposal-class-static-block": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
-      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-create-class-features-plugin": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
-          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.22.5",
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-function-name": "^7.22.5",
-            "@babel/helper-member-expression-to-functions": "^7.22.5",
-            "@babel/helper-optimise-call-expression": "^7.22.5",
-            "@babel/helper-replace-supers": "^7.22.9",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
-      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
-      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
-      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
-      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
-      "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-      }
-    },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
-      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      }
-    },
-    "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
-      "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.17.0",
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.16.7"
-      }
-    },
-    "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
-      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-create-class-features-plugin": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
-          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.22.5",
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-function-name": "^7.22.5",
-            "@babel/helper-member-expression-to-functions": "^7.22.5",
-            "@babel/helper-optimise-call-expression": "^7.22.5",
-            "@babel/helper-replace-supers": "^7.22.9",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-create-class-features-plugin": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
-          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.22.5",
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-function-name": "^7.22.5",
-            "@babel/helper-member-expression-to-functions": "^7.22.5",
-            "@babel/helper-optimise-call-expression": "^7.22.5",
-            "@babel/helper-replace-supers": "^7.22.9",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
-      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      }
-    },
-    "@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
-    "@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz",
-      "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-typescript": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz",
-      "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
-      "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
-      "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-remap-async-to-generator": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-module-imports": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
-      "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.10.tgz",
-      "integrity": "sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz",
-      "integrity": "sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
-        "@babel/helper-optimise-call-expression": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/compat-data": {
-          "version": "7.22.9",
-          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
-          "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
-          "dev": true
-        },
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-compilation-targets": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
-          "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
-          "dev": true,
-          "requires": {
-            "@babel/compat-data": "^7.22.9",
-            "@babel/helper-validator-option": "^7.22.5",
-            "browserslist": "^4.21.9",
-            "lru-cache": "^5.1.1",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-validator-option": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
-          "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
-          "dev": true
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "browserslist": {
-          "version": "4.21.10",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
-          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001517",
-            "electron-to-chromium": "^1.4.477",
-            "node-releases": "^2.0.13",
-            "update-browserslist-db": "^1.0.11"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "electron-to-chromium": {
-          "version": "1.4.499",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
-          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "node-releases": {
-          "version": "2.0.13",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
-      "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/template": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz",
-      "integrity": "sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-dotall-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
-      "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
-      "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
-      "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-for-of": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
-      "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
-      "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/compat-data": {
-          "version": "7.22.9",
-          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
-          "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
-          "dev": true
-        },
-        "@babel/helper-compilation-targets": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz",
-          "integrity": "sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==",
-          "dev": true,
-          "requires": {
-            "@babel/compat-data": "^7.22.9",
-            "@babel/helper-validator-option": "^7.22.5",
-            "browserslist": "^4.21.9",
-            "lru-cache": "^5.1.1",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-validator-option": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
-          "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
-          "dev": true
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "browserslist": {
-          "version": "4.21.10",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
-          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001517",
-            "electron-to-chromium": "^1.4.477",
-            "node-releases": "^2.0.13",
-            "update-browserslist-db": "^1.0.11"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "electron-to-chromium": {
-          "version": "1.4.499",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
-          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "node-releases": {
-          "version": "2.0.13",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-literals": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
-      "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
-      "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-amd": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
-      "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.22.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
-          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-module-imports": "^7.22.5",
-            "@babel/helper-simple-access": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "@babel/helper-validator-identifier": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
-      "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "@babel/helper-simple-access": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
-      "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-module-transforms": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-hoist-variables": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-          "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.22.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
-          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-module-imports": "^7.22.5",
-            "@babel/helper-simple-access": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "@babel/helper-validator-identifier": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-umd": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
-      "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.22.9",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
-          "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-module-imports": "^7.22.5",
-            "@babel/helper-simple-access": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "@babel/helper-validator-identifier": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-          "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
-      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-new-target": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
-      "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-object-super": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
-      "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-optional-chaining": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
-      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-parameters": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
-      "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-property-literals": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
-      "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-display-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz",
-      "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-jsx": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz",
-      "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-module-imports": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-jsx": "^7.22.5",
-        "@babel/types": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
-          "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
-      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-transform-react-jsx": "^7.22.5"
-      }
-    },
-    "@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz",
-      "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-regenerator": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz",
-      "integrity": "sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "regenerator-transform": "^0.15.2"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-reserved-words": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
-      "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-runtime": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.10.tgz",
-      "integrity": "sha512-6jrMilUAJhktTr56kACL8LnWC5hx3Lf27BS0R0DSyW/OoJfb/iTHeE96V3b1dgKG3FSFdd/0culnYWMkjcKCig==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "semver": "^6.3.0"
-      }
-    },
-    "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
-      "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-spread": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
-      "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-sticky-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
-      "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-template-literals": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
-      "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
-      "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-typescript": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.10.tgz",
-      "integrity": "sha512-7++c8I/ymsDo4QQBAgbraXLzIM6jmfao11KgIBEYZRReWzNWH9NtNgJcyrZiXsOPh523FQm6LfpLyy/U5fn46A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.22.10",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-typescript": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/helper-annotate-as-pure": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-          "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-create-class-features-plugin": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz",
-          "integrity": "sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.22.5",
-            "@babel/helper-environment-visitor": "^7.22.5",
-            "@babel/helper-function-name": "^7.22.5",
-            "@babel/helper-member-expression-to-functions": "^7.22.5",
-            "@babel/helper-optimise-call-expression": "^7.22.5",
-            "@babel/helper-replace-supers": "^7.22.9",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-            "@babel/helper-split-export-declaration": "^7.22.6",
-            "semver": "^6.3.1"
-          }
-        },
-        "@babel/helper-environment-visitor": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-          "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
-          "dev": true
-        },
-        "@babel/helper-function-name": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-          "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.22.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-          "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-          "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.22.5",
-            "@babel/parser": "^7.22.5",
-            "@babel/types": "^7.22.5"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz",
-      "integrity": "sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
-      "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/preset-env": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.17.10.tgz",
-      "integrity": "sha512-YNgyBHZQpeoBSRBg0xixsZzfT58Ze1iZrajvv0lJc70qDDGuGfonEnMGfWeSY0mQ3JTuCWFbMkzFRVafOyJx4g==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.17.10",
-        "@babel/helper-compilation-targets": "^7.17.10",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
-        "@babel/plugin-proposal-class-properties": "^7.16.7",
-        "@babel/plugin-proposal-class-static-block": "^7.17.6",
-        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
-        "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
-        "@babel/plugin-proposal-json-strings": "^7.16.7",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-        "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
-        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-private-methods": "^7.16.11",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.16.7",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.16.7",
-        "@babel/plugin-transform-async-to-generator": "^7.16.8",
-        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
-        "@babel/plugin-transform-block-scoping": "^7.16.7",
-        "@babel/plugin-transform-classes": "^7.16.7",
-        "@babel/plugin-transform-computed-properties": "^7.16.7",
-        "@babel/plugin-transform-destructuring": "^7.17.7",
-        "@babel/plugin-transform-dotall-regex": "^7.16.7",
-        "@babel/plugin-transform-duplicate-keys": "^7.16.7",
-        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
-        "@babel/plugin-transform-for-of": "^7.16.7",
-        "@babel/plugin-transform-function-name": "^7.16.7",
-        "@babel/plugin-transform-literals": "^7.16.7",
-        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
-        "@babel/plugin-transform-modules-amd": "^7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.17.9",
-        "@babel/plugin-transform-modules-systemjs": "^7.17.8",
-        "@babel/plugin-transform-modules-umd": "^7.16.7",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.17.10",
-        "@babel/plugin-transform-new-target": "^7.16.7",
-        "@babel/plugin-transform-object-super": "^7.16.7",
-        "@babel/plugin-transform-parameters": "^7.16.7",
-        "@babel/plugin-transform-property-literals": "^7.16.7",
-        "@babel/plugin-transform-regenerator": "^7.17.9",
-        "@babel/plugin-transform-reserved-words": "^7.16.7",
-        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-        "@babel/plugin-transform-spread": "^7.16.7",
-        "@babel/plugin-transform-sticky-regex": "^7.16.7",
-        "@babel/plugin-transform-template-literals": "^7.16.7",
-        "@babel/plugin-transform-typeof-symbol": "^7.16.7",
-        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
-        "@babel/plugin-transform-unicode-regex": "^7.16.7",
-        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.17.10",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.22.1",
-        "semver": "^6.3.0"
-      }
-    },
-    "@babel/preset-modules": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6.tgz",
-      "integrity": "sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      }
-    },
-    "@babel/preset-react": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.7.tgz",
-      "integrity": "sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-react-display-name": "^7.16.7",
-        "@babel/plugin-transform-react-jsx": "^7.16.7",
-        "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-        "@babel/plugin-transform-react-pure-annotations": "^7.16.7"
-      }
-    },
-    "@babel/preset-typescript": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz",
-      "integrity": "sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-transform-typescript": "^7.16.7"
-      }
-    },
-    "@babel/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
-      "dev": true
-    },
-    "@babel/runtime": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
-      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
-      "requires": {
-        "regenerator-runtime": "^0.14.0"
-      }
-    },
-    "@babel/template": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.17.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
-      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.10",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.10",
-        "@babel/types": "^7.17.10",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
-          "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.22.10",
-            "chalk": "^2.4.2"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz",
-          "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.22.10",
-            "@jridgewell/gen-mapping": "^0.3.2",
-            "@jridgewell/trace-mapping": "^0.3.17",
-            "jsesc": "^2.5.1"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
-          "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.22.5",
-            "chalk": "^2.4.2",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.22.10",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
-          "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==",
-          "dev": true
-        },
-        "@jridgewell/gen-mapping": {
-          "version": "0.3.3",
-          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-          "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-          "dev": true,
-          "requires": {
-            "@jridgewell/set-array": "^1.0.1",
-            "@jridgewell/sourcemap-codec": "^1.4.10",
-            "@jridgewell/trace-mapping": "^0.3.9"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@babel/types": {
-      "version": "7.22.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
-      "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.22.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-          "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-          "dev": true
-        }
-      }
-    },
-    "@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true
-    },
-    "@cnakazawa/watch": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
-      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
-      "dev": true,
-      "requires": {
-        "exec-sh": "^0.3.2",
-        "minimist": "^1.2.0"
-      }
-    },
-    "@discoveryjs/json-ext": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
-      "dev": true
-    },
-    "@ecency/render-helper": {
-      "version": "2.2.25",
-      "requires": {
-        "he": "^1.2.0",
-        "lolight": "^1.4.0",
-        "lru-cache": "^6.0.0",
-        "multihashes": "0.4.13",
-        "path": "^0.12.7",
-        "querystring": "^0.2.0",
-        "react-native-crypto-js": "^1.0.0",
-        "remarkable": "^2.0.1",
-        "url": "^0.11.0",
-        "xmldom": "^0.5.0",
-        "xss": "^1.0.9"
-      },
-      "dependencies": {
-        "remarkable": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.1.tgz",
-          "integrity": "sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==",
-          "requires": {
-            "argparse": "^1.0.10",
-            "autolinker": "^3.11.0"
-          },
-          "dependencies": {
-            "argparse": {
-              "version": "1.0.10",
-              "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-              "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-              "requires": {
-                "sprintf-js": "~1.0.2"
-              }
-            },
-            "autolinker": {
-              "version": "3.16.2",
-              "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.16.2.tgz",
-              "integrity": "sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==",
-              "requires": {
-                "tslib": "^2.3.0"
-              }
-            }
-          }
-        },
-        "xss": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.9.tgz",
-          "integrity": "sha512-2t7FahYnGJys6DpHLhajusId7R0Pm2yTmuL0GV9+mV0ZlaLSnb2toBmppATfg5sWIhZQGlsTLoecSzya+l4EAQ==",
-          "requires": {
-            "commander": "^2.20.3",
-            "cssfilter": "0.0.10"
-          }
-        }
-      }
-    },
-    "@ecency/render-helper-amp": {
-      "version": "1.1.0",
-      "requires": {
-        "@ampproject/toolbox-optimizer": "^2.8.10",
-        "amphtml-validator": "^1.0.35",
-        "cheerio": "^1.0.0-rc.11",
-        "he": "^1.2.0",
-        "lru-cache": "^5.1.1",
-        "multihashes": "0.4.13",
-        "path": "^0.12.7",
-        "probe-image-size": "^7.2.1",
-        "querystring": "^0.2.0",
-        "remarkable": "^1.7.3",
-        "url": "^0.11.0",
-        "xmldom": "^0.5.0",
-        "xss": "^1.0.8"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "xss": {
-          "version": "1.0.14",
-          "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
-          "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
-          "requires": {
-            "commander": "^2.20.3",
-            "cssfilter": "0.0.10"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-        }
-      }
-    },
-    "@firebase/analytics": {
-      "version": "0.8.0",
-      "requires": {
-        "@firebase/component": "0.5.17",
-        "@firebase/installations": "0.5.12",
-        "@firebase/logger": "0.3.3",
-        "@firebase/util": "1.6.3",
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/app": {
-      "version": "0.7.28",
-      "requires": {
-        "@firebase/component": "0.5.17",
-        "@firebase/logger": "0.3.3",
-        "@firebase/util": "1.6.3",
-        "idb": "7.0.1",
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/component": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.5.17.tgz",
-      "integrity": "sha512-mTM5CBSIlmI+i76qU4+DhuExnWtzcPS3cVgObA3VAjliPPr3GrUlTaaa8KBGfxsD27juQxMsYA0TvCR5X+GQ3Q==",
-      "requires": {
-        "@firebase/util": "1.6.3",
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/installations": {
-      "version": "0.5.12",
-      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.5.12.tgz",
-      "integrity": "sha512-Zq43fCE0PB5tGJ3ojzx5RNQzKdej1188qgAk22rwjuhP7npaG/PlJqDG1/V0ZjTLRePZ1xGrfXSPlA17c/vtNw==",
-      "requires": {
-        "@firebase/component": "0.5.17",
-        "@firebase/util": "1.6.3",
-        "idb": "7.0.1",
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/logger": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.3.3.tgz",
-      "integrity": "sha512-POTJl07jOKTOevLXrTvJD/VZ0M6PnJXflbAh5J9VGkmtXPXNG6MdZ9fmRgqYhXKTaDId6AQenQ262uwgpdtO0Q==",
-      "requires": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/messaging": {
-      "version": "0.9.16",
-      "requires": {
-        "@firebase/component": "0.5.17",
-        "@firebase/installations": "0.5.12",
-        "@firebase/messaging-interop-types": "0.1.0",
-        "@firebase/util": "1.6.3",
-        "idb": "7.0.1",
-        "tslib": "^2.1.0"
-      }
-    },
-    "@firebase/messaging-interop-types": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.1.0.tgz",
-      "integrity": "sha512-DbvUl/rXAZpQeKBnwz0NYY5OCqr2nFA0Bj28Fmr3NXGqR4PAkfTOHuQlVtLO1Nudo3q0HxAYLa68ZDAcuv2uKQ=="
-    },
-    "@firebase/util": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.6.3.tgz",
-      "integrity": "sha512-FujteO6Zjv6v8A4HS+t7c+PjU0Kaxj+rOnka0BsI/twUaCC9t8EQPmXpWZdk7XfszfahJn2pqsflUWUhtUkRlg==",
-      "requires": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "@gar/promisify": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
-      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-      "dev": true
-    },
-    "@hiveio/dhive": {
-      "version": "1.2.5",
-      "requires": {
-        "bigi": "^1.4.2",
-        "bs58": "^4.0.1",
-        "bytebuffer": "^5.0.1",
-        "core-js": "^3.6.4",
-        "cross-fetch": "^3.0.4",
-        "ecurve": "^1.0.6",
-        "https": "^1.0.0",
-        "jsbi": "^3.1.4",
-        "node-fetch": "^2.6.0",
-        "ripemd160": "^2.0.2",
-        "secp256k1": "^3.8.0",
-        "verror": "^1.10.0",
-        "whatwg-fetch": "^3.0.0"
-      },
-      "dependencies": {
-        "bs58": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
-          "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
-          "requires": {
-            "base-x": "^3.0.2"
-          }
-        },
-        "cross-fetch": {
-          "version": "3.1.5",
-          "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-          "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-          "requires": {
-            "node-fetch": "2.6.7"
-          }
-        },
-        "node-fetch": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-          "requires": {
-            "whatwg-url": "^5.0.0"
-          }
-        },
-        "tr46": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-        },
-        "webidl-conversions": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-        },
-        "whatwg-url": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-          "requires": {
-            "tr46": "~0.0.3",
-            "webidl-conversions": "^3.0.0"
-          }
-        }
-      }
-    },
-    "@hiveio/hivescript": {
-      "version": "1.2.7"
-    },
-    "@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      }
-    },
-    "@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "dev": true
-    },
-    "@jest/console": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.2.tgz",
-      "integrity": "sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@jest/core": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.3.tgz",
-      "integrity": "sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/reporters": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-changed-files": "^26.6.2",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-resolve-dependencies": "^26.6.3",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "jest-watcher": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "p-each-series": "^2.1.0",
-        "rimraf": "^3.0.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
-    "@jest/environment": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.2.tgz",
-      "integrity": "sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==",
-      "dev": true,
-      "requires": {
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@jest/fake-timers": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.2.tgz",
-      "integrity": "sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@sinonjs/fake-timers": "^6.0.1",
-        "@types/node": "*",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@jest/globals": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.2.tgz",
-      "integrity": "sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "expect": "^26.6.2"
-      }
-    },
-    "@jest/reporters": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.2.tgz",
-      "integrity": "sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==",
-      "dev": true,
-      "requires": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "graceful-fs": "^4.2.4",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^4.0.3",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.0.2",
-        "jest-haste-map": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^4.0.1",
-        "terminal-link": "^2.0.0",
-        "v8-to-istanbul": "^7.0.0"
-      }
-    },
-    "@jest/source-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-26.6.2.tgz",
-      "integrity": "sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==",
-      "dev": true,
-      "requires": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.4",
-        "source-map": "^0.6.0"
-      }
-    },
-    "@jest/test-result": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.2.tgz",
-      "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      }
-    },
-    "@jest/test-sequencer": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz",
-      "integrity": "sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==",
-      "dev": true,
-      "requires": {
-        "@jest/test-result": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3"
-      }
-    },
-    "@jest/transform": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
-      "integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^26.6.2",
-        "babel-plugin-istanbul": "^6.0.0",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-util": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pirates": "^4.0.1",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "^3.0.0"
-      },
-      "dependencies": {
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
-      "requires": {
-        "@jridgewell/set-array": "^1.0.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      }
-    },
-    "@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
-    },
-    "@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true
-    },
-    "@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
-    },
-    "@jridgewell/trace-mapping": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-      "requires": {
-        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "1.4.14"
-      },
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": {
-          "version": "1.4.14",
-          "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-          "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
-        }
-      }
-    },
-    "@loadable/component": {
-      "version": "5.15.2",
-      "requires": {
-        "@babel/runtime": "^7.7.7",
-        "hoist-non-react-statics": "^3.3.1",
-        "react-is": "^16.12.0"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.17.9",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-          "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.13.11",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-        }
-      }
-    },
-    "@loadable/server": {
-      "version": "5.15.2",
-      "requires": {
-        "lodash": "^4.17.15"
-      }
-    },
-    "@loadable/webpack-plugin": {
-      "version": "5.15.2",
-      "dev": true,
-      "requires": {
-        "make-dir": "^3.0.2"
-      }
-    },
-    "@noble/curves": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.0.0.tgz",
-      "integrity": "sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==",
-      "requires": {
-        "@noble/hashes": "1.3.0"
-      }
-    },
-    "@noble/hashes": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.0.tgz",
-      "integrity": "sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg=="
-    },
-    "@noble/secp256k1": {
-      "version": "1.7.1"
-    },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      }
-    },
-    "@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
-    },
-    "@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      }
-    },
-    "@npmcli/fs": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
-      "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
-      "dev": true,
-      "requires": {
-        "@gar/promisify": "^1.0.1",
-        "semver": "^7.3.5"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "@npmcli/move-file": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
-      "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
-      "dev": true,
-      "requires": {
-        "mkdirp": "^1.0.4",
-        "rimraf": "^3.0.2"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
-    "@pmmmwh/react-refresh-webpack-plugin": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
-      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
-      "dev": true,
-      "requires": {
-        "ansi-html": "^0.0.7",
-        "error-stack-parser": "^2.0.6",
-        "html-entities": "^1.2.1",
-        "native-url": "^0.2.6",
-        "schema-utils": "^2.6.5",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        }
-      }
-    },
-    "@polka/url": {
-      "version": "1.0.0-next.21",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
-      "dev": true
-    },
-    "@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
-    },
-    "@redis/bloom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
-      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
-      "dev": true
-    },
-    "@redis/client": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.5.8.tgz",
-      "integrity": "sha512-xzElwHIO6rBAqzPeVnCzgvrnBEcFL1P0w8P65VNLRkdVW8rOE58f52hdj0BDgmsdOm4f1EoXPZtH4Fh7M/qUpw==",
-      "dev": true,
-      "requires": {
-        "cluster-key-slot": "1.1.2",
-        "generic-pool": "3.9.0",
-        "yallist": "4.0.0"
-      }
-    },
-    "@redis/graph": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.0.tgz",
-      "integrity": "sha512-16yZWngxyXPd+MJxeSr0dqh2AIOi8j9yXKcKCwVaKDbH3HTuETpDVPcLujhFYVPtYrngSco31BUcSa9TH31Gqg==",
-      "dev": true
-    },
-    "@redis/json": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.4.tgz",
-      "integrity": "sha512-LUZE2Gdrhg0Rx7AN+cZkb1e6HjoSKaeeW8rYnt89Tly13GBI5eP4CwDVr+MY8BAYfCg4/N15OUrtLoona9uSgw==",
-      "dev": true
-    },
-    "@redis/search": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.1.3.tgz",
-      "integrity": "sha512-4Dg1JjvCevdiCBTZqjhKkGoC5/BcB7k9j99kdMnaXFXg8x4eyOIVg9487CMv7/BUVkFLZCaIh8ead9mU15DNng==",
-      "dev": true
-    },
-    "@redis/time-series": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.0.4.tgz",
-      "integrity": "sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==",
-      "dev": true
-    },
-    "@restart/context": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
-    },
-    "@restart/hooks": {
-      "version": "0.3.27",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
-      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
-      "requires": {
-        "dequal": "^2.0.2"
-      }
-    },
-    "@scure/base": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz",
-      "integrity": "sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA=="
-    },
-    "@scure/bip32": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.3.0.tgz",
-      "integrity": "sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==",
-      "requires": {
-        "@noble/curves": "~1.0.0",
-        "@noble/hashes": "~1.3.0",
-        "@scure/base": "~1.1.0"
-      }
-    },
-    "@scure/bip39": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.2.0.tgz",
-      "integrity": "sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==",
-      "requires": {
-        "@noble/hashes": "~1.3.0",
-        "@scure/base": "~1.1.0"
-      }
-    },
-    "@sinonjs/commons": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
-      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
-      "dev": true,
-      "requires": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "@sinonjs/fake-timers": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
-      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
-      "dev": true,
-      "requires": {
-        "@sinonjs/commons": "^1.7.0"
-      }
-    },
-    "@tanstack/match-sorter-utils": {
-      "version": "8.8.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
-      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
-      "requires": {
-        "remove-accents": "0.4.2"
-      }
-    },
-    "@tanstack/query-core": {
-      "version": "4.29.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.7.tgz",
-      "integrity": "sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA=="
-    },
-    "@tanstack/react-query": {
-      "version": "4.29.7",
-      "requires": {
-        "@tanstack/query-core": "4.29.7",
-        "use-sync-external-store": "^1.2.0"
-      }
-    },
-    "@tanstack/react-query-devtools": {
-      "version": "4.29.7",
-      "requires": {
-        "@tanstack/match-sorter-utils": "^8.7.0",
-        "superjson": "^1.10.0",
-        "use-sync-external-store": "^1.2.0"
-      }
-    },
-    "@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "dev": true
-    },
-    "@types/babel__core": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
-      "integrity": "sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "@types/babel__generator": {
-      "version": "7.6.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
-      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__template": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
-      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__traverse": {
-      "version": "7.20.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
-      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "@types/body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
-      "dev": true,
-      "requires": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/bs58": {
-      "version": "4.0.1",
-      "dev": true,
-      "requires": {
-        "base-x": "^3.0.6"
-      },
-      "dependencies": {
-        "base-x": {
-          "version": "3.0.9",
-          "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
-          "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "^5.0.1"
-          }
-        }
-      }
-    },
-    "@types/bytebuffer": {
-      "version": "5.0.42",
-      "dev": true,
-      "requires": {
-        "@types/long": "*",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "16.4.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.1.tgz",
-          "integrity": "sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==",
-          "dev": true
-        }
-      }
-    },
-    "@types/connect": {
-      "version": "3.4.35",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
-      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/cookie-parser": {
-      "version": "1.4.2",
-      "dev": true,
-      "requires": {
-        "@types/express": "*"
-      }
-    },
-    "@types/diff-match-patch": {
-      "version": "1.0.32",
-      "dev": true
-    },
-    "@types/express": {
-      "version": "4.17.13",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
-      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
-      "dev": true,
-      "requires": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "@types/express-serve-static-core": {
-      "version": "4.17.36",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.36.tgz",
-      "integrity": "sha512-zbivROJ0ZqLAtMzgzIUC4oNqDG9iF0lSsAqpOD9kbs5xcIM3dTiyuHvBc7R8MtWBp3AAWGaovJa+wzWPjLYW7Q==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/geojson": {
-      "version": "7946.0.10",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
-      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
-      "dev": true
-    },
-    "@types/glob": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
-      "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
-      "dev": true,
-      "requires": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/graceful-fs": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
-      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/highcharts": {
-      "version": "5.0.44",
-      "resolved": "https://registry.npmjs.org/@types/highcharts/-/highcharts-5.0.44.tgz",
-      "integrity": "sha512-Rby1gj3GbK7zzsbK/g9T9hoybUfM+x0sBIXrOlTnj25TIvuTkLend3nKRLLz2upvLJNo36GntO6KmTFoVQXWZA==",
-      "dev": true,
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
-    "@types/history": {
-      "version": "4.7.9",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
-      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
-      "dev": true
-    },
-    "@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "requires": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
-    "@types/html-minifier-terser": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
-      "dev": true
-    },
-    "@types/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==",
-      "dev": true
-    },
-    "@types/invariant": {
-      "version": "2.2.34",
-      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
-      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
-    },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
-      "dev": true
-    },
-    "@types/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "@types/jest": {
-      "version": "26.0.24",
-      "dev": true,
-      "requires": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      }
-    },
-    "@types/js-cookie": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
-      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
-    },
-    "@types/js-md5": {
-      "version": "0.7.0",
-      "dev": true
-    },
-    "@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-      "dev": true
-    },
-    "@types/loadable__component": {
-      "version": "5.13.4",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/loadable__server": {
-      "version": "5.12.6",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/lodash": {
-      "version": "4.14.191",
-      "dev": true
-    },
-    "@types/long": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
-      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==",
-      "dev": true
-    },
-    "@types/mime": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
-      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
-      "dev": true
-    },
-    "@types/minimatch": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
-      "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
-      "dev": true
-    },
-    "@types/normalize-package-data": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
-      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
-      "dev": true
-    },
-    "@types/numeral": {
-      "version": "2.0.2",
-      "dev": true
-    },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
-    "@types/path-to-regexp": {
-      "version": "1.7.0",
-      "dev": true,
-      "requires": {
-        "path-to-regexp": "*"
-      },
-      "dependencies": {
-        "path-to-regexp": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
-          "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==",
-          "dev": true
-        }
-      }
-    },
-    "@types/prettier": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
-      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
-      "dev": true
-    },
-    "@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-    },
-    "@types/q": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
-      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
-      "dev": true
-    },
-    "@types/qrcode": {
-      "version": "1.4.2",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "16.4.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.1.tgz",
-          "integrity": "sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==",
-          "dev": true
-        }
-      }
-    },
-    "@types/qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
-      "dev": true
-    },
-    "@types/range-parser": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
-      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
-      "dev": true
-    },
-    "@types/react": {
-      "version": "16.14.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.11.tgz",
-      "integrity": "sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==",
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-beautiful-dnd": {
-      "version": "13.1.2",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-dom": {
-      "version": "16.9.14",
-      "dev": true,
-      "requires": {
-        "@types/react": "^16"
-      }
-    },
-    "@types/react-google-recaptcha": {
-      "version": "2.1.5",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-grid-layout": {
-      "version": "1.3.2",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-helmet": {
-      "version": "6.1.2",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-highcharts": {
-      "version": "16.0.3",
-      "dev": true,
-      "requires": {
-        "@types/highcharts": "^5.0.44",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-redux": {
-      "version": "7.1.18",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz",
-      "integrity": "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==",
-      "requires": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      },
-      "dependencies": {
-        "redux": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
-          "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "symbol-observable": "^1.2.0"
-          }
-        }
-      }
-    },
-    "@types/react-router": {
-      "version": "5.1.16",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
-      "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==",
-      "dev": true,
-      "requires": {
-        "@types/history": "*",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "4.3.5",
-      "dev": true,
-      "requires": {
-        "@types/history": "*",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
-    "@types/react-test-renderer": {
-      "version": "16.9.5",
-      "dev": true,
-      "requires": {
-        "@types/react": "^16"
-      }
-    },
-    "@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-virtualized": {
-      "version": "9.21.21",
-      "dev": true,
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/react": "^17"
-      },
-      "dependencies": {
-        "@types/react": {
-          "version": "17.0.65",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.65.tgz",
-          "integrity": "sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ==",
-          "dev": true,
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        }
-      }
-    },
-    "@types/redis": {
-      "version": "4.0.11",
-      "dev": true,
-      "requires": {
-        "redis": "*"
-      },
-      "dependencies": {
-        "redis": {
-          "version": "4.6.7",
-          "resolved": "https://registry.npmjs.org/redis/-/redis-4.6.7.tgz",
-          "integrity": "sha512-KrkuNJNpCwRm5vFJh0tteMxW8SaUzkm5fBH7eL5hd/D0fAkzvapxbfGPP/r+4JAXdQuX7nebsBkBqA2RHB7Usw==",
-          "dev": true,
-          "requires": {
-            "@redis/bloom": "1.2.0",
-            "@redis/client": "1.5.8",
-            "@redis/graph": "1.1.0",
-            "@redis/json": "1.0.4",
-            "@redis/search": "1.1.3",
-            "@redis/time-series": "1.0.4"
-          }
-        }
-      }
-    },
-    "@types/resize-observer-browser": {
-      "version": "0.1.7",
-      "dev": true
-    },
-    "@types/rss": {
-      "version": "0.0.29",
-      "dev": true
-    },
-    "@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
-    "@types/send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
-      "dev": true,
-      "requires": {
-        "@types/mime": "^1",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/serialize-javascript": {
-      "version": "1.5.0",
-      "dev": true
-    },
-    "@types/serve-static": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz",
-      "integrity": "sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw==",
-      "dev": true,
-      "requires": {
-        "@types/http-errors": "*",
-        "@types/mime": "*",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/sortablejs": {
-      "version": "1.15.0",
-      "dev": true
-    },
-    "@types/source-list-map": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
-      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
-    },
-    "@types/speakingurl": {
-      "version": "13.0.3",
-      "dev": true
-    },
-    "@types/stack-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
-      "dev": true
-    },
-    "@types/tapable": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
-      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
-    },
-    "@types/text-encoding-utf-8": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@types/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz",
-      "integrity": "sha512-AQ6zewa0ucLJvtUi5HsErbOFKAcQfRLt9zFLlUOvcXBy2G36a+ZDpCHSGdzJVUD8aNURtIjh9aSjCStNMRCcRQ==",
-      "dev": true
-    },
-    "@types/tus-js-client": {
-      "version": "2.1.0",
-      "requires": {
-        "tus-js-client": "*"
-      },
-      "dependencies": {
-        "js-base64": {
-          "version": "3.7.5",
-          "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
-          "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
-        },
-        "tus-js-client": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-3.1.0.tgz",
-          "integrity": "sha512-Hfpc8ho4C9Lhs/OflPUA/nHUHZJUrKD5upoPBq7dYJJ9DQhWocsjJU2RZYfN16Y5n19j9dFDszwCvVZ5sfcogw==",
-          "requires": {
-            "buffer-from": "^1.1.2",
-            "combine-errors": "^3.0.3",
-            "is-stream": "^2.0.0",
-            "js-base64": "^3.7.2",
-            "lodash.throttle": "^4.1.1",
-            "proper-lockfile": "^4.1.2",
-            "url-parse": "^1.5.7"
-          }
-        }
-      }
-    },
-    "@types/uglify-js": {
-      "version": "3.17.1",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz",
-      "integrity": "sha512-GkewRA4i5oXacU/n4MA9+bLgt5/L3F1mKrYvFGm7r2ouLXhRKjuWwo9XHNnbx6WF3vlGW21S3fCvgqxvxXXc5g==",
-      "dev": true,
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
-    "@types/uuid": {
-      "version": "9.0.0",
-      "dev": true
-    },
-    "@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
-    },
-    "@types/webpack": {
-      "version": "4.41.30",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
-      "integrity": "sha512-GUHyY+pfuQ6haAfzu4S14F+R5iGRwN6b2FRNJY7U0NilmFAqbsOfK6j1HwuLBAqwRIT+pVdNDJGJ6e8rpp0KHA==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/tapable": "^1",
-        "@types/uglify-js": "*",
-        "@types/webpack-sources": "*",
-        "anymatch": "^3.0.0",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/webpack-env": {
-      "version": "1.16.2",
-      "dev": true
-    },
-    "@types/webpack-sources": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
-      "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/source-list-map": "*",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        }
-      }
-    },
-    "@types/webscopeio__react-textarea-autocomplete": {
-      "version": "4.7.2",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/yargs": {
-      "version": "15.0.15",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
-      "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
-      "dev": true,
-      "requires": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "@types/yargs-parser": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
-      "dev": true
-    },
-    "@webassemblyjs/ast": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
-      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0"
-      }
-    },
-    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-api-error": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
-      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-buffer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
-      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-code-frame": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
-      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/wast-printer": "1.9.0"
-      }
-    },
-    "@webassemblyjs/helper-fsm": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
-      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-module-context": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
-      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0"
-      }
-    },
-    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
-      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
-      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0"
-      }
-    },
-    "@webassemblyjs/ieee754": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
-      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
-      "dev": true,
-      "requires": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "@webassemblyjs/leb128": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
-      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
-      "dev": true,
-      "requires": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/utf8": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
-      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
-      "dev": true
-    },
-    "@webassemblyjs/wasm-edit": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
-      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/helper-wasm-section": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0",
-        "@webassemblyjs/wasm-opt": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0",
-        "@webassemblyjs/wast-printer": "1.9.0"
-      }
-    },
-    "@webassemblyjs/wasm-gen": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
-      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/ieee754": "1.9.0",
-        "@webassemblyjs/leb128": "1.9.0",
-        "@webassemblyjs/utf8": "1.9.0"
-      }
-    },
-    "@webassemblyjs/wasm-opt": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
-      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0"
-      }
-    },
-    "@webassemblyjs/wasm-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
-      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-api-error": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/ieee754": "1.9.0",
-        "@webassemblyjs/leb128": "1.9.0",
-        "@webassemblyjs/utf8": "1.9.0"
-      }
-    },
-    "@webassemblyjs/wast-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
-      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
-        "@webassemblyjs/helper-api-error": "1.9.0",
-        "@webassemblyjs/helper-code-frame": "1.9.0",
-        "@webassemblyjs/helper-fsm": "1.9.0",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
-      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webscopeio/react-textarea-autocomplete": {
-      "version": "4.8.1",
-      "requires": {
-        "custom-event": "^1.0.1",
-        "textarea-caret": "3.0.2"
-      }
-    },
-    "@xobotyi/scrollbar-width": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
-      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
-    },
-    "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
-    },
-    "@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
-    },
-    "abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "dev": true
-    },
-    "abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "requires": {
-        "event-target-shim": "^5.0.0"
-      }
-    },
-    "accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
-      "requires": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "dependencies": {
-        "mime-db": {
-          "version": "1.52.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-          "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.35",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-          "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-          "dev": true,
-          "requires": {
-            "mime-db": "1.52.0"
-          }
-        }
-      }
-    },
-    "acorn": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-      "dev": true
-    },
-    "acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
-        },
-        "acorn-walk": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-          "dev": true
-        }
-      }
-    },
-    "acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-      "dev": true
-    },
-    "address": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
-      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
-      "dev": true
-    },
-    "adjust-sourcemap-loader": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
-      "integrity": "sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      }
-    },
-    "agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "requires": {
-        "debug": "4"
-      }
-    },
-    "aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
-      "requires": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      }
-    },
-    "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "ajv-errors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
-    },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
-    },
-    "alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==",
-      "dev": true
-    },
-    "amphtml-validator": {
-      "version": "1.0.35",
-      "resolved": "https://registry.npmjs.org/amphtml-validator/-/amphtml-validator-1.0.35.tgz",
-      "integrity": "sha512-C67JzC5EI6pE2C0sAo/zuCp8ARDl1Vtt6/s0nr+3NuXDNOdkjclZUkaNAd/ZnsEvvYodkXZ6T/uww890IQh9dQ==",
-      "requires": {
-        "colors": "1.4.0",
-        "commander": "7.2.0",
-        "promise": "8.1.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
-        }
-      }
-    },
-    "ansi-colors": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
-      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
-      "dev": true
-    },
-    "ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dev": true,
-      "requires": {
-        "type-fest": "^0.21.3"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.21.3",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-          "dev": true
-        }
-      }
-    },
-    "ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha512-JoAxEa1DfP9m2xfB/y2r/aKcwXNlltr4+0QSBC4TrLfcxyvepX2Pv0t/xpgGV5bGsDzCYV8SzjWgyCW0T9yYbA==",
-      "dev": true
-    },
-    "ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true
-    },
-    "ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "requires": {
-        "color-convert": "^2.0.1"
-      },
-      "dependencies": {
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        }
-      }
-    },
-    "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "requires": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      }
-    },
-    "aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-      "dev": true
-    },
-    "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "arity-n": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
-      "integrity": "sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==",
-      "dev": true
-    },
-    "arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
-      "dev": true
-    },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
-    },
-    "arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
-      "dev": true
-    },
-    "array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
-      }
-    },
-    "array-flatten": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-      "dev": true
-    },
-    "array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true
-    },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "dev": true
-    },
-    "array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
-      "dev": true
-    },
-    "array.prototype.reduce": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
-      "integrity": "sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.7"
-      }
-    },
-    "arraybuffer.prototype.slice": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
-      "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
-      "dev": true,
-      "requires": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
-        "is-shared-array-buffer": "^1.0.2"
-      }
-    },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
-    "asn1.js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "assert": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1",
-        "util": "0.10.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==",
-          "dev": true
-        },
-        "util": {
-          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-          "integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.1"
-          }
-        }
-      }
-    },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
-    },
-    "assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
-      "dev": true
-    },
-    "astral-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
-      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true
-    },
-    "async": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.14"
-      }
-    },
-    "async-each": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.6.tgz",
-      "integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==",
-      "dev": true
-    },
-    "async-limiter": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-      "dev": true
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
-    },
-    "at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "dev": true
-    },
-    "atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
-    },
-    "autolinker": {
-      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-0.28.1.tgz",
-      "integrity": "sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==",
-      "requires": {
-        "gulp-header": "^1.7.1"
-      }
-    },
-    "autoprefixer": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
-      "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001243",
-        "colorette": "^1.2.2",
-        "fraction.js": "^4.1.1",
-        "normalize-range": "^0.1.2",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true
-    },
-    "axios": {
-      "version": "0.21.2",
-      "requires": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
-    "axios-cookiejar-support": {
-      "version": "4.0.6",
-      "requires": {
-        "http-cookie-agent": "^5.0.2"
-      }
-    },
-    "babel-code-frame": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
-      "integrity": "sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==",
-      "dev": true,
-      "requires": {
-        "chalk": "^1.1.3",
-        "esutils": "^2.0.2",
-        "js-tokens": "^3.0.2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-          "dev": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "js-tokens": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-          "integrity": "sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-          "dev": true
-        }
-      }
-    },
-    "babel-jest": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz",
-      "integrity": "sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==",
-      "dev": true,
-      "requires": {
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/babel__core": "^7.1.7",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^26.6.2",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "slash": "^3.0.0"
-      }
-    },
-    "babel-loader": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
-      "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "^3.3.1",
-        "loader-utils": "^1.4.0",
-        "make-dir": "^3.1.0",
-        "schema-utils": "^2.6.5"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
-      "dev": true,
-      "requires": {
-        "object.assign": "^4.1.0"
-      }
-    },
-    "babel-plugin-istanbul": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^5.0.4",
-        "test-exclude": "^6.0.0"
-      },
-      "dependencies": {
-        "istanbul-lib-instrument": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-          "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-          "dev": true,
-          "requires": {
-            "@babel/core": "^7.12.3",
-            "@babel/parser": "^7.14.7",
-            "@istanbuljs/schema": "^0.1.2",
-            "istanbul-lib-coverage": "^3.2.0",
-            "semver": "^6.3.0"
-          }
-        }
-      }
-    },
-    "babel-plugin-jest-hoist": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz",
-      "integrity": "sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.0.0",
-        "@types/babel__traverse": "^7.0.6"
-      }
-    },
-    "babel-plugin-polyfill-corejs2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
-      "integrity": "sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.17.7",
-        "@babel/helper-define-polyfill-provider": "^0.3.3",
-        "semver": "^6.1.1"
-      }
-    },
-    "babel-plugin-polyfill-corejs3": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
-      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.2",
-        "core-js-compat": "^3.21.0"
-      }
-    },
-    "babel-plugin-polyfill-regenerator": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
-      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
-      }
-    },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==",
-      "dev": true
-    },
-    "babel-plugin-transform-define": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-define/-/babel-plugin-transform-define-2.0.0.tgz",
-      "integrity": "sha512-0dv5RNRUlUKxGYIIErl01lpvi8b7W2R04Qcl1mCj70ahwZcgiklfXnFlh4FGnRh6aayCfSZKdhiMryVzcq5Dmg==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.11",
-        "traverse": "0.6.6"
-      }
-    },
-    "babel-plugin-transform-react-remove-prop-types": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
-      "dev": true
-    },
-    "babel-preset-current-node-syntax": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.8.3",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3"
-      }
-    },
-    "babel-preset-jest": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz",
-      "integrity": "sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==",
-      "dev": true,
-      "requires": {
-        "babel-plugin-jest-hoist": "^26.6.2",
-        "babel-preset-current-node-syntax": "^1.0.0"
-      }
-    },
-    "babel-preset-razzle": {
-      "version": "4.2.16",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.11.1",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-        "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.9.5",
-        "@babel/preset-react": "^7.9.4",
-        "@babel/preset-typescript": "^7.9.0",
-        "@babel/runtime": "^7.9.2",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-        "chalk": "^4.1.0"
-      }
-    },
-    "balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
-      "requires": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        }
-      }
-    },
-    "base-x": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
-      "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
-    },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
-      "dev": true
-    },
-    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
-    },
-    "bigi": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/bigi/-/bigi-1.4.2.tgz",
-      "integrity": "sha512-ddkU+dFIuEIW8lE7ZwdIAf2UPoM90eaprg5m3YXAVVTmKlqV/9BX4A2M8BOK2yOq6/VgZFVhK6QAxJebhlbhzw=="
-    },
-    "binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
-    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "bip66": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/bip66/-/bip66-1.1.5.tgz",
-      "integrity": "sha512-nemMHz95EmS38a26XbbdxIYj5csHd3RMP3H5bwQknX0WYHF01qhpufP42mLOwVICuH2JmhIhXiWs89MfUGL7Xw==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
-    },
-    "bn.js": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
-    },
-    "body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.7",
-        "raw-body": "2.4.3",
-        "type-is": "~1.6.18"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.9.7",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-          "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
-          "dev": true
-        }
-      }
-    },
-    "bonjour": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==",
-      "dev": true,
-      "requires": {
-        "array-flatten": "^2.1.0",
-        "deep-equal": "^1.0.1",
-        "dns-equal": "^1.0.0",
-        "dns-txt": "^2.0.2",
-        "multicast-dns": "^6.0.1",
-        "multicast-dns-service-types": "^1.1.0"
-      }
-    },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "requires": {
-        "fill-range": "^7.0.1"
-      }
-    },
-    "brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
-    },
-    "browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
-      "dev": true
-    },
-    "browserify-aes": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
-      "requires": {
-        "buffer-xor": "^1.0.3",
-        "cipher-base": "^1.0.0",
-        "create-hash": "^1.1.0",
-        "evp_bytestokey": "^1.0.3",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "browserify-cipher": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
-      "dev": true,
-      "requires": {
-        "browserify-aes": "^1.0.4",
-        "browserify-des": "^1.0.0",
-        "evp_bytestokey": "^1.0.0"
-      }
-    },
-    "browserify-des": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
-      "dev": true,
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "des.js": "^1.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "browserify-rsa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^5.0.0",
-        "randombytes": "^2.0.1"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
-          "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
-          "dev": true
-        }
-      }
-    },
-    "browserify-sign": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
-      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^5.1.1",
-        "browserify-rsa": "^4.0.1",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.3",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.5",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
-          "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "browserify-zlib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-      "dev": true,
-      "requires": {
-        "pako": "~1.0.5"
-      }
-    },
-    "browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
-        "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
-      }
-    },
-    "bs-logger": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
-      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
-      "dev": true,
-      "requires": {
-        "fast-json-stable-stringify": "2.x"
-      }
-    },
-    "bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "dev": true,
-      "requires": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "dev": true,
-      "requires": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
-    "buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "buffer-indexof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
-      "dev": true
-    },
-    "buffer-xor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
-    },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==",
-      "dev": true
-    },
-    "builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
-      "dev": true
-    },
-    "bytebuffer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
-      "integrity": "sha512-IuzSdmADppkZ6DlpycMkm8l9zeEq16fWtLvunEwFiYciR/BHo4E8/xs5piFquG+Za8OWmMqHF8zuRviz2LHvRQ==",
-      "requires": {
-        "long": "~3"
-      }
-    },
-    "bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
-      "dev": true
-    },
-    "cacache": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
-      "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
-      "dev": true,
-      "requires": {
-        "@npmcli/fs": "^1.0.0",
-        "@npmcli/move-file": "^1.0.1",
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "glob": "^7.1.4",
-        "infer-owner": "^1.0.4",
-        "lru-cache": "^6.0.0",
-        "minipass": "^3.1.1",
-        "minipass-collect": "^1.0.2",
-        "minipass-flush": "^1.0.5",
-        "minipass-pipeline": "^1.2.2",
-        "mkdirp": "^1.0.3",
-        "p-map": "^4.0.0",
-        "promise-inflight": "^1.0.1",
-        "rimraf": "^3.0.2",
-        "ssri": "^8.0.1",
-        "tar": "^6.0.2",
-        "unique-filename": "^1.1.1"
-      },
-      "dependencies": {
-        "chownr": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
-    "cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
-      "requires": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
-      }
-    },
-    "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      }
-    },
-    "call-me-maybe": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
-      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
-      "dev": true
-    },
-    "caller-callsite": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==",
-      "dev": true,
-      "requires": {
-        "callsites": "^2.0.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==",
-          "dev": true
-        }
-      }
-    },
-    "caller-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-      "integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==",
-      "dev": true,
-      "requires": {
-        "caller-callsite": "^2.0.0"
-      }
-    },
-    "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
-    },
-    "camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
-      "requires": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-    },
-    "caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30001522",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz",
-      "integrity": "sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg=="
-    },
-    "capture-exit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
-      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
-      "dev": true,
-      "requires": {
-        "rsvp": "^4.8.4"
-      }
-    },
-    "chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      }
-    },
-    "char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "dev": true
-    },
-    "chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
-      "dev": true
-    },
-    "cheerio": {
-      "version": "1.0.0-rc.11",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.11.tgz",
-      "integrity": "sha512-bQwNaDIBKID5ts/DsdhxrjqFXYfLw4ste+wMKqWA8DyKcS4qwsPP4Bk8ZNaTJjvpiX/qW3BT4sU7d6Bh5i+dag==",
-      "requires": {
-        "cheerio-select": "^2.1.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "htmlparser2": "^8.0.1",
-        "parse5": "^7.0.0",
-        "parse5-htmlparser2-tree-adapter": "^7.0.0",
-        "tslib": "^2.4.0"
-      },
-      "dependencies": {
-        "dom-serializer": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-          "requires": {
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.2",
-            "entities": "^4.2.0"
-          }
-        },
-        "domhandler": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-          "requires": {
-            "domelementtype": "^2.3.0"
-          }
-        },
-        "domutils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-          "requires": {
-            "dom-serializer": "^2.0.0",
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.3"
-          }
-        },
-        "entities": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
-        },
-        "htmlparser2": {
-          "version": "8.0.2",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-          "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-          "requires": {
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.3",
-            "domutils": "^3.0.1",
-            "entities": "^4.4.0"
-          }
-        }
-      }
-    },
-    "cheerio-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
-      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-select": "^5.1.0",
-        "css-what": "^6.1.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1"
-      },
-      "dependencies": {
-        "css-select": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-          "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-          "requires": {
-            "boolbase": "^1.0.0",
-            "css-what": "^6.1.0",
-            "domhandler": "^5.0.2",
-            "domutils": "^3.0.1",
-            "nth-check": "^2.0.1"
-          }
-        },
-        "dom-serializer": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-          "requires": {
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.2",
-            "entities": "^4.2.0"
-          }
-        },
-        "domhandler": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-          "requires": {
-            "domelementtype": "^2.3.0"
-          }
-        },
-        "domutils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-          "requires": {
-            "dom-serializer": "^2.0.0",
-            "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.3"
-          }
-        },
-        "entities": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
-        }
-      }
-    },
-    "chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-      "requires": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      }
-    },
-    "chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "dev": true
-    },
-    "chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true
-    },
-    "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
-    "cipher-base": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "cjs-module-lexer": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
-      "integrity": "sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==",
-      "dev": true
-    },
-    "class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "dev": true,
-      "requires": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
-    "clean-css": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.1.3.tgz",
-      "integrity": "sha512-qGXzUCDpLwAlPx0kYeU4QXjzQIcIYZbJjD4FNm7NnSjoP0hYMVZhHOpUYJ6AwfkMX2cceLRq54MeCgHy/va1cA==",
-      "dev": true,
-      "requires": {
-        "source-map": "~0.6.0"
-      }
-    },
-    "clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true
-    },
-    "cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
-      "requires": {
-        "restore-cursor": "^3.1.0"
-      }
-    },
-    "cli-truncate": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz",
-      "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==",
-      "dev": true,
-      "requires": {
-        "slice-ansi": "^5.0.0",
-        "string-width": "^5.0.0"
-      },
-      "dependencies": {
-        "emoji-regex": {
-          "version": "9.2.2",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-          "dev": true,
-          "requires": {
-            "eastasianwidth": "^0.2.0",
-            "emoji-regex": "^9.2.2",
-            "strip-ansi": "^7.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^6.0.1"
-          }
-        }
-      }
-    },
-    "cli-width": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
-      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
-      "dev": true
-    },
-    "cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
-    "clone": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
-    },
-    "clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
-    },
-    "cluster-key-slot": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
-      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
-      "dev": true
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
-      "dev": true
-    },
-    "coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "dev": true,
-      "requires": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "collect-v8-coverage": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
-      "dev": true
-    },
-    "collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
-      "dev": true,
-      "requires": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
-      }
-    },
-    "color": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^1.9.3",
-        "color-string": "^1.6.0"
-      }
-    },
-    "color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "requires": {
-        "color-name": "1.1.3"
-      },
-      "dependencies": {
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-          "dev": true
-        }
-      }
-    },
-    "color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
-    "colorette": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
-      "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
-    },
-    "colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
-    },
-    "combine-errors": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
-      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
-      "requires": {
-        "custom-error-instance": "2.1.1",
-        "lodash.uniqby": "4.5.0"
-      }
-    },
-    "combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
-    "commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
-    "commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "dev": true
-    },
-    "component-emitter": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
-    },
-    "compose-function": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
-      "integrity": "sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==",
-      "dev": true,
-      "requires": {
-        "arity-n": "^1.0.4"
-      }
-    },
-    "compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
-      "requires": {
-        "mime-db": ">= 1.43.0 < 2"
-      }
-    },
-    "compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
-    "concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "concat-with-sourcemaps": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
-      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
-    "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-      "dev": true
-    },
-    "connected-react-router": {
-      "version": "6.9.1",
-      "requires": {
-        "immutable": "^3.8.1 || ^4.0.0-rc.1",
-        "lodash.isequalwith": "^4.4.0",
-        "prop-types": "^15.7.2",
-        "seamless-immutable": "^7.1.3"
-      }
-    },
-    "consola": {
-      "version": "2.15.3",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
-      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
-      "dev": true
-    },
-    "console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
-      "dev": true
-    },
-    "constants-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
-      "dev": true
-    },
-    "content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.2.1"
-      }
-    },
-    "content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true
-    },
-    "convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
-    },
-    "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-    },
-    "cookie-parser": {
-      "version": "1.4.5",
-      "requires": {
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6"
-      }
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "copy-anything": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "requires": {
-        "is-what": "^4.1.8"
-      }
-    },
-    "copy-concurrently": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1",
-        "fs-write-stream-atomic": "^1.0.8",
-        "iferr": "^0.1.5",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.0"
-      }
-    },
-    "copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
-      "dev": true
-    },
-    "copy-to-clipboard": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
-      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
-      "requires": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
-    "copy-webpack-plugin": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz",
-      "integrity": "sha512-MXyPCjdPVx5iiWyl40Va3JGh27bKzOTNY3NjUTrosD2q7dR/cLD0013uqJ3BpFbUjyONINjb6qI7nDIJujrMbA==",
-      "dev": true,
-      "requires": {
-        "cacache": "^15.0.5",
-        "fast-glob": "^3.2.4",
-        "find-cache-dir": "^3.3.1",
-        "glob-parent": "^5.1.1",
-        "globby": "^11.0.1",
-        "loader-utils": "^2.0.0",
-        "normalize-path": "^3.0.0",
-        "p-limit": "^3.0.2",
-        "schema-utils": "^3.0.0",
-        "serialize-javascript": "^5.0.1",
-        "webpack-sources": "^1.4.3"
-      },
-      "dependencies": {
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
-          "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        }
-      }
-    },
-    "core-js": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.2.tgz",
-      "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q=="
-    },
-    "core-js-compat": {
-      "version": "3.32.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.1.tgz",
-      "integrity": "sha512-GSvKDv4wE0bPnQtjklV101juQ85g6H3rm5PDP20mqlS5j0kXF3pP97YvAu5hl+uFHqMictp3b2VxOHljWMAtuA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.21.10"
-      },
-      "dependencies": {
-        "browserslist": {
-          "version": "4.21.10",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
-          "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001517",
-            "electron-to-chromium": "^1.4.477",
-            "node-releases": "^2.0.13",
-            "update-browserslist-db": "^1.0.11"
-          }
-        },
-        "electron-to-chromium": {
-          "version": "1.4.499",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz",
-          "integrity": "sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "2.0.13",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-          "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
-          "dev": true
-        }
-      }
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
-    },
-    "cosmiconfig": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
-      "dev": true,
-      "requires": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      }
-    },
-    "create-ecdh": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.5.3"
-      }
-    },
-    "create-hash": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "inherits": "^2.0.1",
-        "md5.js": "^1.3.4",
-        "ripemd160": "^2.0.1",
-        "sha.js": "^2.4.0"
-      }
-    },
-    "create-hmac": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
-      "requires": {
-        "cipher-base": "^1.0.3",
-        "create-hash": "^1.1.0",
-        "inherits": "^2.0.1",
-        "ripemd160": "^2.0.0",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      }
-    },
-    "cross-fetch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.2.tgz",
-      "integrity": "sha512-+JhD65rDNqLbGmB3Gzs3HrEKC0aQnD+XA3SY6RjgkF88jV2q5cTc5+CwxlS3sdmLk98gpPt5CF9XRnPdlxZe6w==",
-      "requires": {
-        "node-fetch": "2.6.1"
-      },
-      "dependencies": {
-        "node-fetch": {
-          "version": "2.6.1",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
-        }
-      }
-    },
-    "cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "requires": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      }
-    },
-    "crypto-browserify": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
-      "dev": true,
-      "requires": {
-        "browserify-cipher": "^1.0.0",
-        "browserify-sign": "^4.0.0",
-        "create-ecdh": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.0",
-        "diffie-hellman": "^5.0.0",
-        "inherits": "^2.0.1",
-        "pbkdf2": "^3.0.3",
-        "public-encrypt": "^4.0.0",
-        "randombytes": "^2.0.0",
-        "randomfill": "^1.0.3"
-      }
-    },
-    "css": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
-      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.3",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.5.2",
-        "urix": "^0.1.0"
-      }
-    },
-    "css-box-model": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
-      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
-      "requires": {
-        "tiny-invariant": "^1.0.6"
-      }
-    },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==",
-      "dev": true
-    },
-    "css-declaration-sorter": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
-      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.1",
-        "timsort": "^0.3.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "css-in-js-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
-      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.3"
-      }
-    },
-    "css-loader": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-      "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.1.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.15",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.5"
-      },
-      "dependencies": {
-        "postcss": {
-          "version": "8.4.28",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-          "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
-          "dev": true,
-          "requires": {
-            "nanoid": "^3.3.6",
-            "picocolors": "^1.0.0",
-            "source-map-js": "^1.0.2"
-          }
-        },
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "css-minimizer-webpack-plugin": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.3.0.tgz",
-      "integrity": "sha512-jFa0Siplmfef4ndKglpVaduY47oHQwioAOEGK0f0vAX0s+vc+SmP6cCMoc+8Adau5600RnOEld5VVdC8CQau7w==",
-      "dev": true,
-      "requires": {
-        "cacache": "^15.0.5",
-        "cssnano": "^4.1.10",
-        "find-cache-dir": "^3.3.1",
-        "jest-worker": "^26.3.0",
-        "p-limit": "^3.0.2",
-        "schema-utils": "^3.0.0",
-        "serialize-javascript": "^5.0.1",
-        "source-map": "^0.6.1",
-        "webpack-sources": "^1.4.3"
-      },
-      "dependencies": {
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
-          "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        }
-      }
-    },
-    "css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      },
-      "dependencies": {
-        "domhandler": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-          "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-          "requires": {
-            "domelementtype": "^2.2.0"
-          }
-        }
-      }
-    },
-    "css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
-      "dev": true
-    },
-    "css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "requires": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      }
-    },
-    "css-what": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
-    },
-    "cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
-    },
-    "cssfilter": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
-    },
-    "cssnano": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
-      "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^5.0.0",
-        "cssnano-preset-default": "^4.0.8",
-        "is-resolvable": "^1.0.0",
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-          "dev": true,
-          "requires": {
-            "import-fresh": "^2.0.0",
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.13.1",
-            "parse-json": "^4.0.0"
-          }
-        },
-        "import-fresh": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-          "integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
-          "dev": true,
-          "requires": {
-            "caller-path": "^2.0.0",
-            "resolve-from": "^3.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
-          "dev": true
-        }
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
-      "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
-      "dev": true,
-      "requires": {
-        "css-declaration-sorter": "^4.0.1",
-        "cssnano-util-raw-cache": "^4.0.1",
-        "postcss": "^7.0.0",
-        "postcss-calc": "^7.0.1",
-        "postcss-colormin": "^4.0.3",
-        "postcss-convert-values": "^4.0.1",
-        "postcss-discard-comments": "^4.0.2",
-        "postcss-discard-duplicates": "^4.0.2",
-        "postcss-discard-empty": "^4.0.1",
-        "postcss-discard-overridden": "^4.0.1",
-        "postcss-merge-longhand": "^4.0.11",
-        "postcss-merge-rules": "^4.0.3",
-        "postcss-minify-font-values": "^4.0.2",
-        "postcss-minify-gradients": "^4.0.2",
-        "postcss-minify-params": "^4.0.2",
-        "postcss-minify-selectors": "^4.0.2",
-        "postcss-normalize-charset": "^4.0.1",
-        "postcss-normalize-display-values": "^4.0.2",
-        "postcss-normalize-positions": "^4.0.2",
-        "postcss-normalize-repeat-style": "^4.0.2",
-        "postcss-normalize-string": "^4.0.2",
-        "postcss-normalize-timing-functions": "^4.0.2",
-        "postcss-normalize-unicode": "^4.0.1",
-        "postcss-normalize-url": "^4.0.1",
-        "postcss-normalize-whitespace": "^4.0.2",
-        "postcss-ordered-values": "^4.1.2",
-        "postcss-reduce-initial": "^4.0.3",
-        "postcss-reduce-transforms": "^4.0.2",
-        "postcss-svgo": "^4.0.3",
-        "postcss-unique-selectors": "^4.0.1"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "cssnano-preset-simple": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-2.0.0.tgz",
-      "integrity": "sha512-HkufSLkaBJbKBFx/7aj5HmCK9Ni/JedRQm0mT2qBzMG/dEuJOLnMt2lK6K1rwOOyV4j9aSY+knbW9WoS7BYpzg==",
-      "requires": {
-        "caniuse-lite": "^1.0.30001202"
-      }
-    },
-    "cssnano-simple": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-2.0.0.tgz",
-      "integrity": "sha512-0G3TXaFxlh/szPEG/o3VcmCwl0N3E60XNb9YZZijew5eIs6fLjJuOPxQd9yEBaX2p/YfJtt49i4vYi38iH6/6w==",
-      "requires": {
-        "cssnano-preset-simple": "^2.0.0"
-      }
-    },
-    "cssnano-util-get-arguments": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
-      "integrity": "sha512-6RIcwmV3/cBMG8Aj5gucQRsJb4vv4I4rn6YjPbVWd5+Pn/fuG+YseGvXGk00XLkoZkaj31QOD7vMUpNPC4FIuw==",
-      "dev": true
-    },
-    "cssnano-util-get-match": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
-      "integrity": "sha512-JPMZ1TSMRUPVIqEalIBNoBtAYbi8okvcFns4O0YIhcdGebeYZK7dMyHJiQ6GqNBA9kE0Hym4Aqym5rPdsV/4Cw==",
-      "dev": true
-    },
-    "cssnano-util-raw-cache": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
-      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "cssnano-util-same-parent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
-      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
-      "dev": true
-    },
-    "csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dev": true,
-      "requires": {
-        "css-tree": "^1.1.2"
-      }
-    },
-    "cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
-      "dev": true
-    },
-    "cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dev": true,
-      "requires": {
-        "cssom": "~0.3.6"
-      },
-      "dependencies": {
-        "cssom": {
-          "version": "0.3.8",
-          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-          "dev": true
-        }
-      }
-    },
-    "csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
-    "currency-symbol-map": {
-      "version": "4.0.4"
-    },
-    "custom-error-instance": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
-      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
-    },
-    "custom-event": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
-    },
-    "cyclist": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
-      "integrity": "sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==",
-      "dev": true
-    },
-    "d": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "dev": true,
-      "requires": {
-        "es5-ext": "^0.10.50",
-        "type": "^1.0.1"
-      }
-    },
-    "data-urls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-      "dev": true,
-      "requires": {
-        "abab": "^2.0.3",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.0.0"
-      }
-    },
-    "debounce": {
-      "version": "1.2.1"
-    },
-    "debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "requires": {
-        "ms": "2.1.2"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        }
-      }
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
-    },
-    "decimal.js": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true
-    },
-    "decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
-    },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
-    "deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true
-    },
-    "default-gateway": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
-      "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "ip-regex": "^2.1.0"
-      }
-    },
-    "define-properties": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
-      "requires": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
-      "requires": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "dependencies": {
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        }
-      }
-    },
-    "del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "dev": true,
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-          "dev": true,
-          "requires": {
-            "array-uniq": "^1.0.1"
-          }
-        },
-        "globby": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-          "dev": true,
-          "requires": {
-            "array-union": "^1.0.1",
-            "glob": "^7.0.3",
-            "object-assign": "^4.0.1",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-              "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-              "dev": true
-            }
-          }
-        },
-        "p-map": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-          "dev": true
-        }
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-      "dev": true
-    },
-    "dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
-    },
-    "des.js": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
-      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg==",
-      "dev": true
-    },
-    "detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-      "dev": true
-    },
-    "detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "dev": true
-    },
-    "detect-port-alt": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-      "dev": true,
-      "requires": {
-        "address": "^1.0.1",
-        "debug": "^2.6.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        }
-      }
-    },
-    "diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true
-    },
-    "diff-match-patch": {
-      "version": "1.0.5"
-    },
-    "diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true
-    },
-    "diffie-hellman": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      }
-    },
-    "dijkstrajs": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
-      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
-    },
-    "dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "requires": {
-        "path-type": "^4.0.0"
-      }
-    },
-    "dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
-      "dev": true
-    },
-    "dns-packet": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
-      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
-      "dev": true,
-      "requires": {
-        "ip": "^1.1.0",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "dns-txt": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==",
-      "dev": true,
-      "requires": {
-        "buffer-indexof": "^1.0.0"
-      }
-    },
-    "dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-      "dev": true,
-      "requires": {
-        "utila": "~0.4"
-      }
-    },
-    "dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      }
-    },
-    "domain-browser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
-      "dev": true
-    },
-    "domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
-    },
-    "domexception": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "dev": true,
-      "requires": {
-        "webidl-conversions": "^5.0.0"
-      },
-      "dependencies": {
-        "webidl-conversions": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-          "dev": true
-        }
-      }
-    },
-    "domhandler": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
-      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
-      "requires": {
-        "domelementtype": "^2.2.0"
-      }
-    },
-    "domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "requires": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      }
-    },
-    "dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "dot-prop": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
-      "dev": true,
-      "requires": {
-        "is-obj": "^2.0.0"
-      }
-    },
-    "dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true
-    },
-    "dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-      "dev": true
-    },
-    "drbg.js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz",
-      "integrity": "sha512-F4wZ06PvqxYLFEZKkFxTDcns9oFNk34hvmJSEwdzsxVQ8YI5YaxtACgQatkYgv2VI2CFkUd2Y+xosPQnHv809g==",
-      "requires": {
-        "browserify-aes": "^1.0.6",
-        "create-hash": "^1.1.2",
-        "create-hmac": "^1.1.4"
-      }
-    },
-    "duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
-    },
-    "duplexify": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
-    "ecurve": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/ecurve/-/ecurve-1.0.6.tgz",
-      "integrity": "sha512-/BzEjNfiSuB7jIWKcS/z8FK9jNjmEWvUV2YZ4RLSmcDtP7Lq0m6FvDuSnJpBlDpGRpfRQeTLGLBI8H+kEv0r+w==",
-      "requires": {
-        "bigi": "^1.1.0",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
-    },
-    "electron-to-chromium": {
-      "version": "1.3.785",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.785.tgz",
-      "integrity": "sha512-WmCgAeURsMFiyoJ646eUaJQ7GNfvMRLXo+GamUyKVNEM4MqTAsXyC0f38JEB4N3BtbD0tlAKozGP5E2T9K3YGg==",
-      "dev": true
-    },
-    "elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
-      "requires": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "emittery": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
-      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
-      "dev": true
-    },
-    "emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
-    },
-    "encode-utf8": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
-      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true
-    },
-    "end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
-    "enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.5.0",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "memory-fs": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-          "dev": true,
-          "requires": {
-            "errno": "^0.1.3",
-            "readable-stream": "^2.0.1"
-          }
-        }
-      }
-    },
-    "entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
-    },
-    "errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "requires": {
-        "prr": "~1.0.1"
-      }
-    },
-    "error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "error-stack-parser": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
-      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
-      "requires": {
-        "stackframe": "^1.1.1"
-      }
-    },
-    "es-abstract": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
-      "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
-      "dev": true,
-      "requires": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.1",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.2.1",
-        "get-symbol-description": "^1.0.0",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
-        "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.10",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.0",
-        "safe-array-concat": "^1.0.0",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.7",
-        "string.prototype.trimend": "^1.0.6",
-        "string.prototype.trimstart": "^1.0.6",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.10"
-      },
-      "dependencies": {
-        "is-regex": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-          }
-        },
-        "object-inspect": {
-          "version": "1.12.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-          "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-          "dev": true
-        }
-      }
-    },
-    "es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-      "dev": true
-    },
-    "es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
-      "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      }
-    },
-    "es5-ext": {
-      "version": "0.10.62",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
-      "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
-      "dev": true,
-      "requires": {
-        "es6-iterator": "^2.0.3",
-        "es6-symbol": "^3.1.3",
-        "next-tick": "^1.1.0"
-      },
-      "dependencies": {
-        "next-tick": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-          "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-          "dev": true
-        }
-      }
-    },
-    "es6-iterator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "dev": true,
-      "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.35",
-        "es6-symbol": "^3.1.1"
-      }
-    },
-    "es6-symbol": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
-      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "dev": true,
-      "requires": {
-        "d": "^1.0.1",
-        "ext": "^1.1.2"
-      }
-    },
-    "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true
-    },
-    "escodegen": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "dev": true,
-      "requires": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2",
-        "source-map": "~0.6.1"
-      }
-    },
-    "eslint-scope": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-      "dev": true,
-      "requires": {
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
-      },
-      "dependencies": {
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-          "dev": true
-        }
-      }
-    },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
-    },
-    "esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "requires": {
-        "estraverse": "^5.2.0"
-      }
-    },
-    "estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-      "dev": true
-    },
-    "esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true
-    },
-    "event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
-      "dev": true,
-      "requires": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      }
-    },
-    "event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-    },
-    "eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
-    },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true
-    },
-    "eventsource": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.2.tgz",
-      "integrity": "sha512-xAH3zWhgO2/3KIniEKYPr8plNSzlGINOUqYj0m0u7AB81iRw8b/3E73W6AuU+6klLbaSFmZnaETQ2lXPfAydrA==",
-      "dev": true
-    },
-    "evp_bytestokey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
-      "requires": {
-        "md5.js": "^1.3.4",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "exec-sh": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.6.tgz",
-      "integrity": "sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==",
-      "dev": true
-    },
-    "execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-          "dev": true,
-          "requires": {
-            "nice-try": "^1.0.4",
-            "path-key": "^2.0.1",
-            "semver": "^5.5.0",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "is-stream": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-          "dev": true
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-          "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^1.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-          "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
-          "dev": true
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
-      "dev": true,
-      "requires": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        }
-      }
-    },
-    "expect": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
-      "integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "ansi-styles": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0"
-      }
-    },
-    "ext": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
-      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "dev": true,
-      "requires": {
-        "type": "^2.7.2"
-      },
-      "dependencies": {
-        "type": {
-          "version": "2.7.2",
-          "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
-          "dev": true
-        }
-      }
-    },
-    "extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
-      "requires": {
-        "is-extendable": "^0.1.0"
-      }
-    },
-    "external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "dev": true,
-      "requires": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
-      }
-    },
-    "extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "dev": true,
-      "requires": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        }
-      }
-    },
-    "extsprintf": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
-      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA=="
-    },
-    "fancy-canvas": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-0.2.2.tgz",
-      "integrity": "sha512-50qi8xA0QkHbjmb8h7XQ6k2fvD7y/yMfiUw9YTarJ7rWrq6o5/3CCXPouYk+XSLASvvxtjyiQLRBFt3qkE3oyA=="
-    },
-    "fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-    },
-    "fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "dependencies": {
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "fast-loops": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
-      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
-    },
-    "fast-shallow-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
-      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
-    },
-    "fastest-stable-stringify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
-      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
-    },
-    "fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "dev": true,
-      "requires": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "faye-websocket": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-      "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
-      "dev": true,
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
-    "fb-watchman": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
-      "dev": true,
-      "requires": {
-        "bser": "2.1.1"
-      }
-    },
-    "figgy-pudding": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
-      "dev": true
-    },
-    "figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.5"
-      }
-    },
-    "file-loader": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
-      "integrity": "sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.2.3",
-        "schema-utils": "^2.5.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-    },
-    "filesize": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "requires": {
-        "to-regex-range": "^5.0.1"
-      }
-    },
-    "filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
-    },
-    "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        }
-      }
-    },
-    "find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "dependencies": {
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        }
-      }
-    },
-    "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "requires": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      }
-    },
-    "flush-write-stream": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.3.6"
-      }
-    },
-    "follow-redirects": {
-      "version": "1.14.8",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
-      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
-    },
-    "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
-      "requires": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
-      "dev": true
-    },
-    "form-data": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-      "dev": true,
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      }
-    },
-    "forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true
-    },
-    "fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
-      "dev": true
-    },
-    "fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
-      "dev": true,
-      "requires": {
-        "map-cache": "^0.2.2"
-      }
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "dev": true
-    },
-    "from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
-      "dev": true
-    },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
-      "requires": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "fs-write-stream-atomic": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "iferr": "^0.1.5",
-        "imurmurhash": "^0.1.4",
-        "readable-stream": "1 || 2"
-      }
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
-    "fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "optional": true
-    },
-    "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "function.prototype.name": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0",
-        "functions-have-names": "^1.2.2"
-      }
-    },
-    "functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true
-    },
-    "generic-pool": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
-      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
-      "dev": true
-    },
-    "gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
-    },
-    "get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-    },
-    "get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
-      }
-    },
-    "get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "dev": true
-    },
-    "get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dev": true,
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
-    "get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
-      }
-    },
-    "get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
-      "dev": true
-    },
-    "glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "dev": true,
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "requires": {
-        "is-glob": "^4.0.1"
-      }
-    },
-    "glob-to-regexp": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
-      "integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==",
-      "dev": true
-    },
-    "global-modules": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-      "dev": true,
-      "requires": {
-        "global-prefix": "^3.0.0"
-      }
-    },
-    "global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-      "dev": true,
-      "requires": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
-    },
-    "globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3"
-      }
-    },
-    "globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "requires": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      }
-    },
-    "gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.3"
-      }
-    },
-    "graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
-    },
-    "growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==",
-      "dev": true,
-      "optional": true
-    },
-    "gulp-header": {
-      "version": "1.8.12",
-      "resolved": "https://registry.npmjs.org/gulp-header/-/gulp-header-1.8.12.tgz",
-      "integrity": "sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==",
-      "requires": {
-        "concat-with-sourcemaps": "*",
-        "lodash.template": "^4.4.0",
-        "through2": "^2.0.0"
-      }
-    },
-    "gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
-      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
-      "dev": true,
-      "requires": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
-      }
-    },
-    "handle-thing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-      "dev": true
-    },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-          "dev": true
-        }
-      }
-    },
-    "has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true
-    },
-    "has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true
-    },
-    "has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.1"
-      }
-    },
-    "has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
-    },
-    "has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-    },
-    "has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
-      "requires": {
-        "has-symbols": "^1.0.2"
-      }
-    },
-    "has-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
-      "dev": true,
-      "requires": {
-        "get-value": "^2.0.6",
-        "has-values": "^1.0.0",
-        "isobject": "^3.0.0"
-      }
-    },
-    "has-values": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
-      "dev": true,
-      "requires": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "hash-base": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
-      "requires": {
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "hash.js": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "minimalistic-assert": "^1.0.1"
-      }
-    },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
-    },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "highcharts": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-6.2.0.tgz",
-      "integrity": "sha512-A4E89MA+kto8giic7zyLU6ZxfXnVeCUlKOyzFsah3+n4BROx4bgonl92KIBtwLud/mIWir8ahqhuhe2by9LakQ=="
-    },
-    "hive-uri": {
-      "version": "0.2.3"
-    },
-    "hivesigner": {
-      "version": "3.3.4",
-      "requires": {
-        "@babel/runtime": "^7.13.9",
-        "cross-fetch": "^3.0.6",
-        "hive-uri": "^0.2.4"
-      },
-      "dependencies": {
-        "cross-fetch": {
-          "version": "3.1.5",
-          "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-          "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-          "requires": {
-            "node-fetch": "2.6.7"
-          },
-          "dependencies": {
-            "node-fetch": {
-              "version": "2.6.7",
-              "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-              "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-              "requires": {
-                "whatwg-url": "^5.0.0"
-              }
-            }
-          }
-        },
-        "hive-uri": {
-          "version": "0.2.4",
-          "resolved": "https://registry.npmjs.org/hive-uri/-/hive-uri-0.2.4.tgz",
-          "integrity": "sha512-c61F16oVARU+eLvGy20JN7M9YK+DUexHPFGBlG39VHI9Ahxos8YNCY6Btmw9AL7Jlq5b4HtY0LvsOIqHQoOWhw=="
-        },
-        "tr46": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-        },
-        "webidl-conversions": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-        },
-        "whatwg-url": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-          "requires": {
-            "tr46": "~0.0.3",
-            "webidl-conversions": "^3.0.0"
-          }
-        }
-      }
-    },
-    "hmac-drbg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
-      "requires": {
-        "hash.js": "^1.0.3",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
-    },
-    "hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      }
-    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==",
-      "dev": true
-    },
-    "html-dom-parser": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-1.0.1.tgz",
-      "integrity": "sha512-uKXISKlHzB/l9A08jrs2wseQJ9b864ZfEdmIZskj10cuP6HxCOMHSK0RdluV8NVQaWs0PwefN7d8wqG3jR0IbQ==",
-      "requires": {
-        "domhandler": "4.2.0",
-        "htmlparser2": "6.1.0"
-      }
-    },
-    "html-encoding-sniffer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-      "dev": true,
-      "requires": {
-        "whatwg-encoding": "^1.0.5"
-      }
-    },
-    "html-entities": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
-      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
-      "dev": true
-    },
-    "html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
-    },
-    "html-minifier-terser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-      "dev": true,
-      "requires": {
-        "camel-case": "^4.1.1",
-        "clean-css": "^4.2.3",
-        "commander": "^4.1.1",
-        "he": "^1.2.0",
-        "param-case": "^3.0.3",
-        "relateurl": "^0.2.7",
-        "terser": "^4.6.3"
-      },
-      "dependencies": {
-        "clean-css": {
-          "version": "4.2.4",
-          "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
-          "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
-          "dev": true,
-          "requires": {
-            "source-map": "~0.6.0"
-          }
-        },
-        "commander": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-          "dev": true
-        }
-      }
-    },
-    "html-react-parser": {
-      "version": "1.2.7",
-      "requires": {
-        "domhandler": "4.2.0",
-        "html-dom-parser": "1.0.1",
-        "react-property": "1.0.1",
-        "style-to-js": "1.1.0"
-      }
-    },
-    "html-webpack-plugin": {
-      "version": "4.5.2",
-      "dev": true,
-      "requires": {
-        "@types/html-minifier-terser": "^5.0.0",
-        "@types/tapable": "^1.0.5",
-        "@types/webpack": "^4.41.8",
-        "html-minifier-terser": "^5.0.1",
-        "loader-utils": "^1.2.3",
-        "lodash": "^4.17.20",
-        "pretty-error": "^2.1.1",
-        "tapable": "^1.1.3",
-        "util.promisify": "1.0.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
-    "htmlparser2": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0",
-        "domutils": "^2.5.2",
-        "entities": "^2.0.0"
-      }
-    },
-    "http-cookie-agent": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/http-cookie-agent/-/http-cookie-agent-5.0.2.tgz",
-      "integrity": "sha512-BiBmZyIMGl5mLKmY7KH2uCVlcNUl1jexjdtWXFCUF4DFOrNZg1c5iPPTzWDzU7Ngfb6fB03DPpJQ80KQWmycsg==",
-      "requires": {
-        "agent-base": "^6.0.2"
-      }
-    },
-    "http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
-      "dev": true
-    },
-    "http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
-      "dev": true,
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.1"
-      }
-    },
-    "http-parser-js": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
-      "dev": true
-    },
-    "http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
-      "requires": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
-      "requires": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      }
-    },
-    "http-proxy-middleware": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
-      "dev": true,
-      "requires": {
-        "http-proxy": "^1.17.0",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.11",
-        "micromatch": "^3.1.10"
-      }
-    },
-    "https": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
-      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
-    },
-    "https-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
-      "dev": true
-    },
-    "https-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
-      "requires": {
-        "agent-base": "6",
-        "debug": "4"
-      }
-    },
-    "human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true
-    },
-    "husky": {
-      "version": "8.0.1",
-      "dev": true
-    },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
-    "i18next": {
-      "version": "19.9.2",
-      "requires": {
-        "@babel/runtime": "^7.12.0"
-      }
-    },
-    "i18next-browser-languagedetector": {
-      "version": "4.3.1",
-      "requires": {
-        "@babel/runtime": "^7.5.5"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
-    },
-    "idb": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz",
-      "integrity": "sha512-UUxlE7vGWK5RfB/fDwEGgRf84DY/ieqNha6msMV99UsEMQhJ1RwbCd8AYBj3QMgnE3VZnfQvm4oKVCJTYlqIgg=="
-    },
-    "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
-    },
-    "iferr": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==",
-      "dev": true
-    },
-    "ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
-      "dev": true
-    },
-    "immer": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
-      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
-      "dev": true
-    },
-    "immutability-helper": {
-      "version": "3.1.1"
-    },
-    "immutable": {
-      "version": "4.0.0-rc.14",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.14.tgz",
-      "integrity": "sha512-pfkvmRKJSoW7JFx0QeYlAmT+kNYvn5j0u7bnpNq4N2RCvHSTlLT208G8jgaquNe+Q8kCPHKOSpxJkyvLDpYq0w==",
-      "optional": true
-    },
-    "import-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
-      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
-      "dev": true,
-      "requires": {
-        "import-from": "^3.0.0"
-      }
-    },
-    "import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
-      "requires": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-          "dev": true
-        }
-      }
-    },
-    "import-from": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
-      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
-      "dev": true,
-      "requires": {
-        "resolve-from": "^5.0.0"
-      }
-    },
-    "import-local": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
-      "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
-      "dev": true,
-      "requires": {
-        "pkg-dir": "^3.0.0",
-        "resolve-cwd": "^2.0.0"
-      }
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true
-    },
-    "indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true
-    },
-    "indexes-of": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==",
-      "dev": true
-    },
-    "infer-owner": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
-      "dev": true
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
-    },
-    "inline-style-parser": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
-      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
-    },
-    "inline-style-prefixer": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
-      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
-      "requires": {
-        "css-in-js-utils": "^3.1.0",
-        "fast-loops": "^1.1.3"
-      }
-    },
-    "inquirer": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
-      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-width": "^3.0.0",
-        "external-editor": "^3.0.3",
-        "figures": "^3.0.0",
-        "lodash": "^4.17.19",
-        "mute-stream": "0.0.8",
-        "run-async": "^2.4.0",
-        "rxjs": "^6.6.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "through": "^2.3.6"
-      }
-    },
-    "internal-ip": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
-      "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
-      "dev": true,
-      "requires": {
-        "default-gateway": "^4.2.0",
-        "ipaddr.js": "^1.9.0"
-      }
-    },
-    "internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
-      }
-    },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "invert-kv": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-      "dev": true
-    },
-    "ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
-      "dev": true
-    },
-    "ip-regex": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
-      "integrity": "sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw==",
-      "dev": true
-    },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true
-    },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true
-    },
-    "is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
-    },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
-    },
-    "is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
-      "requires": {
-        "has-bigints": "^1.0.1"
-      }
-    },
-    "is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "requires": {
-        "binary-extensions": "^2.0.0"
-      }
-    },
-    "is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true
-    },
-    "is-ci": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "dev": true,
-      "requires": {
-        "ci-info": "^2.0.0"
-      }
-    },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
-    "is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.3"
-      }
-    },
-    "is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
-    },
-    "is-date-object": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
-      "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==",
-      "dev": true
-    },
-    "is-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "dev": true,
-      "requires": {
-        "is-accessor-descriptor": "^0.1.6",
-        "is-data-descriptor": "^0.1.4",
-        "kind-of": "^5.0.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
-        }
-      }
-    },
-    "is-directory": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==",
-      "dev": true
-    },
-    "is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true
-    },
-    "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
-    },
-    "is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-    },
-    "is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "dev": true
-    },
-    "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "requires": {
-        "is-extglob": "^2.1.1"
-      }
-    },
-    "is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "dev": true
-    },
-    "is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
-    },
-    "is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-      "dev": true
-    },
-    "is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true
-    },
-    "is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
-      "requires": {
-        "is-path-inside": "^2.1.0"
-      }
-    },
-    "is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
-      "requires": {
-        "path-is-inside": "^1.0.2"
-      }
-    },
-    "is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-      "dev": true
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
-    },
-    "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
-    "is-root": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
-      "dev": true
-    },
-    "is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2"
-      }
-    },
-    "is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
-    },
-    "is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
-      "requires": {
-        "has-symbols": "^1.0.2"
-      }
-    },
-    "is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
-      "dev": true,
-      "requires": {
-        "which-typed-array": "^1.1.11"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
-    },
-    "is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2"
-      }
-    },
-    "is-what": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.15.tgz",
-      "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA=="
-    },
-    "is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true
-    },
-    "is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
-      "dev": true
-    },
-    "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
-    },
-    "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true
-    },
-    "isomorphic-ws": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
-      "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw=="
-    },
-    "istanbul-lib-coverage": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
-      "dev": true
-    },
-    "istanbul-lib-instrument": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
-      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.7.5",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.0.0",
-        "semver": "^6.3.0"
-      }
-    },
-    "istanbul-lib-report": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
-      "dev": true,
-      "requires": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^4.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "dependencies": {
-        "make-dir": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-          "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-          "dev": true,
-          "requires": {
-            "semver": "^7.5.3"
-          }
-        },
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "istanbul-lib-source-maps": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      }
-    },
-    "istanbul-reports": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
-      "integrity": "sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==",
-      "dev": true,
-      "requires": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      }
-    },
-    "jest": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.3.tgz",
-      "integrity": "sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==",
-      "dev": true,
-      "requires": {
-        "@jest/core": "^26.6.3",
-        "import-local": "^3.0.2",
-        "jest-cli": "^26.6.3"
-      },
-      "dependencies": {
-        "import-local": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
-          "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
-          "dev": true,
-          "requires": {
-            "pkg-dir": "^4.2.0",
-            "resolve-cwd": "^3.0.0"
-          }
-        },
-        "jest-cli": {
-          "version": "26.6.3",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
-          "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
-          "dev": true,
-          "requires": {
-            "@jest/core": "^26.6.3",
-            "@jest/test-result": "^26.6.2",
-            "@jest/types": "^26.6.2",
-            "chalk": "^4.0.0",
-            "exit": "^0.1.2",
-            "graceful-fs": "^4.2.4",
-            "import-local": "^3.0.2",
-            "is-ci": "^2.0.0",
-            "jest-config": "^26.6.3",
-            "jest-util": "^26.6.2",
-            "jest-validate": "^26.6.2",
-            "prompts": "^2.0.1",
-            "yargs": "^15.4.1"
-          }
-        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "resolve-cwd": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-          "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-          "dev": true,
-          "requires": {
-            "resolve-from": "^5.0.0"
-          }
-        }
-      }
-    },
-    "jest-changed-files": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
-      "integrity": "sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "execa": "^4.0.0",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "execa": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        }
-      }
-    },
-    "jest-config": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.3.tgz",
-      "integrity": "sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^26.6.3",
-        "@jest/types": "^26.6.2",
-        "babel-jest": "^26.6.3",
-        "chalk": "^4.0.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.2.4",
-        "jest-environment-jsdom": "^26.6.2",
-        "jest-environment-node": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-jasmine2": "^26.6.3",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      }
-    },
-    "jest-docblock": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
-      "integrity": "sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==",
-      "dev": true,
-      "requires": {
-        "detect-newline": "^3.0.0"
-      }
-    },
-    "jest-each": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.2.tgz",
-      "integrity": "sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2"
-      }
-    },
-    "jest-environment-jsdom": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz",
-      "integrity": "sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jsdom": "^16.4.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-environment-node": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.2.tgz",
-      "integrity": "sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true
-    },
-    "jest-haste-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
-      "integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-regex-util": "^26.0.0",
-        "jest-serializer": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "sane": "^4.0.3",
-        "walker": "^1.0.7"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-jasmine2": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
-      "integrity": "sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==",
-      "dev": true,
-      "requires": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "expect": "^26.6.2",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-leak-detector": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz",
-      "integrity": "sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==",
-      "dev": true,
-      "requires": {
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      }
-    },
-    "jest-matcher-utils": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
-      "integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      }
-    },
-    "jest-message-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
-      "integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.2"
-      },
-      "dependencies": {
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-mock": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.2.tgz",
-      "integrity": "sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-pnp-resolver": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "dev": true
-    },
-    "jest-regex-util": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
-      "integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==",
-      "dev": true
-    },
-    "jest-resolve": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
-      "integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^26.6.2",
-        "read-pkg-up": "^7.0.1",
-        "resolve": "^1.18.1",
-        "slash": "^3.0.0"
-      }
-    },
-    "jest-resolve-dependencies": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
-      "integrity": "sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-snapshot": "^26.6.2"
-      }
-    },
-    "jest-runner": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
-      "integrity": "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.7.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-docblock": "^26.0.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-leak-detector": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "source-map-support": "^0.5.6",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-runtime": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.3.tgz",
-      "integrity": "sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/globals": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^0.6.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0",
-        "yargs": "^15.4.1"
-      }
-    },
-    "jest-serializer": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
-      "integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.4"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-snapshot": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
-      "integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/prettier": "^2.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^26.6.2",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "jest-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
-      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "is-ci": "^2.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-validate": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
-      "integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "camelcase": "^6.0.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "leven": "^3.1.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-watcher": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
-      "integrity": "sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==",
-      "dev": true,
-      "requires": {
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "jest-util": "^26.6.2",
-        "string-length": "^4.0.1"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "jest-worker": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "20.5.3",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz",
-          "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==",
-          "dev": true
-        }
-      }
-    },
-    "js-md5": {
-      "version": "0.7.3"
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
-      "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      }
-    },
-    "jsbi": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-3.1.5.tgz",
-      "integrity": "sha512-w2BY0VOYC1ahe+w6Qhl4SFoPvPsZ9NPHY4bwass+LCgU7RK3PBoVQlQ3G1s7vI8W3CYyJiEXcbKF7FIM/L8q3Q=="
-    },
-    "jsdom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
-      "dev": true,
-      "requires": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.6",
-        "xml-name-validator": "^3.0.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-          "dev": true
-        },
-        "parse5": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-          "dev": true
-        },
-        "tough-cookie": {
-          "version": "4.1.3",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-          "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.33",
-            "punycode": "^2.1.1",
-            "universalify": "^0.2.0",
-            "url-parse": "^1.5.3"
-          }
-        },
-        "universalify": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true
-        }
-      }
-    },
-    "jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
-    },
-    "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
-    },
-    "json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
-    },
-    "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "json3": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
-      "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==",
-      "dev": true
-    },
-    "json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true
-    },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
-    "killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-      "dev": true
-    },
-    "kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dev": true,
-      "requires": {
-        "is-buffer": "^1.1.5"
-      }
-    },
-    "kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "dev": true
-    },
-    "klona": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
-      "dev": true
-    },
-    "lcid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^2.0.0"
-      }
-    },
-    "leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "dev": true
-    },
-    "lightweight-charts": {
-      "version": "3.8.0",
-      "requires": {
-        "fancy-canvas": "0.2.2"
-      }
-    },
-    "lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
-      "dev": true
-    },
-    "lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
-    "lint-staged": {
-      "version": "13.0.3",
-      "dev": true,
-      "requires": {
-        "cli-truncate": "^3.1.0",
-        "colorette": "^2.0.17",
-        "commander": "^9.3.0",
-        "debug": "^4.3.4",
-        "execa": "^6.1.0",
-        "lilconfig": "2.0.5",
-        "listr2": "^4.0.5",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-inspect": "^1.12.2",
-        "pidtree": "^0.6.0",
-        "string-argv": "^0.3.1",
-        "yaml": "^2.1.1"
-      },
-      "dependencies": {
-        "colorette": {
-          "version": "2.0.19",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
-          "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
-          "dev": true
-        },
-        "commander": {
-          "version": "9.4.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.0.tgz",
-          "integrity": "sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==",
-          "dev": true
-        },
-        "execa": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz",
-          "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.1",
-            "human-signals": "^3.0.1",
-            "is-stream": "^3.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^5.1.0",
-            "onetime": "^6.0.0",
-            "signal-exit": "^3.0.7",
-            "strip-final-newline": "^3.0.0"
-          },
-          "dependencies": {
-            "human-signals": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
-              "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==",
-              "dev": true
-            },
-            "strip-final-newline": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-              "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-              "dev": true
-            }
-          }
-        },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-          "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-          "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.2",
-            "picomatch": "^2.3.1"
-          }
-        },
-        "mimic-fn": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-          "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-          "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
-          "dev": true,
-          "requires": {
-            "path-key": "^4.0.0"
-          }
-        },
-        "object-inspect": {
-          "version": "1.12.2",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-          "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-          "dev": true
-        },
-        "onetime": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-          "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-          "dev": true,
-          "requires": {
-            "mimic-fn": "^4.0.0"
-          }
-        },
-        "path-key": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-          "dev": true
-        },
-        "picomatch": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-          "dev": true
-        },
-        "signal-exit": {
-          "version": "3.0.7",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-          "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-          "dev": true
-        },
-        "yaml": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
-          "integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==",
-          "dev": true
-        }
-      }
-    },
-    "listr2": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.5.tgz",
-      "integrity": "sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==",
-      "dev": true,
-      "requires": {
-        "cli-truncate": "^2.1.0",
-        "colorette": "^2.0.16",
-        "log-update": "^4.0.0",
-        "p-map": "^4.0.0",
-        "rfdc": "^1.3.0",
-        "rxjs": "^7.5.5",
-        "through": "^2.3.8",
-        "wrap-ansi": "^7.0.0"
-      },
-      "dependencies": {
-        "cli-truncate": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
-          "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
-          "dev": true,
-          "requires": {
-            "slice-ansi": "^3.0.0",
-            "string-width": "^4.2.0"
-          }
-        },
-        "colorette": {
-          "version": "2.0.20",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-          "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-          "dev": true
-        },
-        "rxjs": {
-          "version": "7.8.1",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        },
-        "slice-ansi": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
-          "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "astral-regex": "^2.0.0",
-            "is-fullwidth-code-point": "^3.0.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        }
-      }
-    },
-    "loadable-ts-transformer": {
-      "version": "1.0.0-alpha.3"
-    },
-    "loader-runner": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
-      "dev": true
-    },
-    "loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-      "dev": true,
-      "requires": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      }
-    },
-    "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "requires": {
-        "p-locate": "^4.1.0"
-      }
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash._baseiteratee": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
-      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
-      "requires": {
-        "lodash._stringtopath": "~4.8.0"
-      }
-    },
-    "lodash._basetostring": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
-      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw=="
-    },
-    "lodash._baseuniq": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
-      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
-      "requires": {
-        "lodash._createset": "~4.0.0",
-        "lodash._root": "~3.0.0"
-      }
-    },
-    "lodash._createset": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
-      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA=="
-    },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA=="
-    },
-    "lodash._root": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
-      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
-    },
-    "lodash._stringtopath": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
-      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
-      "requires": {
-        "lodash._basetostring": "~4.12.0"
-      }
-    },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
-    },
-    "lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
-    },
-    "lodash.isequalwith": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
-      "integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
-    },
-    "lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true
-    },
-    "lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-    },
-    "lodash.template": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
-      "requires": {
-        "lodash._reinterpolate": "^3.0.0",
-        "lodash.templatesettings": "^4.0.0"
-      }
-    },
-    "lodash.templatesettings": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
-      "requires": {
-        "lodash._reinterpolate": "^3.0.0"
-      }
-    },
-    "lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
-    },
-    "lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
-      "dev": true
-    },
-    "lodash.uniqby": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
-      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
-      "requires": {
-        "lodash._baseiteratee": "~4.7.0",
-        "lodash._baseuniq": "~4.6.0"
-      }
-    },
-    "log-update": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
-      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.3.0",
-        "cli-cursor": "^3.1.0",
-        "slice-ansi": "^4.0.0",
-        "wrap-ansi": "^6.2.0"
-      },
-      "dependencies": {
-        "slice-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
-          "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "astral-regex": "^2.0.0",
-            "is-fullwidth-code-point": "^3.0.0"
-          }
-        }
-      }
-    },
-    "loglevel": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
-      "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
-      "dev": true
-    },
-    "lolight": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/lolight/-/lolight-1.4.0.tgz",
-      "integrity": "sha512-d64i6wBResbga3rnM9JYG6Jq/foHDZvSCxoof4kAU48rtzffgbiJlmjs+CfMNlXH2tG3ct+2T6+ht1h4GP7DSg=="
-    },
-    "long": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
-      "integrity": "sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg=="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
-      "requires": {
-        "tslib": "^2.0.3"
-      }
-    },
-    "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "requires": {
-        "semver": "^6.0.0"
-      }
-    },
-    "make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
-    },
-    "makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "dev": true,
-      "requires": {
-        "tmpl": "1.0.5"
-      }
-    },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
-    "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
-      "dev": true
-    },
-    "map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
-      "dev": true
-    },
-    "map-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
-      "dev": true,
-      "requires": {
-        "object-visit": "^1.0.0"
-      }
-    },
-    "md5.js": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
-      "requires": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true
-    },
-    "medium-zoom": {
-      "version": "1.0.6"
-    },
-    "mem": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "dev": true,
-      "requires": {
-        "map-age-cleaner": "^0.1.1",
-        "mimic-fn": "^2.0.0",
-        "p-is-promise": "^2.0.0"
-      }
-    },
-    "memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
-    },
-    "memory-fs": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==",
-      "dev": true,
-      "requires": {
-        "errno": "^0.1.3",
-        "readable-stream": "^2.0.1"
-      }
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
-      "dev": true
-    },
-    "merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
-    },
-    "merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true
-    },
-    "microevent.ts": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
-      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
-      "dev": true
-    },
-    "micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-          "dev": true,
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          },
-          "dependencies": {
-            "is-extendable": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-              "dev": true,
-              "requires": {
-                "is-plain-object": "^2.0.4"
-              }
-            }
-          }
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
-          "dev": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
-        }
-      }
-    },
-    "miller-rabin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      }
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true
-    },
-    "mime-db": {
-      "version": "1.48.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
-      "dev": true
-    },
-    "mime-types": {
-      "version": "2.1.31",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
-      "dev": true,
-      "requires": {
-        "mime-db": "1.48.0"
-      }
-    },
-    "mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true
-    },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
-    "mini-css-extract-plugin": {
-      "version": "0.9.0",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0",
-        "normalize-url": "1.9.1",
-        "schema-utils": "^1.0.0",
-        "webpack-sources": "^1.1.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          },
-          "dependencies": {
-            "ajv-errors": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
-    "minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-    },
-    "minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg=="
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true
-    },
-    "minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "minipass-collect": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-flush": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-pipeline": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      }
-    },
-    "mississippi": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-      "dev": true,
-      "requires": {
-        "concat-stream": "^1.5.0",
-        "duplexify": "^3.4.2",
-        "end-of-stream": "^1.1.0",
-        "flush-write-stream": "^1.0.0",
-        "from2": "^2.1.0",
-        "parallel-transform": "^1.1.0",
-        "pump": "^3.0.0",
-        "pumpify": "^1.3.3",
-        "stream-each": "^1.1.0",
-        "through2": "^2.0.0"
-      }
-    },
-    "mixin-deep": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
-      "dev": true,
-      "requires": {
-        "for-in": "^1.0.2",
-        "is-extendable": "^1.0.1"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "mkdirp": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.5"
-      }
-    },
-    "mockdate": {
-      "version": "3.0.5",
-      "dev": true
-    },
-    "moment": {
-      "version": "2.29.4"
-    },
-    "move-concurrently": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1",
-        "copy-concurrently": "^1.0.0",
-        "fs-write-stream-atomic": "^1.0.8",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.3"
-      }
-    },
-    "mri": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
-      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
-      "dev": true
-    },
-    "mrmime": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-      "dev": true
-    },
-    "ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
-    "multicast-dns": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
-      "dev": true,
-      "requires": {
-        "dns-packet": "^1.3.1",
-        "thunky": "^1.0.2"
-      }
-    },
-    "multicast-dns-service-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ==",
-      "dev": true
-    },
-    "multihashes": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/multihashes/-/multihashes-0.4.13.tgz",
-      "integrity": "sha512-HwJGEKPCpLlNlgGQA56CYh/Wsqa+c4JAq8+mheIgw7OK5T4QvNJqgp6TH8gZ4q4l1aiWeNat/H/MrFXmTuoFfQ==",
-      "requires": {
-        "bs58": "^4.0.1",
-        "varint": "^5.0.0"
-      },
-      "dependencies": {
-        "bs58": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
-          "integrity": "sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==",
-          "requires": {
-            "base-x": "^3.0.2"
-          }
-        }
-      }
-    },
-    "mute-stream": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-      "dev": true
-    },
-    "nan": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
-      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
-    },
-    "nano-css": {
-      "version": "5.3.5",
-      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
-      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
-      "requires": {
-        "css-tree": "^1.1.2",
-        "csstype": "^3.0.6",
-        "fastest-stable-stringify": "^2.0.2",
-        "inline-style-prefixer": "^6.0.0",
-        "rtl-css-js": "^1.14.0",
-        "sourcemap-codec": "^1.4.8",
-        "stacktrace-js": "^2.0.2",
-        "stylis": "^4.0.6"
-      }
-    },
-    "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
-    },
-    "nanomatch": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "fragment-cache": "^0.2.1",
-        "is-windows": "^1.0.2",
-        "kind-of": "^6.0.2",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-          "dev": true,
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        }
-      }
-    },
-    "native-url": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
-      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
-      "dev": true,
-      "requires": {
-        "querystring": "^0.2.0"
-      }
-    },
-    "natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
-    },
-    "needle": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
-      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
-      "requires": {
-        "debug": "^3.2.6",
-        "iconv-lite": "^0.4.4",
-        "sax": "^1.2.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
-    "negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "dev": true
-    },
-    "neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
-      "requires": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node-cache": {
-      "version": "5.1.2",
-      "requires": {
-        "clone": "2.x"
-      }
-    },
-    "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
-      "dev": true
-    },
-    "node-html-parser": {
-      "version": "5.3.3",
-      "requires": {
-        "css-select": "^4.2.1",
-        "he": "1.2.0"
-      }
-    },
-    "node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
-      "dev": true
-    },
-    "node-libs-browser": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
-      "dev": true,
-      "requires": {
-        "assert": "^1.1.1",
-        "browserify-zlib": "^0.2.0",
-        "buffer": "^4.3.0",
-        "console-browserify": "^1.1.0",
-        "constants-browserify": "^1.0.0",
-        "crypto-browserify": "^3.11.0",
-        "domain-browser": "^1.1.1",
-        "events": "^3.0.0",
-        "https-browserify": "^1.0.0",
-        "os-browserify": "^0.3.0",
-        "path-browserify": "0.0.1",
-        "process": "^0.11.10",
-        "punycode": "^1.2.4",
-        "querystring-es3": "^0.2.0",
-        "readable-stream": "^2.3.3",
-        "stream-browserify": "^2.0.1",
-        "stream-http": "^2.7.2",
-        "string_decoder": "^1.0.0",
-        "timers-browserify": "^2.0.4",
-        "tty-browserify": "0.0.0",
-        "url": "^0.11.0",
-        "util": "^0.11.0",
-        "vm-browserify": "^1.0.1"
-      },
-      "dependencies": {
-        "buffer": {
-          "version": "4.9.2",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-          "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-          "dev": true,
-          "requires": {
-            "base64-js": "^1.0.2",
-            "ieee754": "^1.1.4",
-            "isarray": "^1.0.0"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-          "dev": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-          "dev": true
-        },
-        "util": {
-          "version": "0.11.1",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        }
-      }
-    },
-    "node-notifier": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
-      "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "growly": "^1.3.0",
-        "is-wsl": "^2.2.0",
-        "semver": "^7.3.2",
-        "shellwords": "^0.1.1",
-        "uuid": "^8.3.0",
-        "which": "^2.0.2"
-      },
-      "dependencies": {
-        "is-wsl": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-docker": "^2.0.0"
-          }
-        },
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "uuid": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
-      "dev": true
-    },
-    "normalize-html-whitespace": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz",
-      "integrity": "sha512-9ui7CGtOOlehQu0t/OhhlmDyc71mKVlv+4vF+me4iZLPrNtRL2xoquEdfZxasC/bdQi/Hr3iTrpyRKIG+ocabA=="
-    },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        }
-      }
-    },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true
-    },
-    "normalize-url": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
-      "integrity": "sha512-A48My/mtCklowHBlI8Fq2jFWK4tX4lJ5E6ytFsSOq1fzpvT0SQSgKhSg7lN5c2uYFOrUAOQp6zhhJnpp1eMloQ==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.0.1",
-        "prepend-http": "^1.0.0",
-        "query-string": "^4.1.0",
-        "sort-keys": "^1.0.0"
-      },
-      "dependencies": {
-        "query-string": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-          "integrity": "sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==",
-          "dev": true,
-          "requires": {
-            "object-assign": "^4.1.0",
-            "strict-uri-encode": "^1.0.0"
-          }
-        },
-        "strict-uri-encode": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-          "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
-          "dev": true
-        }
-      }
-    },
-    "nostr-relaypool": {
-      "version": "0.6.28",
-      "requires": {
-        "@jest/source-map": "^29.4.3",
-        "isomorphic-ws": "^5.0.0",
-        "nostr-tools": "^1.10.0",
-        "safe-stable-stringify": "^2.4.2"
-      },
-      "dependencies": {
-        "@jest/source-map": {
-          "version": "29.4.3",
-          "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.4.3.tgz",
-          "integrity": "sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==",
-          "requires": {
-            "@jridgewell/trace-mapping": "^0.3.15",
-            "callsites": "^3.0.0",
-            "graceful-fs": "^4.2.9"
-          }
-        }
-      }
-    },
-    "nostr-tools": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-1.12.0.tgz",
-      "integrity": "sha512-fsIXaNJPKaSrO9MxsCEWbhI4tG4pToQK4D4sgLRD0fRDfZ6ocCg8CLlh9lcNx0o8pVErCMLVASxbJ+w4WNK0MA==",
-      "requires": {
-        "@noble/curves": "1.0.0",
-        "@noble/hashes": "1.3.0",
-        "@scure/base": "1.1.1",
-        "@scure/bip32": "1.3.0",
-        "@scure/bip39": "1.2.0"
-      }
-    },
-    "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
-      "dev": true,
-      "requires": {
-        "path-key": "^2.0.0"
-      },
-      "dependencies": {
-        "path-key": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-          "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-          "dev": true
-        }
-      }
-    },
-    "nth-check": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
-      "requires": {
-        "boolbase": "^1.0.0"
-      }
-    },
-    "null-loader": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
-      "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      }
-    },
-    "numeral": {
-      "version": "2.0.6"
-    },
-    "nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
-    },
-    "object-copy": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
-      "dev": true,
-      "requires": {
-        "copy-descriptor": "^0.1.0",
-        "define-property": "^0.2.5",
-        "kind-of": "^3.0.3"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
-    },
-    "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
-    },
-    "object-visit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.0"
-      }
-    },
-    "object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "has-symbols": "^1.0.3",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.6.tgz",
-      "integrity": "sha512-lq+61g26E/BgHv0ZTFgRvi7NMEPuAxLkFU7rukXjc/AlwH4Am5xXVnIXy3un1bg/JPbXHrixRkK1itUzzPiIjQ==",
-      "dev": true,
-      "requires": {
-        "array.prototype.reduce": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.21.2",
-        "safe-array-concat": "^1.0.0"
-      }
-    },
-    "object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "dev": true
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
-      "dev": true,
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "requires": {
-        "mimic-fn": "^2.1.0"
-      }
-    },
-    "open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-      "dev": true,
-      "requires": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
-      },
-      "dependencies": {
-        "is-wsl": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-          "dev": true,
-          "requires": {
-            "is-docker": "^2.0.0"
-          }
-        }
-      }
-    },
-    "opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-      "dev": true
-    },
-    "opn": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
-      "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
-      "dev": true,
-      "requires": {
-        "is-wsl": "^1.1.0"
-      }
-    },
-    "os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
-      "dev": true
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
-      "dev": true
-    },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
-      "dev": true
-    },
-    "p-each-series": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
-      "integrity": "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==",
-      "dev": true
-    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
-      "dev": true
-    },
-    "p-is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-      "dev": true
-    },
-    "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
-    "p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "dev": true,
-      "requires": {
-        "aggregate-error": "^3.0.0"
-      }
-    },
-    "p-retry": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
-      "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
-      "dev": true,
-      "requires": {
-        "retry": "^0.12.0"
-      }
-    },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-    },
-    "pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
-    },
-    "parallel-transform": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
-      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
-      "dev": true,
-      "requires": {
-        "cyclist": "^1.0.1",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.1.5"
-      }
-    },
-    "param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "dev": true,
-      "requires": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
-      "requires": {
-        "callsites": "^3.0.0"
-      }
-    },
-    "parse-asn1": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
-      "dev": true,
-      "requires": {
-        "asn1.js": "^5.2.0",
-        "browserify-aes": "^1.0.0",
-        "evp_bytestokey": "^1.0.0",
-        "pbkdf2": "^3.0.3",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      }
-    },
-    "parse5": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "requires": {
-        "entities": "^4.4.0"
-      },
-      "dependencies": {
-        "entities": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
-        }
-      }
-    },
-    "parse5-htmlparser2-tree-adapter": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
-      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
-      "requires": {
-        "domhandler": "^5.0.2",
-        "parse5": "^7.0.0"
-      },
-      "dependencies": {
-        "domhandler": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-          "requires": {
-            "domelementtype": "^2.3.0"
-          }
-        }
-      }
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true
-    },
-    "pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-      "dev": true,
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==",
-      "dev": true
-    },
-    "path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-      "requires": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      }
-    },
-    "path-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
-      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
-      "dev": true
-    },
-    "path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
-      "dev": true
-    },
-    "path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true
-    },
-    "path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==",
-      "dev": true
-    },
-    "path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
-    },
-    "path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
-    },
-    "pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
-      "dev": true,
-      "requires": {
-        "through": "~2.3"
-      }
-    },
-    "pbkdf2": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
-      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
-      "dev": true,
-      "requires": {
-        "create-hash": "^1.1.2",
-        "create-hmac": "^1.1.4",
-        "ripemd160": "^2.0.1",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      }
-    },
-    "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
-    },
-    "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
-    },
-    "pidtree": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
-      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
-      "dev": true
-    },
-    "pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dev": true,
-      "requires": {
-        "pinkie": "^2.0.0"
-      }
-    },
-    "pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true
-    },
-    "pkg-dir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-          "dev": true
-        }
-      }
-    },
-    "pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-          "dev": true
-        }
-      }
-    },
-    "pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
-    },
-    "pnp-webpack-plugin": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
-      "integrity": "sha512-2Rb3vm+EXble/sMXNSu6eoBx8e79gKqhNq9F5ZWW6ERNCTE/Q0wQNne5541tE5vKjfM8hpNCYL+LGc1YTfI0dg==",
-      "dev": true,
-      "requires": {
-        "ts-pnp": "^1.1.6"
-      }
-    },
-    "portfinder": {
-      "version": "1.0.32",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
-      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.4",
-        "debug": "^3.2.7",
-        "mkdirp": "^0.5.6"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.6",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.6"
-          }
-        }
-      }
-    },
-    "posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==",
-      "dev": true
-    },
-    "postcss": {
-      "version": "8.2.13",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
-      "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==",
-      "requires": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.22",
-        "source-map": "^0.6.1"
-      }
-    },
-    "postcss-calc": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
-      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.27",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-colormin": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
-      "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "color": "^3.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-convert-values": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
-      "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-discard-comments": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
-      "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-discard-duplicates": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
-      "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-discard-empty": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
-      "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-discard-overridden": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
-      "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-load-config": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
-      "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
-      "dev": true,
-      "requires": {
-        "import-cwd": "^3.0.0",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      }
-    },
-    "postcss-loader": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
-      "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.4"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "postcss-merge-longhand": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
-      "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
-      "dev": true,
-      "requires": {
-        "css-color-names": "0.0.4",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "stylehacks": "^4.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-merge-rules": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
-      "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-api": "^3.0.0",
-        "cssnano-util-same-parent": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0",
-        "vendors": "^1.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
-          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
-          "requires": {
-            "dot-prop": "^5.2.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
-    "postcss-minify-font-values": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
-      "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-minify-gradients": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
-      "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "is-color-stop": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-minify-params": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
-      "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.0",
-        "browserslist": "^4.0.0",
-        "cssnano-util-get-arguments": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "uniqs": "^2.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-minify-selectors": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
-      "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
-          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
-          "requires": {
-            "dot-prop": "^5.2.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
-    },
-    "postcss-modules-local-by-default": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
-      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.0.0"
-      }
-    },
-    "postcss-normalize-charset": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
-      "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-normalize-display-values": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
-      "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-positions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
-      "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-repeat-style": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
-      "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-string": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
-      "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-timing-functions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
-      "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-unicode": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
-      "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-url": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
-      "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
-      "dev": true,
-      "requires": {
-        "is-absolute-url": "^2.0.0",
-        "normalize-url": "^3.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "is-absolute-url": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
-          "integrity": "sha512-vOx7VprsKyllwjSkLV79NIhpyLfr3jAp7VaTCMXOJHu4m0Ew1CZ2fcjASwmV1jI3BWuWHB013M48eyeldk9gYg==",
-          "dev": true
-        },
-        "normalize-url": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
-          "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
-          "dev": true
-        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-normalize-whitespace": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
-      "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-ordered-values": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
-      "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-arguments": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-reduce-initial": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
-      "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-api": "^3.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-reduce-transforms": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
-      "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
-      "dev": true,
-      "requires": {
-        "cssnano-util-get-match": "^4.0.0",
-        "has": "^1.0.0",
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-safe-parser": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz",
-      "integrity": "sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==",
-      "requires": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "postcss-scss": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-3.0.5.tgz",
-      "integrity": "sha512-3e0qYk87eczfzg5P73ZVuuxEGCBfatRhPze6KrSaIbEKVtmnFI1RYp1Fv+AyZi+w8kcNRSPeNX6ap4b65zEkiA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^8.2.7"
-      }
-    },
-    "postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
-      "requires": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      }
-    },
-    "postcss-svgo": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
-      "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.0",
-        "postcss-value-parser": "^3.0.0",
-        "svgo": "^1.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-unique-selectors": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
-      "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.0",
-        "postcss": "^7.0.0",
-        "uniqs": "^2.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==",
-      "dev": true
-    },
-    "prettier": {
-      "version": "2.7.1",
-      "dev": true
-    },
-    "pretty-error": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.20",
-        "renderkid": "^2.0.4"
-      }
-    },
-    "pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        }
-      }
-    },
-    "pretty-time": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
-      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
-      "dev": true
-    },
-    "probe-image-size": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-7.2.3.tgz",
-      "integrity": "sha512-HubhG4Rb2UH8YtV4ba0Vp5bQ7L78RTONYu/ujmCu5nBI8wGv24s4E9xSKBi0N1MowRpxk76pFCpJtW0KPzOK0w==",
-      "requires": {
-        "lodash.merge": "^4.6.2",
-        "needle": "^2.5.2",
-        "stream-parser": "~0.3.1"
-      }
-    },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
-    },
-    "process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
-    },
-    "promise": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
-      "integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
-      "requires": {
-        "asap": "~2.0.6"
-      }
-    },
-    "promise-inflight": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
-      "dev": true
-    },
-    "prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "dev": true,
-      "requires": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      }
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "requires": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      }
-    },
-    "proper-lockfile": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
-      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "retry": "^0.12.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
-      "requires": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      }
-    },
-    "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true
-    },
-    "ps-tree": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.2.0.tgz",
-      "integrity": "sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==",
-      "dev": true,
-      "requires": {
-        "event-stream": "=3.3.4"
-      }
-    },
-    "psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "dev": true
-    },
-    "public-encrypt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "pumpify": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
-      "dev": true,
-      "requires": {
-        "duplexify": "^3.6.0",
-        "inherits": "^2.0.3",
-        "pump": "^2.0.0"
-      },
-      "dependencies": {
-        "pump": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
-          "dev": true,
-          "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
-          }
-        }
-      }
-    },
-    "punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
-    },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "dev": true
-    },
-    "qrcode": {
-      "version": "1.5.1",
-      "requires": {
-        "dijkstrajs": "^1.0.1",
-        "encode-utf8": "^1.0.3",
-        "pngjs": "^5.0.0",
-        "yargs": "^15.3.1"
-      }
-    },
-    "qs": {
-      "version": "6.10.3",
-      "requires": {
-        "side-channel": "^1.0.4"
-      }
-    },
-    "query-string": {
-      "version": "6.14.1",
-      "requires": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      }
-    },
-    "querystring": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
-      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
-    },
-    "querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
-      "dev": true
-    },
-    "querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-    },
-    "queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
-    },
-    "raf-schd": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
-      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
-    },
-    "randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "requires": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "randomfill": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
-      "dev": true,
-      "requires": {
-        "randombytes": "^2.0.5",
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true
-    },
-    "raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.2",
-        "http-errors": "1.8.1",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-          "dev": true
-        }
-      }
-    },
-    "razzle": {
-      "version": "4.0.5",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-        "autoprefixer": "^10.2.3",
-        "babel-jest": "^26.3.0",
-        "babel-loader": "^8.0.6",
-        "babel-plugin-transform-define": "^2.0.0",
-        "buffer": "^6.0.3",
-        "chalk": "^4.1.0",
-        "clean-css": "^5.0.1",
-        "copy-webpack-plugin": "^6.1.1",
-        "css-loader": "^5.0.0",
-        "css-minimizer-webpack-plugin": "^1.2.0",
-        "deepmerge": "^4.2.2",
-        "dotenv": "^8.2.0",
-        "dotenv-expand": "^5.1.0",
-        "file-loader": "^4.3.0",
-        "fs-extra": "^9.1.0",
-        "inquirer": "^7.3.3",
-        "jest": "^26.4.2",
-        "mri": "^1.1.4",
-        "null-loader": "^4.0.1",
-        "pnp-webpack-plugin": "^1.6.4",
-        "postcss": "^8.2.4",
-        "postcss-load-config": "^3.0.0",
-        "postcss-loader": "^4.2.0",
-        "process": "^0.11.10",
-        "razzle-start-server-webpack-plugin": "4.0.5",
-        "react-dev-utils": "^11.0.4",
-        "react-refresh": "^0.9.0",
-        "resolve": "^1.17.0",
-        "sade": "^1.4.2",
-        "source-map-support": "^0.5.16",
-        "string-hash": "^1.1.3",
-        "style-loader": "^2.0.0",
-        "terminate": "^2.1.2",
-        "terser-webpack-plugin": "^2.3.5",
-        "tiny-async-pool": "^1.1.0",
-        "url-loader": "^2.3.0",
-        "webpack-manifest-plugin": "^3.1.1",
-        "webpackbar": "~4||~5"
-      },
-      "dependencies": {
-        "@babel/plugin-transform-modules-commonjs": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
-          "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "babel-plugin-dynamic-import-node": "^2.3.3"
-          },
-          "dependencies": {
-            "@babel/helper-simple-access": {
-              "version": "7.22.5",
-              "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-              "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-              "dev": true,
-              "requires": {
-                "@babel/types": "^7.22.5"
-              }
-            }
-          }
-        },
-        "autoprefixer": {
-          "version": "10.3.1",
-          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
-          "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
-          "dev": true,
-          "requires": {
-            "browserslist": "^4.16.6",
-            "caniuse-lite": "^1.0.30001243",
-            "colorette": "^1.2.2",
-            "fraction.js": "^4.1.1",
-            "normalize-range": "^0.1.2",
-            "postcss-value-parser": "^4.1.0"
-          }
-        },
-        "cacache": {
-          "version": "13.0.1",
-          "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
-          "integrity": "sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==",
-          "dev": true,
-          "requires": {
-            "chownr": "^1.1.2",
-            "figgy-pudding": "^3.5.1",
-            "fs-minipass": "^2.0.0",
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.2.2",
-            "infer-owner": "^1.0.4",
-            "lru-cache": "^5.1.1",
-            "minipass": "^3.0.0",
-            "minipass-collect": "^1.0.2",
-            "minipass-flush": "^1.0.5",
-            "minipass-pipeline": "^1.2.2",
-            "mkdirp": "^0.5.1",
-            "move-concurrently": "^1.0.1",
-            "p-map": "^3.0.0",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^2.7.1",
-            "ssri": "^7.0.0",
-            "unique-filename": "^1.1.1"
-          },
-          "dependencies": {
-            "chownr": {
-              "version": "1.1.4",
-              "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-              "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-              "dev": true
-            },
-            "figgy-pudding": {
-              "version": "3.5.2",
-              "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-              "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
-              "dev": true
-            },
-            "lru-cache": {
-              "version": "5.1.1",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-              "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-              "dev": true,
-              "requires": {
-                "yallist": "^3.0.2"
-              }
-            },
-            "move-concurrently": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-              "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
-              "dev": true,
-              "requires": {
-                "aproba": "^1.1.1",
-                "copy-concurrently": "^1.0.0",
-                "fs-write-stream-atomic": "^1.0.8",
-                "mkdirp": "^0.5.1",
-                "rimraf": "^2.5.4",
-                "run-queue": "^1.0.3"
-              }
-            }
-          }
-        },
-        "jest-worker": {
-          "version": "25.5.0",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
-          "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
-          "dev": true,
-          "requires": {
-            "merge-stream": "^2.0.0",
-            "supports-color": "^7.0.0"
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "p-map": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
-          "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
-          "dev": true,
-          "requires": {
-            "aggregate-error": "^3.0.0"
-          }
-        },
-        "postcss": {
-          "version": "8.3.6",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
-          "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
-          "dev": true,
-          "requires": {
-            "colorette": "^1.2.2",
-            "nanoid": "^3.1.23",
-            "source-map-js": "^0.6.2"
-          }
-        },
-        "postcss-loader": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
-          "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
-          "dev": true,
-          "requires": {
-            "cosmiconfig": "^7.0.0",
-            "klona": "^2.0.4",
-            "loader-utils": "^2.0.0",
-            "schema-utils": "^3.0.0",
-            "semver": "^7.3.4"
-          }
-        },
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        },
-        "source-map-js": {
-          "version": "0.6.2",
-          "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-          "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
-          "dev": true
-        },
-        "ssri": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.1.tgz",
-          "integrity": "sha512-w+daCzXN89PseTL99MkA+fxJEcU3wfaE/ah0i0lnOlpG1CYLJ2ZjzEry68YBKfLs4JfoTShrTEsJkAZuNZ/stw==",
-          "dev": true,
-          "requires": {
-            "figgy-pudding": "^3.5.1",
-            "minipass": "^3.1.1"
-          },
-          "dependencies": {
-            "figgy-pudding": {
-              "version": "3.5.2",
-              "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-              "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
-              "dev": true
-            }
-          }
-        },
-        "terser-webpack-plugin": {
-          "version": "2.3.8",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
-          "integrity": "sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==",
-          "dev": true,
-          "requires": {
-            "cacache": "^13.0.1",
-            "find-cache-dir": "^3.3.1",
-            "jest-worker": "^25.4.0",
-            "p-limit": "^2.3.0",
-            "schema-utils": "^2.6.6",
-            "serialize-javascript": "^4.0.0",
-            "source-map": "^0.6.1",
-            "terser": "^4.6.12",
-            "webpack-sources": "^1.4.3"
-          },
-          "dependencies": {
-            "schema-utils": {
-              "version": "2.7.1",
-              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-              "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-              "dev": true,
-              "requires": {
-                "@types/json-schema": "^7.0.5",
-                "ajv": "^6.12.4",
-                "ajv-keywords": "^3.5.2"
-              }
-            }
-          }
-        },
-        "url-loader": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-2.3.0.tgz",
-          "integrity": "sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog==",
-          "dev": true,
-          "requires": {
-            "loader-utils": "^1.2.3",
-            "mime": "^2.4.4",
-            "schema-utils": "^2.5.0"
-          },
-          "dependencies": {
-            "loader-utils": {
-              "version": "1.4.2",
-              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-              "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-              "dev": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^1.0.1"
-              }
-            },
-            "mime": {
-              "version": "2.5.2",
-              "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
-              "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
-              "dev": true
-            },
-            "schema-utils": {
-              "version": "2.7.1",
-              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-              "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-              "dev": true,
-              "requires": {
-                "@types/json-schema": "^7.0.5",
-                "ajv": "^6.12.4",
-                "ajv-keywords": "^3.5.2"
-              }
-            }
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
-        }
-      }
-    },
-    "razzle-dev-utils": {
-      "version": "4.0.5",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "chalk": "^4.1.0",
-        "filesize": "^6.1.0",
-        "gzip-size": "^6.0.0",
-        "jest-message-util": "^26.3.0",
-        "react-dev-utils": "^11.0.4",
-        "react-error-overlay": "^6.0.7",
-        "recursive-readdir": "^2.2.2",
-        "resolve": "^1.17.0",
-        "sockjs-client": "~1.4.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "filesize": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.4.0.tgz",
-          "integrity": "sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ==",
-          "dev": true
-        },
-        "gzip-size": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-          "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-          "dev": true,
-          "requires": {
-            "duplexer": "^0.1.2"
-          }
-        }
-      }
-    },
-    "razzle-plugin-scss": {
-      "version": "4.0.5",
-      "dev": true,
-      "requires": {
-        "autoprefixer": "^10.2.3",
-        "css-loader": "^5.0.0",
-        "deepmerge": "^4.2.2",
-        "postcss-load-config": "^3.0.0",
-        "postcss-loader": "^4.2.0",
-        "postcss-scss": "^3.0.4",
-        "resolve-url-loader": "^3.1.2",
-        "sass": "^1.29.0",
-        "sass-loader": "^10.0.3"
-      },
-      "dependencies": {
-        "sass": {
-          "version": "1.35.2",
-          "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
-          "integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
-          "dev": true,
-          "requires": {
-            "chokidar": ">=3.0.0 <4.0.0"
-          }
-        }
-      }
-    },
-    "razzle-plugin-typescript": {
-      "version": "3.4.5",
-      "dev": true,
-      "requires": {
-        "fork-ts-checker-webpack-plugin": "^3.1.1",
-        "razzle-dev-utils": "3.4.5",
-        "ts-loader": "^5.2.1"
-      },
-      "dependencies": {
-        "@jest/console": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
-          "integrity": "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==",
-          "dev": true,
-          "requires": {
-            "@jest/source-map": "^24.9.0",
-            "chalk": "^2.0.1",
-            "slash": "^2.0.0"
-          }
-        },
-        "@jest/source-map": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.9.0.tgz",
-          "integrity": "sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==",
-          "dev": true,
-          "requires": {
-            "callsites": "^3.0.0",
-            "graceful-fs": "^4.1.15",
-            "source-map": "^0.6.0"
-          }
-        },
-        "@jest/test-result": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.9.0.tgz",
-          "integrity": "sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/istanbul-lib-coverage": "^2.0.0"
-          }
-        },
-        "@jest/types": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
-          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^1.1.1",
-            "@types/yargs": "^13.0.0"
-          }
-        },
-        "@nodelib/fs.stat": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
-          "dev": true
-        },
-        "@types/istanbul-reports": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
-          "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "*",
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "@types/stack-utils": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
-          "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
-          "dev": true
-        },
-        "@types/yargs": {
-          "version": "13.0.12",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.12.tgz",
-          "integrity": "sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==",
-          "dev": true,
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
-              "dev": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
-          }
-        },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          }
-        },
-        "browserslist": {
-          "version": "4.8.6",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz",
-          "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001023",
-            "electron-to-chromium": "^1.3.341",
-            "node-releases": "^1.1.47"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            }
-          }
-        },
-        "cli-width": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-          "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-          "dev": true
-        },
-        "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-          "dev": true,
-          "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-              "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-              "dev": true
-            },
-            "string-width": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-              "dev": true,
-              "requires": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        },
-        "cookie": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-          "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
-          "dev": true
-        },
-        "cross-spawn": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "dir-glob": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
-          "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==",
-          "dev": true,
-          "requires": {
-            "arrify": "^1.0.1",
-            "path-type": "^3.0.0"
-          },
-          "dependencies": {
-            "arrify": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-              "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-              "dev": true
-            }
-          }
-        },
-        "emojis-list": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-          "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
-          "dev": true
-        },
-        "fast-glob": {
-          "version": "2.2.7",
-          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
-          "dev": true,
-          "requires": {
-            "@mrmlnc/readdir-enhanced": "^2.2.1",
-            "@nodelib/fs.stat": "^1.1.2",
-            "glob-parent": "^3.1.0",
-            "is-glob": "^4.0.0",
-            "merge2": "^1.2.3",
-            "micromatch": "^3.1.10"
-          },
-          "dependencies": {
-            "@mrmlnc/readdir-enhanced": {
-              "version": "2.2.1",
-              "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-              "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
-              "dev": true,
-              "requires": {
-                "call-me-maybe": "^1.0.1",
-                "glob-to-regexp": "^0.3.0"
-              }
-            }
-          }
-        },
-        "filesize": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
-          "integrity": "sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==",
-          "dev": true
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          }
-        },
-        "fork-ts-checker-webpack-plugin": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz",
-          "integrity": "sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ==",
-          "dev": true,
-          "requires": {
-            "babel-code-frame": "^6.22.0",
-            "chalk": "^2.4.1",
-            "chokidar": "^3.3.0",
-            "micromatch": "^3.1.10",
-            "minimatch": "^3.0.4",
-            "semver": "^5.6.0",
-            "tapable": "^1.0.0",
-            "worker-rpc": "^0.1.0"
-          },
-          "dependencies": {
-            "semver": {
-              "version": "5.7.2",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-              "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-              "dev": true
-            }
-          }
-        },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
-        },
-        "get-caller-file": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-          "dev": true
-        },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-              "dev": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            },
-            "path-dirname": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-              "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
-              "dev": true
-            }
-          }
-        },
-        "globby": {
-          "version": "8.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz",
-          "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==",
-          "dev": true,
-          "requires": {
-            "array-union": "^1.0.1",
-            "dir-glob": "2.0.0",
-            "fast-glob": "^2.0.2",
-            "glob": "^7.1.2",
-            "ignore": "^3.3.5",
-            "pify": "^3.0.0",
-            "slash": "^1.0.0"
-          },
-          "dependencies": {
-            "array-union": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-              "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-              "dev": true,
-              "requires": {
-                "array-uniq": "^1.0.1"
-              }
-            },
-            "slash": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-              "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
-              "dev": true
-            }
-          }
-        },
-        "http-errors": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-          "dev": true,
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.0",
-            "statuses": ">= 1.4.0 < 2"
-          },
-          "dependencies": {
-            "inherits": {
-              "version": "2.0.3",
-              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-              "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-              "dev": true
-            },
-            "setprototypeof": {
-              "version": "1.1.0",
-              "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-              "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-              "dev": true
-            }
-          }
-        },
-        "ignore": {
-          "version": "3.3.10",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
-          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
-          "dev": true
-        },
-        "immer": {
-          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
-          "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==",
-          "dev": true
-        },
-        "inquirer": {
-          "version": "7.0.4",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
-          "integrity": "sha512-Bu5Td5+j11sCkqfqmUTiwv+tWisMtP0L7Q8WrqA2C/BbBhy1YTdFrvjjlrKq8oagA/tLQBski2Gcx/Sqyi2qSQ==",
-          "dev": true,
-          "requires": {
-            "ansi-escapes": "^4.2.1",
-            "chalk": "^2.4.2",
-            "cli-cursor": "^3.1.0",
-            "cli-width": "^2.0.0",
-            "external-editor": "^3.0.3",
-            "figures": "^3.0.0",
-            "lodash": "^4.17.15",
-            "mute-stream": "0.0.8",
-            "run-async": "^2.2.0",
-            "rxjs": "^6.5.3",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^5.1.0",
-            "through": "^2.3.6"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-          "dev": true
-        },
-        "jest-message-util": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz",
-          "integrity": "sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/stack-utils": "^1.0.1",
-            "chalk": "^2.0.1",
-            "micromatch": "^3.1.10",
-            "slash": "^2.0.0",
-            "stack-utils": "^1.0.1"
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "mime": {
-          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "p-map": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-          "dev": true
-        },
-        "path-to-regexp": {
-          "version": "0.1.7",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-          "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
-          "dev": true
-        },
-        "path-type": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.9.7",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-          "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
-          "dev": true
-        },
-        "razzle-dev-utils": {
-          "version": "3.4.5",
-          "resolved": "https://registry.npmjs.org/razzle-dev-utils/-/razzle-dev-utils-3.4.5.tgz",
-          "integrity": "sha512-4aosuS8aJPCq6SwCTH6DQbSKaO1lQf5P0YzJwkdxlzLbjuaP6yP+a4T/ttQ3Jd10LAjTw0ceug03z1guvsZD5A==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "chalk": "3.0.0",
-            "jest-message-util": "^24.9.0",
-            "react-dev-utils": "10.2.0",
-            "react-error-overlay": "^6.0.7",
-            "resolve": "1.17.0",
-            "sockjs-client": "~1.4.0",
-            "strip-ansi": "6.0.0",
-            "webpack-dev-server": "~3.10.3"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-              "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            },
-            "has-flag": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-              "dev": true
-            },
-            "supports-color": {
-              "version": "7.2.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
-          }
-        },
-        "react-dev-utils": {
-          "version": "10.2.0",
-          "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz",
-          "integrity": "sha512-MwrvQW2TFjLblhqpDNeqCXHBkz3G5vc7k4wntgutAJZX4ia3o07eGKo6uYGhUOeJ0hfOxcpJFNFk7+4XCc1S8g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "7.8.3",
-            "address": "1.1.2",
-            "browserslist": "4.8.6",
-            "chalk": "2.4.2",
-            "cross-spawn": "7.0.1",
-            "detect-port-alt": "1.1.6",
-            "escape-string-regexp": "2.0.0",
-            "filesize": "6.0.1",
-            "find-up": "4.1.0",
-            "fork-ts-checker-webpack-plugin": "3.1.1",
-            "global-modules": "2.0.0",
-            "globby": "8.0.2",
-            "gzip-size": "5.1.1",
-            "immer": "1.10.0",
-            "inquirer": "7.0.4",
-            "is-root": "2.1.0",
-            "loader-utils": "1.2.3",
-            "open": "^7.0.2",
-            "pkg-up": "3.1.0",
-            "react-error-overlay": "^6.0.6",
-            "recursive-readdir": "2.2.2",
-            "shell-quote": "1.7.2",
-            "strip-ansi": "6.0.0",
-            "text-table": "0.2.0"
-          },
-          "dependencies": {
-            "@babel/code-frame": {
-              "version": "7.8.3",
-              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-              "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-              "dev": true,
-              "requires": {
-                "@babel/highlight": "^7.8.3"
-              }
-            },
-            "escape-string-regexp": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-              "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-              "dev": true
-            }
-          }
-        },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
-          }
-        },
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==",
-          "dev": true
-        },
-        "resolve": {
-          "version": "1.17.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.6"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          },
-          "dependencies": {
-            "ajv-errors": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-              "dev": true
-            }
-          }
-        },
-        "slash": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-          "dev": true
-        },
-        "sockjs": {
-          "version": "0.3.19",
-          "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
-          "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
-          "dev": true,
-          "requires": {
-            "faye-websocket": "^0.10.0",
-            "uuid": "^3.0.1"
-          },
-          "dependencies": {
-            "faye-websocket": {
-              "version": "0.10.0",
-              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-              "integrity": "sha512-Xhj93RXbMSq8urNCUq4p9l0P6hnySJ/7YNRhYNug0bLOuii7pKO7xQFb5mx9xZXWCar88pLPb805PvUkwrLZpQ==",
-              "dev": true,
-              "requires": {
-                "websocket-driver": ">=0.5.1"
-              }
-            }
-          }
-        },
-        "stack-utils": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.5.tgz",
-          "integrity": "sha512-KZiTzuV3CnSnSvgMRrARVCj+Ht7rMbauGDK0LdVFRGyenwdylpajAp4Q0i6SX8rEmbTpMMf6ryq2gb8pPq2WgQ==",
-          "dev": true,
-          "requires": {
-            "escape-string-regexp": "^2.0.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-              "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-              "dev": true
-            }
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
-          "dev": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
-        },
-        "uuid": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "dev": true
-        },
-        "webpack-dev-server": {
-          "version": "3.10.3",
-          "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz",
-          "integrity": "sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==",
-          "dev": true,
-          "requires": {
-            "ansi-html": "0.0.7",
-            "bonjour": "^3.5.0",
-            "chokidar": "^2.1.8",
-            "compression": "^1.7.4",
-            "connect-history-api-fallback": "^1.6.0",
-            "debug": "^4.1.1",
-            "del": "^4.1.1",
-            "express": "^4.17.1",
-            "html-entities": "^1.2.1",
-            "http-proxy-middleware": "0.19.1",
-            "import-local": "^2.0.0",
-            "internal-ip": "^4.3.0",
-            "ip": "^1.1.5",
-            "is-absolute-url": "^3.0.3",
-            "killable": "^1.0.1",
-            "loglevel": "^1.6.6",
-            "opn": "^5.5.0",
-            "p-retry": "^3.0.1",
-            "portfinder": "^1.0.25",
-            "schema-utils": "^1.0.0",
-            "selfsigned": "^1.10.7",
-            "semver": "^6.3.0",
-            "serve-index": "^1.9.1",
-            "sockjs": "0.3.19",
-            "sockjs-client": "1.4.0",
-            "spdy": "^4.0.1",
-            "strip-ansi": "^3.0.1",
-            "supports-color": "^6.1.0",
-            "url": "^0.11.0",
-            "webpack-dev-middleware": "^3.7.2",
-            "webpack-log": "^2.0.0",
-            "ws": "^6.2.1",
-            "yargs": "12.0.5"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-              "dev": true
-            },
-            "array-union": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-              "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-              "dev": true,
-              "requires": {
-                "array-uniq": "^1.0.1"
-              }
-            },
-            "async-each": {
-              "version": "1.0.3",
-              "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-              "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-              "dev": true
-            },
-            "bonjour": {
-              "version": "3.5.0",
-              "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-              "integrity": "sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==",
-              "dev": true,
-              "requires": {
-                "array-flatten": "^2.1.0",
-                "deep-equal": "^1.0.1",
-                "dns-equal": "^1.0.0",
-                "dns-txt": "^2.0.2",
-                "multicast-dns": "^6.0.1",
-                "multicast-dns-service-types": "^1.1.0"
-              }
-            },
-            "chokidar": {
-              "version": "2.1.8",
-              "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-              "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-              "dev": true,
-              "requires": {
-                "anymatch": "^2.0.0",
-                "async-each": "^1.0.1",
-                "braces": "^2.3.2",
-                "fsevents": "^1.2.7",
-                "glob-parent": "^3.1.0",
-                "inherits": "^2.0.3",
-                "is-binary-path": "^1.0.0",
-                "is-glob": "^4.0.0",
-                "normalize-path": "^3.0.0",
-                "path-is-absolute": "^1.0.0",
-                "readdirp": "^2.2.1",
-                "upath": "^1.1.1"
-              }
-            },
-            "compression": {
-              "version": "1.7.4",
-              "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-              "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-              "dev": true,
-              "requires": {
-                "accepts": "~1.3.5",
-                "bytes": "3.0.0",
-                "compressible": "~2.0.16",
-                "debug": "2.6.9",
-                "on-headers": "~1.0.2",
-                "safe-buffer": "5.1.2",
-                "vary": "~1.1.2"
-              },
-              "dependencies": {
-                "debug": {
-                  "version": "2.6.9",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-                  "dev": true,
-                  "requires": {
-                    "ms": "2.0.0"
-                  }
-                }
-              }
-            },
-            "connect-history-api-fallback": {
-              "version": "1.6.0",
-              "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-              "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-              "dev": true
-            },
-            "del": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-              "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-              "dev": true,
-              "requires": {
-                "@types/glob": "^7.1.1",
-                "globby": "^6.1.0",
-                "is-path-cwd": "^2.0.0",
-                "is-path-in-cwd": "^2.0.0",
-                "p-map": "^2.0.0",
-                "pify": "^4.0.1",
-                "rimraf": "^2.6.3"
-              }
-            },
-            "express": {
-              "version": "4.17.3",
-              "resolved": "https://registry.npmjs.org/express/-/express-4.17.3.tgz",
-              "integrity": "sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==",
-              "dev": true,
-              "requires": {
-                "accepts": "~1.3.8",
-                "array-flatten": "1.1.1",
-                "body-parser": "1.19.2",
-                "content-disposition": "0.5.4",
-                "content-type": "~1.0.4",
-                "cookie": "0.4.2",
-                "cookie-signature": "1.0.6",
-                "debug": "2.6.9",
-                "depd": "~1.1.2",
-                "encodeurl": "~1.0.2",
-                "escape-html": "~1.0.3",
-                "etag": "~1.8.1",
-                "finalhandler": "~1.1.2",
-                "fresh": "0.5.2",
-                "merge-descriptors": "1.0.1",
-                "methods": "~1.1.2",
-                "on-finished": "~2.3.0",
-                "parseurl": "~1.3.3",
-                "path-to-regexp": "0.1.7",
-                "proxy-addr": "~2.0.7",
-                "qs": "6.9.7",
-                "range-parser": "~1.2.1",
-                "safe-buffer": "5.2.1",
-                "send": "0.17.2",
-                "serve-static": "1.14.2",
-                "setprototypeof": "1.2.0",
-                "statuses": "~1.5.0",
-                "type-is": "~1.6.18",
-                "utils-merge": "1.0.1",
-                "vary": "~1.1.2"
-              },
-              "dependencies": {
-                "array-flatten": {
-                  "version": "1.1.1",
-                  "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-                  "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-                  "dev": true
-                },
-                "debug": {
-                  "version": "2.6.9",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-                  "dev": true,
-                  "requires": {
-                    "ms": "2.0.0"
-                  }
-                },
-                "safe-buffer": {
-                  "version": "5.2.1",
-                  "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-                  "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-                  "dev": true
-                }
-              }
-            },
-            "globby": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-              "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-              "dev": true,
-              "requires": {
-                "array-union": "^1.0.1",
-                "glob": "^7.0.3",
-                "object-assign": "^4.0.1",
-                "pify": "^2.0.0",
-                "pinkie-promise": "^2.0.0"
-              },
-              "dependencies": {
-                "pify": {
-                  "version": "2.3.0",
-                  "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-                  "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-                  "dev": true
-                }
-              }
-            },
-            "http-proxy-middleware": {
-              "version": "0.19.1",
-              "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-              "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
-              "dev": true,
-              "requires": {
-                "http-proxy": "^1.17.0",
-                "is-glob": "^4.0.0",
-                "lodash": "^4.17.11",
-                "micromatch": "^3.1.10"
-              }
-            },
-            "import-local": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
-              "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
-              "dev": true,
-              "requires": {
-                "pkg-dir": "^3.0.0",
-                "resolve-cwd": "^2.0.0"
-              }
-            },
-            "internal-ip": {
-              "version": "4.3.0",
-              "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
-              "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
-              "dev": true,
-              "requires": {
-                "default-gateway": "^4.2.0",
-                "ipaddr.js": "^1.9.0"
-              }
-            },
-            "ip": {
-              "version": "1.1.8",
-              "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-              "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
-              "dev": true
-            },
-            "is-absolute-url": {
-              "version": "3.0.3",
-              "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-              "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-              "dev": true
-            },
-            "killable": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-              "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-              "dev": true
-            },
-            "loglevel": {
-              "version": "1.7.1",
-              "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
-              "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
-              "dev": true
-            },
-            "opn": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
-              "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
-              "dev": true,
-              "requires": {
-                "is-wsl": "^1.1.0"
-              }
-            },
-            "p-retry": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
-              "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
-              "dev": true,
-              "requires": {
-                "retry": "^0.12.0"
-              }
-            },
-            "pify": {
-              "version": "4.0.1",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-              "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-              "dev": true
-            },
-            "portfinder": {
-              "version": "1.0.28",
-              "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-              "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-              "dev": true,
-              "requires": {
-                "async": "^2.6.2",
-                "debug": "^3.1.1",
-                "mkdirp": "^0.5.5"
-              },
-              "dependencies": {
-                "debug": {
-                  "version": "3.2.7",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-                  "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-                  "dev": true,
-                  "requires": {
-                    "ms": "^2.1.1"
-                  }
-                },
-                "ms": {
-                  "version": "2.1.3",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-                  "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-                  "dev": true
-                }
-              }
-            },
-            "selfsigned": {
-              "version": "1.10.11",
-              "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-              "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
-              "dev": true,
-              "requires": {
-                "node-forge": "^0.10.0"
-              }
-            },
-            "serve-index": {
-              "version": "1.9.1",
-              "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-              "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-              "dev": true,
-              "requires": {
-                "accepts": "~1.3.4",
-                "batch": "0.6.1",
-                "debug": "2.6.9",
-                "escape-html": "~1.0.3",
-                "http-errors": "~1.6.2",
-                "mime-types": "~2.1.17",
-                "parseurl": "~1.3.2"
-              },
-              "dependencies": {
-                "debug": {
-                  "version": "2.6.9",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-                  "dev": true,
-                  "requires": {
-                    "ms": "2.0.0"
-                  }
-                }
-              }
-            },
-            "spdy": {
-              "version": "4.0.2",
-              "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-              "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-              "dev": true,
-              "requires": {
-                "debug": "^4.1.0",
-                "handle-thing": "^2.0.0",
-                "http-deceiver": "^1.2.7",
-                "select-hose": "^2.0.0",
-                "spdy-transport": "^3.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-              "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^2.0.0"
-              }
-            },
-            "supports-color": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            },
-            "upath": {
-              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-              "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-              "dev": true
-            },
-            "webpack-dev-middleware": {
-              "version": "3.7.3",
-              "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
-              "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
-              "dev": true,
-              "requires": {
-                "memory-fs": "^0.4.1",
-                "mime": "^2.4.4",
-                "mkdirp": "^0.5.1",
-                "range-parser": "^1.2.1",
-                "webpack-log": "^2.0.0"
-              }
-            },
-            "webpack-log": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
-              "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
-              "dev": true,
-              "requires": {
-                "ansi-colors": "^3.0.0",
-                "uuid": "^3.3.2"
-              }
-            },
-            "ws": {
-              "version": "6.2.2",
-              "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-              "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
-              "dev": true,
-              "requires": {
-                "async-limiter": "~1.0.0"
-              }
-            }
-          }
-        },
-        "wrap-ansi": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-          "integrity": "sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==",
-          "dev": true,
-          "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-              "dev": true
-            },
-            "code-point-at": {
-              "version": "1.1.0",
-              "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-              "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
-              "dev": true
-            },
-            "is-fullwidth-code-point": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-              "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
-              "dev": true,
-              "requires": {
-                "number-is-nan": "^1.0.0"
-              }
-            },
-            "number-is-nan": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-              "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
-              "dev": true
-            },
-            "string-width": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-              "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
-              "dev": true,
-              "requires": {
-                "code-point-at": "^1.0.0",
-                "is-fullwidth-code-point": "^1.0.0",
-                "strip-ansi": "^3.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-              "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^2.0.0"
-              }
-            }
-          }
-        },
-        "yargs": {
-          "version": "12.0.5",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^4.0.0",
-            "decamelize": "^1.2.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^3.0.0",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^3.2.1 || ^4.0.0",
-            "yargs-parser": "^11.1.1"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-              "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-              "dev": true
-            },
-            "find-up": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-              "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-              "dev": true,
-              "requires": {
-                "locate-path": "^3.0.0"
-              }
-            },
-            "os-locale": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-              "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-              "dev": true,
-              "requires": {
-                "execa": "^1.0.0",
-                "lcid": "^2.0.0",
-                "mem": "^4.0.0"
-              }
-            },
-            "string-width": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-              "dev": true,
-              "requires": {
-                "is-fullwidth-code-point": "^2.0.0",
-                "strip-ansi": "^4.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        },
-        "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
-    "razzle-start-server-webpack-plugin": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.0.5.tgz",
-      "integrity": "sha512-IrsdXUsNdPYe4enEQseG/rFeggkVTvzopjICJxCxx/bco5pqcAZUdJ02ntuPPqa3f9KOr9mYFDKgBo6gh96UiQ==",
-      "dev": true
-    },
-    "react": {
-      "version": "16.14.0",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "react-async-script": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
-      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
-      "requires": {
-        "hoist-non-react-statics": "^3.3.0",
-        "prop-types": "^15.5.0"
-      }
-    },
-    "react-beautiful-dnd": {
-      "version": "13.1.0",
-      "requires": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      },
-      "dependencies": {
-        "react-redux": {
-          "version": "7.2.4",
-          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
-          "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
-          "requires": {
-            "@babel/runtime": "^7.12.1",
-            "@types/react-redux": "^7.1.16",
-            "hoist-non-react-statics": "^3.3.2",
-            "loose-envify": "^1.4.0",
-            "prop-types": "^15.7.2",
-            "react-is": "^16.13.1"
-          }
-        },
-        "redux": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
-          "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
-          "requires": {
-            "@babel/runtime": "^7.9.2"
-          }
-        }
-      }
-    },
-    "react-bootstrap": {
-      "version": "1.6.1",
-      "requires": {
-        "@babel/runtime": "^7.14.0",
-        "@restart/context": "^2.1.4",
-        "@restart/hooks": "^0.3.26",
-        "@types/invariant": "^2.2.33",
-        "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.14.8",
-        "@types/react-transition-group": "^4.4.1",
-        "@types/warning": "^3.0.0",
-        "classnames": "^2.3.1",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.7.2",
-        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.1",
-        "react-transition-group": "^4.4.1",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "react-datetime": {
-      "version": "3.0.4",
-      "requires": {
-        "prop-types": "^15.5.7"
-      }
-    },
-    "react-dev-utils": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
-      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "7.10.4",
-        "address": "1.1.2",
-        "browserslist": "4.14.2",
-        "chalk": "2.4.2",
-        "cross-spawn": "7.0.3",
-        "detect-port-alt": "1.1.6",
-        "escape-string-regexp": "2.0.0",
-        "filesize": "6.1.0",
-        "find-up": "4.1.0",
-        "fork-ts-checker-webpack-plugin": "4.1.6",
-        "global-modules": "2.0.0",
-        "globby": "11.0.1",
-        "gzip-size": "5.1.1",
-        "immer": "8.0.1",
-        "is-root": "2.1.0",
-        "loader-utils": "2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "3.1.0",
-        "prompts": "2.4.0",
-        "react-error-overlay": "^6.0.9",
-        "recursive-readdir": "2.2.2",
-        "shell-quote": "1.7.2",
-        "strip-ansi": "6.0.0",
-        "text-table": "0.2.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "browserslist": {
-          "version": "4.14.2",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001125",
-            "electron-to-chromium": "^1.3.564",
-            "escalade": "^3.0.2",
-            "node-releases": "^1.1.61"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-              "dev": true
-            }
-          }
-        },
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-          "dev": true
-        },
-        "fork-ts-checker-webpack-plugin": {
-          "version": "4.1.6",
-          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-          "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.5.5",
-            "chalk": "^2.4.1",
-            "micromatch": "^3.1.10",
-            "minimatch": "^3.0.4",
-            "semver": "^5.6.0",
-            "tapable": "^1.0.0",
-            "worker-rpc": "^0.1.0"
-          }
-        },
-        "globby": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-          "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
-          "dev": true,
-          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.1.1",
-            "ignore": "^5.1.4",
-            "merge2": "^1.3.0",
-            "slash": "^3.0.0"
-          }
-        },
-        "prompts": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
-          "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
-          "dev": true,
-          "requires": {
-            "kleur": "^3.0.3",
-            "sisteransi": "^1.0.5"
-          }
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "react-dom": {
-      "version": "16.14.0",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      }
-    },
-    "react-draggable": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
-      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
-      "requires": {
-        "clsx": "^1.1.1",
-        "prop-types": "^15.8.1"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.8.1",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.13.1"
-          }
-        }
-      }
-    },
-    "react-error-overlay": {
-      "version": "6.0.9",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
-      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
-      "dev": true
-    },
-    "react-google-recaptcha": {
-      "version": "2.1.0",
-      "requires": {
-        "prop-types": "^15.5.0",
-        "react-async-script": "^1.1.1"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.8.1",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.13.1"
-          }
-        }
-      }
-    },
-    "react-grid-layout": {
-      "version": "1.3.4",
-      "requires": {
-        "clsx": "^1.1.1",
-        "lodash.isequal": "^4.0.0",
-        "prop-types": "^15.8.1",
-        "react-draggable": "^4.0.0",
-        "react-resizable": "^3.0.4"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.8.1",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.13.1"
-          }
-        }
-      }
-    },
-    "react-helmet": {
-      "version": "6.1.0",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      },
-      "dependencies": {
-        "react-fast-compare": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-        }
-      }
-    },
-    "react-highcharts": {
-      "version": "16.1.0",
-      "requires": {
-        "highcharts": "^6.0.4"
-      }
-    },
-    "react-img-webp": {
-      "version": "2.0.2"
-    },
-    "react-in-viewport": {
-      "version": "1.0.0-alpha.30",
-      "requires": {
-        "hoist-non-react-statics": "^3.0.0"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-native-crypto-js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",
-      "integrity": "sha512-FNbLuG/HAdapQoybeZSoes1PWdOj0w242gb+e1R0hicf3Gyj/Mf8M9NaED2AnXVOX01b2FXomwUiw1xP1K+8sA=="
-    },
-    "react-overlays": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
-      "integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
-      "requires": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.8.6",
-        "@restart/hooks": "^0.3.26",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "react-popper": {
-      "version": "2.3.0",
-      "requires": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      },
-      "dependencies": {
-        "react-fast-compare": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-          "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-        }
-      }
-    },
-    "react-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/react-property/-/react-property-1.0.1.tgz",
-      "integrity": "sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ=="
-    },
-    "react-refresh": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
-      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
-      "dev": true
-    },
-    "react-resizable": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
-      "integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
-      "requires": {
-        "prop-types": "15.x",
-        "react-draggable": "^4.0.3"
-      }
-    },
-    "react-resize-detector": {
-      "version": "7.1.2",
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
-    "react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "history": {
-          "version": "4.10.1",
-          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-          "requires": {
-            "@babel/runtime": "^7.1.2",
-            "loose-envify": "^1.2.0",
-            "resolve-pathname": "^3.0.0",
-            "tiny-invariant": "^1.0.2",
-            "tiny-warning": "^1.0.0",
-            "value-equal": "^1.0.1"
-          }
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-        },
-        "path-to-regexp": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-          "requires": {
-            "isarray": "0.0.1"
-          }
-        }
-      }
-    },
-    "react-router-dom": {
-      "version": "5.2.0",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "history": {
-          "version": "4.10.1",
-          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-          "requires": {
-            "@babel/runtime": "^7.1.2",
-            "loose-envify": "^1.2.0",
-            "resolve-pathname": "^3.0.0",
-            "tiny-invariant": "^1.0.2",
-            "tiny-warning": "^1.0.0",
-            "value-equal": "^1.0.1"
-          }
-        }
-      }
-    },
-    "react-side-effect": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
-    },
-    "react-sortablejs": {
-      "version": "2.1.0",
-      "requires": {
-        "classnames": "^2.2.6",
-        "tiny-invariant": "^1.1.0"
-      }
-    },
-    "react-test-renderer": {
-      "version": "16.14.0",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.8.6",
-        "scheduler": "^0.19.1"
-      }
-    },
-    "react-textarea-autosize": {
-      "version": "8.4.1",
-      "requires": {
-        "@babel/runtime": "^7.20.13",
-        "use-composed-ref": "^1.3.0",
-        "use-latest": "^1.2.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.21.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-          "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
-          "requires": {
-            "regenerator-runtime": "^0.13.11"
-          },
-          "dependencies": {
-            "regenerator-runtime": {
-              "version": "0.13.11",
-              "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-              "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-            }
-          }
-        }
-      }
-    },
-    "react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "react-twitter-embed": {
-      "version": "4.0.4",
-      "requires": {
-        "scriptjs": "^2.5.9"
-      }
-    },
-    "react-universal-interface": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
-      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw=="
-    },
-    "react-use": {
-      "version": "17.4.0",
-      "requires": {
-        "@types/js-cookie": "^2.2.6",
-        "@xobotyi/scrollbar-width": "^1.9.5",
-        "copy-to-clipboard": "^3.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-shallow-equal": "^1.0.0",
-        "js-cookie": "^2.2.1",
-        "nano-css": "^5.3.1",
-        "react-universal-interface": "^0.6.2",
-        "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.1.0",
-        "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^3.0.1",
-        "ts-easing": "^0.2.0",
-        "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "js-cookie": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-          "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-        }
-      }
-    },
-    "react-virtualized": {
-      "version": "9.22.3",
-      "requires": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.20.7",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-          "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
-          "requires": {
-            "regenerator-runtime": "^0.13.11"
-          },
-          "dependencies": {
-            "regenerator-runtime": {
-              "version": "0.13.11",
-              "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-              "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-            }
-          }
-        }
-      }
-    },
-    "read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
-      "requires": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "dev": true
-        }
-      }
-    },
-    "read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "dev": true,
-      "requires": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
-      }
-    },
-    "readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
-      }
-    },
-    "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "requires": {
-        "picomatch": "^2.2.1"
-      }
-    },
-    "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
-      "dev": true,
-      "requires": {
-        "minimatch": "3.0.4"
-      }
-    },
-    "redux-thunk": {
-      "version": "2.3.0"
-    },
-    "regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
-    },
-    "regenerate-unicode-properties": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
-      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
-      "dev": true,
-      "requires": {
-        "regenerate": "^1.4.2"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
-    },
-    "regenerator-transform": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
-      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.8.4"
-      }
-    },
-    "regex-not": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^3.0.2",
-        "safe-regex": "^1.1.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-          "dev": true,
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "regex-parser": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
-      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
-      "dev": true
-    },
-    "regexp.prototype.flags": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
-      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "functions-have-names": "^1.2.3"
-      }
-    },
-    "regexpu-core": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
-      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
-      "dev": true,
-      "requires": {
-        "@babel/regjsgen": "^0.8.0",
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.1.0",
-        "regjsparser": "^0.9.1",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.1.0"
-      }
-    },
-    "regjsparser": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
-      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
-      "dev": true,
-      "requires": {
-        "jsesc": "~0.5.0"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
-          "dev": true
-        }
-      }
-    },
-    "relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-      "dev": true
-    },
-    "remarkable": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.4.tgz",
-      "integrity": "sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==",
-      "requires": {
-        "argparse": "^1.0.10",
-        "autolinker": "~0.28.0"
-      }
-    },
-    "remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
-    },
-    "remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
-      "dev": true
-    },
-    "renderkid": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
-      "dev": true,
-      "requires": {
-        "css-select": "^4.1.3",
-        "dom-converter": "^0.2.0",
-        "htmlparser2": "^6.1.0",
-        "lodash": "^4.17.21",
-        "strip-ansi": "^3.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        }
-      }
-    },
-    "repeat-element": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
-      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
-      "dev": true
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
-      "dev": true
-    },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
-    },
-    "require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-    },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-    },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
-    "resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dev": true,
-      "requires": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      }
-    },
-    "resolve-cwd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-      "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==",
-      "dev": true,
-      "requires": {
-        "resolve-from": "^3.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
-          "dev": true
-        }
-      }
-    },
-    "resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true
-    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
-    "resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
-      "dev": true
-    },
-    "resolve-url-loader": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz",
-      "integrity": "sha512-D3sQ04o0eeQEySLrcz4DsX3saHfsr8/N6tfhblxgZKXxMT2Louargg12oGNfoTRLV09GXhVUe5/qgA5vdgNigg==",
-      "dev": true,
-      "requires": {
-        "adjust-sourcemap-loader": "3.0.0",
-        "camelcase": "5.3.1",
-        "compose-function": "3.0.3",
-        "convert-source-map": "1.7.0",
-        "es6-iterator": "2.0.3",
-        "loader-utils": "1.2.3",
-        "postcss": "7.0.36",
-        "rework": "1.0.1",
-        "rework-visit": "1.0.0",
-        "source-map": "0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "convert-source-map": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-          "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.1"
-          }
-        },
-        "emojis-list": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-          "integrity": "sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "postcss": {
-          "version": "7.0.36",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
-          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
-      "requires": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
-    },
-    "retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="
-    },
-    "reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
-    },
-    "rework": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz",
-      "integrity": "sha512-eEjL8FdkdsxApd0yWVZgBGzfCQiT8yqSc2H1p4jpZpQdtz7ohETiDMoje5PlM8I9WgkqkreVxFUKYOiJdVWDXw==",
-      "dev": true,
-      "requires": {
-        "convert-source-map": "^0.3.3",
-        "css": "^2.0.0"
-      },
-      "dependencies": {
-        "convert-source-map": {
-          "version": "0.3.5",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
-          "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg==",
-          "dev": true
-        }
-      }
-    },
-    "rework-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rework-visit/-/rework-visit-1.0.0.tgz",
-      "integrity": "sha512-W6V2fix7nCLUYX1v6eGPrBOZlc03/faqzP4sUxMAJMBMOPYhfV/RyLegTufn5gJKaOITyi+gvf0LXDZ9NzkHnQ==",
-      "dev": true
-    },
-    "rfdc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
-      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
-      "dev": true
-    },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==",
-      "dev": true
-    },
-    "rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.3"
-      }
-    },
-    "ripemd160": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
-      "requires": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1"
-      }
-    },
-    "rss": {
-      "version": "1.2.2",
-      "requires": {
-        "mime-types": "2.1.13",
-        "xml": "1.0.1"
-      },
-      "dependencies": {
-        "mime-db": {
-          "version": "1.25.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.25.0.tgz",
-          "integrity": "sha512-5k547tI4Cy+Lddr/hdjNbBEWBwSl8EBc5aSdKvedav8DReADgWJzcYiktaRIw3GtGC1jjwldXtTzvqJZmtvC7w=="
-        },
-        "mime-types": {
-          "version": "2.1.13",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.13.tgz",
-          "integrity": "sha512-ryBDp1Z/6X90UvjUK3RksH0IBPM137T7cmg4OgD5wQBojlAiUwuok0QeELkim/72EtcYuNlmbkrcGuxj3Kl0YQ==",
-          "requires": {
-            "mime-db": "~1.25.0"
-          }
-        }
-      }
-    },
-    "rsvp": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-      "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
-      "dev": true
-    },
-    "rtl-css-js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
-      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
-      "requires": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
-    "run-async": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-      "dev": true
-    },
-    "run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "requires": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "run-queue": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1"
-      }
-    },
-    "rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
-    },
-    "sade": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
-      "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
-      "dev": true,
-      "requires": {
-        "mri": "^1.1.0"
-      }
-    },
-    "safe-array-concat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
-      "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "has-symbols": "^1.0.3",
-        "isarray": "^2.0.5"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-          "dev": true
-        }
-      }
-    },
-    "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-    },
-    "safe-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
-      "dev": true,
-      "requires": {
-        "ret": "~0.1.10"
-      }
-    },
-    "safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
-        "is-regex": "^1.1.4"
-      },
-      "dependencies": {
-        "is-regex": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-          "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-tostringtag": "^1.0.0"
-          }
-        }
-      }
-    },
-    "safe-stable-stringify": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
-      "integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g=="
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "sane": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
-      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
-      "dev": true,
-      "requires": {
-        "@cnakazawa/watch": "^1.0.3",
-        "anymatch": "^2.0.0",
-        "capture-exit": "^2.0.0",
-        "exec-sh": "^0.3.2",
-        "execa": "^1.0.0",
-        "fb-watchman": "^2.0.0",
-        "micromatch": "^3.1.4",
-        "minimist": "^1.1.1",
-        "walker": "~1.0.5"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          }
-        },
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
-          "dev": true,
-          "requires": {
-            "remove-trailing-separator": "^1.0.1"
-          }
-        }
-      }
-    },
-    "sass": {
-      "version": "1.56.2",
-      "requires": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "dependencies": {
-        "immutable": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
-          "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
-        }
-      }
-    },
-    "sass-loader": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
-      "integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
-      "dev": true,
-      "requires": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "dev": true,
-      "requires": {
-        "xmlchars": "^2.2.0"
-      }
-    },
-    "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "schema-utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-      "dev": true,
-      "requires": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      }
-    },
-    "screenfull": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
-      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
-    },
-    "scriptjs": {
-      "version": "2.5.9",
-      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
-      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
-    },
-    "seamless-immutable": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
-      "integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
-      "optional": true
-    },
-    "secp256k1": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-3.8.0.tgz",
-      "integrity": "sha512-k5ke5avRZbtl9Tqx/SA7CbY3NF6Ro+Sj9cZxezFzuBlLDmyqPiL8hJJ+EmzD8Ig4LUDByHJ3/iPOVoRixs/hmw==",
-      "requires": {
-        "bindings": "^1.5.0",
-        "bip66": "^1.1.5",
-        "bn.js": "^4.11.8",
-        "create-hash": "^1.2.0",
-        "drbg.js": "^1.0.1",
-        "elliptic": "^6.5.2",
-        "nan": "^2.14.0",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
-      "dev": true
-    },
-    "selfsigned": {
-      "version": "1.10.14",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
-      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
-      "dev": true,
-      "requires": {
-        "node-forge": "^0.10.0"
-      }
-    },
-    "semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true
-    },
-    "send": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "1.8.1",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
-    "serialize-javascript": {
-      "version": "3.1.0",
-      "requires": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "http-errors": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-          "dev": true,
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.0",
-            "statuses": ">= 1.4.0 < 2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "setprototypeof": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-          "dev": true
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
-      "dev": true,
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.2"
-      }
-    },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
-    },
-    "set-harmonic-interval": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
-      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
-    },
-    "set-value": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
-      }
-    },
-    "setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
-    },
-    "setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true
-    },
-    "sha.js": {
-      "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "requires": {
-        "shebang-regex": "^3.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
-    },
-    "shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-      "dev": true
-    },
-    "shellwords": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
-      "dev": true,
-      "optional": true
-    },
-    "side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "requires": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
-      }
-    },
-    "signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
-    },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
-    "sirv": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
-      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
-      "dev": true,
-      "requires": {
-        "@polka/url": "^1.0.0-next.20",
-        "mrmime": "^1.0.0",
-        "totalist": "^1.0.0"
-      }
-    },
-    "sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "dev": true
-    },
-    "slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true
-    },
-    "slice-ansi": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
-      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^6.0.0",
-        "is-fullwidth-code-point": "^4.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
-          "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
-          "dev": true
-        }
-      }
-    },
-    "snapdragon": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "dev": true,
-      "requires": {
-        "base": "^0.11.1",
-        "debug": "^2.2.0",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "map-cache": "^0.2.2",
-        "source-map": "^0.5.6",
-        "source-map-resolve": "^0.5.0",
-        "use": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-          "dev": true
-        }
-      }
-    },
-    "snapdragon-node": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "dev": true,
-      "requires": {
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.0",
-        "snapdragon-util": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        }
-      }
-    },
-    "snapdragon-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.2.0"
-      }
-    },
-    "sockjs": {
-      "version": "0.3.20",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
-      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
-      "dev": true,
-      "requires": {
-        "faye-websocket": "^0.10.0",
-        "uuid": "^3.4.0",
-        "websocket-driver": "0.6.5"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "dev": true
-        },
-        "websocket-driver": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
-          "integrity": "sha512-oBx6ZM1Gs5q2jwZuSN/Qxyy/fbgomV8+vqsmipaPKB/74hjHlKuM07jNmRhn4qa2AdUwsgxrltq+gaPsHgcl0Q==",
-          "dev": true,
-          "requires": {
-            "websocket-extensions": ">=0.1.1"
-          }
-        }
-      }
-    },
-    "sockjs-client": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz",
-      "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.2.5",
-        "eventsource": "^1.0.7",
-        "faye-websocket": "~0.11.1",
-        "inherits": "^2.0.3",
-        "json3": "^3.3.2",
-        "url-parse": "^1.4.3"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "faye-websocket": {
-          "version": "0.11.4",
-          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-          "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-          "dev": true,
-          "requires": {
-            "websocket-driver": ">=0.5.1"
-          }
-        }
-      }
-    },
-    "sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==",
-      "dev": true,
-      "requires": {
-        "is-plain-obj": "^1.0.0"
-      }
-    },
-    "sortablejs": {
-      "version": "1.14.0"
-    },
-    "source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
-    },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-    },
-    "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
-    },
-    "source-map-resolve": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "dev": true,
-      "requires": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
-      }
-    },
-    "source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "source-map-url": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
-      "dev": true
-    },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
-    "spdx-correct": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
-      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
-      "dev": true,
-      "requires": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "dev": true
-    },
-    "spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "dev": true,
-      "requires": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-license-ids": {
-      "version": "3.0.13",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
-      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
-      "dev": true
-    },
-    "spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      }
-    },
-    "spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "speakingurl": {
-      "version": "14.0.1"
-    },
-    "split": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
-      "dev": true,
-      "requires": {
-        "through": "2"
-      }
-    },
-    "split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
-    },
-    "split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^3.0.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-          "dev": true,
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
-    },
-    "ssri": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.1.1"
-      }
-    },
-    "stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
-    },
-    "stack-generator": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
-      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
-      "requires": {
-        "stackframe": "^1.3.4"
-      }
-    },
-    "stack-utils": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-          "dev": true
-        }
-      }
-    },
-    "stackframe": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
-    },
-    "stacktrace-gps": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
-      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
-      "requires": {
-        "source-map": "0.5.6",
-        "stackframe": "^1.3.4"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.6",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-          "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA=="
-        }
-      }
-    },
-    "stacktrace-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
-      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
-      "requires": {
-        "error-stack-parser": "^2.0.6",
-        "stack-generator": "^2.0.5",
-        "stacktrace-gps": "^3.0.4"
-      }
-    },
-    "static-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
-      "dev": true,
-      "requires": {
-        "define-property": "^0.2.5",
-        "object-copy": "^0.1.0"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "dev": true
-    },
-    "std-env": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-2.3.1.tgz",
-      "integrity": "sha512-eOsoKTWnr6C8aWrqJJ2KAReXoa7Vn5Ywyw6uCXgA/xDhxPoaIsBa5aNJmISY04dLwXPBnDHW4diGM7Sn5K4R/g==",
-      "dev": true,
-      "requires": {
-        "ci-info": "^3.1.1"
-      },
-      "dependencies": {
-        "ci-info": {
-          "version": "3.8.0",
-          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
-          "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
-          "dev": true
-        }
-      }
-    },
-    "stream-browserify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
-      "dev": true,
-      "requires": {
-        "inherits": "~2.0.1",
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
-      "dev": true,
-      "requires": {
-        "duplexer": "~0.1.1"
-      }
-    },
-    "stream-each": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "stream-http": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
-      "dev": true,
-      "requires": {
-        "builtin-status-codes": "^3.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.3.6",
-        "to-arraybuffer": "^1.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "stream-parser": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
-      "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
-      "requires": {
-        "debug": "2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "stream-shift": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
-      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
-      "dev": true
-    },
-    "strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
-    },
-    "string-argv": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
-      "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
-      "dev": true
-    },
-    "string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
-      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
-      "dev": true
-    },
-    "string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dev": true,
-      "requires": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "string.prototype.trim": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
-      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "string.prototype.trimend": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
-      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "string.prototype.trimstart": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
-      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      }
-    },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "requires": {
-        "ansi-regex": "^5.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-        }
-      }
-    },
-    "strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-      "dev": true
-    },
-    "strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
-      "dev": true
-    },
-    "strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true
-    },
-    "style-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      }
-    },
-    "style-to-js": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.0.tgz",
-      "integrity": "sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==",
-      "requires": {
-        "style-to-object": "0.3.0"
-      }
-    },
-    "style-to-object": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
-      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
-      "requires": {
-        "inline-style-parser": "0.1.1"
-      }
-    },
-    "stylehacks": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
-      "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "postcss": "^7.0.0",
-        "postcss-selector-parser": "^3.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "dev": true,
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "postcss-selector-parser": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
-          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
-          "dev": true,
-          "requires": {
-            "dot-prop": "^5.2.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
-      }
-    },
-    "stylis": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
-      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
-    },
-    "superjson": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
-      "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
-      "requires": {
-        "copy-anything": "^3.0.2"
-      }
-    },
-    "supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "requires": {
-        "has-flag": "^4.0.0"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        }
-      }
-    },
-    "supports-hyperlinks": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
-      "dev": true,
-      "requires": {
-        "has-flag": "^4.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        }
-      }
-    },
-    "svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "css-select": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-          "dev": true,
-          "requires": {
-            "boolbase": "^1.0.0",
-            "css-what": "^3.2.1",
-            "domutils": "^1.7.0",
-            "nth-check": "^1.0.2"
-          }
-        },
-        "css-tree": {
-          "version": "1.0.0-alpha.37",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-          "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
-          "dev": true,
-          "requires": {
-            "mdn-data": "2.0.4",
-            "source-map": "^0.6.1"
-          }
-        },
-        "css-what": {
-          "version": "3.4.2",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
-          "dev": true
-        },
-        "dom-serializer": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "entities": "^2.0.0"
-          },
-          "dependencies": {
-            "domelementtype": {
-              "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-              "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-              "dev": true
-            }
-          }
-        },
-        "domelementtype": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-          "dev": true
-        },
-        "domutils": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "0",
-            "domelementtype": "1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-          "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
-          "dev": true
-        },
-        "nth-check": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-          "dev": true,
-          "requires": {
-            "boolbase": "~1.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
-    "symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
-    },
-    "tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-      "dev": true
-    },
-    "tar": {
-      "version": "6.1.15",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
-      "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==",
-      "dev": true,
-      "requires": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "dependencies": {
-        "chownr": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-          "dev": true
-        },
-        "minipass": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-          "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        }
-      }
-    },
-    "terminal-link": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "supports-hyperlinks": "^2.0.0"
-      }
-    },
-    "terminate": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/terminate/-/terminate-2.2.1.tgz",
-      "integrity": "sha512-FPdUfP/UCw+rtEfT3bzqhHTQr5papNaiUXkJXA6jSBiHgZLh0693EpY1Sebd0rc4PNgdE2Ir+oNqiL5ugv3e0A==",
-      "dev": true,
-      "requires": {
-        "ps-tree": "^1.2.0"
-      }
-    },
-    "terser": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
-      "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
-      "dev": true,
-      "requires": {
-        "commander": "^2.20.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.12"
-      }
-    },
-    "terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-      "dev": true,
-      "requires": {
-        "cacache": "^12.0.2",
-        "find-cache-dir": "^2.1.0",
-        "is-wsl": "^1.1.0",
-        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^4.0.0",
-        "source-map": "^0.6.1",
-        "terser": "^4.1.2",
-        "webpack-sources": "^1.4.0",
-        "worker-farm": "^1.7.0"
-      },
-      "dependencies": {
-        "cacache": {
-          "version": "12.0.4",
-          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-          "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
-          "dev": true,
-          "requires": {
-            "bluebird": "^3.5.5",
-            "chownr": "^1.1.1",
-            "figgy-pudding": "^3.5.1",
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.1.15",
-            "infer-owner": "^1.0.3",
-            "lru-cache": "^5.1.1",
-            "mississippi": "^3.0.0",
-            "mkdirp": "^0.5.1",
-            "move-concurrently": "^1.0.1",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^2.6.3",
-            "ssri": "^6.0.1",
-            "unique-filename": "^1.1.1",
-            "y18n": "^4.0.0"
-          }
-        },
-        "find-cache-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-          "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^2.0.0",
-            "pkg-dir": "^3.0.0"
-          }
-        },
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "make-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-          "dev": true,
-          "requires": {
-            "pify": "^4.0.1",
-            "semver": "^5.6.0"
-          }
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "serialize-javascript": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        },
-        "ssri": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-          "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
-          "dev": true,
-          "requires": {
-            "figgy-pudding": "^3.5.1"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
-        }
-      }
-    },
-    "test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "requires": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      }
-    },
-    "text-encoding-utf-8": {
-      "version": "1.0.2"
-    },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
-    "textarea-caret": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz",
-      "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg=="
-    },
-    "throat": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
-      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
-      "dev": true
-    },
-    "throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
-    },
-    "through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "requires": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
-    "thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-      "dev": true
-    },
-    "timers": {
-      "version": "0.1.1",
-      "dev": true
-    },
-    "timers-browserify": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
-      "dev": true,
-      "requires": {
-        "setimmediate": "^1.0.4"
-      }
-    },
-    "timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
-      "dev": true
-    },
-    "tiny-async-pool": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-async-pool/-/tiny-async-pool-1.2.0.tgz",
-      "integrity": "sha512-PY/OiSenYGBU3c1nTuP1HLKRkhKFDXsAibYI5GeHbHw2WVpt6OFzAPIRP94dGnS66Jhrkheim2CHAXUNI4XwMg==",
-      "dev": true,
-      "requires": {
-        "semver": "^5.5.0",
-        "yaassertion": "^1.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        }
-      }
-    },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
-      "requires": {
-        "os-tmpdir": "~1.0.2"
-      }
-    },
-    "tmpl": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
-      "dev": true
-    },
-    "to-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==",
-      "dev": true
-    },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
-    },
-    "to-object-path": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
-    },
-    "to-regex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
-      "requires": {
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "regex-not": "^1.0.2",
-        "safe-regex": "^1.1.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
-          "dev": true,
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "requires": {
-        "is-number": "^7.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-        }
-      }
-    },
-    "toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
-    },
-    "toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true
-    },
-    "totalist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
-      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
-      "dev": true
-    },
-    "tr46": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-      "dev": true,
-      "requires": {
-        "punycode": "^2.1.1"
-      }
-    },
-    "traverse": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
-      "integrity": "sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw==",
-      "dev": true
-    },
-    "ts-easing": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
-      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
-    },
-    "ts-jest": {
-      "version": "26.5.6",
-      "dev": true,
-      "requires": {
-        "bs-logger": "0.x",
-        "buffer-from": "1.x",
-        "fast-json-stable-stringify": "2.x",
-        "jest-util": "^26.1.0",
-        "json5": "2.x",
-        "lodash": "4.x",
-        "make-error": "1.x",
-        "mkdirp": "1.x",
-        "semver": "7.x",
-        "yargs-parser": "20.x"
-      },
-      "dependencies": {
-        "buffer-from": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-          "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "semver": {
-          "version": "7.5.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "ts-loader": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-5.4.5.tgz",
-      "integrity": "sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.3.0",
-        "enhanced-resolve": "^4.0.0",
-        "loader-utils": "^1.0.2",
-        "micromatch": "^3.1.4",
-        "semver": "^5.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "ts-pnp": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
-      "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
-      "dev": true
-    },
-    "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-    },
-    "tslint": {
-      "version": "5.20.1",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "builtin-modules": "^1.1.1",
-        "chalk": "^2.3.0",
-        "commander": "^2.12.1",
-        "diff": "^4.0.1",
-        "glob": "^7.1.1",
-        "js-yaml": "^3.13.1",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "resolve": "^1.3.2",
-        "semver": "^5.3.0",
-        "tslib": "^1.8.0",
-        "tsutils": "^2.29.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
-    },
-    "tslint-react": {
-      "version": "4.2.0",
-      "dev": true,
-      "requires": {
-        "tsutils": "^3.9.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
-    "tsutils": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.8.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
-    },
-    "tty-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==",
-      "dev": true
-    },
-    "type": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "dev": true
-    },
-    "type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true
-    },
-    "type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
-      "dev": true,
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
-      }
-    },
-    "typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
-      }
-    },
-    "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
-      "dev": true
-    },
-    "typedarray-to-buffer": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "dev": true,
-      "requires": {
-        "is-typedarray": "^1.0.0"
-      }
-    },
-    "typescript": {
-      "version": "4.1.6",
-      "dev": true
-    },
-    "unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
-      }
-    },
-    "uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "requires": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
-      "dev": true
-    },
-    "unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "dev": true,
-      "requires": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
-      }
-    },
-    "unicode-match-property-value-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
-      "dev": true
-    },
-    "unicode-property-aliases-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
-      "dev": true
-    },
-    "union-value": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-      "dev": true,
-      "requires": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^2.0.1"
-      }
-    },
-    "uniq": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==",
-      "dev": true
-    },
-    "uniqs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha512-mZdDpf3vBV5Efh29kMw5tXoup/buMgxLzOt/XKFKcVmi+15ManNQWr6HfZ2aiZTYlYixbdNJ0KFmIZIv52tHSQ==",
-      "dev": true
-    },
-    "unique-filename": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
-      "dev": true,
-      "requires": {
-        "unique-slug": "^2.0.0"
-      }
-    },
-    "unique-slug": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
-      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
-      "dev": true,
-      "requires": {
-        "imurmurhash": "^0.1.4"
-      }
-    },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true
-    },
-    "unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==",
-      "dev": true
-    },
-    "unset-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
-      "dev": true,
-      "requires": {
-        "has-value": "^0.3.1",
-        "isobject": "^3.0.0"
-      },
-      "dependencies": {
-        "has-value": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-          "integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
-          "dev": true,
-          "requires": {
-            "get-value": "^2.0.3",
-            "has-values": "^0.1.4",
-            "isobject": "^2.0.0"
-          },
-          "dependencies": {
-            "isobject": {
-              "version": "2.1.0",
-              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-              "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
-              "dev": true,
-              "requires": {
-                "isarray": "1.0.0"
-              }
-            }
-          }
-        },
-        "has-values": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==",
-          "dev": true
-        }
-      }
-    },
-    "upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-      "dev": true
-    },
-    "update-browserslist-db": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
-      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
-      "dev": true,
-      "requires": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
-      }
-    },
-    "uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
-      "dev": true
-    },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-        },
-        "querystring": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-          "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
-        }
-      }
-    },
-    "url-loader": {
-      "version": "4.1.1",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "mime-types": "^2.1.27",
-        "schema-utils": "^3.0.0"
-      }
-    },
-    "url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "requires": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
-      "dev": true
-    },
-    "use-async-effect": {
-      "version": "2.2.6"
-    },
-    "use-composed-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
-      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ=="
-    },
-    "use-indexeddb": {
-      "version": "2.0.2"
-    },
-    "use-isomorphic-layout-effect": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
-    },
-    "use-latest": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
-      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
-      "requires": {
-        "use-isomorphic-layout-effect": "^1.1.1"
-      }
-    },
-    "use-memo-one": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
-      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
-    },
-    "use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
-    },
-    "util": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-      "requires": {
-        "inherits": "2.0.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
-        }
-      }
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
-    "util.promisify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.2",
-        "object.getownpropertydescriptors": "^2.0.3"
-      }
-    },
-    "utila": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
-      "dev": true
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "dev": true
-    },
-    "uuid": {
-      "version": "9.0.0"
-    },
-    "v8-to-istanbul": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz",
-      "integrity": "sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        }
-      }
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "requires": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
-    "varint": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/varint/-/varint-5.0.2.tgz",
-      "integrity": "sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow=="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true
-    },
-    "vendors": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-      "dev": true
-    },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "vm-browserify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
-      "dev": true
-    },
-    "w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "dev": true,
-      "requires": {
-        "browser-process-hrtime": "^1.0.0"
-      }
-    },
-    "w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
-      "dev": true,
-      "requires": {
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "dev": true,
-      "requires": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "watchpack": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^3.4.1",
-        "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.1"
-      }
-    },
-    "watchpack-chokidar2": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
-      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chokidar": "^2.1.8"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
-          }
-        },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true,
-          "optional": true
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          }
-        },
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
-        },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            }
-          }
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
-          }
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
-        }
-      }
-    },
-    "wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "dev": true,
-      "requires": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-      "dev": true
-    },
-    "webpack": {
-      "version": "4.46.0",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/wasm-edit": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0",
-        "acorn": "^6.4.1",
-        "ajv": "^6.10.2",
-        "ajv-keywords": "^3.4.1",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^4.5.0",
-        "eslint-scope": "^4.0.3",
-        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^2.4.0",
-        "loader-utils": "^1.2.3",
-        "memory-fs": "^0.4.1",
-        "micromatch": "^3.1.10",
-        "mkdirp": "^0.5.3",
-        "neo-async": "^2.6.1",
-        "node-libs-browser": "^2.2.1",
-        "schema-utils": "^1.0.0",
-        "tapable": "^1.1.3",
-        "terser-webpack-plugin": "^1.4.3",
-        "watchpack": "^1.7.4",
-        "webpack-sources": "^1.4.1"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          },
-          "dependencies": {
-            "ajv-errors": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-              "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
-    "webpack-bundle-analyzer": {
-      "version": "4.8.0",
-      "dev": true,
-      "requires": {
-        "@discoveryjs/json-ext": "0.5.7",
-        "acorn": "^8.0.4",
-        "acorn-walk": "^8.0.0",
-        "chalk": "^4.1.0",
-        "commander": "^7.2.0",
-        "gzip-size": "^6.0.0",
-        "lodash": "^4.17.20",
-        "opener": "^1.5.2",
-        "sirv": "^1.0.7",
-        "ws": "^7.3.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-          "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-          "dev": true
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
-        },
-        "gzip-size": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-          "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-          "dev": true,
-          "requires": {
-            "duplexer": "^0.1.2"
-          }
-        }
-      }
-    },
-    "webpack-dev-middleware": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
-      "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
-      "dev": true,
-      "requires": {
-        "memory-fs": "^0.4.1",
-        "mime": "^2.4.4",
-        "mkdirp": "^0.5.1",
-        "range-parser": "^1.2.1",
-        "webpack-log": "^2.0.0"
-      },
-      "dependencies": {
-        "mime": {
-          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-          "dev": true
-        }
-      }
-    },
-    "webpack-dev-server": {
-      "version": "3.11.0",
-      "dev": true,
-      "requires": {
-        "ansi-html": "0.0.7",
-        "bonjour": "^3.5.0",
-        "chokidar": "^2.1.8",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
-        "debug": "^4.1.1",
-        "del": "^4.1.1",
-        "express": "^4.17.1",
-        "html-entities": "^1.3.1",
-        "http-proxy-middleware": "0.19.1",
-        "import-local": "^2.0.0",
-        "internal-ip": "^4.3.0",
-        "ip": "^1.1.5",
-        "is-absolute-url": "^3.0.3",
-        "killable": "^1.0.1",
-        "loglevel": "^1.6.8",
-        "opn": "^5.5.0",
-        "p-retry": "^3.0.1",
-        "portfinder": "^1.0.26",
-        "schema-utils": "^1.0.0",
-        "selfsigned": "^1.10.7",
-        "semver": "^6.3.0",
-        "serve-index": "^1.9.1",
-        "sockjs": "0.3.20",
-        "sockjs-client": "1.4.0",
-        "spdy": "^4.0.2",
-        "strip-ansi": "^3.0.1",
-        "supports-color": "^6.1.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^3.7.2",
-        "webpack-log": "^2.0.0",
-        "ws": "^6.2.1",
-        "yargs": "^13.3.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
-              "dev": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
-          }
-        },
-        "array-flatten": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-          "dev": true
-        },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true
-        },
-        "body-parser": {
-          "version": "1.20.1",
-          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-          "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-          "dev": true,
-          "requires": {
-            "bytes": "3.1.2",
-            "content-type": "~1.0.4",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "on-finished": "2.4.1",
-            "qs": "6.11.0",
-            "raw-body": "2.5.1",
-            "type-is": "~1.6.18",
-            "unpipe": "1.0.0"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              }
-            }
-          }
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          }
-        },
-        "bytes": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-          "dev": true
-        },
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
-        "cliui": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-          "dev": true,
-          "requires": {
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.2.0",
-            "wrap-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "cookie": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-          "dev": true
-        },
-        "depd": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-          "dev": true
-        },
-        "destroy": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-          "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
-        "express": {
-          "version": "4.18.2",
-          "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-          "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
-          "dev": true,
-          "requires": {
-            "accepts": "~1.3.8",
-            "array-flatten": "1.1.1",
-            "body-parser": "1.20.1",
-            "content-disposition": "0.5.4",
-            "content-type": "~1.0.4",
-            "cookie": "0.5.0",
-            "cookie-signature": "1.0.6",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "finalhandler": "1.2.0",
-            "fresh": "0.5.2",
-            "http-errors": "2.0.0",
-            "merge-descriptors": "1.0.1",
-            "methods": "~1.1.2",
-            "on-finished": "2.4.1",
-            "parseurl": "~1.3.3",
-            "path-to-regexp": "0.1.7",
-            "proxy-addr": "~2.0.7",
-            "qs": "6.11.0",
-            "range-parser": "~1.2.1",
-            "safe-buffer": "5.2.1",
-            "send": "0.18.0",
-            "serve-static": "1.15.0",
-            "setprototypeof": "1.2.0",
-            "statuses": "2.0.1",
-            "type-is": "~1.6.18",
-            "utils-merge": "1.0.1",
-            "vary": "~1.1.2"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              }
-            }
-          }
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          }
-        },
-        "finalhandler": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-          "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-          "dev": true,
-          "requires": {
-            "debug": "2.6.9",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "on-finished": "2.4.1",
-            "parseurl": "~1.3.3",
-            "statuses": "2.0.1",
-            "unpipe": "~1.0.0"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              }
-            }
-          }
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
-        },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-              "dev": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            }
-          }
-        },
-        "http-errors": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-          "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-          "dev": true,
-          "requires": {
-            "depd": "2.0.0",
-            "inherits": "2.0.4",
-            "setprototypeof": "1.2.0",
-            "statuses": "2.0.1",
-            "toidentifier": "1.0.1"
-          }
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-          "dev": true
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        },
-        "on-finished": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-          "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-          "dev": true,
-          "requires": {
-            "ee-first": "1.1.1"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-          "dev": true
-        },
-        "path-to-regexp": {
-          "version": "0.1.7",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-          "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-          "dev": true,
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
-        },
-        "raw-body": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-          "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-          "dev": true,
-          "requires": {
-            "bytes": "3.1.2",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-          }
-        },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
-          }
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "send": {
-          "version": "0.18.0",
-          "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-          "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-          "dev": true,
-          "requires": {
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "fresh": "0.5.2",
-            "http-errors": "2.0.0",
-            "mime": "1.6.0",
-            "ms": "2.1.3",
-            "on-finished": "2.4.1",
-            "range-parser": "~1.2.1",
-            "statuses": "2.0.1"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              },
-              "dependencies": {
-                "ms": {
-                  "version": "2.0.0",
-                  "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                  "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-                  "dev": true
-                }
-              }
-            },
-            "ms": {
-              "version": "2.1.3",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-              "dev": true
-            }
-          }
-        },
-        "serve-static": {
-          "version": "1.15.0",
-          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-          "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
-          "dev": true,
-          "requires": {
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "parseurl": "~1.3.3",
-            "send": "0.18.0"
-          }
-        },
-        "statuses": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-              "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-              "dev": true
-            }
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
-          "dev": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
-        },
-        "wrap-ansi": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^3.0.0",
-            "strip-ansi": "^5.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.1",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-              "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
-        "ws": {
-          "version": "6.2.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0"
-          }
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
-    "webpack-log": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
-      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^3.0.0",
-        "uuid": "^3.3.2"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "dev": true
-        }
-      }
-    },
-    "webpack-manifest-plugin": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-3.1.1.tgz",
-      "integrity": "sha512-r3vL8BBNVtyeNbaFwDQoOWqBd0Gp/Tbzo8Q3YGZDV+IG77gsB9VZry5XKKbfFNFHSmwW+f1z4/w2XPt6wBZJYg==",
-      "dev": true,
-      "requires": {
-        "tapable": "^2.0.0",
-        "webpack-sources": "^2.2.0"
-      },
-      "dependencies": {
-        "tapable": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-          "dev": true
-        },
-        "webpack-sources": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
-          "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
-          "dev": true,
-          "requires": {
-            "source-list-map": "^2.0.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "webpack-sources": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-      "dev": true,
-      "requires": {
-        "source-list-map": "^2.0.0",
-        "source-map": "~0.6.1"
-      }
-    },
-    "webpackbar": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-4.0.0.tgz",
-      "integrity": "sha512-k1qRoSL/3BVuINzngj09nIwreD8wxV4grcuhHTD8VJgUbGcy8lQSPqv+bM00B7F+PffwIsQ8ISd4mIwRbr23eQ==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^2.4.2",
-        "consola": "^2.10.0",
-        "figures": "^3.0.0",
-        "pretty-time": "^1.1.0",
-        "std-env": "^2.2.1",
-        "text-table": "^0.2.0",
-        "wrap-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "websocket-driver": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-      "dev": true,
-      "requires": {
-        "http-parser-js": ">=0.5.1",
-        "safe-buffer": ">=5.1.0",
-        "websocket-extensions": ">=0.1.1"
-      }
-    },
-    "websocket-extensions": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-      "dev": true
-    },
-    "whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "0.4.24"
-      }
-    },
-    "whatwg-fetch": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
-    },
-    "whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
-      "dev": true
-    },
-    "whatwg-url": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.7.0",
-        "tr46": "^2.1.0",
-        "webidl-conversions": "^6.1.0"
-      }
-    },
-    "which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "requires": {
-        "isexe": "^2.0.0"
-      }
-    },
-    "which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
-      "requires": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      }
-    },
-    "which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
-    },
-    "which-typed-array": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
-      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
-      "dev": true,
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "worker-farm": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
-      "dev": true,
-      "requires": {
-        "errno": "~0.1.7"
-      }
-    },
-    "worker-rpc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
-      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
-      "dev": true,
-      "requires": {
-        "microevent.ts": "~0.1.1"
-      }
-    },
-    "wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
-    },
-    "write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dev": true,
-      "requires": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
-      }
-    },
-    "ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
-    },
-    "xml": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
-    },
-    "xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-      "dev": true
-    },
-    "xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
-    },
-    "xmldom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
-      "integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA=="
-    },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
-    },
-    "y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
-    },
-    "yaassertion": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/yaassertion/-/yaassertion-1.0.2.tgz",
-      "integrity": "sha512-sBoJBg5vTr3lOpRX0yFD+tz7wv/l2UPMFthag4HGTMPrypBRKerjjS8jiEnNMjcAEtPXjbHiKE0UwRR1W1GXBg==",
-      "dev": true
-    },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
-    "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
-    },
-    "yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "requires": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "dependencies": {
-        "yargs-parser": {
-          "version": "18.1.3",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
-    "yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true
-    },
-    "yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true
-    }
-  }
-}

From 5b487421b798adfac7c924c3f47aaab0d1342af3 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 31 Aug 2023 18:57:30 +0500
Subject: [PATCH 051/179] Worked on the extended chat page

---
 src/common/app.tsx                            |   4 +
 .../components/chat-box/chat-constants.ts     |   5 +-
 src/common/components/chat-box/index.scss     |  68 +-
 src/common/components/chat-box/index.tsx      | 807 +++---------------
 src/common/components/chat-input/index.scss   |  66 ++
 src/common/components/chat-input/index.tsx    | 286 +++++++
 .../chats-channel-messages/index.scss         | 186 ++++
 .../chats-channel-messages/index.tsx          | 355 ++++++++
 .../chats-community-dropdown-menu/index.scss  |   0
 .../chats-community-dropdown-menu/index.tsx   | 559 ++++++++++++
 .../chats-direct-messages/index.scss          |   0
 .../chats-direct-messages/index.tsx           |   5 +
 .../components/chats-dropdown-menu/index.tsx  |  48 ++
 .../components/chats-messages-box/index.scss  |  33 +
 .../components/chats-messages-box/index.tsx   |  65 ++
 .../chats-messages-header/index.scss          |  67 ++
 .../chats-messages-header/index.tsx           |  37 +
 .../components/chats-messages-view/index.scss |  20 +
 .../components/chats-messages-view/index.tsx  | 223 +++++
 .../components/chats-profile-box/index.scss   |  65 ++
 .../components/chats-profile-box/index.tsx    | 119 +++
 .../components/chats-scroller/index.scss      |  33 +
 .../components/chats-scroller/index.tsx       |  36 +
 src/common/components/chats-sidebar/indes.tsx | 345 ++++++++
 .../components/chats-sidebar/index.scss       | 224 +++++
 src/common/components/dropdown/index.tsx      |   5 -
 src/common/components/emoji-picker/index.tsx  |  11 +-
 .../join-community-chat-btn/index.tsx         |   1 +
 .../components/manage-chat-key/index.tsx      |   2 +
 src/common/components/navbar/index.tsx        |   9 +-
 src/common/components/user-nav/_index.scss    |  10 +-
 src/common/components/user-nav/index.tsx      |  10 +-
 src/common/helper/chat-utils.ts               | 108 ++-
 src/common/helper/message-service.ts          |   2 +
 src/common/i18n/locales/en-US.json            |   3 +-
 src/common/img/svg.tsx                        |  16 +
 src/common/pages/chats/index.scss             |  16 +
 src/common/pages/chats/index.tsx              | 203 +++++
 src/common/routes.ts                          |   3 +-
 src/config.ts                                 |   2 +-
 40 files changed, 3263 insertions(+), 794 deletions(-)
 create mode 100644 src/common/components/chat-input/index.scss
 create mode 100644 src/common/components/chat-input/index.tsx
 create mode 100644 src/common/components/chats-channel-messages/index.scss
 create mode 100644 src/common/components/chats-channel-messages/index.tsx
 create mode 100644 src/common/components/chats-community-dropdown-menu/index.scss
 create mode 100644 src/common/components/chats-community-dropdown-menu/index.tsx
 create mode 100644 src/common/components/chats-direct-messages/index.scss
 create mode 100644 src/common/components/chats-direct-messages/index.tsx
 create mode 100644 src/common/components/chats-dropdown-menu/index.tsx
 create mode 100644 src/common/components/chats-messages-box/index.scss
 create mode 100644 src/common/components/chats-messages-box/index.tsx
 create mode 100644 src/common/components/chats-messages-header/index.scss
 create mode 100644 src/common/components/chats-messages-header/index.tsx
 create mode 100644 src/common/components/chats-messages-view/index.scss
 create mode 100644 src/common/components/chats-messages-view/index.tsx
 create mode 100644 src/common/components/chats-profile-box/index.scss
 create mode 100644 src/common/components/chats-profile-box/index.tsx
 create mode 100644 src/common/components/chats-scroller/index.scss
 create mode 100644 src/common/components/chats-scroller/index.tsx
 create mode 100644 src/common/components/chats-sidebar/indes.tsx
 create mode 100644 src/common/components/chats-sidebar/index.scss
 create mode 100644 src/common/pages/chats/index.scss
 create mode 100644 src/common/pages/chats/index.tsx

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 739f44d66f2..08014f1886b 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -50,6 +50,9 @@ const AuthPage = (props: any) => <AuthContainer {...props} />;
 const SubmitContainer = loadable(() => import("./pages/submit"));
 const SubmitPage = (props: any) => <SubmitContainer {...props} />;
 
+const ChatsContainer = loadable(() => import("./pages/chats"));
+const ChatsPage = (props: any) => <ChatsContainer {...props} />;
+
 const OnboardContainer = loadable(() => import("./pages/onboard"));
 const OnboardPage = (props: any) => <OnboardContainer {...props} />;
 
@@ -132,6 +135,7 @@ const App = (props: any) => {
         <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
         <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
         <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
+        <Route exact={true} strict={true} path={routes.CHATS} component={ChatsPage} />
         <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
         <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
         <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chat-box/chat-constants.ts
index 71578f5d1ab..dab6f664135 100644
--- a/src/common/components/chat-box/chat-constants.ts
+++ b/src/common/components/chat-box/chat-constants.ts
@@ -1,6 +1,6 @@
 export const EmojiPickerStyle = {
   width: "94%",
-  bottom: "49px",
+  bottom: "58px",
   left: "0px",
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
@@ -38,3 +38,6 @@ export const UNBLOCKUSER = "unblockUser";
 export const NEWCHATACCOUNT = "newChatAccount";
 export const CHATIMPORT = "chatImport";
 export const RESENDMESSAGE = "resendMessage";
+export const CHAT = "chat";
+export const COMMUNITY = "community";
+export const CHATPAGE = "chatPage";
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index c06bdfca627..3cdb488c182 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -134,7 +134,7 @@
       .community-menu,
       .simple-menu {
         border: none;
-        margin-bottom: 16px;
+        margin-bottom: 13px;
         svg {
           @include themify(day) {
             color: $charcoal-grey;
@@ -534,7 +534,7 @@
               color: $white;
             }
             @include themify(night) {
-              background: $dark-indigo;
+              background: $charcoal-grey;
               color: $white;
             }
             &.gif {
@@ -571,66 +571,7 @@
       }
     }
   }
-  .chat {
-    display: flex;
-    margin: 4px 8px;
-    padding: 4px;
-    min-height: 45px;
-    border-radius: 20px;
-    @include themify(day) {
-      background: #e4e6eb;
-    }
-    @include themify(night) {
-      background: #cee2ff;
-    }
-
-    &.disable {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .chatbox-emoji-picker {
-      .chatbox-emoji {
-        margin: 8px 0 0 7px;
-        cursor: pointer;
-
-        svg {
-          height: 22px;
-          fill: rgb(60, 68, 73);
-        }
-      }
-    }
-    .chatbox-image {
-      cursor: pointer;
-      .chatbox-image-icon {
-        margin: 7px 0 0 7px;
-      }
-    }
 
-    .chat-input-group {
-      .chat-input {
-        padding-top: 10px;
-        border: none;
-        @include themify(day) {
-          background: #e4e6eb;
-        }
-        @include themify(night) {
-          background: #cee2ff;
-        }
-      }
-      .msg-svg {
-        padding: 8px;
-
-        &.active {
-          cursor: pointer;
-        }
-        &.active:hover {
-          background: rgba(29, 155, 240, 0.1);
-          border-radius: 50%;
-        }
-      }
-    }
-  }
   &.small-screen {
     right: 0;
     width: 100vw;
@@ -749,3 +690,8 @@
 .medium-zoom-image--opened {
   z-index: 999;
 }
+
+.medium-zoom--opened .medium-zoom-overlay {
+  // opacity: 0;
+  // background: white;
+}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index f6dfcadbbb8..f5cd4939d42 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,5 +1,6 @@
 import React, { RefObject, useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
+import { useLocation } from "react-router";
 import { History } from "history";
 import {
   Button,
@@ -14,7 +15,6 @@ import {
   Spinner
 } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import axios from "axios";
 import mediumZoom, { Zoom } from "medium-zoom";
 
 import { ActiveUser } from "../../store/active-user/types";
@@ -35,27 +35,22 @@ import {
 import Tooltip from "../tooltip";
 import UserAvatar from "../user-avatar";
 import LinearProgress from "../linear-progress";
-import EmojiPicker from "../emoji-picker";
-import GifPicker from "../gif-picker";
 import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
 import DropDown, { MenuItem } from "../dropdown";
 import FollowControls from "../follow-controls";
 import OrDivider from "../or-divider";
 import ManageChatKey from "../manage-chat-key";
-import ClickAwayListener from "../clickaway-listener";
+import ChatInput from "../chat-input";
+import ChatsProfileBox from "../chats-profile-box";
 
 import {
   addMessageSVG,
   expandArrow,
   collapseArrow,
   arrowBackSvg,
-  messageSendSvg,
   chevronUpSvg,
   chevronDownSvgForSlider,
-  emoticonHappyOutlineSvg,
-  gifIcon,
-  chatBoxImageSvg,
   linkSvg,
   KebabMenu,
   chatLeaveSvg,
@@ -71,12 +66,7 @@ import {
 
 import {
   DropDownStyle,
-  EmojiPickerStyle,
-  GifPickerStyle,
-  GIPHGY,
   NOSTRKEY,
-  UPLOADING,
-  GifImagesStyle,
   ADDROLE,
   HIDEMESSAGE,
   BLOCKUSER,
@@ -84,11 +74,13 @@ import {
   UNBLOCKUSER,
   NEWCHATACCOUNT,
   CHATIMPORT,
-  RESENDMESSAGE
+  RESENDMESSAGE,
+  EmojiPickerStyle,
+  GifPickerStyle,
+  CHAT
 } from "./chat-constants";
 
 import { getPublicKey } from "../../../lib/nostr-tools/keys";
-import { dateToFormatted } from "../../helper/parse-date";
 import {
   createNoStrAccount,
   formatMessageDate,
@@ -98,20 +90,23 @@ import {
   setProfileMetaData,
   resetProfile,
   getCommunities,
-  getPrivateKey
+  getPrivateKey,
+  fetchCommunityMessages,
+  isMessageGif,
+  isMessageImage,
+  getProfileName
 } from "../../helper/chat-utils";
 import * as ls from "../../util/local-storage";
 import { renderPostBody } from "@ecency/render-helper";
-import { getAccessToken } from "../../helper/user-token";
 import accountReputation from "../../helper/account-reputation";
 import { _t } from "../../i18n";
 
 import { getAccountFull, getAccountReputations } from "../../api/hive";
-import { uploadImage } from "../../api/misc";
-import { addImage } from "../../api/private-api";
 import { getCommunity } from "../../api/bridge";
 
 import "./index.scss";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
 
 export interface profileData {
   joiningData: string;
@@ -124,6 +119,16 @@ export interface AccountWithReputation {
   reputation: number;
 }
 
+export interface EmojiPickerStyleProps {
+  width: string;
+  bottom: string;
+  left: string | number;
+  marginLeft: string;
+  borderTopLeftRadius: string;
+  borderTopRightRadius: string;
+  borderBottomLeftRadius: string;
+}
+
 interface Props {
   users: User[];
   activeUser: ActiveUser | null;
@@ -143,20 +148,16 @@ interface Props {
 }
 
 let zoom: Zoom | null = null;
-const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
 export default function ChatBox(props: Props) {
+  const routerLocation = useLocation();
   const prevPropsRef = useRef(props);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
-  const fileInput = React.createRef<HTMLInputElement>();
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
-  const [message, setMessage] = useState("");
   const [dmMessage, setDmMessage] = useState("");
-  const [isMessageText, setIsMessageText] = useState(false);
-  const [profileData, setProfileData] = useState<profileData>();
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
@@ -168,7 +169,6 @@ export default function ChatBox(props: Props) {
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
-  const [shGif, setShGif] = useState(false);
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
@@ -180,10 +180,7 @@ export default function ChatBox(props: Props) {
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [searchtext, setSearchText] = useState("");
   const [userList, setUserList] = useState<AccountWithReputation[]>([]);
-  const [user, setUser] = useState("");
-  const [role, setRole] = useState("admin");
   const [addRoleError, setAddRoleError] = useState("");
-  const [moderator, setModerator] = useState<communityModerator>();
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
   const [chatPrivKey, setChatPrivkey] = useState("");
   const [hoveredMessageId, setHoveredMessageId] = useState("");
@@ -193,19 +190,39 @@ export default function ChatBox(props: Props) {
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
-  const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
   const [importPrivKey, setImportPrivKey] = useState(false);
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [isChatPage, setIsChatPage] = useState(false);
+
+  useEffect(() => {
+    console.log("Chat in store", props.chat);
+  }, [props.chat]);
+
+  useEffect(() => {
+    if (currentChannel && props.chat.leftChannelsList.includes(currentChannel.id)) {
+      setIsCommunity(false);
+      setCommunityName("");
+    }
+  }, [props.chat.leftChannelsList]);
+
+  useEffect(() => {
+    handleRouterChange();
+  }, [routerLocation]);
+
+  useEffect(() => {
+    if (isChatPage) {
+      setShow(false);
+    }
+  }, [isChatPage]);
 
   useEffect(() => {
     // resetProfile(props.activeUser);
     fetchProfileData();
-    setShow(!!props.activeUser?.username);
+    !isChatPage && setShow(!!props.activeUser?.username);
     const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
     setInnerWidth(window.innerWidth);
@@ -217,8 +234,9 @@ export default function ChatBox(props: Props) {
       .sort((a, b) => b.created - a.created)[0];
     if (currentChannel && updated) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        currentChannel.id,
-        updated.hiddenMessageIds
+        props.chat.publicMessages,
+        currentChannel,
+        updated?.hiddenMessageIds
       );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
@@ -283,7 +301,6 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     currentChannel?.communityModerators && getPrivilegedUsers(currentChannel?.communityModerators!);
-    currentChannel?.removedUserIds && getBlockedUsers(currentChannel?.removedUserIds!);
     currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
     currentChannel && scrollerClicked();
     if (removedUsers) {
@@ -346,7 +363,11 @@ export default function ChatBox(props: Props) {
   useEffect(() => {
     if (currentChannel && isCommunity) {
       window?.messageService?.fetchChannel(currentChannel.id);
-      const publicMessages: PublicMessage[] = fetchCommunityMessages(currentChannel.id);
+      const publicMessages: PublicMessage[] = fetchCommunityMessages(
+        props.chat.publicMessages,
+        currentChannel,
+        currentChannel.hiddenMessageIds
+      );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
     }
@@ -363,7 +384,6 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     fetchProfileData();
-    setShow(!!props.activeUser?.username);
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
@@ -407,7 +427,6 @@ export default function ChatBox(props: Props) {
       }
     } else {
       setIsCurrentUserJoined(true);
-      setMessage("");
       setInProgress(false);
     }
   }, [currentUser]);
@@ -446,21 +465,18 @@ export default function ChatBox(props: Props) {
     setCommunityAdmins(communityAdminNames);
   };
 
-  const getBlockedUsers = (blockedUser: string[]) => {
-    const blockedUsers = props.chat.profiles
-      .filter((item) => blockedUser.includes(item.creator))
-      .map((item) => ({ name: item.name, pubkey: item.creator }));
-    setBlockedUsers(blockedUsers);
+  const handleRouterChange = () => {
+    if (routerLocation.pathname.match("/chats")) {
+      setShow(false);
+      setIsChatPage(true);
+    } else {
+      setShow(true);
+    }
   };
 
   const fetchCommunity = async () => {
     const community = await getCommunity(communityName, props.activeUser?.username);
     setCurrentCommunity(community!);
-    setProfileData({
-      joiningData: community?.created_at!,
-      about: community?.about,
-      followers: community?.subscribers
-    });
   };
 
   const fetchCurrentChannel = (communityName: string) => {
@@ -493,17 +509,6 @@ export default function ChatBox(props: Props) {
     setInnerWidth(window.innerWidth);
   };
 
-  const formatFollowers = (count: number | undefined) => {
-    if (count) {
-      return count >= 1e6
-        ? (count / 1e6).toLocaleString() + "M"
-        : count >= 1e3
-        ? (count / 1e3).toLocaleString() + "K"
-        : count.toLocaleString();
-    }
-    return count;
-  };
-
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [
       ...document.querySelectorAll<HTMLElement>(".chat-image img")
@@ -529,26 +534,8 @@ export default function ChatBox(props: Props) {
     return [];
   };
 
-  const fetchCommunityMessages = (channelId: string, hiddenMessageIds?: string[]) => {
-    const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
-    for (const item of props.chat.publicMessages) {
-      if (item.channelId === channelId) {
-        const filteredPublicMessages = Object.values(item.PublicMessage).filter(
-          (message) => !hideMessageIds.includes(message.id)
-        );
-        return filteredPublicMessages;
-      }
-    }
-    return [];
-  };
-
   const fetchCurrentUserData = async () => {
     const response = await getAccountFull(currentUser);
-    setProfileData({
-      joiningData: response.created,
-      about: response.profile?.about,
-      followers: response.follow_stats?.follower_count
-    });
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
     const { nsKey } = profile || {};
@@ -567,7 +554,6 @@ export default function ChatBox(props: Props) {
     setActiveUserKeys(activeUserKeys);
     const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
     setHasUserJoinedChat(hasNoStrKey);
-    setShow(!!props.activeUser?.username);
   };
 
   const userClicked = (username: string) => {
@@ -575,35 +561,6 @@ export default function ChatBox(props: Props) {
     setCurrentUser(username);
   };
 
-  const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    setMessage(e.target.value);
-    setIsMessageText(e.target.value.length !== 0);
-  };
-
-  const sendMessage = () => {
-    if (message.length !== 0 && !message.includes(UPLOADING)) {
-      if (isCommunity) {
-        if (!isActveUserRemoved) {
-          window?.messageService?.sendPublicMessage(currentChannel!, message, [], "");
-        } else {
-          error(_t("chat.message-warning"));
-        }
-      }
-      if (isCurrentUser) {
-        window.messageService?.sendDirectMessage(receiverPubKey, message);
-      }
-      setMessage("");
-      setIsMessageText(false);
-    }
-    if (
-      receiverPubKey &&
-      !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
-      isCurrentUser
-    ) {
-      window.messageService?.publishContacts(currentUser, receiverPubKey);
-    }
-  };
-
   const fetchPrevMessages = () => {
     if (!hasMore || inProgress) return;
 
@@ -705,10 +662,6 @@ export default function ChatBox(props: Props) {
     return <></>;
   };
 
-  const handleEmojiSelection = (emoji: string) => {
-    setMessage((prevMessage) => prevMessage + emoji);
-  };
-
   const getLastMessage = (pubkey: string) => {
     const msgsList = fetchDirectMessages(pubkey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
@@ -716,104 +669,11 @@ export default function ChatBox(props: Props) {
     return lastMessage[0]?.content;
   };
 
-  const handleGifSelection = (gif: string) => {
-    isCurrentUser
-      ? window.messageService?.sendDirectMessage(receiverPubKey, gif)
-      : window?.messageService?.sendPublicMessage(currentChannel!, gif, [], "");
-  };
-
-  const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
-    if (e) {
-      e.stopPropagation();
-    }
-    setShGif(!shGif);
-  };
-
-  const isMessageGif = (content: string) => {
-    return content.includes(GIPHGY);
-  };
-
-  const checkFile = (filename: string) => {
-    const filenameLow = filename.toLowerCase();
-    return ["jpg", "jpeg", "gif", "png"].some((el) => filenameLow.endsWith(el));
-  };
-
-  const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
-
-    const {
-      global: { isElectron }
-    } = props;
-
-    if (files.length > 0) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
-    if (files.length > 1 && isElectron) {
-      let isWindows = process.platform === "win32";
-      if (isWindows) {
-        files = files.reverse();
-      }
-    }
-
-    files.forEach((file) => upload(file));
-
-    // reset input
-    e.target.value = "";
-  };
-
-  const upload = async (file: File) => {
-    const { activeUser, global } = props;
-
-    const username = activeUser?.username!;
-
-    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
-
-    setMessage(tempImgTag);
-
-    let imageUrl: string;
-    try {
-      let token = getAccessToken(username);
-      if (token) {
-        const resp = await uploadImage(file, token);
-        imageUrl = resp.url;
-
-        if (global.usePrivate && imageUrl.length > 0) {
-          addImage(username, imageUrl).then();
-        }
-
-        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
-
-        imgTag && setMessage(imgTag);
-        setIsMessageText(true);
-      } else {
-        error(_t("editor-toolbar.image-error-cache"));
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e) && e.response?.status === 413) {
-        error(_t("editor-toolbar.image-error-size"));
-      } else {
-        error(_t("editor-toolbar.image-error"));
-      }
-      return;
-    }
-  };
-
-  const isMessageImage = (content: string) => {
-    return content.includes("https://images.ecency.com");
-  };
-
   const communityClicked = (community: string, name: string) => {
     setIsCommunity(true);
     setCommunityName(community);
   };
 
-  const getProfileName = (creator: string) => {
-    const profile = props.chat.profiles.find((x) => x.creator === creator);
-    return profile?.name;
-  };
-
   const sendDM = (name: string, pubkey: string) => {
     if (dmMessage) {
       window.messageService?.sendDirectMessage(pubkey, dmMessage);
@@ -865,11 +725,13 @@ export default function ChatBox(props: Props) {
         setNostrkeys(keys);
         setStep(4);
         setChatPrivkey("");
+        setImportPrivKey(false);
       } else {
+        setImportPrivKey(true);
         setAddRoleError("Invalid Private key");
       }
-      setImportPrivKey(false);
     } catch (error) {
+      setImportPrivKey(true);
       setAddRoleError("Invalid Private key");
     }
   };
@@ -879,25 +741,6 @@ export default function ChatBox(props: Props) {
     setKeyDialog(false);
   };
 
-  const updateRole = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-    moderator: communityModerator
-  ) => {
-    const selectedRole = event.target.value;
-    const moderatorIndex = currentChannel?.communityModerators?.findIndex(
-      (mod) => mod.name === moderator.name
-    );
-    if (moderatorIndex !== -1 && currentChannel) {
-      const newUpdatedChannel: Channel = { ...currentChannel };
-      const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
-      newUpdatedModerator.role = selectedRole;
-      newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
-      setCurrentChannel(newUpdatedChannel);
-      window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
-      success("Roles updated succesfully");
-    }
-  };
-
   const handleResendMessage = () => {
     setKeyDialog(false);
     setStep(0);
@@ -920,20 +763,6 @@ export default function ChatBox(props: Props) {
       case BLOCKUSER:
         handleChannelUpdate(BLOCKUSER);
         break;
-      case UNBLOCKUSER:
-        handleChannelUpdate(UNBLOCKUSER);
-        break;
-      case LEAVECOMMUNITY:
-        window?.messageService
-          ?.updateLeftChannelList([...props.chat.leftChannelsList!, currentChannel?.id!])
-          .then(() => {})
-          .finally(() => {
-            setKeyDialog(false);
-            setStep(0);
-            setIsCommunity(false);
-            setCommunityName("");
-          });
-        break;
       case NEWCHATACCOUNT:
         setInProgress(true);
         resetProfile(props.activeUser)
@@ -954,173 +783,6 @@ export default function ChatBox(props: Props) {
     }
   };
 
-  const EditRolesModal = () => {
-    return (
-      <>
-        <div className="add-dialog-header">
-          <div className="add-dialog-titles">
-            <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
-          </div>
-        </div>
-        <div className="community-chat-role-edit-dialog-content">
-          {inProgress && <LinearProgress />}
-          <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
-            <Form.Group as={Row}>
-              <Form.Label column={true} sm="2">
-                {_t("community-role-edit.username")}
-              </Form.Label>
-              <Col sm="10">
-                <InputGroup>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>@</InputGroup.Text>
-                  </InputGroup.Prepend>
-                  <Form.Control
-                    type="text"
-                    autoFocus={user === ""}
-                    placeholder={_t("community-role-edit.username").toLowerCase()}
-                    value={user}
-                    onChange={userChanged}
-                    className={addRoleError ? "is-invalid" : ""}
-                  />
-                </InputGroup>
-                {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row}>
-              <Form.Label column={true} sm="2">
-                {_t("community-role-edit.role")}
-              </Form.Label>
-              <Col sm="10">
-                <Form.Control as="select" value={role} onChange={roleChanged}>
-                  {roles.map((r, i) => (
-                    <option key={i} value={r}>
-                      {r}
-                    </option>
-                  ))}
-                </Form.Control>
-              </Col>
-            </Form.Group>
-            <div className="d-flex justify-content-end">
-              <Button
-                type="button"
-                onClick={() => handleChannelUpdate(ADDROLE)}
-                disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
-              >
-                {_t("chat.add")}
-              </Button>
-            </div>
-          </div>
-          {currentChannel?.communityModerators?.length !== 0 ? (
-            <>
-              <table className="table table-striped table-bordered table-roles">
-                <thead>
-                  <tr>
-                    <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
-                    <th style={{ width: "50%" }}>{_t("community.roles-role")}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {currentChannel?.communityModerators &&
-                    currentChannel?.communityModerators!.map((moderator, i) => {
-                      return (
-                        <tr key={i}>
-                          <td>
-                            <span className="user">
-                              <UserAvatar username={moderator.name} size="medium" />{" "}
-                              <span className="username">@{moderator.name}</span>
-                            </span>
-                          </td>
-                          <td>
-                            {moderator.name === props.activeUser?.username ? (
-                              <p style={{ margin: "5px 0 0 12px" }}>{moderator.role}</p>
-                            ) : (
-                              <Form.Control
-                                as="select"
-                                value={moderator.role}
-                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                                  updateRole(e, moderator)
-                                }
-                              >
-                                {roles.map((r, i) => (
-                                  <option key={i} value={r}>
-                                    {r}
-                                  </option>
-                                ))}
-                              </Form.Control>
-                            )}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-              </table>
-            </>
-          ) : (
-            <div className="text-center">
-              <p>{_t("chat.no-admin")}</p>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  };
-
-  const blockedUsersModal = () => {
-    return (
-      <>
-        <div className="blocked-user-header" style={{ marginBottom: "1rem" }}>
-          <h4 className="blocked-user-title">{_t("chat.blocked-users")}</h4>
-        </div>
-
-        {blockedUsers.length !== 0 ? (
-          <>
-            <table className="table table-striped table-bordered table-roles">
-              <thead>
-                <tr>
-                  <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
-                  <th style={{ width: "50%" }}>{_t("chat.action")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {blockedUsers &&
-                  blockedUsers.map((user, i) => {
-                    return (
-                      <tr key={i}>
-                        <td>
-                          <span className="d-flex user">
-                            <UserAvatar username={user.name} size="medium" />{" "}
-                            <span className="username" style={{ margin: "10px 0 0 10px" }}>
-                              @{user.name}
-                            </span>
-                          </span>
-                        </td>
-                        <td>
-                          <Button
-                            variant="outline-primary"
-                            onClick={() => {
-                              setKeyDialog(true);
-                              setStep(7);
-                              setRemovedUserID(user.pubkey);
-                            }}
-                          >
-                            {_t("chat.unblock")}
-                          </Button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-              </tbody>
-            </table>
-          </>
-        ) : (
-          <div className="text-center">
-            <p> {_t("chat.no-locked-user")}</p>
-          </div>
-        )}
-      </>
-    );
-  };
-
   const successModal = (message: string) => {
     return (
       <>
@@ -1192,51 +854,6 @@ export default function ChatBox(props: Props) {
     );
   };
 
-  useDebounce(
-    async () => {
-      if (user.length === 0) {
-        setAddRoleError("");
-        setInProgress(false);
-        return;
-      }
-
-      try {
-        const profileData = await getProfileMetaData(user);
-        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
-          const alreadyExists = currentChannel?.communityModerators?.some(
-            (moderator) => moderator.name === profileData.name
-          );
-          if (alreadyExists) {
-            setAddRoleError("You have already assigned some rule to this user.");
-            setInProgress(false);
-            return;
-          }
-          const moderator = {
-            name: user,
-            pubkey: profileData.nsKey,
-            role: role
-          };
-          setModerator(moderator);
-          setAddRoleError("");
-        } else {
-          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
-        }
-      } catch (err) {
-        error(err as string);
-      }
-
-      setInProgress(false);
-    },
-    200,
-    [user, role]
-  );
-
-  const userChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    const { value: user } = e.target;
-    setUser(user);
-    setInProgress(true);
-  };
-
   const handleChannelUpdate = (operationType: string) => {
     let updatedMetaData = {
       name: currentChannel?.name!,
@@ -1249,10 +866,6 @@ export default function ChatBox(props: Props) {
     };
 
     switch (operationType) {
-      case ADDROLE:
-        const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
-        updatedMetaData.communityModerators = updatedRoles;
-        break;
       case HIDEMESSAGE:
         const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
         updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
@@ -1272,12 +885,6 @@ export default function ChatBox(props: Props) {
           updatedMetaData.communityModerators = NewUpdatedRoles;
         }
         break;
-      case UNBLOCKUSER:
-        const NewUpdatedRemovedUsers = currentChannel?.removedUserIds?.filter(
-          (item) => item !== removedUserId
-        );
-        updatedMetaData.removedUserIds = NewUpdatedRemovedUsers;
-        break;
       default:
         break;
     }
@@ -1288,7 +895,11 @@ export default function ChatBox(props: Props) {
       if (operationType === HIDEMESSAGE) {
         setStep(0);
         setKeyDialog(false);
-        fetchCommunityMessages(currentChannel?.id!);
+        fetchCommunityMessages(
+          props.chat.publicMessages,
+          currentChannel!,
+          currentChannel?.hiddenMessageIds
+        );
         setHiddenMsgId("");
       }
       if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
@@ -1301,29 +912,8 @@ export default function ChatBox(props: Props) {
     }
   };
 
-  const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    const { value: role } = e.target;
-    setRole(role);
-  };
-
-  const leaveClicked = () => {
-    setKeyDialog(true);
-    setStep(1);
-  };
-
-  const handleEditRoles = () => {
-    setKeyDialog(true);
-    setStep(2);
-  };
-
-  const handleBlockedUsers = () => {
-    setKeyDialog(true);
-    setStep(8);
-  };
-
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
-    setUser("");
     setAddRoleError("");
   };
 
@@ -1335,68 +925,11 @@ export default function ChatBox(props: Props) {
     setClickedMessage("");
     setShowSearchUser(false);
     setSearchText("");
-    setMessage("");
     setHasMore(true);
     setRevealPrivateKey(false);
     setAddRoleError("");
   };
 
-  const communityMenuItems: MenuItem[] = [
-    {
-      label: _t("chat.invite"),
-      onClick: () =>
-        copyToClipboard(
-          `http://localhost:3000/created/${currentCommunity?.name}?communityid=${currentChannel?.id}`
-        ),
-      icon: linkSvg
-    },
-    {
-      label: _t("chat.leave"),
-      onClick: leaveClicked,
-      icon: chatLeaveSvg
-    },
-    ...(props.activeUser?.username === currentChannel?.communityName
-      ? [
-          {
-            label: _t("chat.edit-roles"),
-            onClick: handleEditRoles,
-            icon: editSVG
-          }
-        ]
-      : []),
-    ...(communityAdmins.includes(props.activeUser?.username!)
-      ? [
-          {
-            label: _t("chat.blocked-users"),
-            onClick: handleBlockedUsers,
-            icon: removeUserSvg
-          }
-        ]
-      : [])
-  ];
-
-  const communityMenuConfig = {
-    history: props.history,
-    label: "",
-    icon: KebabMenu,
-    items: communityMenuItems
-  };
-
-  const menuItems: MenuItem[] = [
-    {
-      label: _t("chat.manage-chat-key"),
-      onClick: () => setRevealPrivateKey(!revelPrivateKey),
-      icon: chatKeySvg
-    }
-  ];
-
-  const menuConfig = {
-    history: props.history,
-    label: "",
-    icon: KebabMenu,
-    items: menuItems
-  };
-
   return (
     <>
       {show && (
@@ -1465,23 +998,16 @@ export default function ChatBox(props: Props) {
               )}
               {isCommunity && (
                 <div className="community-menu">
-                  <DropDown
-                    {...communityMenuConfig}
-                    float="right"
-                    alignBottom={false}
-                    noMarginTop={true}
-                    style={DropDownStyle}
-                  />
+                  <ChatsCommunityDropdownMenu username={communityName} {...props} />
                 </div>
               )}{" "}
               {!isCommunity && !isCurrentUser && noStrPrivKey && (
                 <div className="simple-menu">
-                  <DropDown
-                    {...menuConfig}
-                    float="right"
-                    alignBottom={false}
-                    noMarginTop={true}
-                    style={DropDownStyle}
+                  <ChatsDropdownMenu
+                    {...props}
+                    onManageChatKey={() => {
+                      setRevealPrivateKey(!revelPrivateKey);
+                    }}
                   />
                 </div>
               )}
@@ -1530,43 +1056,12 @@ export default function ChatBox(props: Props) {
                             : ""
                         }
                       >
-                        <div className="user-profile">
-                          {profileData?.joiningData && (
-                            <div className="user-profile-data">
-                              <span className="user-logo">
-                                <UserAvatar
-                                  username={
-                                    isCurrentUser
-                                      ? currentUser
-                                      : (isCommunity && currentCommunity?.name) || ""
-                                  }
-                                  size="large"
-                                />
-                              </span>
-                              <h4 className="user-name user-logo ">
-                                {isCurrentUser
-                                  ? currentUser
-                                  : (isCommunity && currentCommunity?.title) || ""}
-                              </h4>
-                              {profileData.about && (
-                                <p className="about user-logo ">{profileData.about}</p>
-                              )}
-
-                              <div className="created-date user-logo joining-info">
-                                <p>
-                                  {" "}
-                                  {_t("chat.joined")}{" "}
-                                  {dateToFormatted(profileData!.joiningData, "LL")}
-                                </p>
-                                <p className="followers">
-                                  {" "}
-                                  {formatFollowers(profileData!.followers)}{" "}
-                                  {isCommunity ? _t("chat.subscribers") : _t("chat.followers")}
-                                </p>
-                              </div>
-                            </div>
-                          )}
-                        </div>
+                        <ChatsProfileBox
+                          isCommunity={isCommunity}
+                          isCurrentUser={isCurrentUser}
+                          communityName={communityName}
+                          currentUser={currentUser}
+                        />
                       </Link>
                       {!isCurrentUserJoined && (
                         <p className="not-joined">{_t("chat.not-joined")}</p>
@@ -1672,7 +1167,7 @@ export default function ChatBox(props: Props) {
 
                             const isImage = isMessageImage(pMsg.content);
 
-                            const name = getProfileName(pMsg.creator);
+                            const name = getProfileName(pMsg.creator, props.chat.profiles);
 
                             const popover = (
                               <Popover
@@ -2089,7 +1584,9 @@ export default function ChatBox(props: Props) {
               >
                 <div
                   className="scroller"
-                  style={{ bottom: isCurrentUser && isScrollToBottom ? "20px" : "55px" }}
+                  style={{
+                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
+                  }}
                   onClick={scrollerClicked}
                 >
                   {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
@@ -2103,119 +1600,19 @@ export default function ChatBox(props: Props) {
             )}
           </div>
           {inProgress && <LinearProgress />}
-
-          {(currentUser || isCommunity) && (
-            <div className={`chat ${isActveUserRemoved ? "disable" : ""}`}>
-              <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
-                <div className="chatbox-emoji-picker">
-                  <div className="chatbox-emoji">
-                    <Tooltip content={_t("editor-toolbar.emoji")}>
-                      <div
-                        className="emoji-icon"
-                        onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                      >
-                        {emoticonHappyOutlineSvg}
-                      </div>
-                    </Tooltip>
-                    {showEmojiPicker && (
-                      <EmojiPicker
-                        style={EmojiPickerStyle}
-                        fallback={(e) => {
-                          handleEmojiSelection(e);
-                        }}
-                      />
-                    )}
-                  </div>
-                </div>
-              </ClickAwayListener>
-
-              {message.length === 0 && (
-                <React.Fragment>
-                  <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
-                    <div className="chatbox-emoji-picker">
-                      <div className="chatbox-emoji">
-                        <Tooltip content={_t("Gif")}>
-                          <div className="emoji-icon" onClick={toggleGif}>
-                            {" "}
-                            {gifIcon}
-                          </div>
-                        </Tooltip>
-                        {shGif && (
-                          <GifPicker
-                            style={GifPickerStyle}
-                            gifImagesStyle={GifImagesStyle}
-                            shGif={true}
-                            changeState={(gifState) => {
-                              setShGif(gifState!);
-                            }}
-                            fallback={(e) => {
-                              handleGifSelection(e);
-                            }}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  </ClickAwayListener>
-
-                  <Tooltip content={"Image"}>
-                    <div
-                      className="chatbox-image"
-                      onClick={(e: React.MouseEvent<HTMLElement>) => {
-                        e.stopPropagation();
-                        const el = fileInput.current;
-                        if (el) el.click();
-                      }}
-                    >
-                      <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
-                    </div>
-                  </Tooltip>
-
-                  <input
-                    onChange={fileInputChanged}
-                    className="file-input"
-                    ref={fileInput}
-                    type="file"
-                    accept="image/*"
-                    multiple={true}
-                    style={{ display: "none" }}
-                  />
-                </React.Fragment>
-              )}
-
-              <Form
-                onSubmit={(e: React.FormEvent) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  sendMessage();
-                }}
-                style={{ width: "100%" }}
-              >
-                <InputGroup className="chat-input-group">
-                  <Form.Control
-                    value={message}
-                    autoFocus={true}
-                    onChange={handleMessage}
-                    required={true}
-                    type="text"
-                    placeholder={_t("chat.start-chat-placeholder")}
-                    autoComplete="off"
-                    className="chat-input"
-                    style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-                    disabled={
-                      inProgress ||
-                      (isCurrentUser && receiverPubKey) === undefined ||
-                      isActveUserRemoved
-                    }
-                  />
-                  <InputGroup.Append
-                    className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
-                    onClick={sendMessage}
-                  >
-                    {messageSendSvg}
-                  </InputGroup.Append>
-                </InputGroup>
-              </Form>
-            </div>
+          {(isCurrentUser || isCommunity) && (
+            <ChatInput
+              {...props}
+              isCurrentUser={isCurrentUser}
+              isCommunity={isCommunity}
+              receiverPubKey={receiverPubKey}
+              isActveUserRemoved={isActveUserRemoved}
+              currentUser={currentUser}
+              currentChannel={currentChannel!}
+              isCurrentUserJoined={isCurrentUserJoined}
+              emojiPickerStyles={EmojiPickerStyle}
+              gifPickerStyle={GifPickerStyle}
+            />
           )}
         </div>
       )}
@@ -2232,15 +1629,11 @@ export default function ChatBox(props: Props) {
         >
           <Modal.Header closeButton={true} />
           <Modal.Body className="chat-modals-body">
-            {step === 1 && confirmationModal(LEAVECOMMUNITY)}
             {step === 5 && confirmationModal(HIDEMESSAGE)}
             {step === 6 && confirmationModal(BLOCKUSER)}
-            {step === 7 && confirmationModal(UNBLOCKUSER)}
             {step === 9 && confirmationModal(NEWCHATACCOUNT)}
             {step === 11 && confirmationModal(RESENDMESSAGE)}
-            {step === 2 && EditRolesModal()}
             {step === 10 && successModal(NEWCHATACCOUNT)}
-            {step === 8 && blockedUsersModal()}
           </Modal.Body>
         </Modal>
       )}
diff --git a/src/common/components/chat-input/index.scss b/src/common/components/chat-input/index.scss
new file mode 100644
index 00000000000..b5af1d1fa20
--- /dev/null
+++ b/src/common/components/chat-input/index.scss
@@ -0,0 +1,66 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
+.chat {
+  grid-row: span 1;
+  display: flex;
+  margin: 4px 8px;
+  padding: 4px;
+  min-height: 45px;
+  border-radius: 20px;
+  @include themify(day) {
+    background: #e4e6eb;
+  }
+  @include themify(night) {
+    background: #cee2ff;
+  }
+
+  &.disable {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .chatbox-emoji-picker {
+    .chatbox-emoji {
+      margin: 8px 0 0 7px;
+      cursor: pointer;
+
+      svg {
+        height: 22px;
+        fill: rgb(60, 68, 73);
+      }
+    }
+  }
+  .chatbox-image {
+    cursor: pointer;
+    .chatbox-image-icon {
+      margin: 7px 0 0 7px;
+    }
+  }
+
+  .chat-input-group {
+    .chat-input {
+      padding-top: 10px;
+      border: none;
+      @include themify(day) {
+        background: #e4e6eb;
+      }
+      @include themify(night) {
+        background: #cee2ff;
+      }
+    }
+    .msg-svg {
+      padding: 8px;
+
+      &.active {
+        cursor: pointer;
+      }
+      &.active:hover {
+        background: rgba(29, 155, 240, 0.1);
+        border-radius: 50%;
+      }
+    }
+  }
+}
diff --git a/src/common/components/chat-input/index.tsx b/src/common/components/chat-input/index.tsx
new file mode 100644
index 00000000000..7ea44638a51
--- /dev/null
+++ b/src/common/components/chat-input/index.tsx
@@ -0,0 +1,286 @@
+import React, { useEffect, useState } from "react";
+import { Form, FormControl, InputGroup } from "react-bootstrap";
+import axios from "axios";
+
+import { Channel } from "../../../providers/message-provider-types";
+import { Chat } from "../../store/chat/types";
+import { ActiveUser } from "../../store/active-user/types";
+import { Global } from "../../store/global/types";
+
+import ClickAwayListener from "../clickaway-listener";
+import EmojiPicker from "../emoji-picker";
+import GifPicker from "../gif-picker";
+import { error } from "../feedback";
+import Tooltip from "../tooltip";
+
+import { emoticonHappyOutlineSvg, gifIcon, chatBoxImageSvg, messageSendSvg } from "../../img/svg";
+import { GifImagesStyle, UPLOADING } from "../chat-box/chat-constants";
+
+import { _t } from "../../i18n";
+import { getAccessToken } from "../../helper/user-token";
+import { uploadImage } from "../../api/misc";
+import { addImage } from "../../api/private-api";
+
+import "./index.scss";
+import { EmojiPickerStyleProps } from "../chat-box";
+
+interface Props {
+  activeUser: ActiveUser | null;
+  global: Global;
+  chat: Chat;
+  isCurrentUser: boolean;
+  isCommunity: boolean;
+  receiverPubKey: string | null;
+  isActveUserRemoved: boolean;
+  currentChannel: Channel;
+  currentUser: string;
+  isCurrentUserJoined: boolean;
+  emojiPickerStyles: EmojiPickerStyleProps;
+  gifPickerStyle: EmojiPickerStyleProps;
+}
+
+export default function ChatInput(props: Props) {
+  const fileInput = React.createRef<HTMLInputElement>();
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [message, setMessage] = useState("");
+  const [shGif, setShGif] = useState(false);
+  const [isMessageText, setIsMessageText] = useState(false);
+
+  const {
+    isCommunity,
+    isCurrentUser,
+    isActveUserRemoved,
+    receiverPubKey,
+    currentChannel,
+    currentUser,
+    isCurrentUserJoined,
+    emojiPickerStyles,
+    gifPickerStyle
+  } = props;
+  // console.log("currentUser in chat input", currentUser);
+
+  useEffect(() => {
+    if (!isCurrentUser && !isCommunity) {
+      setMessage("");
+    }
+  }, [isCommunity, isCurrentUser]);
+
+  const handleEmojiSelection = (emoji: string) => {
+    setMessage((prevMessage) => prevMessage + emoji);
+  };
+
+  const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
+    if (e) {
+      e.stopPropagation();
+    }
+    setShGif(!shGif);
+  };
+
+  const handleGifSelection = (gif: string) => {
+    isCurrentUser
+      ? window.messageService?.sendDirectMessage(receiverPubKey!, gif)
+      : window?.messageService?.sendPublicMessage(currentChannel, gif, [], "");
+  };
+
+  const sendMessage = () => {
+    if (message.length !== 0 && !message.includes(UPLOADING)) {
+      if (isCommunity) {
+        if (!isActveUserRemoved) {
+          window?.messageService?.sendPublicMessage(currentChannel, message, [], "");
+        } else {
+          error(_t("chat.message-warning"));
+        }
+      }
+      if (isCurrentUser) {
+        window.messageService?.sendDirectMessage(receiverPubKey!, message);
+      }
+      setMessage("");
+      setIsMessageText(false);
+    }
+    if (
+      receiverPubKey &&
+      !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
+      isCurrentUser
+    ) {
+      window.messageService?.publishContacts(currentUser, receiverPubKey);
+    }
+  };
+
+  const checkFile = (filename: string) => {
+    const filenameLow = filename.toLowerCase();
+    return ["jpg", "jpeg", "gif", "png"].some((el) => filenameLow.endsWith(el));
+  };
+
+  const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
+
+    const {
+      global: { isElectron }
+    } = props;
+
+    if (files.length > 0) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
+    if (files.length > 1 && isElectron) {
+      let isWindows = process.platform === "win32";
+      if (isWindows) {
+        files = files.reverse();
+      }
+    }
+
+    files.forEach((file) => upload(file));
+
+    // reset input
+    e.target.value = "";
+  };
+  const upload = async (file: File) => {
+    const { activeUser, global } = props;
+
+    const username = activeUser?.username!;
+
+    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
+
+    setMessage(tempImgTag);
+
+    let imageUrl: string;
+    try {
+      let token = getAccessToken(username);
+      if (token) {
+        const resp = await uploadImage(file, token);
+        imageUrl = resp.url;
+
+        if (global.usePrivate && imageUrl.length > 0) {
+          addImage(username, imageUrl).then();
+        }
+
+        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
+
+        imgTag && setMessage(imgTag);
+        setIsMessageText(true);
+      } else {
+        error(_t("editor-toolbar.image-error-cache"));
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e) && e.response?.status === 413) {
+        error(_t("editor-toolbar.image-error-size"));
+      } else {
+        error(_t("editor-toolbar.image-error"));
+      }
+      return;
+    }
+  };
+
+  const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    setMessage(e.target.value);
+    setIsMessageText(e.target.value.length !== 0);
+  };
+
+  return (
+    <div className={`chat ${isActveUserRemoved || !isCurrentUserJoined ? "disable" : ""}`}>
+      <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
+        <div className="chatbox-emoji-picker">
+          <div className="chatbox-emoji">
+            <Tooltip content={_t("editor-toolbar.emoji")}>
+              <div className="emoji-icon" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
+                {emoticonHappyOutlineSvg}
+              </div>
+            </Tooltip>
+            {showEmojiPicker && (
+              <EmojiPicker
+                style={emojiPickerStyles}
+                fallback={(e) => {
+                  handleEmojiSelection(e);
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </ClickAwayListener>
+
+      {message.length === 0 && (
+        <React.Fragment>
+          <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
+            <div className="chatbox-emoji-picker">
+              <div className="chatbox-emoji">
+                <Tooltip content={_t("Gif")}>
+                  <div className="emoji-icon" onClick={toggleGif}>
+                    {" "}
+                    {gifIcon}
+                  </div>
+                </Tooltip>
+                {shGif && (
+                  <GifPicker
+                    style={gifPickerStyle}
+                    gifImagesStyle={GifImagesStyle}
+                    shGif={true}
+                    changeState={(gifState) => {
+                      setShGif(gifState!);
+                    }}
+                    fallback={(e) => {
+                      handleGifSelection(e);
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </ClickAwayListener>
+
+          <Tooltip content={"Image"}>
+            <div
+              className="chatbox-image"
+              onClick={(e: React.MouseEvent<HTMLElement>) => {
+                e.stopPropagation();
+                const el = fileInput.current;
+                if (el) el.click();
+              }}
+            >
+              <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
+            </div>
+          </Tooltip>
+
+          <input
+            onChange={fileInputChanged}
+            className="file-input"
+            ref={fileInput}
+            type="file"
+            accept="image/*"
+            multiple={true}
+            style={{ display: "none" }}
+          />
+        </React.Fragment>
+      )}
+
+      <Form
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          e.stopPropagation();
+          sendMessage();
+        }}
+        style={{ width: "100%" }}
+      >
+        <InputGroup className="chat-input-group">
+          <Form.Control
+            value={message}
+            autoFocus={true}
+            onChange={handleMessage}
+            required={true}
+            type="text"
+            placeholder={_t("chat.start-chat-placeholder")}
+            autoComplete="off"
+            className="chat-input"
+            style={{ maxWidth: "100%", overflowWrap: "break-word" }}
+            disabled={(isCurrentUser && receiverPubKey) === undefined || isActveUserRemoved}
+          />
+          <InputGroup.Append
+            className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
+            onClick={sendMessage}
+          >
+            {messageSendSvg}
+          </InputGroup.Append>
+        </InputGroup>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/common/components/chats-channel-messages/index.scss b/src/common/components/chats-channel-messages/index.scss
new file mode 100644
index 00000000000..3f55b168d2c
--- /dev/null
+++ b/src/common/components/chats-channel-messages/index.scss
@@ -0,0 +1,186 @@
+@import "../../../style/vars_mixins";
+
+.channel-messages {
+  padding-bottom: 15px;
+  .date-and-month {
+    margin-bottom: 0;
+    color: $dark;
+  }
+  .profile-box {
+    padding: 15px;
+    .profile-box-content {
+      .user-avatar.large {
+        margin-bottom: 20px;
+      }
+      .profile-name {
+        margin-bottom: 10px;
+        font-size: 18px;
+        font-weight: 800;
+      }
+      .profile-box-buttons {
+        margin-bottom: 15px;
+        padding: 0 5px;
+      }
+    }
+  }
+
+  .message {
+    display: flex;
+    .user-img {
+      padding: 18px 8px 8px 16px;
+    }
+    .community-user-img {
+      padding: 8px 8px 8px 16px;
+      .user-avatar.medium {
+        cursor: pointer;
+      }
+    }
+    .user-info {
+      padding-top: 8px;
+      width: 100%;
+      .user-msg-time {
+        margin: 0;
+        color: rgb(138, 141, 145);
+        font-weight: 400;
+        font-size: 12px;
+        margin-left: 4px;
+        margin-bottom: 2px;
+        .username-community {
+          margin-right: 8px;
+        }
+      }
+      .receiver-message-content {
+        @include themify(day) {
+          background: #e4e6eb;
+        }
+        @include themify(night) {
+          background: #cee2ff;
+        }
+
+        &.gif {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+
+        &.chat-image {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+        color: #050505;
+        // max-width: 290px;
+        display: inline-block;
+        max-width: 70% !important;
+        word-wrap: break-word;
+        padding: 10px;
+        border-radius: 0px 10px 10px;
+      }
+    }
+  }
+
+  .sender {
+    margin-bottom: 0.17rem;
+    .sender-message-time {
+      color: rgb(138, 141, 145);
+      display: flex;
+      font-weight: 400;
+      justify-content: flex-end;
+      font-size: 12px;
+      margin: 0;
+      margin-right: 18px;
+      margin-bottom: 2px;
+    }
+    .sender-message {
+      // max-width: 320px;
+      margin-left: auto;
+
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 17px;
+
+      .resend-svg {
+        margin: 5px 15px 0 0;
+        cursor: pointer;
+        svg {
+          @include themify(day) {
+            fill: $light-black;
+          }
+          @include themify(night) {
+            fill: $white;
+          }
+        }
+      }
+
+      .failed-svg {
+        margin: 8px 0 0 5px;
+        svg {
+          width: 16px;
+          height: 16px;
+          fill: $red !important;
+        }
+      }
+
+      &.sending {
+        margin-right: 5px;
+      }
+      &.failed {
+        margin-right: 7px;
+      }
+
+      .sender-message-content {
+        border-radius: 10px 10px 0px;
+        max-width: 70%;
+        word-wrap: break-word;
+        margin-bottom: 0;
+        color: $charcoal-grey;
+        font-size: 16px;
+        font-weight: 400;
+        padding: 8px 12px 8px 12px;
+        a {
+          text-decoration: underline;
+          color: white;
+        }
+        @include themify(day) {
+          background-color: rgb(0, 132, 255);
+          color: $white;
+        }
+        @include themify(night) {
+          background-color: $charcoal-grey;
+          color: $white;
+        }
+        &.gif {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+
+        &.chat-image {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .hide-msg {
+    margin-right: 15px;
+    margin-top: 5px;
+    svg {
+      height: 14px;
+      width: 14px;
+    }
+    .hide-msg-svg {
+      cursor: pointer;
+      margin-bottom: 0;
+    }
+    &.receiver {
+      margin-top: 33px;
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/src/common/components/chats-channel-messages/index.tsx b/src/common/components/chats-channel-messages/index.tsx
new file mode 100644
index 00000000000..b720be30e34
--- /dev/null
+++ b/src/common/components/chats-channel-messages/index.tsx
@@ -0,0 +1,355 @@
+import React, { useRef, useState, RefObject, useEffect } from "react";
+import { Channel, PublicMessage } from "../../../providers/message-provider-types";
+import {
+  formatMessageTime,
+  getFormattedDateAndDay,
+  getProfileName,
+  isMessageGif,
+  isMessageImage,
+  NostrKeysType
+} from "../../helper/chat-utils";
+import { renderPostBody } from "@ecency/render-helper";
+import { useMappedStore } from "../../store/use-mapped-store";
+import {
+  Button,
+  Col,
+  Form,
+  FormControl,
+  InputGroup,
+  Modal,
+  OverlayTrigger,
+  Popover,
+  Row,
+  Spinner
+} from "react-bootstrap";
+import UserAvatar from "../user-avatar";
+import FollowControls from "../follow-controls";
+import { Account } from "../../store/accounts/types";
+import { ToggleType, UI } from "../../store/ui/types";
+import { _t } from "../../i18n";
+import Tooltip from "../tooltip";
+import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../img/svg";
+
+import "./index.scss";
+import { User } from "../../store/users/types";
+import { ActiveUser } from "../../store/active-user/types";
+import ChatInput from "../chat-input";
+
+interface Props {
+  publicMessages: PublicMessage[];
+  currentChannel: Channel;
+  activeUserKeys: NostrKeysType;
+  username: string;
+  users: User[];
+  activeUser: ActiveUser | null;
+  ui: UI;
+  setActiveUser: (username: string | null) => void;
+  updateActiveUser: (data?: Account) => void;
+  deleteUser: (username: string) => void;
+  toggleUIProp: (what: ToggleType) => void;
+  scrollToBottom: () => void;
+}
+
+export default function ChatsChannelMessages(props: Props) {
+  const { publicMessages, currentChannel, activeUserKeys, activeUser, scrollToBottom } = props;
+  const { global, chat } = useMappedStore();
+
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+  const channelMessagesRef = React.createRef<HTMLDivElement>();
+
+  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
+  const [hoveredMessageId, setHoveredMessageId] = useState("");
+  const [dmMessage, setDmMessage] = useState("");
+  const [clickedMessage, setClickedMessage] = useState("");
+  const [removedUserId, setRemovedUserID] = useState("");
+  const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
+  const [hiddenMsgId, setHiddenMsgId] = useState("");
+  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
+  const [resendMessage, setResendMessage] = useState<PublicMessage>();
+
+  // useEffect(() => {
+  //   scrollToBottom();
+  // }, [publicMessages]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const clickedElement = event.target as HTMLElement;
+
+      if (!popoverRef.current) {
+        return;
+      }
+
+      const isAvatarClicked =
+        clickedElement.classList.contains("user-avatar") &&
+        clickedElement.classList.contains("medium");
+      if (
+        popoverRef.current &&
+        !popoverRef.current?.contains(event.target as Node) &&
+        !isAvatarClicked
+      ) {
+        setClickedMessage("");
+      }
+    };
+
+    if (channelMessagesRef.current) {
+      channelMessagesRef.current.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      if (channelMessagesRef.current) {
+        channelMessagesRef.current.removeEventListener("mousedown", handleClickOutside);
+      }
+    };
+  }, [clickedMessage]);
+
+  const sendDM = (name: string, pubkey: string) => {
+    if (dmMessage) {
+      window.messageService?.sendDirectMessage(pubkey, dmMessage);
+
+      // setIsCurrentUser(true);
+      // setCurrentUser(name);
+      // setIsCommunity(false);
+      // setCommunityName("");
+      setClickedMessage("");
+      setDmMessage("");
+    }
+  };
+
+  const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    setDmMessage(e.target.value);
+  };
+
+  const handleImageClick = (msgId: string, pubkey: string) => {
+    if (clickedMessage === msgId) {
+      popoverRef.current = null;
+      setClickedMessage("");
+    } else {
+      popoverRef.current = null;
+      setClickedMessage(msgId);
+      setRemovedUserID(pubkey);
+    }
+  };
+
+  return (
+    <div className="channel-messages" ref={channelMessagesRef}>
+      {publicMessages.length !== 0 &&
+        activeUserKeys &&
+        publicMessages.map((pMsg, i) => {
+          const dayAndMonth = getFormattedDateAndDay(pMsg, i, publicMessages);
+          let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
+
+          renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+          renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+          const isGif = isMessageGif(pMsg.content);
+
+          const isImage = isMessageImage(pMsg.content);
+
+          const name = getProfileName(pMsg.creator, chat.profiles);
+
+          const popover = (
+            <Popover id={`profile-popover`} placement="right" className="profile-popover">
+              <Popover.Content>
+                <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
+                  <div className="profile-box-content">
+                    <div className="profile-box-logo d-flex justify-content-center">
+                      <UserAvatar username={name!} size="large" />
+                    </div>
+
+                    <p className="d-flex justify-content-center profile-name">{`@${name!}`}</p>
+                    <div
+                      className={`d-flex ${
+                        communityAdmins.includes(activeUser?.username!)
+                          ? "justify-content-between"
+                          : "justify-content-center"
+                      }  profile-box-buttons`}
+                    >
+                      <FollowControls {...props} targetUsername={name!} where={"chat-box"} />
+
+                      {communityAdmins.includes(activeUser?.username!) && (
+                        <>
+                          {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
+                            <>
+                              <Button
+                                variant="primary"
+                                onClick={() => {
+                                  // setKeyDialog(true);
+                                  // setStep(7);
+                                  setClickedMessage("");
+                                }}
+                              >
+                                {_t("chat.unblock")}
+                              </Button>
+                            </>
+                          ) : (
+                            <>
+                              <Button
+                                variant="primary"
+                                onClick={() => {
+                                  // setKeyDialog(true);
+                                  // setStep(6);
+                                  setClickedMessage("");
+                                }}
+                              >
+                                {_t("chat.block")}
+                              </Button>
+                            </>
+                          )}
+                        </>
+                      )}
+                    </div>
+
+                    <Form
+                      onSubmit={(e: React.FormEvent) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        sendDM(name!, pMsg.creator);
+                      }}
+                    >
+                      <InputGroup className="dm-input-group">
+                        <Form.Control
+                          value={dmMessage}
+                          autoFocus={true}
+                          onChange={handleDMChange}
+                          required={true}
+                          type="text"
+                          placeholder={"Send direct message"}
+                          autoComplete="off"
+                          className="dm-chat-input"
+                        />
+                      </InputGroup>
+                    </Form>
+                  </div>
+                </div>
+              </Popover.Content>
+            </Popover>
+          );
+
+          return (
+            <React.Fragment key={pMsg.id}>
+              <span className="d-flex justify-content-center align-items-center day-and-month mt-3">
+                {dayAndMonth}
+              </span>
+
+              {pMsg.creator !== activeUserKeys?.pub ? (
+                <div
+                  key={pMsg.id}
+                  className="message"
+                  onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                  onMouseLeave={() => setHoveredMessageId("")}
+                >
+                  <div className="community-user-img">
+                    <OverlayTrigger
+                      trigger="click"
+                      placement="right"
+                      show={clickedMessage === pMsg.id}
+                      overlay={popover}
+                      delay={1000}
+                      onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
+                    >
+                      <span>
+                        <UserAvatar username={name!} size="medium" />
+                      </span>
+                    </OverlayTrigger>
+                  </div>
+
+                  <div className="user-info">
+                    <p className="user-msg-time">
+                      <span className="username-community">{name}</span>
+                      {formatMessageTime(pMsg.created)}
+                    </p>
+                    <div
+                      className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                        isImage ? "chat-image" : ""
+                      }`}
+                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                    />
+                  </div>
+                  {hoveredMessageId === pMsg.id &&
+                    privilegedUsers.includes(props.activeUser?.username!) && (
+                      <Tooltip content={"Hide Message"}>
+                        <div className="hide-msg receiver">
+                          <p
+                            className="hide-msg-svg"
+                            onClick={() => {
+                              setClickedMessage("");
+                              // setKeyDialog(true);
+                              // setStep(5);
+                              setHiddenMsgId(pMsg.id);
+                            }}
+                          >
+                            {hideSvg}
+                          </p>
+                        </div>
+                      </Tooltip>
+                    )}
+                </div>
+              ) : (
+                <div
+                  key={pMsg.id}
+                  className="sender"
+                  onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                  onMouseLeave={() => setHoveredMessageId("")}
+                >
+                  <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
+                  <div
+                    className={`sender-message ${
+                      pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
+                    }`}
+                  >
+                    {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
+                      <Tooltip content={"Hide Message"}>
+                        <div className="hide-msg">
+                          <p
+                            className="hide-msg-svg"
+                            onClick={() => {
+                              setClickedMessage("");
+                              // setKeyDialog(true);
+                              // setStep(5);
+                              setHiddenMsgId(pMsg.id);
+                            }}
+                          >
+                            {hideSvg}
+                          </p>
+                        </div>
+                      </Tooltip>
+                    )}
+                    {pMsg.sent === 2 && (
+                      <Tooltip content={"Resend"}>
+                        <span
+                          className="resend-svg"
+                          onClick={() => {
+                            // setKeyDialog(true);
+                            // setStep(11);
+                            setResendMessage(pMsg);
+                          }}
+                        >
+                          {resendMessageSvg}
+                        </span>
+                      </Tooltip>
+                    )}
+                    <div
+                      className={`sender-message-content ${isGif ? "gif" : ""} ${
+                        isImage ? "chat-image" : ""
+                      }`}
+                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                    />
+                    {pMsg.sent === 0 && (
+                      <span style={{ margin: "10px 0 0 5px" }}>
+                        <Spinner animation="border" variant="primary" size="sm" />
+                      </span>
+                    )}
+                    {pMsg.sent === 2 && (
+                      <Tooltip content={"Failed"}>
+                        <span className="failed-svg">{failedMessageSvg}</span>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+              )}
+            </React.Fragment>
+          );
+        })}
+    </div>
+  );
+}
diff --git a/src/common/components/chats-community-dropdown-menu/index.scss b/src/common/components/chats-community-dropdown-menu/index.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/common/components/chats-community-dropdown-menu/index.tsx b/src/common/components/chats-community-dropdown-menu/index.tsx
new file mode 100644
index 00000000000..3b49d0acb46
--- /dev/null
+++ b/src/common/components/chats-community-dropdown-menu/index.tsx
@@ -0,0 +1,559 @@
+import React, { useEffect, useState } from "react";
+import { History } from "history";
+import DropDown, { MenuItem } from "../dropdown";
+import useDebounce from "react-use/lib/useDebounce";
+
+import { KebabMenu, linkSvg, chatLeaveSvg, editSVG, removeUserSvg } from "../../img/svg";
+import { _t } from "../../i18n";
+import {
+  ADDROLE,
+  CHATPAGE,
+  DropDownStyle,
+  LEAVECOMMUNITY,
+  NOSTRKEY,
+  UNBLOCKUSER
+} from "../chat-box/chat-constants";
+import { useMappedStore } from "../../store/use-mapped-store";
+import {
+  Channel,
+  ChannelUpdate,
+  communityModerator
+} from "../../../providers/message-provider-types";
+import { copyToClipboard, formattedUserName, getProfileMetaData } from "../../helper/chat-utils";
+import { error, success } from "../feedback";
+import { Button, Form, Modal, Row, Col, InputGroup, FormControl } from "react-bootstrap";
+import LinearProgress from "../linear-progress";
+import { ROLES } from "../../store/communities";
+import UserAvatar from "../user-avatar";
+
+interface Props {
+  history: History | null;
+  from?: string;
+  username: string;
+}
+
+const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
+
+const ChatsCommunityDropdownMenu = (props: Props) => {
+  const { activeUser, chat } = useMappedStore();
+  const { history, username, from } = props;
+  const [step, setStep] = useState(0);
+  const [keyDialog, setKeyDialog] = useState(false);
+  const [inProgress, setInProgress] = useState(false);
+  const [user, setUser] = useState("");
+  const [addRoleError, setAddRoleError] = useState("");
+  const [role, setRole] = useState("admin");
+  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [moderator, setModerator] = useState<communityModerator>();
+  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
+  const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
+  const [removedUserId, setRemovedUserID] = useState("");
+
+  useEffect(() => {
+    fetchCurrentChannel(formattedUserName(username));
+  }, [chat.updatedChannel, username, chat.channels]);
+
+  useEffect(() => {
+    getCommunityAdmins();
+
+    if (currentChannel && currentChannel?.removedUserIds) {
+      getBlockedUsers(currentChannel?.removedUserIds!);
+    }
+  }, [currentChannel, removedUserId]);
+
+  const fetchCurrentChannel = (communityName: string) => {
+    const channel = chat.channels.find((channel) => channel.communityName === communityName);
+    if (channel) {
+      const updated: ChannelUpdate = chat.updatedChannel
+        .filter((x) => x.channelId === channel.id)
+        .sort((a, b) => b.created - a.created)[0];
+      if (updated) {
+        const channel = {
+          name: updated.name,
+          about: updated.about,
+          picture: updated.picture,
+          communityName: updated.communityName,
+          communityModerators: updated.communityModerators,
+          id: updated.channelId,
+          creator: updated.creator,
+          created: currentChannel?.created!,
+          hiddenMessageIds: updated.hiddenMessageIds,
+          removedUserIds: updated.removedUserIds
+        };
+        setCurrentChannel(channel);
+      } else {
+        setCurrentChannel(channel);
+      }
+    }
+  };
+
+  const handleEditRoles = () => {
+    setKeyDialog(true);
+    setStep(2);
+  };
+
+  const toggleKeyDialog = () => {
+    setKeyDialog(!keyDialog);
+  };
+
+  const userChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    const { value: user } = e.target;
+    setUser(user);
+    setInProgress(true);
+  };
+
+  const getCommunityAdmins = () => {
+    const communityAdminRoles = ["owner", "admin"];
+    const communityAdmins = currentChannel?.communityModerators?.filter((user) =>
+      communityAdminRoles.includes(user.role)
+    );
+    const communityAdminNames = communityAdmins?.map((user) => user.name);
+    setCommunityAdmins(communityAdminNames!);
+  };
+
+  const getBlockedUsers = (blockedUser: string[]) => {
+    const blockedUsers = chat.profiles
+      .filter((item) => blockedUser.includes(item.creator))
+      .map((item) => ({ name: item.name, pubkey: item.creator }));
+    setBlockedUsers(blockedUsers);
+  };
+
+  const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    const { value: role } = e.target;
+    setRole(role);
+  };
+
+  const handleBlockedUsers = () => {
+    setKeyDialog(true);
+    setStep(3);
+  };
+
+  const updateRole = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+    moderator: communityModerator
+  ) => {
+    const selectedRole = event.target.value;
+    const moderatorIndex = currentChannel?.communityModerators?.findIndex(
+      (mod) => mod.name === moderator.name
+    );
+    if (moderatorIndex !== -1 && currentChannel) {
+      const newUpdatedChannel: Channel = { ...currentChannel };
+      const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
+      newUpdatedModerator.role = selectedRole;
+      newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
+      setCurrentChannel(newUpdatedChannel);
+      window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
+      success("Roles updated succesfully");
+    }
+  };
+
+  const finish = () => {
+    setStep(0);
+    setKeyDialog(false);
+  };
+
+  useDebounce(
+    async () => {
+      if (user.length === 0) {
+        setAddRoleError("");
+        setInProgress(false);
+        return;
+      }
+
+      try {
+        const profileData = await getProfileMetaData(user);
+        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
+          const alreadyExists = currentChannel?.communityModerators?.some(
+            (moderator) => moderator.name === profileData.name
+          );
+          if (alreadyExists) {
+            setAddRoleError("You have already assigned some rule to this user.");
+            setInProgress(false);
+            return;
+          }
+          const moderator = {
+            name: user,
+            pubkey: profileData.nsKey,
+            role: role
+          };
+          setModerator(moderator);
+          setAddRoleError("");
+        } else {
+          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
+        }
+      } catch (err) {
+        error(err as string);
+      }
+
+      setInProgress(false);
+    },
+    200,
+    [user, role]
+  );
+
+  const communityMenuItems: MenuItem[] = [
+    {
+      label: _t("chat.invite"),
+      onClick: () => {
+        copyToClipboard(
+          `http://localhost:3000/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
+        );
+        success("Link copied into clipboard.");
+      },
+
+      icon: linkSvg
+    },
+    {
+      label: _t("chat.leave"),
+      onClick: () => {
+        setStep(1);
+        setKeyDialog(true);
+      },
+      icon: chatLeaveSvg
+    },
+    ...(activeUser?.username === currentChannel?.communityName
+      ? [
+          {
+            label: _t("chat.edit-roles"),
+            onClick: handleEditRoles,
+            icon: editSVG
+          }
+        ]
+      : []),
+    ...(communityAdmins && communityAdmins.includes(activeUser?.username!)
+      ? [
+          {
+            label: _t("chat.blocked-users"),
+            onClick: handleBlockedUsers,
+            icon: removeUserSvg
+          }
+        ]
+      : [])
+  ];
+
+  const communityMenuConfig = {
+    history: props.history,
+    label: "",
+    icon: KebabMenu,
+    items: communityMenuItems
+  };
+
+  const confirmationModal = (actionType: string) => {
+    return (
+      <>
+        <div className="join-community-dialog-header border-bottom">
+          <div className="join-community-dialog-titles">
+            <h2 className="join-community-main-title">Confirmation</h2>
+          </div>
+        </div>
+        <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
+          Are you sure?
+        </div>
+        <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+          <Button
+            variant="outline-primary"
+            className="close-btn"
+            style={{ marginRight: "20px" }}
+            onClick={() => {
+              setStep(0);
+              setKeyDialog(false);
+            }}
+          >
+            {_t("chat.close")}
+          </Button>
+          <Button
+            variant="outline-primary"
+            className="confirm-btn"
+            onClick={() => handleConfirmButton(actionType)}
+          >
+            {_t("chat.confirm")}
+          </Button>
+        </p>
+      </>
+    );
+  };
+
+  const EditRolesModal = () => {
+    return (
+      <>
+        <div className="add-dialog-header">
+          <div className="add-dialog-titles">
+            <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
+          </div>
+        </div>
+        <div className="community-chat-role-edit-dialog-content">
+          {inProgress && <LinearProgress />}
+          <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
+            <Form.Group as={Row}>
+              <Form.Label column={true} sm="2">
+                {_t("community-role-edit.username")}
+              </Form.Label>
+              <Col sm="10">
+                <InputGroup>
+                  <InputGroup.Prepend>
+                    <InputGroup.Text>@</InputGroup.Text>
+                  </InputGroup.Prepend>
+                  <Form.Control
+                    type="text"
+                    autoFocus={user === ""}
+                    placeholder={_t("community-role-edit.username").toLowerCase()}
+                    value={user}
+                    onChange={userChanged}
+                    className={addRoleError ? "is-invalid" : ""}
+                  />
+                </InputGroup>
+                {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
+              </Col>
+            </Form.Group>
+            <Form.Group as={Row}>
+              <Form.Label column={true} sm="2">
+                {_t("community-role-edit.role")}
+              </Form.Label>
+              <Col sm="10">
+                <Form.Control as="select" value={role} onChange={roleChanged}>
+                  {roles.map((r, i) => (
+                    <option key={i} value={r}>
+                      {r}
+                    </option>
+                  ))}
+                </Form.Control>
+              </Col>
+            </Form.Group>
+            <div className="d-flex justify-content-end">
+              <Button
+                type="button"
+                onClick={() => handleChannelUpdate(ADDROLE)}
+                disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
+              >
+                {_t("chat.add")}
+              </Button>
+            </div>
+          </div>
+          {currentChannel?.communityModerators?.length !== 0 ? (
+            <>
+              <table className="table table-striped table-bordered table-roles">
+                <thead>
+                  <tr>
+                    <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
+                    <th style={{ width: "50%" }}>{_t("community.roles-role")}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {currentChannel?.communityModerators &&
+                    currentChannel?.communityModerators!.map((moderator, i) => {
+                      return (
+                        <tr key={i}>
+                          <td>
+                            <span className="user">
+                              <UserAvatar username={moderator.name} size="medium" />{" "}
+                              <span className="username">@{moderator.name}</span>
+                            </span>
+                          </td>
+                          <td>
+                            {moderator.name === activeUser?.username ? (
+                              <p style={{ margin: "5px 0 0 12px" }}>{moderator.role}</p>
+                            ) : (
+                              <Form.Control
+                                as="select"
+                                value={moderator.role}
+                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                                  updateRole(e, moderator)
+                                }
+                              >
+                                {roles.map((r, i) => (
+                                  <option key={i} value={r}>
+                                    {r}
+                                  </option>
+                                ))}
+                              </Form.Control>
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                </tbody>
+              </table>
+            </>
+          ) : (
+            <div className="text-center">
+              <p>{_t("chat.no-admin")}</p>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const blockedUsersModal = () => {
+    return (
+      <>
+        <div className="blocked-user-header" style={{ marginBottom: "1rem" }}>
+          <h4 className="blocked-user-title">{_t("chat.blocked-users")}</h4>
+        </div>
+
+        {blockedUsers.length !== 0 ? (
+          <>
+            <table className="table table-striped table-bordered table-roles">
+              <thead>
+                <tr>
+                  <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
+                  <th style={{ width: "50%" }}>{_t("chat.action")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {blockedUsers &&
+                  blockedUsers.map((user, i) => {
+                    return (
+                      <tr key={i}>
+                        <td>
+                          <span className="d-flex user">
+                            <UserAvatar username={user.name} size="medium" />{" "}
+                            <span className="username" style={{ margin: "10px 0 0 10px" }}>
+                              @{user.name}
+                            </span>
+                          </span>
+                        </td>
+                        <td>
+                          <Button
+                            variant="outline-primary"
+                            onClick={() => {
+                              setKeyDialog(true);
+                              setStep(4);
+                              setRemovedUserID(user.pubkey);
+                            }}
+                          >
+                            {_t("chat.unblock")}
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+              </tbody>
+            </table>
+          </>
+        ) : (
+          <div className="text-center">
+            <p> {_t("chat.no-locked-user")}</p>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const successModal = (message: string) => {
+    return (
+      <>
+        <div className="import-chat-dialog-header border-bottom">
+          <div className="step-no">2</div>
+          <div className="import-chat-dialog-titles">
+            <div className="import-chat-main-title">{_t("manage-authorities.success-title")}</div>
+            <div className="import-chat-sub-title">
+              {_t("manage-authorities.success-sub-title")}
+            </div>
+          </div>
+        </div>
+        <div className="success-dialog-body">
+          <div className="success-dialog-content">
+            <span>{message === UNBLOCKUSER ? "User unblock successfully" : ""}</span>
+          </div>
+          <div className="d-flex justify-content-center">
+            <span className="hr-6px-btn-spacer" />
+            <Button onClick={finish}>{_t("g.finish")}</Button>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const handleConfirmButton = (actionType: string) => {
+    switch (actionType) {
+      case LEAVECOMMUNITY:
+        window?.messageService
+          ?.updateLeftChannelList([...chat.leftChannelsList!, currentChannel?.id!])
+          .then(() => {})
+          .finally(() => {
+            setKeyDialog(false);
+            setStep(0);
+            if (from && from === CHATPAGE) {
+              history?.push("/chats");
+            }
+          });
+        break;
+      case UNBLOCKUSER:
+        handleChannelUpdate(UNBLOCKUSER);
+        break;
+    }
+  };
+
+  const handleChannelUpdate = (operationType: string) => {
+    let updatedMetaData = {
+      name: currentChannel?.name!,
+      about: currentChannel?.about!,
+      picture: "",
+      communityName: currentChannel?.communityName!,
+      communityModerators: currentChannel?.communityModerators,
+      hiddenMessageIds: currentChannel?.hiddenMessageIds,
+      removedUserIds: currentChannel?.removedUserIds
+    };
+    switch (operationType) {
+      case ADDROLE:
+        const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
+        updatedMetaData.communityModerators = updatedRoles;
+        break;
+      case UNBLOCKUSER:
+        const NewUpdatedRemovedUsers = currentChannel?.removedUserIds?.filter(
+          (item) => item !== removedUserId
+        );
+        updatedMetaData.removedUserIds = NewUpdatedRemovedUsers;
+        break;
+      default:
+        break;
+    }
+    try {
+      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
+
+      if (operationType === UNBLOCKUSER) {
+        setStep(5);
+        setKeyDialog(true);
+        setRemovedUserID("");
+      }
+    } catch (err) {
+      error(_t("chat.error-updating-community"));
+    }
+  };
+
+  return (
+    <>
+      <DropDown
+        {...communityMenuConfig}
+        style={DropDownStyle}
+        float="right"
+        alignBottom={false}
+        noMarginTop={true}
+      />
+      {keyDialog && (
+        <Modal
+          animation={false}
+          show={true}
+          centered={true}
+          onHide={toggleKeyDialog}
+          keyboard={false}
+          className="chats-dialog modal-thin-header"
+          size="lg"
+        >
+          <Modal.Header closeButton={true} />
+          <Modal.Body className="chat-modals-body">
+            {step === 1 && confirmationModal(LEAVECOMMUNITY)}
+            {step === 2 && EditRolesModal()}
+            {step === 3 && blockedUsersModal()}
+            {step === 4 && confirmationModal(UNBLOCKUSER)}
+            {step === 5 && successModal(UNBLOCKUSER)}
+          </Modal.Body>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default ChatsCommunityDropdownMenu;
diff --git a/src/common/components/chats-direct-messages/index.scss b/src/common/components/chats-direct-messages/index.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/common/components/chats-direct-messages/index.tsx b/src/common/components/chats-direct-messages/index.tsx
new file mode 100644
index 00000000000..3a3c7837606
--- /dev/null
+++ b/src/common/components/chats-direct-messages/index.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ChatsDirectMessages() {
+  return <div>ChatsDirectMessages</div>;
+}
diff --git a/src/common/components/chats-dropdown-menu/index.tsx b/src/common/components/chats-dropdown-menu/index.tsx
new file mode 100644
index 00000000000..3e82eaa4387
--- /dev/null
+++ b/src/common/components/chats-dropdown-menu/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { History } from "history";
+import DropDown, { MenuItem } from "../dropdown";
+
+import { KebabMenu, chatKeySvg } from "../../img/svg";
+import { _t } from "../../i18n";
+import { DropDownStyle } from "../chat-box/chat-constants";
+
+interface Props {
+  history: History | null;
+  onManageChatKey?: () => void;
+}
+
+const ChatsDropdownMenu = (props: Props) => {
+  const onManageChatKey = () => {
+    const { onManageChatKey } = props;
+    if (onManageChatKey) {
+      onManageChatKey();
+    }
+  };
+
+  const menuItems: MenuItem[] = [
+    {
+      label: "Manage Chat key",
+      onClick: onManageChatKey,
+      icon: chatKeySvg
+    }
+  ];
+
+  const menuConfig = {
+    history: props.history,
+    label: "",
+    icon: KebabMenu,
+    items: menuItems
+  };
+
+  return (
+    <DropDown
+      {...menuConfig}
+      style={DropDownStyle}
+      float="right"
+      alignBottom={false}
+      noMarginTop={true}
+    />
+  );
+};
+
+export default ChatsDropdownMenu;
diff --git a/src/common/components/chats-messages-box/index.scss b/src/common/components/chats-messages-box/index.scss
new file mode 100644
index 00000000000..6603c8741ef
--- /dev/null
+++ b/src/common/components/chats-messages-box/index.scss
@@ -0,0 +1,33 @@
+@import "../../../style/vars_mixins";
+
+.chats-messages-box {
+  margin-top: 10px;
+
+  display: grid;
+  grid-template-rows: repeat(18, 1fr);
+  grid-template-columns: repeat(1, 1fr);
+
+  @include themify(day) {
+    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  @include themify(night) {
+    box-shadow: 0px -5px 5px $charcoal-grey;
+  }
+  width: 60vw;
+
+  .no-chat-select {
+    height: calc(100vh - 70px);
+    font-size: 22px;
+    font-weight: 700;
+
+    .start-chat {
+      @include themify(day) {
+        color: #65676b;
+      }
+      @include themify(night) {
+        color: $white;
+      }
+    }
+  }
+}
diff --git a/src/common/components/chats-messages-box/index.tsx b/src/common/components/chats-messages-box/index.tsx
new file mode 100644
index 00000000000..232ecd36f46
--- /dev/null
+++ b/src/common/components/chats-messages-box/index.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { match } from "react-router";
+import { History } from "history";
+import { Account } from "../../store/accounts/types";
+import { ActiveUser } from "../../store/active-user/types";
+import { Chat } from "../../store/chat/types";
+import { ToggleType, UI } from "../../store/ui/types";
+import { User } from "../../store/users/types";
+import ChatsMessagesHeader from "../chats-messages-header";
+import ChatsMessagesView from "../chats-messages-view";
+import { Global } from "../../store/global/types";
+
+import "./index.scss";
+import { NostrKeysType } from "../../helper/chat-utils";
+
+interface MatchParams {
+  filter: string;
+  name: string;
+  path: string;
+  url: string;
+  username: string;
+}
+
+interface Props {
+  match: match<MatchParams>;
+  chat: Chat;
+  global: Global;
+  users: User[];
+  history: History | null;
+  activeUser: ActiveUser | null;
+  ui: UI;
+  activeUserKeys: NostrKeysType;
+  setActiveUser: (username: string | null) => void;
+  updateActiveUser: (data?: Account) => void;
+  deleteUser: (username: string) => void;
+  toggleUIProp: (what: ToggleType) => void;
+}
+
+export default function ChatsMessagesBox(props: Props) {
+  const { match } = props;
+  const username = match.params.username;
+
+  const [maxHeight, setMaxHeight] = useState(0);
+
+  useEffect(() => {
+    setMaxHeight(window.innerHeight - 68);
+  }, [typeof window !== "undefined"]);
+
+  return (
+    <>
+      <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
+        {match.url == "/chats" ? (
+          <div className="no-chat-select d-flex justify-content-center align-items-center">
+            <p className="start-chat text-center">Select a chat or start a new conversation</p>
+          </div>
+        ) : (
+          <>
+            <ChatsMessagesHeader username={username} {...props} />
+            <ChatsMessagesView {...props} username={username} />
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/components/chats-messages-header/index.scss b/src/common/components/chats-messages-header/index.scss
new file mode 100644
index 00000000000..9dc3eb10914
--- /dev/null
+++ b/src/common/components/chats-messages-header/index.scss
@@ -0,0 +1,67 @@
+@import "../../../style/vars_mixins";
+
+.chats-messages-header {
+  grid-row: span 1;
+  width: 60vw;
+  height: 67px;
+  @include themify(day) {
+    border-bottom: 1px solid #e7e7e7;
+  }
+  @include themify(night) {
+    border-bottom: 1px solid $charcoal-grey;
+  }
+
+  .header-content {
+    .user-info {
+      display: inline-flex;
+      padding: 8px 10px;
+      margin: 5px 0 0 9px;
+      cursor: pointer;
+
+      .username {
+        font-size: 21px;
+        font-family: Helvetica, Arial, sans-serif;
+        font-weight: 700;
+        margin: 7px 0 0 12px;
+      }
+      &:hover {
+        border-radius: 10px;
+        @include themify(day) {
+          background: #eeeeee;
+        }
+
+        @include themify(night) {
+          background: $dusky-blue;
+        }
+      }
+    }
+    .community-menu {
+      border: none;
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+      text-align: center;
+      display: flex;
+      margin-top: 14px;
+      cursor: pointer;
+      border-radius: 50%;
+      svg {
+        @include themify(day) {
+          color: $charcoal-grey;
+        }
+
+        @include themify(night) {
+          color: $white-two;
+        }
+      }
+      &:hover {
+        @include themify(day) {
+          background: rgba(29, 155, 240, 0.1);
+        }
+        @include themify(night) {
+          background: $dark-grey-blue;
+        }
+      }
+    }
+  }
+}
diff --git a/src/common/components/chats-messages-header/index.tsx b/src/common/components/chats-messages-header/index.tsx
new file mode 100644
index 00000000000..e52e92ca71c
--- /dev/null
+++ b/src/common/components/chats-messages-header/index.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { History } from "history";
+import { formattedName, formattedUserName, isChannel } from "../../helper/chat-utils";
+import { _t } from "../../i18n";
+import { useMappedStore } from "../../store/use-mapped-store";
+import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
+import UserAvatar from "../user-avatar";
+
+import "./index.scss";
+import { Channel } from "../../../providers/message-provider-types";
+import { CHATPAGE } from "../chat-box/chat-constants";
+
+interface Props {
+  username: string;
+  history: History | null;
+}
+
+export default function ChatsMessagesHeader(props: Props) {
+  const { username } = props;
+  const { chat } = useMappedStore();
+
+  return (
+    <div className="chats-messages-header">
+      <div className="d-flex justify-content-between header-content">
+        <div className="user-info">
+          <UserAvatar username={formattedUserName(username)} size="medium" />
+          <p className="username">{formattedName(username, chat)}</p>
+        </div>
+        {isChannel(username) && (
+          <div className="community-menu">
+            <ChatsCommunityDropdownMenu from={CHATPAGE} {...props} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/components/chats-messages-view/index.scss b/src/common/components/chats-messages-view/index.scss
new file mode 100644
index 00000000000..1a179c4a856
--- /dev/null
+++ b/src/common/components/chats-messages-view/index.scss
@@ -0,0 +1,20 @@
+@import "../../../style/vars_mixins";
+
+.chats-messages-view {
+  @include themify(day) {
+    border-bottom: 1px solid $white-three;
+  }
+  @include themify(night) {
+    border-bottom: 1px solid $charcoal-grey;
+  }
+
+  grid-row: span 16;
+  // height: 79.5vh;
+  overflow: scroll;
+  overflow-x: hidden;
+  // margin-bottom: 20px;
+
+  a::after {
+    display: none;
+  }
+}
diff --git a/src/common/components/chats-messages-view/index.tsx b/src/common/components/chats-messages-view/index.tsx
new file mode 100644
index 00000000000..8dfb28a291f
--- /dev/null
+++ b/src/common/components/chats-messages-view/index.tsx
@@ -0,0 +1,223 @@
+import React, { RefObject, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Channel, PublicMessage } from "../../../providers/message-provider-types";
+import {
+  fetchCommunityMessages,
+  fetchCurrentUserData,
+  getPrivateKey,
+  getProfileMetaData,
+  NostrKeysType
+} from "../../helper/chat-utils";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { Global } from "../../store/global/types";
+import ChatsProfileBox from "../chats-profile-box";
+
+import "./index.scss";
+import { _t } from "../../i18n";
+import ChatsChannelMessages from "../chats-channel-messages";
+import ChatsDirectMessages from "../chats-direct-messages";
+import { Account } from "../../store/accounts/types";
+import { ToggleType, UI } from "../../store/ui/types";
+import { User } from "../../store/users/types";
+import { ActiveUser } from "../../store/active-user/types";
+import ChatInput from "../chat-input";
+import ChatsScroller from "../chats-scroller";
+import { EmojiPickerStyleProps } from "../chat-box";
+
+const EmojiPickerStyle: EmojiPickerStyleProps = {
+  width: "56.5%",
+  bottom: "58px",
+  left: "305px",
+  marginLeft: "14px",
+  borderTopLeftRadius: "8px",
+  borderTopRightRadius: "8px",
+  borderBottomLeftRadius: "0px"
+};
+interface Props {
+  username: string;
+  users: User[];
+  activeUser: ActiveUser | null;
+  ui: UI;
+  global: Global;
+  setActiveUser: (username: string | null) => void;
+  updateActiveUser: (data?: Account) => void;
+  deleteUser: (username: string) => void;
+  toggleUIProp: (what: ToggleType) => void;
+}
+
+export default function ChatsMessagesView(props: Props) {
+  const { username, activeUser, global } = props;
+
+  const messagesBoxRef = React.createRef<HTMLDivElement>();
+
+  const { chat } = useMappedStore();
+  const [directUser, setDirectUser] = useState("");
+  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
+  const [communityName, setCommunityName] = useState("");
+  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
+  const [receiverPubKey, setReceiverPubKey] = useState("");
+  const [isScrollToTop, setIsScrollToTop] = useState(false);
+  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const [isTop, setIsTop] = useState(false);
+
+  useEffect(() => {
+    getActiveUserKeys();
+    setChannelData();
+  }, []);
+
+  useEffect(() => {
+    console.log("publicMessages", publicMessages);
+    if (publicMessages.length !== 0) {
+      scrollToBottom();
+    }
+  }, [publicMessages]);
+
+  useEffect(() => {
+    if (directUser) {
+      getReceiverPubKey();
+    }
+  }, [directUser]);
+
+  useEffect(() => {
+    setChannelData();
+  }, [chat.channels]);
+
+  useEffect(() => {
+    getChannelMessages();
+  }, [chat.publicMessages]);
+
+  useEffect(() => {
+    if (directUser) {
+    } else if (communityName && currentChannel) {
+      getChannelMessages();
+    }
+  }, [directUser, communityName, currentChannel]);
+
+  useEffect(() => {
+    setDirectUser("");
+    setCommunityName("");
+    setChannelData();
+  }, [username]);
+
+  // useEffect(() => {
+  //   if (isTop) {
+  //     fetchPrevMessages();
+  //   }
+  // }, [isTop]);
+
+  const getActiveUserKeys = async () => {
+    const profileData = await getProfileMetaData(props.activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const activeUserKeys = {
+      pub: profileData?.nsKey,
+      priv: noStrPrivKey
+    };
+    setActiveUserKeys(activeUserKeys);
+  };
+
+  const getReceiverPubKey = async () => {
+    const profileData = await getProfileMetaData(directUser);
+
+    if (profileData?.nsKey) {
+      setReceiverPubKey(profileData?.nsKey);
+    }
+  };
+
+  const setChannelData = () => {
+    if (username) {
+      if (username && username.startsWith("@")) {
+        setDirectUser(username.replace("@", ""));
+      } else {
+        setCommunityName(username);
+        const channel = chat.channels.find((channel) => channel.communityName === username);
+        // console.log("channel", channel);
+        setCurrentChannel(channel);
+      }
+    }
+  };
+
+  const getChannelMessages = () => {
+    if (currentChannel) {
+      const publicMessages = fetchCommunityMessages(
+        chat.publicMessages,
+        currentChannel,
+        currentChannel.hiddenMessageIds
+      );
+      const messages = publicMessages.sort((a, b) => a.created - b.created);
+      setPublicMessages(messages);
+    }
+  };
+
+  const scrollToBottom = () => {
+    console.log("Scroll to bottom scliced");
+    messagesBoxRef &&
+      messagesBoxRef?.current?.scroll({
+        top: messagesBoxRef.current?.scrollHeight,
+        behavior: "auto"
+      });
+  };
+
+  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    var element = event.currentTarget;
+    // let srollHeight: number = (element.scrollHeight / 100) * 25;
+    // const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
+    const isScrollToBottom =
+      element.scrollTop + messagesBoxRef?.current?.clientHeight! < element.scrollHeight - 200;
+    setIsScrollToBottom(isScrollToBottom);
+    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
+    if (communityName && scrollerTop) {
+      setIsTop(true);
+    } else {
+      setIsTop(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="chats-messages-view" ref={messagesBoxRef} onScroll={handleScroll}>
+        <Link
+          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+          target="_blank"
+        >
+          <ChatsProfileBox username={username} />
+        </Link>
+        {communityName.length !== 0 ? (
+          <>
+            <ChatsChannelMessages
+              {...props}
+              publicMessages={publicMessages}
+              currentChannel={currentChannel!}
+              activeUserKeys={activeUserKeys!}
+              scrollToBottom={scrollToBottom}
+            />
+          </>
+        ) : (
+          <ChatsDirectMessages />
+        )}
+        {isScrollToBottom && (
+          <ChatsScroller
+            bodyRef={messagesBoxRef}
+            isScrollToTop={false}
+            isScrollToBottom={true}
+            marginRight={"5%"}
+          />
+        )}
+      </div>
+      <ChatInput
+        emojiPickerStyles={EmojiPickerStyle}
+        gifPickerStyle={EmojiPickerStyle}
+        activeUser={activeUser}
+        global={global}
+        chat={chat}
+        isCurrentUser={directUser ? true : false}
+        isCommunity={communityName ? true : false}
+        receiverPubKey={receiverPubKey}
+        isActveUserRemoved={false}
+        currentUser={directUser}
+        currentChannel={currentChannel!}
+        isCurrentUserJoined={true}
+      />
+    </>
+  );
+}
diff --git a/src/common/components/chats-profile-box/index.scss b/src/common/components/chats-profile-box/index.scss
new file mode 100644
index 00000000000..32bb46d57a1
--- /dev/null
+++ b/src/common/components/chats-profile-box/index.scss
@@ -0,0 +1,65 @@
+@import "../../../style/vars_mixins";
+
+.chats-profile-box {
+  .user-profile {
+    border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px;
+    min-height: 266px;
+
+    @include themify(day) {
+      background: $white-three;
+    }
+    @include themify(night) {
+      background: #172b44;
+    }
+
+    padding: 0 16px 16px 16px;
+    margin: 0 16px 16px 16px;
+
+    .user-logo {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 16px;
+      cursor: pointer;
+    }
+    .user-name {
+      font-size: 20px;
+      font-weight: 700;
+      @include themify(day) {
+        color: $charcoal-grey;
+      }
+      @include themify(night) {
+        color: $white;
+      }
+    }
+    .about {
+      text-align: center;
+      padding: 4px 0;
+      @include themify(day) {
+        color: $charcoal-grey;
+      }
+      @include themify(night) {
+        color: $white;
+      }
+    }
+    .joining-info {
+      justify-content: space-evenly;
+    }
+    .created-date {
+      padding-top: 8px;
+      font-size: 14px;
+      @include themify(day) {
+        color: $charcoal-grey;
+      }
+      @include themify(night) {
+        color: $white;
+      }
+    }
+    .followers {
+      font-size: 14px;
+      padding-top: 4px !important;
+      font-family: New Century Schoolbook;
+    }
+  }
+}
diff --git a/src/common/components/chats-profile-box/index.tsx b/src/common/components/chats-profile-box/index.tsx
new file mode 100644
index 00000000000..88cd19ce536
--- /dev/null
+++ b/src/common/components/chats-profile-box/index.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import UserAvatar from "../user-avatar";
+
+import "./index.scss";
+import { dateToFormatted } from "../../helper/parse-date";
+import { formatFollowers, formattedUserName } from "../../helper/chat-utils";
+import { _t } from "../../i18n";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { getAccountFull } from "../../api/hive";
+import { getCommunity } from "../../api/bridge";
+
+export interface profileData {
+  joiningData: string;
+  about: string | undefined;
+  followers: number | undefined;
+  name: string;
+  subscribers: string;
+  username: string;
+}
+
+interface Props {
+  username?: string;
+  isCommunity?: boolean;
+  isCurrentUser?: boolean;
+  communityName?: string;
+  currentUser?: string;
+}
+
+export default function ChatsProfileBox(props: Props) {
+  const { username, isCommunity, isCurrentUser, communityName, currentUser } = props;
+  const { chat, activeUser } = useMappedStore();
+
+  const [profileData, setProfileData] = useState<profileData>();
+
+  useEffect(() => {
+    fetchProfileData();
+  }, [username, isCommunity, isCurrentUser, communityName, currentUser]);
+
+  const fetchProfileData = async () => {
+    if (username && username?.length !== 0) {
+      if (username?.startsWith("@")) {
+        const response = await getAccountFull(formattedUserName(username));
+        console.log("1", response);
+        setProfileData({
+          joiningData: response.created,
+          about: response.profile?.about,
+          followers: response.follow_stats?.follower_count,
+          name: response.name,
+          subscribers: _t("chat.followers"),
+          username: response.name
+        });
+      } else {
+        const community = await getCommunity(username!, activeUser?.username);
+        console.log("2", community);
+        setProfileData({
+          joiningData: community?.created_at!,
+          about: community?.about,
+          followers: community?.subscribers,
+          name: community?.title!,
+          subscribers: _t("chat.subscribers"),
+          username: community?.name!
+        });
+      }
+    } else {
+      if (isCurrentUser && currentUser?.length !== 0) {
+        const response = await getAccountFull(currentUser!);
+        console.log("3", response);
+        setProfileData({
+          joiningData: response.created,
+          about: response.profile?.about,
+          followers: response.follow_stats?.follower_count,
+          name: response.name,
+          subscribers: _t("chat.followers"),
+          username: response.name
+        });
+      } else {
+        const community = await getCommunity(communityName!, activeUser?.username);
+        console.log("4", community);
+        setProfileData({
+          joiningData: community?.created_at!,
+          about: community?.about,
+          followers: community?.subscribers,
+          name: community?.title!,
+          subscribers: _t("chat.subscribers"),
+          username: community?.name!
+        });
+      }
+    }
+  };
+
+  return (
+    <div className="chats-profile-box">
+      <div className="user-profile">
+        {profileData?.joiningData && (
+          <div className="user-profile-data">
+            <span className="user-logo">
+              <UserAvatar username={profileData.username} size="large" />
+            </span>
+            <h4 className="user-name user-logo ">{profileData.name}</h4>
+            {profileData.about?.length !== 0 && (
+              <p className="about user-logo ">{profileData.about}</p>
+            )}
+
+            <div className="created-date user-logo joining-info">
+              <p>
+                {" "}
+                {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
+              </p>
+              <p className="followers">
+                {" "}
+                {formatFollowers(profileData!.followers)} {profileData.subscribers}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/components/chats-scroller/index.scss b/src/common/components/chats-scroller/index.scss
new file mode 100644
index 00000000000..36f090571a1
--- /dev/null
+++ b/src/common/components/chats-scroller/index.scss
@@ -0,0 +1,33 @@
+@import "../../../style/vars_mixins";
+
+.scroller {
+  position: sticky;
+  width: 33px;
+  height: 33px;
+  border-radius: 50%;
+  float: right;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  @include themify(day) {
+    background: #e4e6eb;
+    border: 1px solid $white-five;
+  }
+  @include themify(night) {
+    background: #0f223a;
+  }
+
+  svg {
+    @include themify(day) {
+      color: $dark-sky-blue;
+    }
+    @include themify(night) {
+      color: $white;
+    }
+
+    width: 20px;
+    height: 20px;
+  }
+}
\ No newline at end of file
diff --git a/src/common/components/chats-scroller/index.tsx b/src/common/components/chats-scroller/index.tsx
new file mode 100644
index 00000000000..c32b793f012
--- /dev/null
+++ b/src/common/components/chats-scroller/index.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import Tooltip from "../tooltip";
+
+import { _t } from "../../i18n";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../img/svg";
+
+import "./index.scss";
+
+interface Props {
+  bodyRef: React.RefObject<HTMLDivElement>;
+  isScrollToTop: boolean;
+  isScrollToBottom: boolean;
+  marginRight: string;
+}
+export default function ChatsScroller(props: Props) {
+  const { bodyRef, isScrollToTop, isScrollToBottom, marginRight } = props;
+
+  const scrollerClicked = () => {
+    bodyRef?.current?.scroll({
+      top: isScrollToBottom ? bodyRef.current?.scrollHeight : 0,
+      behavior: "auto"
+    });
+  };
+
+  return (
+    <Tooltip content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}>
+      <div
+        className="scroller"
+        style={{ bottom: isScrollToBottom ? "20px" : "55px", marginRight: marginRight }}
+        onClick={scrollerClicked}
+      >
+        {isScrollToTop ? chevronUpSvg : chevronDownSvgForSlider}
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/src/common/components/chats-sidebar/indes.tsx b/src/common/components/chats-sidebar/indes.tsx
new file mode 100644
index 00000000000..ef7824875db
--- /dev/null
+++ b/src/common/components/chats-sidebar/indes.tsx
@@ -0,0 +1,345 @@
+import React, { useEffect, useState } from "react";
+import { Form } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { History } from "history";
+import { match } from "react-router";
+import useDebounce from "react-use/lib/useDebounce";
+import { setNostrkeys } from "../../../providers/message-provider";
+import { Channel } from "../../../providers/message-provider-types";
+import { getAccountReputations } from "../../api/hive";
+import accountReputation from "../../helper/account-reputation";
+import { getCommunities, NostrKeysType } from "../../helper/chat-utils";
+import { _t } from "../../i18n";
+import { arrowBackSvg, chatKeySvg, KebabMenu, syncSvg } from "../../img/svg";
+import { Chat, DirectContactsType } from "../../store/chat/types";
+import { AccountWithReputation } from "../chat-box";
+import ChatsScroller from "../chats-scroller";
+import LinearProgress from "../linear-progress";
+import Tooltip from "../tooltip";
+import UserAvatar from "../user-avatar";
+
+import "./index.scss";
+import DropDown, { MenuItem } from "../dropdown";
+import { CHAT, DropDownStyle } from "../chat-box/chat-constants";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+
+interface MatchParams {
+  filter: string;
+  name: string;
+  path: string;
+  url: string;
+  username: string;
+}
+interface Props {
+  match: match<MatchParams>;
+  channels: Channel[];
+  directContacts: DirectContactsType[];
+  activeUserKeys: NostrKeysType;
+  chatPrivKey: string;
+  chat: Chat;
+  history: History;
+  revelPrivateKey: boolean;
+  inProgressSetter: (d: boolean) => void;
+  revealPrivateKeySetter: (d: boolean) => void;
+  resetChat: () => void;
+}
+export default function ChatsSideBar(props: Props) {
+  const {
+    channels,
+    directContacts,
+    activeUserKeys,
+    match,
+    revelPrivateKey,
+    chatPrivKey,
+    resetChat,
+    inProgressSetter,
+    revealPrivateKeySetter
+  } = props;
+
+  const chatsSideBarRef = React.createRef<HTMLDivElement>();
+  const username = match.params.username;
+
+  const [showDivider, setShowDivider] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [inProgress, setInProgress] = useState(false);
+  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
+  const [isScrollToTop, setIsScrollToTop] = useState(false);
+  const [communities, setCommunities] = useState<Channel[]>([]);
+
+  // console.log("username in chats sidebar", username);
+
+  useDebounce(
+    async () => {
+      if (searchText.length !== 0) {
+        const resp = await getAccountReputations(searchText, 30);
+        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
+        setUserList(sortedByReputation);
+        setInProgress(false);
+      }
+    },
+    500,
+    [searchText]
+  );
+
+  // useEffect(() => {
+  //   if (isScrollToTop) {
+  //     // console.log("Hurrah");
+  //   }
+  // }, [isScrollToTop]);
+
+  useEffect(() => {
+    const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
+    setCommunities(communities);
+    // fetchProfileData();
+  }, [props.chat.channels, props.chat.leftChannelsList]);
+
+  // const communities = [
+  //   {
+  //     id: "dewf3efq3",
+  //     name: "Best Community"
+  //   },
+  //   {
+  //     id: "kefkjehdewjk",
+  //     name: "Cars Forum"
+  //   },
+  //   {
+  //     id: "hj3fhkl3flk",
+  //     name: "Hive BlockChaiin"
+  //   },
+  //   {
+  //     id: "dewddefq3",
+  //     name: "Devsinc"
+  //   },
+  //   {
+  //     id: "kefksahdewjk",
+  //     name: "Rolustech"
+  //   },
+  //   {
+  //     id: "hj3fdl3flk",
+  //     name: "Stack Overflow"
+  //   },
+  //   {
+  //     id: "kefkjehdsewjk",
+  //     name: "Cars Forum"
+  //   },
+  //   {
+  //     id: "hj3fhkls3flk",
+  //     name: "Hive BlockChain"
+  //   },
+  //   {
+  //     id: "dewddesfq3",
+  //     name: "Devsinc"
+  //   },
+  //   {
+  //     id: "kefksahsdewjk",
+  //     name: "Rolustech"
+  //   },
+  //   {
+  //     id: "hj3fdls3flk",
+  //     name: "Stack Overflow"
+  //   }
+  // ];
+
+  const DMS = [
+    {
+      id: "dewf3efq3",
+      name: "ahmed"
+    },
+    {
+      id: "kefkjehdewjk",
+      name: "hive-189310"
+    },
+    {
+      id: "hj3fhkl3flk",
+      name: "demo.com"
+    },
+    {
+      id: "dewddefq3",
+      name: "good-karma"
+    },
+    {
+      id: "kefksahdewjk",
+      name: "mtsaeed"
+    },
+    {
+      id: "hj3fdl3flk",
+      name: "testers"
+    },
+    {
+      id: "dewf3sefq3",
+      name: "ahmed"
+    },
+    {
+      id: "kefkjeshdewjk",
+      name: "hive-189310"
+    },
+    {
+      id: "hj3fhskl3flk",
+      name: "demo.com"
+    },
+    {
+      id: "dewddesfq3",
+      name: "good-karma"
+    },
+    {
+      id: "kefksashdewjk",
+      name: "mtsaeed"
+    },
+    {
+      id: "hj3fdsl3flk",
+      name: "hive-198973"
+    }
+  ];
+
+  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    var element = event.currentTarget;
+    console.log("element.scrollTop", element.scrollTop);
+    if (element.scrollTop > 2) {
+      setShowDivider(true);
+    } else {
+      if (showDivider) {
+        setShowDivider(false);
+      }
+    }
+    let srollHeight: number = (element.scrollHeight / 100) * 25;
+    const isScrollToTop = element.scrollTop >= srollHeight;
+    setIsScrollToTop(isScrollToTop);
+  };
+
+  const handleRefreshChat = () => {
+    resetChat();
+    setNostrkeys(activeUserKeys);
+    inProgressSetter(true);
+  };
+
+  const handleRevealPrivKey = () => {
+    if (revelPrivateKey) {
+      revealPrivateKeySetter(false);
+    }
+  };
+
+  return (
+    <div className="chats-sidebar">
+      <div className="d-flex justify-content-between chats-title">
+        <div className="d-flex chats-content">
+          {revelPrivateKey && (
+            <Tooltip content={_t("chat.back")}>
+              <div
+                className="back-arrow-image d-flex justify-content-center align-items-center"
+                onClick={() => revealPrivateKeySetter(false)}
+              >
+                <span className="back-arrow-svg"> {arrowBackSvg}</span>
+              </div>
+            </Tooltip>
+          )}
+
+          <p className="chats">Chats</p>
+        </div>
+
+        <div className="chat-actions d-flex">
+          <div className="refresh-button">
+            <Tooltip content={_t("chat.refresh")}>
+              <p className="refresh-svg" onClick={handleRefreshChat}>
+                {syncSvg}
+              </p>
+            </Tooltip>
+          </div>
+          {chatPrivKey && (
+            <div className="chat-menu">
+              <ChatsDropdownMenu
+                onManageChatKey={() => {
+                  revealPrivateKeySetter(!revelPrivateKey);
+                }}
+                {...props}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="chats-search">
+        <Form.Group className="w-100">
+          <Form.Control
+            type="text"
+            placeholder={_t("chat.search")}
+            value={searchText}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+              setInProgress(true);
+              if (e.target.value.length === 0) {
+                setInProgress(false);
+                setUserList([]);
+              }
+            }}
+          />
+        </Form.Group>
+      </div>
+      {showDivider && <div className="divider" />}
+      {inProgress && <LinearProgress />}
+      <div className="chats-list" onScroll={handleScroll} ref={chatsSideBarRef}>
+        {searchText ? (
+          <div className="searched-users">
+            {userList.map((user) => (
+              <Link
+                to={`/chats/@${user.account}`}
+                onClick={() => setSearchText("")}
+                key={user.account}
+              >
+                <div className="d-flex user-info" key={user.account} onClick={handleRevealPrivKey}>
+                  <span>
+                    <UserAvatar username={user.account} size="medium" />
+                  </span>
+                  <span className="user-name">{user.account}</span>
+                  <span className="user-reputation">({accountReputation(user.reputation)})</span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <>
+            {communities.length !== 0 && <p className="community-title">Communities</p>}
+            {communities.map((channel) => (
+              <Link to={`/chats/${channel.communityName}`} key={channel.id}>
+                <div
+                  className={`community ${username === channel.communityName ? "selected" : ""}`}
+                  key={channel.id}
+                  onClick={handleRevealPrivKey}
+                >
+                  <UserAvatar username={channel.communityName!} size="medium" />
+                  <div className="community-info">
+                    <p className="community-name">{channel.name}</p>
+                    <p className="community-last-message">hello</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+            {directContacts.length !== 0 && <p className="dm-title">DMs</p>}
+            {directContacts.map((contact) => (
+              <Link to={`/chats/@${contact.name}`} key={contact.pubkey}>
+                <div
+                  className={`dm ${
+                    username && username.replace("@", "") === contact.name ? "selected" : ""
+                  }`}
+                  onClick={handleRevealPrivKey}
+                >
+                  <UserAvatar username={contact.name} size="medium" />
+                  <div className="dm-info">
+                    <p className="dm-name">{contact.name}</p>
+                    <p className="dm-last-message">hello</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </>
+        )}
+      </div>
+      {isScrollToTop && (
+        <ChatsScroller
+          bodyRef={chatsSideBarRef}
+          isScrollToTop={isScrollToTop}
+          isScrollToBottom={false}
+          marginRight={"5%"}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/common/components/chats-sidebar/index.scss b/src/common/components/chats-sidebar/index.scss
new file mode 100644
index 00000000000..f717c951c59
--- /dev/null
+++ b/src/common/components/chats-sidebar/index.scss
@@ -0,0 +1,224 @@
+@import "../../../style/vars_mixins";
+
+.chats-sidebar {
+  @include themify(day) {
+    background: $white-two;
+    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
+  }
+  @include themify(night) {
+    background: $dark-two;
+    box-shadow: 0px -5px 5px $charcoal-grey;
+  }
+  width: 330px;
+  height: 100%;
+  margin-top: 10px;
+
+  .chats-title {
+    margin: 30px 16px 12px 16px;
+
+    .chats-content {
+      .back-arrow-image {
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin-top: 1px;
+
+        &:hover {
+          @include themify(day) {
+            background: rgba(29, 155, 240, 0.1);
+          }
+          @include themify(night) {
+            background: $dark-grey-blue;
+          }
+        }
+      }
+    }
+
+    .chats {
+      @include themify(day) {
+        color: #050505;
+      }
+      @include themify(night) {
+        color: $white;
+      }
+
+      color: #050505;
+      font-weight: 700;
+      font-size: 24px;
+      padding-top: 8px;
+      margin-left: 6px;
+    }
+
+    .chat-actions {
+      .refresh-button {
+        margin-top: 2px;
+        .refresh-svg {
+          width: 40px;
+          height: 40px;
+          justify-content: center;
+          text-align: center;
+          border-radius: 50%;
+          padding-top: 10px;
+          display: flex;
+          cursor: pointer;
+
+          svg {
+            height: 20px;
+            width: 20px;
+          }
+          &:hover {
+            @include themify(day) {
+              background: rgba(29, 155, 240, 0.1);
+            }
+            @include themify(night) {
+              background: $dark-grey-blue;
+            }
+          }
+        }
+      }
+      .chat-menu {
+        border: none;
+        width: 40px;
+        height: 40px;
+        justify-content: center;
+        text-align: center;
+        display: flex;
+        margin-top: 3px;
+        cursor: pointer;
+        border-radius: 50%;
+        svg {
+          @include themify(day) {
+            color: $charcoal-grey;
+          }
+
+          @include themify(night) {
+            color: $white-two;
+          }
+        }
+        &:hover {
+          @include themify(day) {
+            background: rgba(29, 155, 240, 0.1);
+          }
+          @include themify(night) {
+            background: $dark-grey-blue;
+          }
+        }
+      }
+    }
+  }
+
+  .chats-search {
+    padding: 0 8px 0 15px;
+    margin-bottom: 20px;
+  }
+
+  .divider {
+    @include themify(day) {
+      border-bottom: 1px solid #ced0d4;
+    }
+    @include themify(night) {
+      border-bottom: 1px solid $charcoal-grey;
+    }
+  }
+
+  .searched-users {
+    .user-info {
+      cursor: pointer;
+      padding: 15px 3px 15px 25px;
+    }
+    .user-name {
+      font-size: 20px;
+      font-weight: 700;
+      margin: 7px 5px 0 15px;
+    }
+    .user-reputation {
+      margin: 9px 5px 0 5px;
+    }
+  }
+
+  .community-title,
+  .dm-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    font-family: Faktum, sans-serif;
+    margin-bottom: 0;
+    padding: 15px 0 10px 15px;
+  }
+
+  .community:hover,
+  .dm:hover,
+  .user-info:hover {
+    @include themify(day) {
+      background: #eeeeee;
+    }
+
+    @include themify(night) {
+      background: $dusky-blue;
+    }
+
+    // rgba(29, 155, 240, 0.1);
+  }
+
+  .community,
+  .dm {
+    display: flex;
+    padding: 12.5px 5px 12.5px 13px;
+    cursor: pointer;
+    border-radius: 8px;
+    margin: 0px 10px;
+
+    // @include themify(day) {
+    //   border: 1px solid #f5f5f5;
+    // }
+
+    // @include themify(night) {
+    //   border: 1px solid $charcoal-grey;
+    // }
+
+    .community-info,
+    .dm-info {
+      .community-name,
+      .dm-name {
+        padding: 3px 0 0 25px;
+        margin-bottom: 0;
+        font-size: 18px;
+        font-weight: 700;
+      }
+      .community-last-message,
+      .dm-last-message {
+        margin-bottom: 0;
+        padding: 4px 0 0 25px;
+        font-size: 13px;
+        font-family: 400;
+      }
+    }
+    &.selected {
+      @include themify(day) {
+        background: #ecf3ff;
+      }
+
+      @include themify(night) {
+        background: $charcoal-grey;
+      }
+
+      &:hover {
+        @include themify(day) {
+          background: #ecf3ff;
+        }
+
+        @include themify(night) {
+          background: $charcoal-grey;
+        }
+      }
+    }
+  }
+
+  .chats-list {
+    height: calc(100vh - 220px);
+    overflow: auto;
+    a {
+      color: inherit;
+    }
+  }
+}
diff --git a/src/common/components/dropdown/index.tsx b/src/common/components/dropdown/index.tsx
index ab6399aec24..7714cc4fe9e 100644
--- a/src/common/components/dropdown/index.tsx
+++ b/src/common/components/dropdown/index.tsx
@@ -18,11 +18,6 @@ export interface MenuItem {
   isStatic?: boolean;
 }
 
-interface MenuDownStyle {
-  width: string;
-  height: string;
-}
-
 interface Props {
   history: History | null;
   float: "left" | "right" | "none";
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index edc870fd271..70e55b5263e 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -4,6 +4,7 @@ import { FormControl } from "react-bootstrap";
 
 import BaseComponent from "../base";
 import SearchBox from "../search-box";
+import { EmojiPickerStyleProps } from "../../components/chat-box";
 
 import { _t } from "../../i18n";
 
@@ -39,15 +40,7 @@ interface EmojiCacheItem {
 
 interface Props {
   fallback?: (e: string) => void;
-  style?: {
-    width: string;
-    bottom: string;
-    left: string | number;
-    marginLeft: string;
-    borderTopLeftRadius: string;
-    borderTopRightRadius: string;
-    borderBottomLeftRadius: string;
-  };
+  style?: EmojiPickerStyleProps;
 }
 
 interface State {
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/join-community-chat-btn/index.tsx
index 3e981a7903c..39140dbe999 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/join-community-chat-btn/index.tsx
@@ -185,6 +185,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
     }
+    setIsCommunityChatJoined(true);
     window?.messageService?.loadChannel(currentChannel?.id!);
     setIsCommunityChatJoined(true);
   };
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index 47919e8f915..d0720c122df 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -13,6 +13,7 @@ interface Props {
 }
 
 export default function ManageChatKey(props: Props) {
+  console.log("hello", props);
   return (
     <>
       <div className="manage-chat-key">
@@ -30,6 +31,7 @@ export default function ManageChatKey(props: Props) {
                 <p
                   className="copy-svg"
                   onClick={() => {
+                    console.log("SVG clicked");
                     props.copyPrivateKey(props.noStrPrivKey);
                   }}
                 >
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index 54f04e9cbae..e778c821fe6 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -36,7 +36,8 @@ import {
   sunSvg,
   upArrowSvg,
   userOutlineSvg,
-  walletSvg
+  walletSvg,
+  messangerSvg
 } from "../../img/svg";
 import UserAvatar from "../user-avatar";
 import { downVotingPower, votingPower } from "../../api/hive";
@@ -518,6 +519,12 @@ export default ({ match, history, setStepOne, setStepTwo, step }: Props) => {
                     </div>
                   </div>
                 </Link>
+                <Link to={`/chats`} onClick={() => setSmVisible(false)}>
+                  <div className="p-2 pl-3 w-100 mb-2 d-flex align-items-center list-item text-dark">
+                    <div className="icon-stroke text-dark">{messangerSvg}</div>
+                    <div className="ml-3 text-15 d-flex">{_t("user-nav.chats")}</div>
+                  </div>
+                </Link>
               </>
             )}
 
diff --git a/src/common/components/user-nav/_index.scss b/src/common/components/user-nav/_index.scss
index 1016cac1afc..2ef2fed069c 100644
--- a/src/common/components/user-nav/_index.scss
+++ b/src/common/components/user-nav/_index.scss
@@ -39,6 +39,7 @@
   .user-wallet,
   .user-points,
   .notifications,
+  .chats,
   .points {
     color: $white;
     display: flex;
@@ -71,7 +72,8 @@
     }
   }
 
-  .notifications {
+  .notifications,
+  .chats {
     cursor: pointer;
     position: relative;
 
@@ -117,7 +119,6 @@
     }
 
     .label {
-
     }
 
     .power {
@@ -128,10 +129,10 @@
         margin-right: 2px;
       }
 
-      .voting, .downVoting {
+      .voting,
+      .downVoting {
         display: flex;
         align-items: center;
-
       }
 
       .voting {
@@ -151,7 +152,6 @@
 
   // custom dropdown override
   .custom-dropdown {
-
     .menu-inner {
       width: 220px;
 
diff --git a/src/common/components/user-nav/index.tsx b/src/common/components/user-nav/index.tsx
index 45cecfb0f4a..3b54616435d 100644
--- a/src/common/components/user-nav/index.tsx
+++ b/src/common/components/user-nav/index.tsx
@@ -30,7 +30,8 @@ import {
   bellSvg,
   bellOffSvg,
   chevronUpSvg,
-  rocketSvg
+  rocketSvg,
+  messangerSvg
 } from "../../img/svg";
 
 import { votingPower, downVotingPower } from "../../api/hive";
@@ -282,6 +283,13 @@ class UserNav extends Component<Props, State> {
               </span>
             </ToolTip>
           )}
+          {global.usePrivate && (
+            <ToolTip content={_t("user-nav.chats")}>
+              <Link to={`/chats`}>
+                <span className="chats">{messangerSvg}</span>
+              </Link>
+            </ToolTip>
+          )}
 
           <DropDown {...dropDownConfig} float="right" header={`@${activeUser.username}`} />
         </div>
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index ef33baad54b..33546643f9d 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -1,9 +1,16 @@
 import moment from "moment";
 import { generatePrivateKey, getPublicKey } from "../../lib/nostr-tools/keys";
-import { Channel } from "../../providers/message-provider-types";
+import {
+  Channel,
+  DirectMessage,
+  Profile,
+  PublicMessage
+} from "../../providers/message-provider-types";
 import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
+import { GIPHGY } from "../components/chat-box/chat-constants";
 import { ActiveUser } from "../store/active-user/types";
+import { Chat, publicMessagesList } from "../store/chat/types";
 import * as ls from "../util/local-storage";
 
 export interface NostrKeysType {
@@ -91,3 +98,102 @@ export const getCommunities = (channels: Channel[], leftChannels: string[]) => {
 export const getPrivateKey = (username: string) => {
   return ls.get(`${username}_nsPrivKey`);
 };
+
+export const formatFollowers = (count: number | undefined) => {
+  if (count) {
+    return count >= 1e6
+      ? (count / 1e6).toLocaleString() + "M"
+      : count >= 1e3
+      ? (count / 1e3).toLocaleString() + "K"
+      : count.toLocaleString();
+  }
+  return count;
+};
+
+export const formattedName = (username: string, chat: Chat) => {
+  if (username && !username.startsWith("@")) {
+    const community = chat.channels.find((channel) => channel.communityName === username);
+    if (community) {
+      return community.name;
+    }
+  }
+  const replacedUserName = username.replace("@", "");
+  return replacedUserName;
+};
+
+export const formattedUserName = (username: string) => {
+  if (username && username.startsWith("@")) {
+    return username.replace("@", "");
+  }
+  return username;
+};
+
+export const isChannel = (username: string) => {
+  if (username.startsWith("@")) {
+    return false;
+  }
+  return true;
+};
+
+export const fetchCommunityMessages = (
+  publicMessages: publicMessagesList[],
+  currentChannel: Channel,
+  hiddenMessageIds?: string[]
+) => {
+  const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
+  for (const item of publicMessages) {
+    if (item.channelId === currentChannel.id) {
+      const filteredPublicMessages = Object.values(item.PublicMessage).filter(
+        (message) => !hideMessageIds.includes(message.id)
+      );
+      return filteredPublicMessages;
+    }
+  }
+  return [];
+};
+
+export const isMessageGif = (content: string) => {
+  return content.includes(GIPHGY);
+};
+
+export const isMessageImage = (content: string) => {
+  return content.includes("https://images.ecency.com");
+};
+
+export const getProfileName = (creator: string, profiles: Profile[]) => {
+  const profile = profiles.find((x) => x.creator === creator);
+  return profile?.name;
+};
+
+export const getFormattedDateAndDay = (
+  msg: DirectMessage | PublicMessage,
+  i: number,
+  messagesList: DirectMessage[] | PublicMessage[]
+) => {
+  const prevMsg = messagesList[i - 1];
+  const msgDate = formatMessageDate(msg.created);
+  const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+  if (msgDate !== prevMsgDate) {
+    return msgDate;
+  }
+  return null;
+};
+
+export const fetchCurrentUserData = async (username: string) => {
+  const response = await getAccountFull(username);
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+  const { nsKey } = profile || {};
+  console.log("nsKey", nsKey);
+  return nsKey;
+};
+
+export const copyToClipboard = (content: string) => {
+  console.log("copy to clipboard run");
+  const textField = document.createElement("textarea");
+  textField.innerText = content;
+  document.body.appendChild(textField);
+  textField.select();
+  document.execCommand("copy");
+  textField.remove();
+};
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index faaa7fe536f..ff85f7b6338 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -243,6 +243,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateLeftChannelList(channelIds: string[]) {
+    console.log("Update channel list");
     const tags = [["d", "left-channel-list"]];
     return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
   }
@@ -446,6 +447,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateChannel(channel: Channel, meta: Metadata) {
+    console.log("Update channel Run");
     return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
       return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
     });
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 55e11fb65ea..3e5e2f4a6dd 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -170,7 +170,8 @@
     "dark": "dark",
     "switch-to": "Switch",
     "vote-power": "Vote Power:",
-    "boost": "Boost"
+    "boost": "Boost",
+    "chats": "Chats"
   },
   "intro": {
     "title": "Aspire to greatness",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index f58a105e94c..87163999531 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2253,3 +2253,19 @@ export const chatSvg = (
     <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
   </svg>
 );
+
+export const messangerSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+  </svg>
+);
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
new file mode 100644
index 00000000000..58b1e9b3d87
--- /dev/null
+++ b/src/common/pages/chats/index.scss
@@ -0,0 +1,16 @@
+@import "../../../style/vars_mixins";
+
+.chats-page {
+  display: flex;
+  margin-top: 3.5rem;
+
+  .full-page {
+    width: 100vw;
+    height: 100vh;
+  }
+    .chats-messages-box {
+      .private-key {
+        margin-top: 4.5rem;
+      }
+    }
+}
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
new file mode 100644
index 00000000000..91e8669b559
--- /dev/null
+++ b/src/common/pages/chats/index.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { match } from "react-router";
+
+import NavBar from "../../components/navbar";
+import NavBarElectron from "../../../desktop/app/components/navbar";
+import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
+import ChatsSideBar from "../../components/chats-sidebar/indes";
+import ChatsMessagesBox from "../../components/chats-messages-box";
+
+import "./index.scss";
+
+import * as ls from "../../util/local-storage";
+import {
+  copyToClipboard,
+  createNoStrAccount,
+  getPrivateKey,
+  getProfileMetaData,
+  NostrKeysType,
+  setProfileMetaData
+} from "../../helper/chat-utils";
+import { Button, Spinner } from "react-bootstrap";
+import { setNostrkeys } from "../../../providers/message-provider";
+import ManageChatKey from "../../components/manage-chat-key";
+import Feedback, { success } from "../../components/feedback";
+
+interface MatchParams {
+  filter: string;
+  name: string;
+  path: string;
+  url: string;
+  username: string;
+}
+
+interface Props extends PageProps {
+  match: match<MatchParams>;
+}
+
+export const Chats = (props: Props) => {
+  const { channels, directContacts } = props.chat;
+
+  const [marginTop, setMarginTop] = useState(0);
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
+  const [inProgrss, setInProgress] = useState(true);
+  const [showSpinner, setShowSpinner] = useState(false);
+  const [noStrPrivKey, setNoStrPrivKey] = useState("");
+  const [revelPrivateKey, setRevealPrivateKey] = useState(false);
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log("noStrPrivKey", noStrPrivKey);
+  }, [noStrPrivKey]);
+
+  useEffect(() => {
+    handleResize();
+    getActiveUserChatKeys();
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    setNoStrPrivKey(noStrPrivKey);
+  }, []);
+
+  useEffect(() => {
+    setInProgress(false);
+  }, [activeUserKeys]);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (inProgrss) {
+      setTimeout(() => {
+        setInProgress(false);
+      }, 7000);
+    }
+  }, [inProgrss]);
+
+  const handleResize = () => {
+    const parentElemet = document.getElementById("sticky-container")?.getBoundingClientRect();
+    if (parentElemet) {
+      setMarginTop(parentElemet?.y + parentElemet?.height - 30);
+    }
+  };
+
+  const getActiveUserChatKeys = async () => {
+    setInProgress(true);
+    const profileData = await getProfileMetaData(props.activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const activeUserKeys = {
+      pub: profileData?.nsKey,
+      priv: noStrPrivKey
+    };
+    setActiveUserKeys(activeUserKeys);
+  };
+
+  const inProgressSetter = (d: boolean) => {
+    setInProgress(d);
+  };
+
+  const revealPrivateKeySetter = (d: boolean) => {
+    setRevealPrivateKey(d);
+  };
+
+  const handleJoinChat = async () => {
+    const { resetChat } = props;
+    setShowSpinner(true);
+    resetChat();
+    const keys = createNoStrAccount();
+    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
+    setNoStrPrivKey(keys.priv);
+    await setProfileMetaData(props.activeUser, keys.pub);
+    // setHasUserJoinedChat(true);
+    setNostrkeys(keys);
+    window.messageService?.updateProfile({
+      name: props.activeUser?.username!,
+      about: "",
+      picture: ""
+    });
+    setActiveUserKeys(keys);
+    setShowSpinner(false);
+  };
+
+  const copyPrivateKey = () => {
+    copyToClipboard(noStrPrivKey);
+    success("Key copied into clipboad");
+  };
+
+  return (
+    <>
+      <Feedback activeUser={props.activeUser} />
+      {props.global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+      <div
+        style={{ marginTop: marginTop }}
+        className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
+      >
+        {inProgrss ? (
+          <div
+            className="d-flex justify-content-center align-items-center full-page"
+            style={{ backgroundColor: "#f5f5f5" }}
+          >
+            <h3>Loading...</h3>
+          </div>
+        ) : (
+          <>
+            {activeUserKeys?.pub ? (
+              noStrPrivKey ? (
+                <>
+                  <ChatsSideBar
+                    {...props}
+                    channels={channels}
+                    directContacts={directContacts}
+                    activeUserKeys={activeUserKeys}
+                    inProgressSetter={inProgressSetter}
+                    revealPrivateKeySetter={revealPrivateKeySetter}
+                    revelPrivateKey={revelPrivateKey}
+                    chatPrivKey={noStrPrivKey}
+                  />
+                  {revelPrivateKey ? (
+                    <div className="chats-messages-box">
+                      <ManageChatKey noStrPrivKey={noStrPrivKey} copyPrivateKey={copyPrivateKey} />
+                    </div>
+                  ) : (
+                    //if any person has not joined any community then how can he see its message. handle this thing here.
+                    <ChatsMessagesBox {...props} activeUserKeys={activeUserKeys} />
+                  )}
+                </>
+              ) : (
+                <h2>No private key</h2>
+              )
+            ) : (
+              <div className="d-flex justify-content-center align-items-center full-page">
+                <div className="no-chat text-center">
+                  <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
+                  <Button onClick={handleJoinChat}>
+                    {showSpinner && (
+                      <Spinner
+                        animation="grow"
+                        variant="light"
+                        size="sm"
+                        style={{ marginRight: "6px" }}
+                      />
+                    )}
+                    Join Chat
+                  </Button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/routes.ts b/src/common/routes.ts
index 5e5213b3ca0..260fb9ff960 100644
--- a/src/common/routes.ts
+++ b/src/common/routes.ts
@@ -41,5 +41,6 @@ export default {
   PROPOSALS: `/proposals`,
   PROPOSAL_DETAIL: `/proposals/:id(\\d+)`,
   PURCHASE: "/purchase",
-  DECKS: "/decks"
+  DECKS: "/decks",
+  CHATS: `/chats/:username?`
 };
diff --git a/src/config.ts b/src/config.ts
index a1392ba4265..a947bb3075d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,7 +1,7 @@
 /* !!! DO NOT IMPORT config.js TO FRONTEND CODE !!! */
 
 export default {
-  usePrivate: process.env.USE_PRIVATE || "0", // "1" | "0"
+  usePrivate: process.env.USE_PRIVATE || "1", // "1" | "0"
   hsClientSecret: process.env.HIVESIGNER_SECRET || "", // when USE_PRIVATE=0 and HIVESIGNER client secret must be provided
   hsClientId: process.env.HIVESIGNER_ID || "ecency.app", // When USE_PRIVATE=0, this is used to override which user will do posting authority on behalf of the user via hive signer
   redisPass: process.env.REDIS_HOST_PASSWORD

From 5868973cd983ccb5d1f89aad0fef9ef47df7a582 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 4 Sep 2023 19:04:40 +0500
Subject: [PATCH 052/179] Make a separate component for confirmation and to
 show direct messages

---
 src/common/components/chat-box/index.scss     | 370 +++++-----
 src/common/components/chat-box/index.tsx      | 678 ++++--------------
 src/common/components/chat-input/index.tsx    | 204 +++---
 .../chats-channel-messages/index.scss         |  60 +-
 .../chats-channel-messages/index.tsx          | 625 ++++++++++------
 .../chats-community-dropdown-menu/index.tsx   |  40 +-
 .../chats-confirmation-modal/index.tsx        |  64 ++
 .../chats-direct-messages/index.scss          | 160 +++++
 .../chats-direct-messages/index.tsx           | 171 ++++-
 .../components/chats-messages-box/index.tsx   |  63 +-
 .../chats-messages-header/index.tsx           |  11 +-
 .../components/chats-messages-view/index.scss |   4 +
 .../components/chats-messages-view/index.tsx  | 122 +++-
 src/common/components/chats-sidebar/indes.tsx |  20 +-
 .../components/chats-sidebar/index.scss       |   8 +
 src/common/helper/chat-utils.ts               |  37 +-
 src/common/pages/chats/index.tsx              |  13 +-
 17 files changed, 1502 insertions(+), 1148 deletions(-)
 create mode 100644 src/common/components/chats-confirmation-modal/index.tsx

diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chat-box/index.scss
index 3cdb488c182..cbef7e23d98 100644
--- a/src/common/components/chat-box/index.scss
+++ b/src/common/components/chat-box/index.scss
@@ -177,7 +177,6 @@
     }
 
     &.community {
-      padding-bottom: 10px;
       height: 412px;
       margin-bottom: 8px;
       @include themify(day) {
@@ -404,171 +403,171 @@
         justify-content: center;
         margin-top: 14%;
       }
-      .custom-divider {
-        margin: 12px 24px 0px 24px;
-        font-size: 0.7em;
-        color: $dark;
-        .custom-divider-text {
-          display: flex;
-          justify-content: center;
-          padding: 0 8px;
-        }
-      }
-      .message {
-        display: flex;
-        .user-img {
-          padding: 18px 8px 8px 16px;
-        }
-        .community-user-img {
-          padding: 8px 8px 8px 16px;
-          .user-avatar.medium {
-            cursor: pointer;
-          }
-        }
-        .user-info {
-          padding-top: 8px;
-          .user-msg-time {
-            margin: 0;
-            color: rgb(138, 141, 145);
-            font-weight: 400;
-            font-size: 12px;
-            margin-left: 4px;
-            margin-bottom: 2px;
-            .username-community {
-              margin-right: 8px;
-            }
-          }
-          .receiver-message-content {
-            @include themify(day) {
-              background: #e4e6eb;
-            }
-            @include themify(night) {
-              background: #cee2ff;
-            }
-
-            &.gif {
-              background: none;
-              img {
-                max-width: 100%;
-              }
-            }
-
-            &.chat-image {
-              background: none;
-              img {
-                max-width: 100%;
-              }
-            }
-            color: #050505;
-            max-width: 290px;
-            word-wrap: break-word;
-            padding: 10px;
-            border-radius: 0px 10px 10px;
-          }
-        }
-      }
-      .sender {
-        margin-bottom: 0.17rem;
-        .sender-message-time {
-          color: rgb(138, 141, 145);
-          display: flex;
-          font-weight: 400;
-          justify-content: flex-end;
-          font-size: 12px;
-          margin: 0;
-          margin-right: 18px;
-          margin-bottom: 2px;
-        }
-        .sender-message {
-          // max-width: 320px;
-          margin-left: auto;
-
-          display: flex;
-          justify-content: flex-end;
-          margin-right: 17px;
-
-          .resend-svg {
-            margin: 5px 15px 0 0;
-            cursor: pointer;
-            svg {
-              @include themify(day) {
-                fill: $light-black;
-              }
-              @include themify(night) {
-                fill: $white;
-              }
-            }
-          }
-
-          .failed-svg {
-            margin: 8px 0 0 5px;
-            svg {
-              width: 16px;
-              height: 16px;
-              fill: $red !important;
-            }
-          }
-
-          &.sending {
-            margin-right: 5px;
-          }
-          &.failed {
-            margin-right: 7px;
-          }
-
-          .sender-message-content {
-            border-radius: 10px 10px 0px;
-            max-width: 290px;
-            word-wrap: break-word;
-            margin-bottom: 0;
-            color: $charcoal-grey;
-            font-size: 16px;
-            font-weight: 400;
-            padding: 8px 12px 8px 12px;
-            a {
-              text-decoration: underline;
-              color: white;
-            }
-            @include themify(day) {
-              background-color: rgb(0, 132, 255);
-              color: $white;
-            }
-            @include themify(night) {
-              background: $charcoal-grey;
-              color: $white;
-            }
-            &.gif {
-              background: none;
-              img {
-                max-width: 100%;
-              }
-            }
-
-            &.chat-image {
-              background: none;
-              img {
-                max-width: 100%;
-              }
-            }
-          }
-        }
-      }
-      .hide-msg {
-        margin-right: 15px;
-        margin-top: 5px;
-        svg {
-          height: 14px;
-          width: 14px;
-        }
-        .hide-msg-svg {
-          cursor: pointer;
-          margin-bottom: 0;
-        }
-        &.receiver {
-          margin-top: 33px;
-          margin-left: 10px;
-        }
-      }
+      // .custom-divider {
+      //   margin: 12px 24px 0px 24px;
+      //   font-size: 0.7em;
+      //   color: $dark;
+      //   .custom-divider-text {
+      //     display: flex;
+      //     justify-content: center;
+      //     padding: 0 8px;
+      //   }
+      // }
+      // .message {
+      // display: flex;
+      // .user-img {
+      //   padding: 18px 8px 8px 16px;
+      // }
+      // .community-user-img {
+      //   padding: 8px 8px 8px 16px;
+      //   .user-avatar.medium {
+      //     cursor: pointer;
+      //   }
+      // }
+      // .user-info {
+      //   padding-top: 8px;
+      //   .user-msg-time {
+      //     margin: 0;
+      //     color: rgb(138, 141, 145);
+      //     font-weight: 400;
+      //     font-size: 12px;
+      //     margin-left: 4px;
+      //     margin-bottom: 2px;
+      //     .username-community {
+      //       margin-right: 8px;
+      //     }
+      //   }
+      //   .receiver-message-content {
+      //     @include themify(day) {
+      //       background: #e4e6eb;
+      //     }
+      //     @include themify(night) {
+      //       background: #cee2ff;
+      //     }
+
+      //     &.gif {
+      //       background: none;
+      //       img {
+      //         max-width: 100%;
+      //       }
+      //     }
+
+      //     &.chat-image {
+      //       background: none;
+      //       img {
+      //         max-width: 100%;
+      //       }
+      //     }
+      //     color: #050505;
+      //     max-width: 290px;
+      //     word-wrap: break-word;
+      //     padding: 10px;
+      //     border-radius: 0px 10px 10px;
+      //   }
+      // }
+      // }
+      // .sender {
+      //   margin-bottom: 0.17rem;
+      //   .sender-message-time {
+      //     color: rgb(138, 141, 145);
+      //     display: flex;
+      //     font-weight: 400;
+      //     justify-content: flex-end;
+      //     font-size: 12px;
+      //     margin: 0;
+      //     margin-right: 18px;
+      //     margin-bottom: 2px;
+      //   }
+      //   .sender-message {
+      //     // max-width: 320px;
+      //     margin-left: auto;
+
+      //     display: flex;
+      //     justify-content: flex-end;
+      //     margin-right: 17px;
+
+      //     .resend-svg {
+      //       margin: 5px 15px 0 0;
+      //       cursor: pointer;
+      //       svg {
+      //         @include themify(day) {
+      //           fill: $light-black;
+      //         }
+      //         @include themify(night) {
+      //           fill: $white;
+      //         }
+      //       }
+      //     }
+
+      //     .failed-svg {
+      //       margin: 8px 0 0 5px;
+      //       svg {
+      //         width: 16px;
+      //         height: 16px;
+      //         fill: $red !important;
+      //       }
+      //     }
+
+      //     &.sending {
+      //       margin-right: 5px;
+      //     }
+      //     &.failed {
+      //       margin-right: 7px;
+      //     }
+
+      //     .sender-message-content {
+      //       border-radius: 10px 10px 0px;
+      //       max-width: 290px;
+      //       word-wrap: break-word;
+      //       margin-bottom: 0;
+      //       color: $charcoal-grey;
+      //       font-size: 16px;
+      //       font-weight: 400;
+      //       padding: 8px 12px 8px 12px;
+      //       a {
+      //         text-decoration: underline;
+      //         color: white;
+      //       }
+      //       @include themify(day) {
+      //         background-color: rgb(0, 132, 255);
+      //         color: $white;
+      //       }
+      //       @include themify(night) {
+      //         background: $charcoal-grey;
+      //         color: $white;
+      //       }
+      //       &.gif {
+      //         background: none;
+      //         img {
+      //           max-width: 100%;
+      //         }
+      //       }
+
+      //       &.chat-image {
+      //         background: none;
+      //         img {
+      //           max-width: 100%;
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
+      // .hide-msg {
+      //   margin-right: 15px;
+      //   margin-top: 5px;
+      //   svg {
+      //     height: 14px;
+      //     width: 14px;
+      //   }
+      //   .hide-msg-svg {
+      //     cursor: pointer;
+      //     margin-bottom: 0;
+      //   }
+      //   &.receiver {
+      //     margin-top: 33px;
+      //     margin-left: 10px;
+      //   }
+      // }
     }
   }
 
@@ -659,23 +658,23 @@
   }
 }
 
-.profile-box {
-  padding: 15px;
-  .profile-box-content {
-    .user-avatar.large {
-      margin-bottom: 20px;
-    }
-    .profile-name {
-      margin-bottom: 10px;
-      font-size: 18px;
-      font-weight: 800;
-    }
-    .profile-box-buttons {
-      margin-bottom: 15px;
-      padding: 0 5px;
-    }
-  }
-}
+// .profile-box {
+//   padding: 15px;
+//   .profile-box-content {
+//     .user-avatar.large {
+//       margin-bottom: 20px;
+//     }
+//     .profile-name {
+//       margin-bottom: 10px;
+//       font-size: 18px;
+//       font-weight: 800;
+//     }
+//     .profile-box-buttons {
+//       margin-bottom: 15px;
+//       padding: 0 5px;
+//     }
+//   }
+// }
 
 .chat-button {
   position: fixed;
@@ -690,8 +689,3 @@
 .medium-zoom-image--opened {
   z-index: 999;
 }
-
-.medium-zoom--opened .medium-zoom-overlay {
-  // opacity: 0;
-  // background: white;
-}
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index f5cd4939d42..4054f7ec7dd 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -1,33 +1,20 @@
-import React, { RefObject, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { useLocation } from "react-router";
 import { History } from "history";
-import {
-  Button,
-  Col,
-  Form,
-  FormControl,
-  InputGroup,
-  Modal,
-  OverlayTrigger,
-  Popover,
-  Row,
-  Spinner
-} from "react-bootstrap";
+import { Button, Form, InputGroup, Modal, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import mediumZoom, { Zoom } from "medium-zoom";
 
 import { ActiveUser } from "../../store/active-user/types";
 import { Chat, DirectContactsType } from "../../store/chat/types";
-import { Community, ROLES } from "../../store/communities/types";
-import { Global, Theme } from "../../store/global/types";
+import { Community } from "../../store/communities/types";
+import { Global } from "../../store/global/types";
 import { User } from "../../store/users/types";
 import { ToggleType, UI } from "../../store/ui/types";
 import { Account } from "../../store/accounts/types";
 import {
   Channel,
   ChannelUpdate,
-  communityModerator,
   DirectMessage,
   PublicMessage
 } from "../../../providers/message-provider-types";
@@ -37,12 +24,13 @@ import UserAvatar from "../user-avatar";
 import LinearProgress from "../linear-progress";
 import { error, success } from "../feedback";
 import { setNostrkeys } from "../../../providers/message-provider";
-import DropDown, { MenuItem } from "../dropdown";
-import FollowControls from "../follow-controls";
 import OrDivider from "../or-divider";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
 import ChatsProfileBox from "../chats-profile-box";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
+import ChatsChannelMessages from "../chats-channel-messages";
 
 import {
   addMessageSVG,
@@ -51,40 +39,25 @@ import {
   arrowBackSvg,
   chevronUpSvg,
   chevronDownSvgForSlider,
-  linkSvg,
-  KebabMenu,
-  chatLeaveSvg,
-  editSVG,
   keySvg,
-  syncSvg,
-  hideSvg,
-  removeUserSvg,
-  resendMessageSvg,
-  failedMessageSvg,
-  chatKeySvg
+  syncSvg
 } from "../../img/svg";
 
 import {
-  DropDownStyle,
   NOSTRKEY,
-  ADDROLE,
   HIDEMESSAGE,
   BLOCKUSER,
-  LEAVECOMMUNITY,
   UNBLOCKUSER,
   NEWCHATACCOUNT,
   CHATIMPORT,
   RESENDMESSAGE,
   EmojiPickerStyle,
-  GifPickerStyle,
-  CHAT
+  GifPickerStyle
 } from "./chat-constants";
 
 import { getPublicKey } from "../../../lib/nostr-tools/keys";
 import {
   createNoStrAccount,
-  formatMessageDate,
-  formatMessageTime,
   getProfileMetaData,
   NostrKeysType,
   setProfileMetaData,
@@ -92,12 +65,10 @@ import {
   getCommunities,
   getPrivateKey,
   fetchCommunityMessages,
-  isMessageGif,
-  isMessageImage,
-  getProfileName
+  getCommunityLastMessage,
+  getDirectLastMessage
 } from "../../helper/chat-utils";
 import * as ls from "../../util/local-storage";
-import { renderPostBody } from "@ecency/render-helper";
 import accountReputation from "../../helper/account-reputation";
 import { _t } from "../../i18n";
 
@@ -105,8 +76,7 @@ import { getAccountFull, getAccountReputations } from "../../api/hive";
 import { getCommunity } from "../../api/bridge";
 
 import "./index.scss";
-import ChatsDropdownMenu from "../chats-dropdown-menu";
-import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
+import ChatsDirectMessages from "../chats-direct-messages";
 
 export interface profileData {
   joiningData: string;
@@ -147,17 +117,13 @@ interface Props {
   deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
-let zoom: Zoom | null = null;
-
 export default function ChatBox(props: Props) {
   const routerLocation = useLocation();
   const prevPropsRef = useRef(props);
-  const popoverRef = useRef<HTMLDivElement | null>(null);
   const chatBodyDivRef = React.createRef<HTMLDivElement>();
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
-  const [dmMessage, setDmMessage] = useState("");
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
@@ -183,13 +149,9 @@ export default function ChatBox(props: Props) {
   const [addRoleError, setAddRoleError] = useState("");
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
   const [chatPrivKey, setChatPrivkey] = useState("");
-  const [hoveredMessageId, setHoveredMessageId] = useState("");
-  const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [removedUserId, setRemovedUserID] = useState("");
-  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
-  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
@@ -197,6 +159,7 @@ export default function ChatBox(props: Props) {
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
+  const [refreshChat, setRefreshChat] = useState(false);
 
   useEffect(() => {
     console.log("Chat in store", props.chat);
@@ -262,53 +225,6 @@ export default function ChatBox(props: Props) {
     }
   }, [isTop]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const clickedElement = event.target as HTMLElement;
-
-      if (!popoverRef.current) {
-        return;
-      }
-
-      const isAvatarClicked =
-        clickedElement.classList.contains("user-avatar") &&
-        clickedElement.classList.contains("medium");
-      if (
-        popoverRef.current &&
-        !popoverRef.current?.contains(event.target as Node) &&
-        !isAvatarClicked
-      ) {
-        setClickedMessage("");
-      }
-    };
-
-    if (chatBodyDivRef.current) {
-      chatBodyDivRef.current.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      if (chatBodyDivRef.current) {
-        chatBodyDivRef.current.removeEventListener("mousedown", handleClickOutside);
-      }
-    };
-  }, [clickedMessage]);
-
-  useEffect(() => {
-    if (props.chat.channels.length !== 0 || props.chat.directContacts.length !== 0) {
-      setInProgress(false);
-    }
-  }, [props.chat]);
-
-  useEffect(() => {
-    currentChannel?.communityModerators && getPrivilegedUsers(currentChannel?.communityModerators!);
-    currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
-    currentChannel && scrollerClicked();
-    if (removedUsers) {
-      const removed = removedUsers.includes(activeUserKeys?.pub!);
-      setIsActiveUserRemoved(removed);
-    }
-  }, [currentChannel, removedUsers]);
-
   useEffect(() => {
     if (window.messageService) {
       setHasUserJoinedChat(true);
@@ -317,7 +233,7 @@ export default function ChatBox(props: Props) {
     }
     setTimeout(() => {
       if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
-        setInProgress(false);
+        setRefreshChat(false);
       }
     }, 5000);
   }, [typeof window !== "undefined" && window?.messageService]);
@@ -336,9 +252,7 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     const prevProps = prevPropsRef.current;
-    if (prevProps.global.theme !== props.global.theme) {
-      setBackground();
-    }
+
     if (prevProps.activeUser?.username !== props.activeUser?.username) {
       setIsCommunity(false);
       setIsCurrentUser(false);
@@ -350,7 +264,7 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     if (directMessagesList.length !== 0 || publicMessages.length !== 0) {
-      zoomInitializer();
+      // zoomInitializer();
     }
     if (directMessagesList.length !== 0) {
       scrollerClicked();
@@ -375,7 +289,7 @@ export default function ChatBox(props: Props) {
 
   useEffect(() => {
     if (isCurrentUser) {
-      zoomInitializer();
+      // zoomInitializer();
       scrollerClicked();
     } else {
       scrollerClicked();
@@ -447,24 +361,6 @@ export default function ChatBox(props: Props) {
     [searchtext]
   );
 
-  const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
-    const privilegedRoles = ["owner", "admin", "mod"];
-    const communityAdminRoles = ["owner", "admin"];
-
-    const privilegedUsers = communityModerators.filter((user) =>
-      privilegedRoles.includes(user.role)
-    );
-    const communityAdmins = communityModerators.filter((user) =>
-      communityAdminRoles.includes(user.role)
-    );
-
-    const privilegedUserNames = privilegedUsers.map((user) => user.name);
-    const communityAdminNames = communityAdmins.map((user) => user.name);
-
-    setPrivilegedUsers(privilegedUserNames);
-    setCommunityAdmins(communityAdminNames);
-  };
-
   const handleRouterChange = () => {
     if (routerLocation.pathname.match("/chats")) {
       setShow(false);
@@ -509,22 +405,6 @@ export default function ChatBox(props: Props) {
     setInnerWidth(window.innerWidth);
   };
 
-  const zoomInitializer = () => {
-    const elements: HTMLElement[] = [
-      ...document.querySelectorAll<HTMLElement>(".chat-image img")
-    ].filter((x) => x.parentNode?.nodeName !== "A");
-    zoom = mediumZoom(elements);
-    setBackground();
-  };
-
-  const setBackground = () => {
-    if (props.global.theme === Theme.day) {
-      zoom?.update({ background: "#ffffff" });
-    } else {
-      zoom?.update({ background: "#131111" });
-    }
-  };
-
   const fetchDirectMessages = (peer: string) => {
     for (const item of props.chat.directMessages) {
       if (item.peer === peer) {
@@ -611,7 +491,7 @@ export default function ChatBox(props: Props) {
     resetChat();
     handleBackArrowSvg();
     if (getPrivateKey(props.activeUser?.username!)) {
-      setInProgress(true);
+      setRefreshChat(true);
       const keys = {
         pub: activeUserKeys?.pub!,
         priv: getPrivateKey(props.activeUser?.username!)
@@ -648,60 +528,11 @@ export default function ChatBox(props: Props) {
     <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
   );
 
-  const getFormattedDateAndDay = (msg: DirectMessage | PublicMessage, i: number) => {
-    const prevMsg = isCurrentUser ? directMessagesList[i - 1] : publicMessages[i - 1];
-    const msgDate = formatMessageDate(msg.created);
-    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-    if (msgDate !== prevMsgDate) {
-      return (
-        <div className="custom-divider">
-          <span className="custom-divider-text">{msgDate}</span>
-        </div>
-      );
-    }
-    return <></>;
-  };
-
-  const getLastMessage = (pubkey: string) => {
-    const msgsList = fetchDirectMessages(pubkey!);
-    const messages = msgsList.sort((a, b) => a.created - b.created);
-    const lastMessage = messages.slice(-1);
-    return lastMessage[0]?.content;
-  };
-
   const communityClicked = (community: string, name: string) => {
     setIsCommunity(true);
     setCommunityName(community);
   };
 
-  const sendDM = (name: string, pubkey: string) => {
-    if (dmMessage) {
-      window.messageService?.sendDirectMessage(pubkey, dmMessage);
-
-      setIsCurrentUser(true);
-      setCurrentUser(name);
-      setIsCommunity(false);
-      setCommunityName("");
-      setClickedMessage("");
-      setDmMessage("");
-    }
-  };
-
-  const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    setDmMessage(e.target.value);
-  };
-
-  const handleImageClick = (msgId: string, pubkey: string) => {
-    if (clickedMessage === msgId) {
-      popoverRef.current = null;
-      setClickedMessage("");
-    } else {
-      popoverRef.current = null;
-      setClickedMessage(msgId);
-      setRemovedUserID(pubkey);
-    }
-  };
-
   const copyToClipboard = (content: string) => {
     const textField = document.createElement("textarea");
     textField.innerText = content;
@@ -741,20 +572,6 @@ export default function ChatBox(props: Props) {
     setKeyDialog(false);
   };
 
-  const handleResendMessage = () => {
-    setKeyDialog(false);
-    setStep(0);
-    if (resendMessage) {
-      if (currentChannel) {
-        props.deletePublicMessage(currentChannel.id, resendMessage.id);
-        window?.messageService?.sendPublicMessage(currentChannel!, resendMessage.content, [], "");
-      } else if (isCurrentUser && receiverPubKey) {
-        props.deleteDirectMessage(receiverPubKey, resendMessage.id);
-        window.messageService?.sendDirectMessage(receiverPubKey, resendMessage.content);
-      }
-    }
-  };
-
   const handleConfirmButton = (actionType: string) => {
     switch (actionType) {
       case HIDEMESSAGE:
@@ -776,7 +593,7 @@ export default function ChatBox(props: Props) {
           });
         break;
       case RESENDMESSAGE:
-        handleResendMessage();
+        // handleResendMessage();
         break;
       default:
         break;
@@ -998,7 +815,12 @@ export default function ChatBox(props: Props) {
               )}
               {isCommunity && (
                 <div className="community-menu">
-                  <ChatsCommunityDropdownMenu username={communityName} {...props} />
+                  <ChatsCommunityDropdownMenu
+                    username={communityName}
+                    {...props}
+                    currentChannel={currentChannel!}
+                    currentChannelSetter={setCurrentChannel}
+                  />
                 </div>
               )}{" "}
               {!isCommunity && !isCurrentUser && noStrPrivKey && (
@@ -1025,9 +847,8 @@ export default function ChatBox(props: Props) {
               </div>
             </div>
           </div>
-
+          {inProgress && <LinearProgress />}
           {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
-
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
@@ -1066,330 +887,111 @@ export default function ChatBox(props: Props) {
                       {!isCurrentUserJoined && (
                         <p className="not-joined">{_t("chat.not-joined")}</p>
                       )}
-                      {isCurrentUser
-                        ? directMessagesList.map((msg, i) => {
-                            const dayAndMonth = getFormattedDateAndDay(msg, i);
-                            let renderedPreview = renderPostBody(
-                              msg.content,
-                              false,
-                              props.global.canUseWebp
-                            );
-
-                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                            const isGif = isMessageGif(msg.content);
-
-                            const isImage = isMessageImage(msg.content);
-
-                            return (
-                              <React.Fragment key={msg.id}>
-                                {dayAndMonth}
-                                {msg.creator !== activeUserKeys?.pub ? (
-                                  <div key={msg.id} className="message">
-                                    <div className="user-img">
-                                      <Link to={`/@${currentUser}`}>
-                                        <span>
-                                          <UserAvatar username={currentUser} size="medium" />
-                                        </span>
-                                      </Link>
-                                    </div>
-                                    <div className="user-info">
-                                      <p className="user-msg-time">
-                                        {formatMessageTime(msg.created)}
-                                      </p>
-                                      <div
-                                        className={`receiver-message-content ${
-                                          isGif ? "gif" : ""
-                                        } ${isImage ? "chat-image" : ""}`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                    </div>
-                                  </div>
-                                ) : (
-                                  <div key={msg.id} className="sender">
-                                    <p className="sender-message-time">
-                                      {formatMessageTime(msg.created)}
-                                    </p>
-                                    <div
-                                      className={`sender-message ${
-                                        msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                                      }`}
-                                    >
-                                      {msg.sent === 2 && (
-                                        <Tooltip content={"Resend"}>
-                                          <span
-                                            className="resend-svg"
-                                            onClick={() => {
-                                              setKeyDialog(true);
-                                              setStep(11);
-                                              setResendMessage(msg);
-                                            }}
-                                          >
-                                            {resendMessageSvg}
-                                          </span>
-                                        </Tooltip>
-                                      )}
-                                      <div
-                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
-                                          isImage ? "chat-image" : ""
-                                        }`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                      {msg.sent === 0 && (
-                                        <span style={{ margin: "10px 0 0 5px" }}>
-                                          <Spinner animation="border" variant="primary" size="sm" />
-                                        </span>
-                                      )}
-                                      {msg.sent === 2 && (
-                                        <Tooltip content={"Failed"}>
-                                          <span className="failed-svg">{failedMessageSvg}</span>
-                                        </Tooltip>
-                                      )}
-                                    </div>
-                                  </div>
-                                )}
-                              </React.Fragment>
-                            );
-                          })
-                        : publicMessages.map((pMsg, i) => {
-                            const dayAndMonth = getFormattedDateAndDay(pMsg, i);
-                            let renderedPreview = renderPostBody(
-                              pMsg.content,
-                              false,
-                              props.global.canUseWebp
-                            );
-
-                            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                            const isGif = isMessageGif(pMsg.content);
-
-                            const isImage = isMessageImage(pMsg.content);
-
-                            const name = getProfileName(pMsg.creator, props.chat.profiles);
-
-                            const popover = (
-                              <Popover
-                                id={`profile-popover`}
-                                placement="right"
-                                className="profile-popover"
-                              >
-                                <Popover.Content>
-                                  <div
-                                    className="profile-box"
-                                    ref={popoverRef as RefObject<HTMLDivElement>}
-                                  >
-                                    <div className="profile-box-content">
-                                      <div className="profile-box-logo d-flex justify-content-center">
-                                        <UserAvatar username={name!} size="large" />
-                                      </div>
-
-                                      <p className="d-flex justify-content-center profile-name">
-                                        {`@${name!}`}
-                                      </p>
-                                      <div
-                                        className={`d-flex ${
-                                          communityAdmins.includes(props.activeUser?.username!)
-                                            ? "justify-content-between"
-                                            : "justify-content-center"
-                                        }  profile-box-buttons`}
-                                      >
-                                        <FollowControls
-                                          {...props}
-                                          targetUsername={name!}
-                                          where={"chat-box"}
-                                        />
-
-                                        {communityAdmins.includes(props.activeUser?.username!) && (
-                                          <>
-                                            {currentChannel?.removedUserIds?.includes(
-                                              pMsg.creator
-                                            ) ? (
-                                              <>
-                                                <Button
-                                                  variant="primary"
-                                                  onClick={() => {
-                                                    setKeyDialog(true);
-                                                    setStep(7);
-                                                    setClickedMessage("");
-                                                  }}
-                                                >
-                                                  {_t("chat.unblock")}
-                                                </Button>
-                                              </>
-                                            ) : (
-                                              <>
-                                                <Button
-                                                  variant="primary"
-                                                  onClick={() => {
-                                                    setKeyDialog(true);
-                                                    setStep(6);
-                                                    setClickedMessage("");
-                                                  }}
-                                                >
-                                                  {_t("chat.block")}
-                                                </Button>
-                                              </>
-                                            )}
-                                          </>
-                                        )}
-                                      </div>
-
-                                      <Form
-                                        onSubmit={(e: React.FormEvent) => {
-                                          e.preventDefault();
-                                          e.stopPropagation();
-                                          sendDM(name!, pMsg.creator);
-                                        }}
-                                      >
-                                        <InputGroup className="dm-input-group">
-                                          <Form.Control
-                                            value={dmMessage}
-                                            autoFocus={true}
-                                            onChange={handleDMChange}
-                                            required={true}
-                                            type="text"
-                                            placeholder={"Send direct message"}
-                                            autoComplete="off"
-                                            className="dm-chat-input"
-                                          />
-                                        </InputGroup>
-                                      </Form>
-                                    </div>
-                                  </div>
-                                </Popover.Content>
-                              </Popover>
-                            );
-
-                            return (
-                              <React.Fragment key={pMsg.id}>
-                                {dayAndMonth}
-                                {pMsg.creator !== activeUserKeys?.pub ? (
-                                  <div
-                                    key={pMsg.id}
-                                    className="message"
-                                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                                    onMouseLeave={() => setHoveredMessageId("")}
-                                  >
-                                    <div className="community-user-img">
-                                      <OverlayTrigger
-                                        trigger="click"
-                                        placement="right"
-                                        show={clickedMessage === pMsg.id}
-                                        overlay={popover}
-                                        delay={1000}
-                                        onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
-                                      >
-                                        <span>
-                                          <UserAvatar username={name!} size="medium" />
-                                        </span>
-                                      </OverlayTrigger>
-                                    </div>
-
-                                    <div className="user-info">
-                                      <p className="user-msg-time">
-                                        <span className="username-community">{name}</span>
-                                        {formatMessageTime(pMsg.created)}
-                                      </p>
-                                      <div
-                                        className={`receiver-message-content ${
-                                          isGif ? "gif" : ""
-                                        } ${isImage ? "chat-image" : ""}`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                    </div>
-                                    {hoveredMessageId === pMsg.id &&
-                                      privilegedUsers.includes(props.activeUser?.username!) && (
-                                        <Tooltip content={"Hide Message"}>
-                                          <div className="hide-msg receiver">
-                                            <p
-                                              className="hide-msg-svg"
-                                              onClick={() => {
-                                                setClickedMessage("");
-                                                setKeyDialog(true);
-                                                setStep(5);
-                                                setHiddenMsgId(pMsg.id);
-                                              }}
-                                            >
-                                              {hideSvg}
-                                            </p>
-                                          </div>
-                                        </Tooltip>
-                                      )}
-                                  </div>
-                                ) : (
-                                  <div
-                                    key={pMsg.id}
-                                    className="sender"
-                                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                                    onMouseLeave={() => setHoveredMessageId("")}
-                                  >
-                                    <p className="sender-message-time">
-                                      {formatMessageTime(pMsg.created)}
-                                    </p>
-                                    <div
-                                      className={`sender-message ${
-                                        pMsg.sent === 2
-                                          ? "failed"
-                                          : pMsg.sent === 0
-                                          ? "sending"
-                                          : ""
-                                      }`}
-                                    >
-                                      {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
-                                        <Tooltip content={"Hide Message"}>
-                                          <div className="hide-msg">
-                                            <p
-                                              className="hide-msg-svg"
-                                              onClick={() => {
-                                                setClickedMessage("");
-                                                setKeyDialog(true);
-                                                setStep(5);
-                                                setHiddenMsgId(pMsg.id);
-                                              }}
-                                            >
-                                              {hideSvg}
-                                            </p>
-                                          </div>
-                                        </Tooltip>
-                                      )}
-                                      {pMsg.sent === 2 && (
-                                        <Tooltip content={"Resend"}>
-                                          <span
-                                            className="resend-svg"
-                                            onClick={() => {
-                                              setKeyDialog(true);
-                                              setStep(11);
-                                              setResendMessage(pMsg);
-                                            }}
-                                          >
-                                            {resendMessageSvg}
-                                          </span>
-                                        </Tooltip>
-                                      )}
-                                      <div
-                                        className={`sender-message-content ${isGif ? "gif" : ""} ${
-                                          isImage ? "chat-image" : ""
-                                        }`}
-                                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                      />
-                                      {pMsg.sent === 0 && (
-                                        <span style={{ margin: "10px 0 0 5px" }}>
-                                          <Spinner animation="border" variant="primary" size="sm" />
-                                        </span>
-                                      )}
-                                      {pMsg.sent === 2 && (
-                                        <Tooltip content={"Failed"}>
-                                          <span className="failed-svg">{failedMessageSvg}</span>
-                                        </Tooltip>
-                                      )}
-                                    </div>
-                                  </div>
-                                )}
-                              </React.Fragment>
-                            );
-                          })}
+                      {isCurrentUser ? (
+                        // directMessagesList.map((msg, i) => {
+                        //   const dayAndMonth = getFormattedDateAndDay(msg, i);
+                        //   let renderedPreview = renderPostBody(
+                        //     msg.content,
+                        //     false,
+                        //     props.global.canUseWebp
+                        //   );
+
+                        //   renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                        //   renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                        //   const isGif = isMessageGif(msg.content);
+
+                        //   const isImage = isMessageImage(msg.content);
+
+                        //   return (
+                        //     <React.Fragment key={msg.id}>
+                        //       {dayAndMonth}
+                        //       {msg.creator !== activeUserKeys?.pub ? (
+                        //         <div key={msg.id} className="message">
+                        //           <div className="user-img">
+                        //             <Link to={`/@${currentUser}`}>
+                        //               <span>
+                        //                 <UserAvatar username={currentUser} size="medium" />
+                        //               </span>
+                        //             </Link>
+                        //           </div>
+                        //           <div className="user-info">
+                        //             <p className="user-msg-time">
+                        //               {formatMessageTime(msg.created)}
+                        //             </p>
+                        //             <div
+                        //               className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                        //                 isImage ? "chat-image" : ""
+                        //               }`}
+                        //               dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                        //             />
+                        //           </div>
+                        //         </div>
+                        //       ) : (
+                        //         <div key={msg.id} className="sender">
+                        //           <p className="sender-message-time">
+                        //             {formatMessageTime(msg.created)}
+                        //           </p>
+                        //           <div
+                        //             className={`sender-message ${
+                        //               msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
+                        //             }`}
+                        //           >
+                        //             {msg.sent === 2 && (
+                        //               <Tooltip content={"Resend"}>
+                        //                 <span
+                        //                   className="resend-svg"
+                        //                   onClick={() => {
+                        //                     setKeyDialog(true);
+                        //                     setStep(11);
+                        //                     setResendMessage(msg);
+                        //                   }}
+                        //                 >
+                        //                   {resendMessageSvg}
+                        //                 </span>
+                        //               </Tooltip>
+                        //             )}
+                        //             <div
+                        //               className={`sender-message-content ${isGif ? "gif" : ""} ${
+                        //                 isImage ? "chat-image" : ""
+                        //               }`}
+                        //               dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                        //             />
+                        //             {msg.sent === 0 && (
+                        //               <span style={{ margin: "10px 0 0 5px" }}>
+                        //                 <Spinner animation="border" variant="primary" size="sm" />
+                        //               </span>
+                        //             )}
+                        //             {msg.sent === 2 && (
+                        //               <Tooltip content={"Failed"}>
+                        //                 <span className="failed-svg">{failedMessageSvg}</span>
+                        //               </Tooltip>
+                        //             )}
+                        //           </div>
+                        //         </div>
+                        //       )}
+                        //     </React.Fragment>
+                        //   );
+                        // })
+                        <ChatsDirectMessages
+                          {...props}
+                          directMessages={directMessagesList}
+                          activeUserKeys={activeUserKeys!}
+                          currentUser={currentUser}
+                          isScrollToBottom={false}
+                        />
+                      ) : (
+                        <ChatsChannelMessages
+                          {...props}
+                          username={communityName}
+                          publicMessages={publicMessages}
+                          currentChannel={currentChannel!}
+                          activeUserKeys={activeUserKeys!}
+                          activeUser={props.activeUser}
+                          isScrollToBottom={false}
+                          currentChannelSetter={setCurrentChannel}
+                        />
+                      )}
                     </>
                   </div>
                 ) : showSearchUser ? (
@@ -1440,6 +1042,7 @@ export default function ChatBox(props: Props) {
                   <>
                     {(props.chat.directContacts.length !== 0 ||
                       (props.chat.channels.length !== 0 && communities.length !== 0)) &&
+                    !refreshChat &&
                     noStrPrivKey ? (
                       <React.Fragment>
                         {props.chat.channels.length !== 0 && communities.length !== 0 && (
@@ -1468,6 +1071,12 @@ export default function ChatBox(props: Props) {
                                     <p className="username" style={{ paddingTop: "8px" }}>
                                       {channel.name}
                                     </p>
+                                    <p className="last-message">
+                                      {getCommunityLastMessage(
+                                        channel.id,
+                                        props.chat.publicMessages
+                                      )}
+                                    </p>
                                   </div>
                                 </div>
                               );
@@ -1490,7 +1099,9 @@ export default function ChatBox(props: Props) {
 
                               <div className="user-title" onClick={() => userClicked(user.name)}>
                                 <p className="username">{user.name}</p>
-                                <p className="last-message">{getLastMessage(user.pubkey)}</p>
+                                <p className="last-message">
+                                  {getDirectLastMessage(user.pubkey, props.chat.directMessages)}
+                                </p>
                               </div>
                             </div>
                           );
@@ -1553,8 +1164,10 @@ export default function ChatBox(props: Props) {
                           </Button>
                         </div>
                       </>
-                    ) : inProgress ? (
-                      <h3 className="no-chat">{_t("chat.loading")}</h3>
+                    ) : refreshChat ? (
+                      <div className="no-chat">
+                        <Spinner animation="border" variant="primary" />
+                      </div>
                     ) : (
                       <>
                         <p className="no-chat">{_t("chat.no-chat")}</p>
@@ -1599,7 +1212,6 @@ export default function ChatBox(props: Props) {
               </p>
             )}
           </div>
-          {inProgress && <LinearProgress />}
           {(isCurrentUser || isCommunity) && (
             <ChatInput
               {...props}
diff --git a/src/common/components/chat-input/index.tsx b/src/common/components/chat-input/index.tsx
index 7ea44638a51..16d1e483e94 100644
--- a/src/common/components/chat-input/index.tsx
+++ b/src/common/components/chat-input/index.tsx
@@ -23,6 +23,7 @@ import { addImage } from "../../api/private-api";
 
 import "./index.scss";
 import { EmojiPickerStyleProps } from "../chat-box";
+import LinearProgress from "../linear-progress";
 
 interface Props {
   activeUser: ActiveUser | null;
@@ -102,6 +103,7 @@ export default function ChatInput(props: Props) {
       !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
+      console.log("Contact has been published");
       window.messageService?.publishContacts(currentUser, receiverPubKey);
     }
   };
@@ -178,109 +180,111 @@ export default function ChatInput(props: Props) {
   };
 
   return (
-    <div className={`chat ${isActveUserRemoved || !isCurrentUserJoined ? "disable" : ""}`}>
-      <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
-        <div className="chatbox-emoji-picker">
-          <div className="chatbox-emoji">
-            <Tooltip content={_t("editor-toolbar.emoji")}>
-              <div className="emoji-icon" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
-                {emoticonHappyOutlineSvg}
+    <>
+      <div className={`chat ${isActveUserRemoved || !isCurrentUserJoined ? "disable" : ""}`}>
+        <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
+          <div className="chatbox-emoji-picker">
+            <div className="chatbox-emoji">
+              <Tooltip content={_t("editor-toolbar.emoji")}>
+                <div className="emoji-icon" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
+                  {emoticonHappyOutlineSvg}
+                </div>
+              </Tooltip>
+              {showEmojiPicker && (
+                <EmojiPicker
+                  style={emojiPickerStyles}
+                  fallback={(e) => {
+                    handleEmojiSelection(e);
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </ClickAwayListener>
+
+        {message.length === 0 && (
+          <React.Fragment>
+            <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
+              <div className="chatbox-emoji-picker">
+                <div className="chatbox-emoji">
+                  <Tooltip content={_t("Gif")}>
+                    <div className="emoji-icon" onClick={toggleGif}>
+                      {" "}
+                      {gifIcon}
+                    </div>
+                  </Tooltip>
+                  {shGif && (
+                    <GifPicker
+                      style={gifPickerStyle}
+                      gifImagesStyle={GifImagesStyle}
+                      shGif={true}
+                      changeState={(gifState) => {
+                        setShGif(gifState!);
+                      }}
+                      fallback={(e) => {
+                        handleGifSelection(e);
+                      }}
+                    />
+                  )}
+                </div>
               </div>
-            </Tooltip>
-            {showEmojiPicker && (
-              <EmojiPicker
-                style={emojiPickerStyles}
-                fallback={(e) => {
-                  handleEmojiSelection(e);
+            </ClickAwayListener>
+
+            <Tooltip content={"Image"}>
+              <div
+                className="chatbox-image"
+                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                  e.stopPropagation();
+                  const el = fileInput.current;
+                  if (el) el.click();
                 }}
-              />
-            )}
-          </div>
-        </div>
-      </ClickAwayListener>
-
-      {message.length === 0 && (
-        <React.Fragment>
-          <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
-            <div className="chatbox-emoji-picker">
-              <div className="chatbox-emoji">
-                <Tooltip content={_t("Gif")}>
-                  <div className="emoji-icon" onClick={toggleGif}>
-                    {" "}
-                    {gifIcon}
-                  </div>
-                </Tooltip>
-                {shGif && (
-                  <GifPicker
-                    style={gifPickerStyle}
-                    gifImagesStyle={GifImagesStyle}
-                    shGif={true}
-                    changeState={(gifState) => {
-                      setShGif(gifState!);
-                    }}
-                    fallback={(e) => {
-                      handleGifSelection(e);
-                    }}
-                  />
-                )}
+              >
+                <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
               </div>
-            </div>
-          </ClickAwayListener>
-
-          <Tooltip content={"Image"}>
-            <div
-              className="chatbox-image"
-              onClick={(e: React.MouseEvent<HTMLElement>) => {
-                e.stopPropagation();
-                const el = fileInput.current;
-                if (el) el.click();
-              }}
+            </Tooltip>
+
+            <input
+              onChange={fileInputChanged}
+              className="file-input"
+              ref={fileInput}
+              type="file"
+              accept="image/*"
+              multiple={true}
+              style={{ display: "none" }}
+            />
+          </React.Fragment>
+        )}
+
+        <Form
+          onSubmit={(e: React.FormEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            sendMessage();
+          }}
+          style={{ width: "100%" }}
+        >
+          <InputGroup className="chat-input-group">
+            <Form.Control
+              value={message}
+              autoFocus={true}
+              onChange={handleMessage}
+              required={true}
+              type="text"
+              placeholder={_t("chat.start-chat-placeholder")}
+              autoComplete="off"
+              className="chat-input"
+              style={{ maxWidth: "100%", overflowWrap: "break-word" }}
+              disabled={(isCurrentUser && receiverPubKey) === undefined || isActveUserRemoved}
+            />
+            <InputGroup.Append
+              className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
+              onClick={sendMessage}
             >
-              <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
-            </div>
-          </Tooltip>
-
-          <input
-            onChange={fileInputChanged}
-            className="file-input"
-            ref={fileInput}
-            type="file"
-            accept="image/*"
-            multiple={true}
-            style={{ display: "none" }}
-          />
-        </React.Fragment>
-      )}
-
-      <Form
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          e.stopPropagation();
-          sendMessage();
-        }}
-        style={{ width: "100%" }}
-      >
-        <InputGroup className="chat-input-group">
-          <Form.Control
-            value={message}
-            autoFocus={true}
-            onChange={handleMessage}
-            required={true}
-            type="text"
-            placeholder={_t("chat.start-chat-placeholder")}
-            autoComplete="off"
-            className="chat-input"
-            style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-            disabled={(isCurrentUser && receiverPubKey) === undefined || isActveUserRemoved}
-          />
-          <InputGroup.Append
-            className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
-            onClick={sendMessage}
-          >
-            {messageSendSvg}
-          </InputGroup.Append>
-        </InputGroup>
-      </Form>
-    </div>
+              {messageSendSvg}
+            </InputGroup.Append>
+          </InputGroup>
+        </Form>
+      </div>
+    </>
   );
 }
diff --git a/src/common/components/chats-channel-messages/index.scss b/src/common/components/chats-channel-messages/index.scss
index 3f55b168d2c..67da4d70435 100644
--- a/src/common/components/chats-channel-messages/index.scss
+++ b/src/common/components/chats-channel-messages/index.scss
@@ -2,9 +2,9 @@
 
 .channel-messages {
   padding-bottom: 15px;
-  .date-and-month {
-    margin-bottom: 0;
-    color: $dark;
+  .day-and-month {
+    margin-bottom: 1rem;
+    font-size: 14px;
   }
   .profile-box {
     padding: 15px;
@@ -18,13 +18,12 @@
         font-weight: 800;
       }
       .profile-box-buttons {
-        margin-bottom: 15px;
         padding: 0 5px;
       }
     }
   }
 
-  .message {
+  .receiver {
     display: flex;
     .user-img {
       padding: 18px 8px 8px 16px;
@@ -49,34 +48,37 @@
           margin-right: 8px;
         }
       }
-      .receiver-message-content {
-        @include themify(day) {
-          background: #e4e6eb;
-        }
-        @include themify(night) {
-          background: #cee2ff;
-        }
+      .receiver-messag {
+        display: flex;
+        .receiver-message-content {
+          @include themify(day) {
+            background: #e4e6eb;
+          }
+          @include themify(night) {
+            background: #cee2ff;
+          }
 
-        &.gif {
-          background: none;
-          img {
-            max-width: 100%;
+          &.gif {
+            background: none;
+            img {
+              max-width: 100%;
+            }
           }
-        }
 
-        &.chat-image {
-          background: none;
-          img {
-            max-width: 100%;
+          &.chat-image {
+            background: none;
+            img {
+              max-width: 100%;
+            }
           }
+          color: #050505;
+          // max-width: 290px;
+          display: inline-block;
+          max-width: 70% !important;
+          word-wrap: break-word;
+          padding: 10px;
+          border-radius: 0px 10px 10px;
         }
-        color: #050505;
-        // max-width: 290px;
-        display: inline-block;
-        max-width: 70% !important;
-        word-wrap: break-word;
-        padding: 10px;
-        border-radius: 0px 10px 10px;
       }
     }
   }
@@ -179,7 +181,7 @@
       margin-bottom: 0;
     }
     &.receiver {
-      margin-top: 33px;
+      margin-top: 5px;
       margin-left: 10px;
     }
   }
diff --git a/src/common/components/chats-channel-messages/index.tsx b/src/common/components/chats-channel-messages/index.tsx
index b720be30e34..75a0eb5e3a6 100644
--- a/src/common/components/chats-channel-messages/index.tsx
+++ b/src/common/components/chats-channel-messages/index.tsx
@@ -1,5 +1,10 @@
 import React, { useRef, useState, RefObject, useEffect } from "react";
-import { Channel, PublicMessage } from "../../../providers/message-provider-types";
+import mediumZoom, { Zoom } from "medium-zoom";
+import {
+  Channel,
+  communityModerator,
+  PublicMessage
+} from "../../../providers/message-provider-types";
 import {
   formatMessageTime,
   getFormattedDateAndDay,
@@ -8,24 +13,23 @@ import {
   isMessageImage,
   NostrKeysType
 } from "../../helper/chat-utils";
+import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../store/use-mapped-store";
 import {
   Button,
-  Col,
   Form,
   FormControl,
   InputGroup,
-  Modal,
   OverlayTrigger,
   Popover,
-  Row,
   Spinner
 } from "react-bootstrap";
 import UserAvatar from "../user-avatar";
 import FollowControls from "../follow-controls";
 import { Account } from "../../store/accounts/types";
 import { ToggleType, UI } from "../../store/ui/types";
+import { Global } from "../../store/global/types";
 import { _t } from "../../i18n";
 import Tooltip from "../tooltip";
 import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../img/svg";
@@ -33,44 +37,111 @@ import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../img/svg";
 import "./index.scss";
 import { User } from "../../store/users/types";
 import { ActiveUser } from "../../store/active-user/types";
-import ChatInput from "../chat-input";
+import ChatsConfirmationModal from "../chats-confirmation-modal";
+import { error } from "../feedback";
+import { CHATPAGE } from "../chat-box/chat-constants";
+import { Theme } from "../../store/global/types";
 
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
   activeUserKeys: NostrKeysType;
   username: string;
+  global: Global;
+  from?: string;
   users: User[];
   activeUser: ActiveUser | null;
   ui: UI;
+  history: History | null;
+  isScrollToBottom: boolean;
+  isScrolled?: boolean;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
-  scrollToBottom: () => void;
+  scrollToBottom?: () => void;
+  currentChannelSetter: (channel: Channel) => void;
+  deletePublicMessage: (channelId: string, msgId: string) => void;
 }
 
+let zoom: Zoom | null = null;
 export default function ChatsChannelMessages(props: Props) {
-  const { publicMessages, currentChannel, activeUserKeys, activeUser, scrollToBottom } = props;
-  const { global, chat } = useMappedStore();
+  const {
+    publicMessages,
+    currentChannel,
+    activeUserKeys,
+    activeUser,
+    history,
+    from,
+    isScrollToBottom,
+    isScrolled,
+    global,
+    scrollToBottom,
+    currentChannelSetter,
+    deletePublicMessage
+  } = props;
+  const { chat } = useMappedStore();
+
+  const prevPropsRef = useRef(props);
 
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [hoveredMessageId, setHoveredMessageId] = useState("");
+  const [step, setStep] = useState(0);
   const [dmMessage, setDmMessage] = useState("");
   const [clickedMessage, setClickedMessage] = useState("");
   const [removedUserId, setRemovedUserID] = useState("");
   const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
+  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
   // useEffect(() => {
   //   scrollToBottom();
+  //   console.log("Heloooooooo");
   // }, [publicMessages]);
 
+  useEffect(() => {
+    const prevProps = prevPropsRef.current;
+    if (prevProps.global.theme !== props.global.theme) {
+      setBackground();
+    }
+    // if (prevProps.activeUser?.username !== props.activeUser?.username) {
+    //   setIsCommunity(false);
+    //   setIsCurrentUser(false);
+    //   setCurrentUser("");
+    //   setCommunityName("");
+    // }
+    prevPropsRef.current = props;
+  }, [props.global.theme, props.activeUser]);
+
+  useEffect(() => {
+    if (publicMessages.length !== 0) {
+      zoomInitializer();
+    }
+    if (!isScrollToBottom && publicMessages.length !== 0 && !isScrolled) {
+      scrollToBottom && scrollToBottom();
+    }
+  }, [publicMessages, isScrollToBottom, channelMessagesRef]);
+
+  useEffect(() => {
+    if (currentChannel) {
+      zoomInitializer();
+      getPrivilegedUsers(currentChannel?.communityModerators!);
+      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
+    }
+  }, [currentChannel]);
+
+  useEffect(() => {
+    if (removedUsers) {
+      const removed = removedUsers.includes(activeUserKeys?.pub!);
+      setIsActiveUserRemoved(removed);
+    }
+  }, [removedUsers]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
@@ -112,6 +183,18 @@ export default function ChatsChannelMessages(props: Props) {
       // setCommunityName("");
       setClickedMessage("");
       setDmMessage("");
+      // console.log("Message is send to", name);
+      // if (
+      //   receiverPubKey &&
+      //   !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
+      //   isCurrentUser
+      // ) {
+      //   window.messageService?.publishContacts(currentUser, receiverPubKey);
+      // }
+
+      if (from && from === CHATPAGE) {
+        history?.push(`/chats/@${name}`);
+      }
     }
   };
 
@@ -119,6 +202,21 @@ export default function ChatsChannelMessages(props: Props) {
     setDmMessage(e.target.value);
   };
 
+  const zoomInitializer = () => {
+    const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
+    // .filter((x) => x.parentNode?.nodeName !== "A");
+    zoom = mediumZoom(elements);
+    setBackground();
+  };
+
+  const setBackground = () => {
+    if (global.theme === Theme.day) {
+      zoom?.update({ background: "#ffffff" });
+    } else {
+      zoom?.update({ background: "#131111" });
+    }
+  };
+
   const handleImageClick = (msgId: string, pubkey: string) => {
     if (clickedMessage === msgId) {
       popoverRef.current = null;
@@ -130,226 +228,333 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  return (
-    <div className="channel-messages" ref={channelMessagesRef}>
-      {publicMessages.length !== 0 &&
-        activeUserKeys &&
-        publicMessages.map((pMsg, i) => {
-          const dayAndMonth = getFormattedDateAndDay(pMsg, i, publicMessages);
-          let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
+  const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
+    const privilegedRoles = ["owner", "admin", "mod"];
+    const communityAdminRoles = ["owner", "admin"];
 
-          renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-          renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+    const privilegedUsers = communityModerators.filter((user) =>
+      privilegedRoles.includes(user.role)
+    );
+    const communityAdmins = communityModerators.filter((user) =>
+      communityAdminRoles.includes(user.role)
+    );
 
-          const isGif = isMessageGif(pMsg.content);
+    const privilegedUserNames = privilegedUsers.map((user) => user.name);
+    const communityAdminNames = communityAdmins.map((user) => user.name);
 
-          const isImage = isMessageImage(pMsg.content);
+    setPrivilegedUsers(privilegedUserNames);
+    setCommunityAdmins(communityAdminNames);
+  };
 
-          const name = getProfileName(pMsg.creator, chat.profiles);
+  const handleConfirm = () => {
+    let updatedMetaData = {
+      name: currentChannel?.name!,
+      about: currentChannel?.about!,
+      picture: "",
+      communityName: currentChannel?.communityName!,
+      communityModerators: currentChannel?.communityModerators,
+      hiddenMessageIds: currentChannel?.hiddenMessageIds,
+      removedUserIds: currentChannel?.removedUserIds
+    };
 
-          const popover = (
-            <Popover id={`profile-popover`} placement="right" className="profile-popover">
-              <Popover.Content>
-                <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
-                  <div className="profile-box-content">
-                    <div className="profile-box-logo d-flex justify-content-center">
-                      <UserAvatar username={name!} size="large" />
-                    </div>
+    switch (step) {
+      case 1:
+        const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
+        updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
+        break;
+      case 2:
+        const updatedRemovedUsers = [...(currentChannel?.removedUserIds || []), removedUserId!];
+        updatedMetaData.removedUserIds = updatedRemovedUsers;
 
-                    <p className="d-flex justify-content-center profile-name">{`@${name!}`}</p>
-                    <div
-                      className={`d-flex ${
-                        communityAdmins.includes(activeUser?.username!)
-                          ? "justify-content-between"
-                          : "justify-content-center"
-                      }  profile-box-buttons`}
-                    >
-                      <FollowControls {...props} targetUsername={name!} where={"chat-box"} />
-
-                      {communityAdmins.includes(activeUser?.username!) && (
-                        <>
-                          {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
-                            <>
-                              <Button
-                                variant="primary"
-                                onClick={() => {
-                                  // setKeyDialog(true);
-                                  // setStep(7);
-                                  setClickedMessage("");
-                                }}
-                              >
-                                {_t("chat.unblock")}
-                              </Button>
-                            </>
-                          ) : (
-                            <>
-                              <Button
-                                variant="primary"
-                                onClick={() => {
-                                  // setKeyDialog(true);
-                                  // setStep(6);
-                                  setClickedMessage("");
-                                }}
-                              >
-                                {_t("chat.block")}
-                              </Button>
-                            </>
-                          )}
-                        </>
-                      )}
-                    </div>
+        const isRemovedUserModerator = currentChannel?.communityModerators?.find(
+          (x) => x.pubkey === removedUserId
+        );
+        const isModerator = !!isRemovedUserModerator;
+        if (isModerator) {
+          const NewUpdatedRoles = currentChannel?.communityModerators?.filter(
+            (item) => item.pubkey !== removedUserId
+          );
+          updatedMetaData.communityModerators = NewUpdatedRoles;
+        }
+        break;
+      case 3:
+        console.log("Current removed users", currentChannel?.removedUserIds);
+        console.log("removedUserId", removedUserId);
+        const newUpdatedRemovedUsers =
+          currentChannel &&
+          currentChannel?.removedUserIds!.filter((item) => item !== removedUserId);
 
-                    <Form
-                      onSubmit={(e: React.FormEvent) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        sendDM(name!, pMsg.creator);
-                      }}
-                    >
-                      <InputGroup className="dm-input-group">
-                        <Form.Control
-                          value={dmMessage}
-                          autoFocus={true}
-                          onChange={handleDMChange}
-                          required={true}
-                          type="text"
-                          placeholder={"Send direct message"}
-                          autoComplete="off"
-                          className="dm-chat-input"
-                        />
-                      </InputGroup>
-                    </Form>
-                  </div>
-                </div>
-              </Popover.Content>
-            </Popover>
+        console.log("newUpdatedRemovedUsers", newUpdatedRemovedUsers);
+        updatedMetaData.removedUserIds = newUpdatedRemovedUsers;
+        break;
+      case 4:
+        if (resendMessage) {
+          deletePublicMessage(currentChannel.id, resendMessage?.id);
+          window?.messageService?.sendPublicMessage(
+            currentChannel!,
+            resendMessage?.content,
+            [],
+            ""
           );
+        }
+        break;
+      default:
+        break;
+    }
 
-          return (
-            <React.Fragment key={pMsg.id}>
-              <span className="d-flex justify-content-center align-items-center day-and-month mt-3">
-                {dayAndMonth}
-              </span>
-
-              {pMsg.creator !== activeUserKeys?.pub ? (
-                <div
-                  key={pMsg.id}
-                  className="message"
-                  onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                  onMouseLeave={() => setHoveredMessageId("")}
-                >
-                  <div className="community-user-img">
-                    <OverlayTrigger
-                      trigger="click"
-                      placement="right"
-                      show={clickedMessage === pMsg.id}
-                      overlay={popover}
-                      delay={1000}
-                      onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
-                    >
-                      <span>
-                        <UserAvatar username={name!} size="medium" />
-                      </span>
-                    </OverlayTrigger>
+    try {
+      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+      currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
+      setStep(0);
+      // if (operationType === HIDEMESSAGE) {
+      //   setStep(0);
+      //   setKeyDialog(false);
+      //   fetchCommunityMessages(
+      //     props.chat.publicMessages,
+      //     currentChannel!,
+      //     currentChannel?.hiddenMessageIds
+      //   );
+      //   setHiddenMsgId("");
+      // }
+      // if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
+      //   setStep(0);
+      //   setKeyDialog(false);
+      //   setRemovedUserID("");
+      // }
+    } catch (err) {
+      error(_t("chat.error-updating-community"));
+    }
+  };
+
+  return (
+    <>
+      <div className="channel-messages" ref={channelMessagesRef}>
+        {publicMessages.length !== 0 &&
+          activeUserKeys &&
+          publicMessages.map((pMsg, i) => {
+            const dayAndMonth = getFormattedDateAndDay(pMsg, i, publicMessages);
+            let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
+
+            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+            const isGif = isMessageGif(pMsg.content);
+
+            const isImage = isMessageImage(pMsg.content);
+
+            const name = getProfileName(pMsg.creator, chat.profiles);
+
+            const popover = (
+              <Popover id={`profile-popover`} placement="right" className="profile-popover">
+                <Popover.Content>
+                  <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
+                    <div className="profile-box-content">
+                      <div className="profile-box-logo d-flex justify-content-center">
+                        <UserAvatar username={name!} size="large" />
+                      </div>
+
+                      <p className="d-flex justify-content-center profile-name">{`@${name!}`}</p>
+                      <div
+                        className={`d-flex mb-3 ${
+                          communityAdmins.includes(activeUser?.username!)
+                            ? "justify-content-between"
+                            : "justify-content-center"
+                        }  profile-box-buttons`}
+                      >
+                        <FollowControls {...props} targetUsername={name!} where={"chat-box"} />
+
+                        {communityAdmins.includes(activeUser?.username!) && (
+                          <>
+                            {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
+                              <>
+                                <Button
+                                  variant="primary"
+                                  onClick={() => {
+                                    setStep(3);
+                                    setClickedMessage("");
+                                  }}
+                                >
+                                  {_t("chat.unblock")}
+                                </Button>
+                              </>
+                            ) : (
+                              <>
+                                <Button
+                                  variant="primary"
+                                  onClick={() => {
+                                    setStep(2);
+                                    setClickedMessage("");
+                                  }}
+                                >
+                                  {_t("chat.block")}
+                                </Button>
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+
+                      <Form
+                        onSubmit={(e: React.FormEvent) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          sendDM(name!, pMsg.creator);
+                        }}
+                      >
+                        <InputGroup className="dm-input-group">
+                          <Form.Control
+                            value={dmMessage}
+                            autoFocus={true}
+                            onChange={handleDMChange}
+                            required={true}
+                            type="text"
+                            placeholder={"Send direct message"}
+                            autoComplete="off"
+                            className="dm-chat-input"
+                          />
+                        </InputGroup>
+                      </Form>
+                    </div>
                   </div>
+                </Popover.Content>
+              </Popover>
+            );
 
-                  <div className="user-info">
-                    <p className="user-msg-time">
-                      <span className="username-community">{name}</span>
-                      {formatMessageTime(pMsg.created)}
-                    </p>
-                    <div
-                      className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                        isImage ? "chat-image" : ""
-                      }`}
-                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                    />
+            return (
+              <React.Fragment key={pMsg.id}>
+                {dayAndMonth !== null && (
+                  <span className="d-flex justify-content-center align-items-center mt-3 day-and-month">
+                    {dayAndMonth}
+                  </span>
+                )}
+
+                {pMsg.creator !== activeUserKeys?.pub ? (
+                  <div
+                    key={pMsg.id}
+                    className="receiver"
+                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                    onMouseLeave={() => setHoveredMessageId("")}
+                  >
+                    <div className="community-user-img">
+                      <OverlayTrigger
+                        trigger="click"
+                        placement="right"
+                        show={clickedMessage === pMsg.id}
+                        overlay={popover}
+                        delay={1000}
+                        onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
+                      >
+                        <span>
+                          <UserAvatar username={name!} size="medium" />
+                        </span>
+                      </OverlayTrigger>
+                    </div>
+
+                    <div className="user-info">
+                      <p className="user-msg-time">
+                        <span className="username-community">{name}</span>
+                        {formatMessageTime(pMsg.created)}
+                      </p>
+                      <div className="receiver-messag">
+                        <div
+                          className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                            isImage ? "chat-image" : ""
+                          }`}
+                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                        />
+                        {hoveredMessageId === pMsg.id &&
+                          privilegedUsers.includes(props.activeUser?.username!) && (
+                            <Tooltip content={"Hide Message"}>
+                              <div className="hide-msg receiver">
+                                <p
+                                  className="hide-msg-svg"
+                                  onClick={() => {
+                                    setClickedMessage("");
+                                    setStep(1);
+                                    setHiddenMsgId(pMsg.id);
+                                  }}
+                                >
+                                  {hideSvg}
+                                </p>
+                              </div>
+                            </Tooltip>
+                          )}
+                      </div>
+                    </div>
                   </div>
-                  {hoveredMessageId === pMsg.id &&
-                    privilegedUsers.includes(props.activeUser?.username!) && (
-                      <Tooltip content={"Hide Message"}>
-                        <div className="hide-msg receiver">
-                          <p
-                            className="hide-msg-svg"
-                            onClick={() => {
-                              setClickedMessage("");
-                              // setKeyDialog(true);
-                              // setStep(5);
-                              setHiddenMsgId(pMsg.id);
-                            }}
-                          >
-                            {hideSvg}
-                          </p>
-                        </div>
-                      </Tooltip>
-                    )}
-                </div>
-              ) : (
-                <div
-                  key={pMsg.id}
-                  className="sender"
-                  onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                  onMouseLeave={() => setHoveredMessageId("")}
-                >
-                  <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
+                ) : (
                   <div
-                    className={`sender-message ${
-                      pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
-                    }`}
+                    key={pMsg.id}
+                    className="sender"
+                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
+                    onMouseLeave={() => setHoveredMessageId("")}
                   >
-                    {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
-                      <Tooltip content={"Hide Message"}>
-                        <div className="hide-msg">
-                          <p
-                            className="hide-msg-svg"
+                    <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
+                    <div
+                      className={`sender-message ${
+                        pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
+                      }`}
+                    >
+                      {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
+                        <Tooltip content={"Hide Message"}>
+                          <div className="hide-msg">
+                            <p
+                              className="hide-msg-svg"
+                              onClick={() => {
+                                setClickedMessage("");
+                                setStep(1);
+                                setHiddenMsgId(pMsg.id);
+                              }}
+                            >
+                              {hideSvg}
+                            </p>
+                          </div>
+                        </Tooltip>
+                      )}
+                      {pMsg.sent === 2 && (
+                        <Tooltip content={"Resend"}>
+                          <span
+                            className="resend-svg"
                             onClick={() => {
-                              setClickedMessage("");
-                              // setKeyDialog(true);
-                              // setStep(5);
-                              setHiddenMsgId(pMsg.id);
+                              setStep(4);
+                              setResendMessage(pMsg);
                             }}
                           >
-                            {hideSvg}
-                          </p>
-                        </div>
-                      </Tooltip>
-                    )}
-                    {pMsg.sent === 2 && (
-                      <Tooltip content={"Resend"}>
-                        <span
-                          className="resend-svg"
-                          onClick={() => {
-                            // setKeyDialog(true);
-                            // setStep(11);
-                            setResendMessage(pMsg);
-                          }}
-                        >
-                          {resendMessageSvg}
+                            {resendMessageSvg}
+                          </span>
+                        </Tooltip>
+                      )}
+                      <div
+                        className={`sender-message-content ${isGif ? "gif" : ""} ${
+                          isImage ? "chat-image" : ""
+                        }`}
+                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                      />
+                      {pMsg.sent === 0 && (
+                        <span style={{ margin: "10px 0 0 5px" }}>
+                          <Spinner animation="border" variant="primary" size="sm" />
                         </span>
-                      </Tooltip>
-                    )}
-                    <div
-                      className={`sender-message-content ${isGif ? "gif" : ""} ${
-                        isImage ? "chat-image" : ""
-                      }`}
-                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                    />
-                    {pMsg.sent === 0 && (
-                      <span style={{ margin: "10px 0 0 5px" }}>
-                        <Spinner animation="border" variant="primary" size="sm" />
-                      </span>
-                    )}
-                    {pMsg.sent === 2 && (
-                      <Tooltip content={"Failed"}>
-                        <span className="failed-svg">{failedMessageSvg}</span>
-                      </Tooltip>
-                    )}
+                      )}
+                      {pMsg.sent === 2 && (
+                        <Tooltip content={"Failed"}>
+                          <span className="failed-svg">{failedMessageSvg}</span>
+                        </Tooltip>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
-            </React.Fragment>
-          );
-        })}
-    </div>
+                )}
+              </React.Fragment>
+            );
+          })}
+      </div>
+      {step !== 0 && (
+        <ChatsConfirmationModal
+          onClose={() => {
+            setStep(0);
+          }}
+          onConfirm={handleConfirm}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/common/components/chats-community-dropdown-menu/index.tsx b/src/common/components/chats-community-dropdown-menu/index.tsx
index 3b49d0acb46..17ea29bda9d 100644
--- a/src/common/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats-community-dropdown-menu/index.tsx
@@ -30,29 +30,26 @@ interface Props {
   history: History | null;
   from?: string;
   username: string;
+  currentChannel: Channel;
+  currentChannelSetter: (channe: Channel) => void;
 }
 
 const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
 const ChatsCommunityDropdownMenu = (props: Props) => {
   const { activeUser, chat } = useMappedStore();
-  const { history, username, from } = props;
+  const { history, currentChannelSetter, from, currentChannel } = props;
   const [step, setStep] = useState(0);
   const [keyDialog, setKeyDialog] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [user, setUser] = useState("");
   const [addRoleError, setAddRoleError] = useState("");
   const [role, setRole] = useState("admin");
-  const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [moderator, setModerator] = useState<communityModerator>();
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
 
-  useEffect(() => {
-    fetchCurrentChannel(formattedUserName(username));
-  }, [chat.updatedChannel, username, chat.channels]);
-
   useEffect(() => {
     getCommunityAdmins();
 
@@ -61,32 +58,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     }
   }, [currentChannel, removedUserId]);
 
-  const fetchCurrentChannel = (communityName: string) => {
-    const channel = chat.channels.find((channel) => channel.communityName === communityName);
-    if (channel) {
-      const updated: ChannelUpdate = chat.updatedChannel
-        .filter((x) => x.channelId === channel.id)
-        .sort((a, b) => b.created - a.created)[0];
-      if (updated) {
-        const channel = {
-          name: updated.name,
-          about: updated.about,
-          picture: updated.picture,
-          communityName: updated.communityName,
-          communityModerators: updated.communityModerators,
-          id: updated.channelId,
-          creator: updated.creator,
-          created: currentChannel?.created!,
-          hiddenMessageIds: updated.hiddenMessageIds,
-          removedUserIds: updated.removedUserIds
-        };
-        setCurrentChannel(channel);
-      } else {
-        setCurrentChannel(channel);
-      }
-    }
-  };
-
   const handleEditRoles = () => {
     setKeyDialog(true);
     setStep(2);
@@ -141,7 +112,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
       newUpdatedModerator.role = selectedRole;
       newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
-      setCurrentChannel(newUpdatedChannel);
+      currentChannelSetter(newUpdatedChannel);
       window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
       success("Roles updated succesfully");
     }
@@ -511,7 +482,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     }
     try {
       window.messageService?.updateChannel(currentChannel!, updatedMetaData);
-      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
+      currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
 
       if (operationType === UNBLOCKUSER) {
         setStep(5);
@@ -532,6 +503,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         alignBottom={false}
         noMarginTop={true}
       />
+
       {keyDialog && (
         <Modal
           animation={false}
diff --git a/src/common/components/chats-confirmation-modal/index.tsx b/src/common/components/chats-confirmation-modal/index.tsx
new file mode 100644
index 00000000000..f72eeea6b80
--- /dev/null
+++ b/src/common/components/chats-confirmation-modal/index.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Button, Modal } from "react-bootstrap";
+import { _t } from "../../i18n";
+
+interface Props {
+  // actionType: any;
+  // step: any;
+  onClose: () => void;
+  onConfirm: () => void;
+  // t: any;
+}
+const ChatsConfirmationModal = (props: Props) => {
+  const { onClose, onConfirm } = props;
+  const confirmationModalContent = (
+    <>
+      <div className="join-community-dialog-header border-bottom">
+        <div className="join-community-dialog-titles">
+          <h2 className="join-community-main-title">Confirmation</h2>
+        </div>
+      </div>
+      <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
+        Are you sure?
+      </div>
+      <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+        <Button
+          variant="outline-primary"
+          className="close-btn"
+          style={{ marginRight: "20px" }}
+          onClick={() => {
+            onClose();
+          }}
+        >
+          {_t("chat.close")}
+        </Button>
+        <Button
+          variant="outline-primary"
+          className="confirm-btn"
+          onClick={() => {
+            onConfirm();
+          }}
+        >
+          {_t("chat.confirm")}
+        </Button>
+      </p>
+    </>
+  );
+
+  return (
+    <Modal
+      animation={false}
+      show={true}
+      centered={true}
+      onHide={onClose}
+      keyboard={false}
+      className="chats-dialog modal-thin-header"
+      size="lg"
+    >
+      <Modal.Header closeButton={true} />
+      <Modal.Body className="chat-modals-body">{confirmationModalContent}</Modal.Body>
+    </Modal>
+  );
+};
+
+export default ChatsConfirmationModal;
diff --git a/src/common/components/chats-direct-messages/index.scss b/src/common/components/chats-direct-messages/index.scss
index e69de29bb2d..2c4315048e2 100644
--- a/src/common/components/chats-direct-messages/index.scss
+++ b/src/common/components/chats-direct-messages/index.scss
@@ -0,0 +1,160 @@
+@import "../../../style/vars_mixins";
+
+.direct-messages {
+  padding-bottom: 15px;
+  .day-and-month {
+    margin-bottom: 1rem;
+    font-size: 14px;
+  }
+  .receiver {
+    display: flex;
+    .user-img {
+      padding: 18px 8px 8px 16px;
+    }
+    .community-user-img {
+      padding: 8px 8px 8px 16px;
+      .user-avatar.medium {
+        cursor: pointer;
+      }
+    }
+    .user-info {
+      padding-top: 8px;
+      width: 100%;
+      .user-msg-time {
+        margin: 0;
+        color: rgb(138, 141, 145);
+        font-weight: 400;
+        font-size: 12px;
+        margin-left: 4px;
+        margin-bottom: 2px;
+        .username-community {
+          margin-right: 8px;
+        }
+      }
+      .receiver-messag {
+        display: flex;
+        .receiver-message-content {
+          @include themify(day) {
+            background: #e4e6eb;
+          }
+          @include themify(night) {
+            background: #cee2ff;
+          }
+
+          &.gif {
+            background: none;
+            img {
+              max-width: 100%;
+            }
+          }
+
+          &.chat-image {
+            background: none;
+            img {
+              max-width: 100%;
+            }
+          }
+          color: #050505;
+          // max-width: 290px;
+          display: inline-block;
+          max-width: 70% !important;
+          word-wrap: break-word;
+          padding: 10px;
+          border-radius: 0px 10px 10px;
+        }
+      }
+    }
+  }
+
+  .sender {
+    margin-bottom: 0.17rem;
+    .sender-message-time {
+      color: rgb(138, 141, 145);
+      display: flex;
+      font-weight: 400;
+      justify-content: flex-end;
+      font-size: 12px;
+      margin: 0;
+      margin-right: 18px;
+      margin-bottom: 2px;
+    }
+    .sender-message {
+      // max-width: 320px;
+      margin-left: auto;
+
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 17px;
+
+      .resend-svg {
+        margin: 5px 15px 0 0;
+        cursor: pointer;
+        svg {
+          @include themify(day) {
+            fill: $light-black;
+          }
+          @include themify(night) {
+            fill: $white;
+          }
+        }
+      }
+
+      .failed-svg {
+        margin: 8px 0 0 5px;
+        svg {
+          width: 16px;
+          height: 16px;
+          fill: $red !important;
+        }
+      }
+
+      &.sending {
+        margin-right: 5px;
+      }
+      &.failed {
+        margin-right: 7px;
+      }
+
+      .sender-message-content {
+        border-radius: 10px 10px 0px;
+        max-width: 70%;
+        word-wrap: break-word;
+        margin-bottom: 0;
+        color: $charcoal-grey;
+        font-size: 16px;
+        font-weight: 400;
+        padding: 8px 12px 8px 12px;
+        a {
+          text-decoration: underline;
+          color: white;
+        }
+        @include themify(day) {
+          background-color: rgb(0, 132, 255);
+          color: $white;
+        }
+        @include themify(night) {
+          background-color: $charcoal-grey;
+          color: $white;
+        }
+        &.gif {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+
+        &.chat-image {
+          background: none;
+          img {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  // &.receiver {
+  //   margin-top: 5px;
+  //   margin-left: 10px;
+  // }
+}
diff --git a/src/common/components/chats-direct-messages/index.tsx b/src/common/components/chats-direct-messages/index.tsx
index 3a3c7837606..823324c54f4 100644
--- a/src/common/components/chats-direct-messages/index.tsx
+++ b/src/common/components/chats-direct-messages/index.tsx
@@ -1,5 +1,170 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import { DirectMessage } from "../../../providers/message-provider-types";
+import mediumZoom, { Zoom } from "medium-zoom";
+import { Global, Theme } from "../../store/global/types";
+import {
+  formatMessageTime,
+  getFormattedDateAndDay,
+  isMessageGif,
+  isMessageImage,
+  NostrKeysType
+} from "../../helper/chat-utils";
+import { renderPostBody } from "@ecency/render-helper";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { Link } from "react-router-dom";
+import UserAvatar from "../user-avatar";
+import Tooltip from "../tooltip";
+import { failedMessageSvg, resendMessageSvg } from "../../img/svg";
+import { Spinner } from "react-bootstrap";
 
-export default function ChatsDirectMessages() {
-  return <div>ChatsDirectMessages</div>;
+import "./index.scss";
+import { ActiveUser } from "../../store/active-user/types";
+
+interface Props {
+  directMessages: DirectMessage[];
+  activeUserKeys: NostrKeysType;
+  currentUser: string;
+  global: Global;
+  activeUser: ActiveUser | null;
+  isScrollToBottom: boolean;
+  isScrolled?: boolean;
+  scrollToBottom?: () => void;
+}
+
+let zoom: Zoom | null = null;
+export default function ChatsDirectMessages(props: Props) {
+  const {
+    directMessages,
+    activeUserKeys,
+    currentUser,
+    isScrolled,
+    global,
+    isScrollToBottom,
+    activeUser,
+    scrollToBottom
+  } = props;
+  const { chat } = useMappedStore();
+
+  const prevPropsRef = useRef(props);
+
+  useEffect(() => {
+    const prevProps = prevPropsRef.current;
+    if (prevProps.global.theme !== global.theme) {
+      setBackground();
+    }
+    prevPropsRef.current = props;
+  }, [global.theme, activeUser]);
+
+  useEffect(() => {
+    if (directMessages && directMessages.length !== 0) {
+      zoomInitializer();
+    }
+    if (!isScrollToBottom && directMessages && directMessages.length !== 0 && !isScrolled) {
+      scrollToBottom && scrollToBottom();
+    }
+  }, [directMessages, isScrollToBottom, scrollToBottom]);
+
+  const zoomInitializer = () => {
+    const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
+    zoom = mediumZoom(elements);
+    setBackground();
+  };
+
+  const setBackground = () => {
+    if (global.theme === Theme.day) {
+      zoom?.update({ background: "#ffffff" });
+    } else {
+      zoom?.update({ background: "#131111" });
+    }
+  };
+
+  return (
+    <div className="direct-messages">
+      {directMessages &&
+        directMessages.map((msg, i) => {
+          const dayAndMonth = getFormattedDateAndDay(msg, i, directMessages);
+          let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
+
+          renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+          renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+          const isGif = isMessageGif(msg.content);
+
+          const isImage = isMessageImage(msg.content);
+
+          return (
+            <React.Fragment key={msg.id}>
+              {dayAndMonth !== null && (
+                <span className="d-flex justify-content-center align-items-center mt-3 day-and-month">
+                  {dayAndMonth}
+                </span>
+              )}
+              {msg.creator !== activeUserKeys?.pub ? (
+                <div key={msg.id} className="receiver">
+                  <div className="user-img">
+                    <Link to={`/@${currentUser}`}>
+                      <span>
+                        <UserAvatar username={currentUser} size="medium" />
+                      </span>
+                    </Link>
+                  </div>
+                  <div className="user-info">
+                    <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
+
+                    <div className="receiver-messag">
+                      <div
+                        className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                          isImage ? "chat-image" : ""
+                        }`}
+                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div key={msg.id} className="sender">
+                  <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
+                  <div
+                    className={`sender-message ${
+                      msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
+                    }`}
+                  >
+                    {msg.sent === 2 && (
+                      <Tooltip content={"Resend"}>
+                        <span
+                          className="resend-svg"
+                          onClick={() => {
+                            // setKeyDialog(true);
+                            // setStep(11);
+                            // setResendMessage(msg);
+                          }}
+                        >
+                          {resendMessageSvg}
+                        </span>
+                      </Tooltip>
+                    )}
+                    <div
+                      className={`sender-message-content ${isGif ? "gif" : ""} ${
+                        isImage ? "chat-image" : ""
+                      }`}
+                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                    />
+                    {msg.sent === 0 && (
+                      <span style={{ margin: "10px 0 0 5px" }}>
+                        <Spinner animation="border" variant="primary" size="sm" />
+                      </span>
+                    )}
+                    {msg.sent === 2 && (
+                      <Tooltip content={"Failed"}>
+                        <span className="failed-svg">{failedMessageSvg}</span>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+              )}
+            </React.Fragment>
+          );
+        })}
+    </div>
+  );
 }
diff --git a/src/common/components/chats-messages-box/index.tsx b/src/common/components/chats-messages-box/index.tsx
index 232ecd36f46..41a644abce7 100644
--- a/src/common/components/chats-messages-box/index.tsx
+++ b/src/common/components/chats-messages-box/index.tsx
@@ -8,10 +8,12 @@ import { ToggleType, UI } from "../../store/ui/types";
 import { User } from "../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
-import { Global } from "../../store/global/types";
+import { Global, Theme } from "../../store/global/types";
 
 import "./index.scss";
-import { NostrKeysType } from "../../helper/chat-utils";
+import { formattedUserName, NostrKeysType } from "../../helper/chat-utils";
+import { Channel, ChannelUpdate } from "../../../providers/message-provider-types";
+import LinearProgress from "../linear-progress";
 
 interface MatchParams {
   filter: string;
@@ -34,18 +36,55 @@ interface Props {
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
+  deletePublicMessage: (channelId: string, msgId: string) => void;
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const { match } = props;
+  const { match, global, deletePublicMessage } = props;
   const username = match.params.username;
 
   const [maxHeight, setMaxHeight] = useState(0);
+  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [inProgress, setInProgress] = useState(false);
 
   useEffect(() => {
     setMaxHeight(window.innerHeight - 68);
   }, [typeof window !== "undefined"]);
 
+  useEffect(() => {
+    console.log("state has been updated", currentChannel);
+  }, [currentChannel]);
+
+  useEffect(() => {
+    fetchCurrentChannel(formattedUserName(username));
+  }, [props.chat.updatedChannel, username, props.chat.channels]);
+
+  const fetchCurrentChannel = (communityName: string) => {
+    const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
+    if (channel) {
+      const updated: ChannelUpdate = props.chat.updatedChannel
+        .filter((x) => x.channelId === channel.id)
+        .sort((a, b) => b.created - a.created)[0];
+      if (updated) {
+        const channel = {
+          name: updated.name,
+          about: updated.about,
+          picture: updated.picture,
+          communityName: updated.communityName,
+          communityModerators: updated.communityModerators,
+          id: updated.channelId,
+          creator: updated.creator,
+          created: currentChannel?.created!,
+          hiddenMessageIds: updated.hiddenMessageIds,
+          removedUserIds: updated.removedUserIds
+        };
+        setCurrentChannel(channel);
+      } else {
+        setCurrentChannel(channel);
+      }
+    }
+  };
+
   return (
     <>
       <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
@@ -55,8 +94,22 @@ export default function ChatsMessagesBox(props: Props) {
           </div>
         ) : (
           <>
-            <ChatsMessagesHeader username={username} {...props} />
-            <ChatsMessagesView {...props} username={username} />
+            <ChatsMessagesHeader
+              username={username}
+              {...props}
+              currentChannel={currentChannel!}
+              currentChannelSetter={setCurrentChannel}
+            />
+            {inProgress && <LinearProgress />}
+            <ChatsMessagesView
+              {...props}
+              username={username}
+              currentChannel={currentChannel!}
+              inProgress={inProgress}
+              currentChannelSetter={setCurrentChannel}
+              setInProgress={setInProgress}
+              deletePublicMessage={deletePublicMessage}
+            />
           </>
         )}
       </div>
diff --git a/src/common/components/chats-messages-header/index.tsx b/src/common/components/chats-messages-header/index.tsx
index e52e92ca71c..43a08d06360 100644
--- a/src/common/components/chats-messages-header/index.tsx
+++ b/src/common/components/chats-messages-header/index.tsx
@@ -13,10 +13,12 @@ import { CHATPAGE } from "../chat-box/chat-constants";
 interface Props {
   username: string;
   history: History | null;
+  currentChannel: Channel;
+  currentChannelSetter: (channe: Channel) => void;
 }
 
 export default function ChatsMessagesHeader(props: Props) {
-  const { username } = props;
+  const { username, currentChannel, currentChannelSetter } = props;
   const { chat } = useMappedStore();
 
   return (
@@ -28,7 +30,12 @@ export default function ChatsMessagesHeader(props: Props) {
         </div>
         {isChannel(username) && (
           <div className="community-menu">
-            <ChatsCommunityDropdownMenu from={CHATPAGE} {...props} />
+            <ChatsCommunityDropdownMenu
+              from={CHATPAGE}
+              {...props}
+              currentChannel={currentChannel!}
+              currentChannelSetter={currentChannelSetter}
+            />
           </div>
         )}
       </div>
diff --git a/src/common/components/chats-messages-view/index.scss b/src/common/components/chats-messages-view/index.scss
index 1a179c4a856..55c51e27342 100644
--- a/src/common/components/chats-messages-view/index.scss
+++ b/src/common/components/chats-messages-view/index.scss
@@ -17,4 +17,8 @@
   a::after {
     display: none;
   }
+
+  &.no-scroll {
+    overflow: hidden;
+  }
 }
diff --git a/src/common/components/chats-messages-view/index.tsx b/src/common/components/chats-messages-view/index.tsx
index 8dfb28a291f..80d47bba252 100644
--- a/src/common/components/chats-messages-view/index.tsx
+++ b/src/common/components/chats-messages-view/index.tsx
@@ -1,15 +1,17 @@
-import React, { RefObject, useEffect, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Channel, PublicMessage } from "../../../providers/message-provider-types";
+import { Channel, DirectMessage, PublicMessage } from "../../../providers/message-provider-types";
 import {
   fetchCommunityMessages,
   fetchCurrentUserData,
+  fetchDirectMessages,
   getPrivateKey,
   getProfileMetaData,
   NostrKeysType
 } from "../../helper/chat-utils";
+import { History } from "history";
 import { useMappedStore } from "../../store/use-mapped-store";
-import { Global } from "../../store/global/types";
+import { Global, Theme } from "../../store/global/types";
 import ChatsProfileBox from "../chats-profile-box";
 
 import "./index.scss";
@@ -23,11 +25,12 @@ import { ActiveUser } from "../../store/active-user/types";
 import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { EmojiPickerStyleProps } from "../chat-box";
+import { CHATPAGE } from "../chat-box/chat-constants";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
   bottom: "58px",
-  left: "305px",
+  left: "340px",
   marginLeft: "14px",
   borderTopLeftRadius: "8px",
   borderTopRightRadius: "8px",
@@ -36,43 +39,54 @@ const EmojiPickerStyle: EmojiPickerStyleProps = {
 interface Props {
   username: string;
   users: User[];
+  history: History | null;
   activeUser: ActiveUser | null;
   ui: UI;
   global: Global;
+  currentChannel: Channel;
+  inProgress: boolean;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
+  currentChannelSetter: (channel: Channel) => void;
+  setInProgress: (d: boolean) => void;
+  deletePublicMessage: (channelId: string, msgId: string) => void;
 }
 
 export default function ChatsMessagesView(props: Props) {
-  const { username, activeUser, global } = props;
+  const {
+    username,
+    activeUser,
+    global,
+    currentChannel,
+    inProgress,
+    currentChannelSetter,
+    setInProgress,
+    deletePublicMessage
+  } = props;
 
-  const messagesBoxRef = React.createRef<HTMLDivElement>();
+  const messagesBoxRef = useRef<HTMLDivElement>(null);
 
   const { chat } = useMappedStore();
   const [directUser, setDirectUser] = useState("");
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
+  const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
   const [communityName, setCommunityName] = useState("");
-  const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [isTop, setIsTop] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  // const [inProgress, setInProgress] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     getActiveUserKeys();
-    setChannelData();
+    isDirectUserOrCommunity();
   }, []);
 
-  useEffect(() => {
-    console.log("publicMessages", publicMessages);
-    if (publicMessages.length !== 0) {
-      scrollToBottom();
-    }
-  }, [publicMessages]);
-
   useEffect(() => {
     if (directUser) {
       getReceiverPubKey();
@@ -80,7 +94,7 @@ export default function ChatsMessagesView(props: Props) {
   }, [directUser]);
 
   useEffect(() => {
-    setChannelData();
+    isDirectUserOrCommunity();
   }, [chat.channels]);
 
   useEffect(() => {
@@ -89,22 +103,41 @@ export default function ChatsMessagesView(props: Props) {
 
   useEffect(() => {
     if (directUser) {
+      getDirectMessages();
     } else if (communityName && currentChannel) {
       getChannelMessages();
     }
-  }, [directUser, communityName, currentChannel]);
+  }, [directUser, communityName, currentChannel, chat.directMessages]);
 
   useEffect(() => {
     setDirectUser("");
     setCommunityName("");
-    setChannelData();
+    isDirectUserOrCommunity();
   }, [username]);
 
-  // useEffect(() => {
-  //   if (isTop) {
-  //     fetchPrevMessages();
-  //   }
-  // }, [isTop]);
+  useEffect(() => {
+    if (isTop) {
+      fetchPrevMessages();
+    }
+  }, [isTop]);
+
+  const fetchPrevMessages = () => {
+    if (!hasMore || inProgress) return;
+
+    setInProgress(true);
+    window.messageService
+      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
+      .then((num) => {
+        console.log("number", num);
+        if (num < 25) {
+          setHasMore(false);
+        }
+      })
+      .finally(() => {
+        setInProgress(false);
+        setIsTop(false);
+      });
+  };
 
   const getActiveUserKeys = async () => {
     const profileData = await getProfileMetaData(props.activeUser?.username!);
@@ -124,15 +157,12 @@ export default function ChatsMessagesView(props: Props) {
     }
   };
 
-  const setChannelData = () => {
+  const isDirectUserOrCommunity = () => {
     if (username) {
       if (username && username.startsWith("@")) {
         setDirectUser(username.replace("@", ""));
       } else {
         setCommunityName(username);
-        const channel = chat.channels.find((channel) => channel.communityName === username);
-        // console.log("channel", channel);
-        setCurrentChannel(channel);
       }
     }
   };
@@ -149,8 +179,16 @@ export default function ChatsMessagesView(props: Props) {
     }
   };
 
+  const getDirectMessages = () => {
+    const user = chat.directContacts.find((item) => item.name === directUser);
+    console.log("user", user?.pubkey);
+    const messages = user && fetchDirectMessages(user?.pubkey, chat.directMessages);
+    setDirectMessages(messages!);
+    console.log("Messages", messages);
+  };
+
   const scrollToBottom = () => {
-    console.log("Scroll to bottom scliced");
+    console.log("Scroll to bottom clicked", messagesBoxRef.current?.scrollHeight);
     messagesBoxRef &&
       messagesBoxRef?.current?.scroll({
         top: messagesBoxRef.current?.scrollHeight,
@@ -160,11 +198,16 @@ export default function ChatsMessagesView(props: Props) {
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
-    // let srollHeight: number = (element.scrollHeight / 100) * 25;
+    let srollHeight: number = (element.scrollHeight / 100) * 25;
     // const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
     const isScrollToBottom =
       element.scrollTop + messagesBoxRef?.current?.clientHeight! < element.scrollHeight - 200;
     setIsScrollToBottom(isScrollToBottom);
+    // console.log(element.scrollTop, (element.scrollTop / 100) * 98);
+    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
+    setIsScrolled(isScrolled);
+    // const isScrolled = element.scrollHeight/100 *3 - 50;
+    // console.log("isScrolled", isScrolled)
     const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
     if (communityName && scrollerTop) {
       setIsTop(true);
@@ -175,7 +218,11 @@ export default function ChatsMessagesView(props: Props) {
 
   return (
     <>
-      <div className="chats-messages-view" ref={messagesBoxRef} onScroll={handleScroll}>
+      <div
+        className={`chats-messages-view ${isTop && hasMore ? "no-scroll" : ""}`}
+        ref={messagesBoxRef}
+        onScroll={handleScroll}
+      >
         <Link
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
           target="_blank"
@@ -189,11 +236,24 @@ export default function ChatsMessagesView(props: Props) {
               publicMessages={publicMessages}
               currentChannel={currentChannel!}
               activeUserKeys={activeUserKeys!}
+              isScrollToBottom={isScrollToBottom}
+              from={CHATPAGE}
+              isScrolled={isScrolled}
+              deletePublicMessage={deletePublicMessage}
               scrollToBottom={scrollToBottom}
+              currentChannelSetter={currentChannelSetter}
             />
           </>
         ) : (
-          <ChatsDirectMessages />
+          <ChatsDirectMessages
+            {...props}
+            directMessages={directMessages && directMessages}
+            activeUserKeys={activeUserKeys!}
+            currentUser={directUser!}
+            isScrolled={isScrolled}
+            isScrollToBottom={isScrollToBottom}
+            scrollToBottom={scrollToBottom}
+          />
         )}
         {isScrollToBottom && (
           <ChatsScroller
diff --git a/src/common/components/chats-sidebar/indes.tsx b/src/common/components/chats-sidebar/indes.tsx
index ef7824875db..f601420deb5 100644
--- a/src/common/components/chats-sidebar/indes.tsx
+++ b/src/common/components/chats-sidebar/indes.tsx
@@ -8,7 +8,12 @@ import { setNostrkeys } from "../../../providers/message-provider";
 import { Channel } from "../../../providers/message-provider-types";
 import { getAccountReputations } from "../../api/hive";
 import accountReputation from "../../helper/account-reputation";
-import { getCommunities, NostrKeysType } from "../../helper/chat-utils";
+import {
+  getCommunities,
+  getCommunityLastMessage,
+  getDirectLastMessage,
+  NostrKeysType
+} from "../../helper/chat-utils";
 import { _t } from "../../i18n";
 import { arrowBackSvg, chatKeySvg, KebabMenu, syncSvg } from "../../img/svg";
 import { Chat, DirectContactsType } from "../../store/chat/types";
@@ -46,6 +51,7 @@ interface Props {
 export default function ChatsSideBar(props: Props) {
   const {
     channels,
+    chat,
     directContacts,
     activeUserKeys,
     match,
@@ -307,7 +313,9 @@ export default function ChatsSideBar(props: Props) {
                   <UserAvatar username={channel.communityName!} size="medium" />
                   <div className="community-info">
                     <p className="community-name">{channel.name}</p>
-                    <p className="community-last-message">hello</p>
+                    <p className="community-last-message">
+                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
+                    </p>
                   </div>
                 </div>
               </Link>
@@ -316,15 +324,15 @@ export default function ChatsSideBar(props: Props) {
             {directContacts.map((contact) => (
               <Link to={`/chats/@${contact.name}`} key={contact.pubkey}>
                 <div
-                  className={`dm ${
-                    username && username.replace("@", "") === contact.name ? "selected" : ""
-                  }`}
+                  className={`dm ${username && username === `@${contact.name}` ? "selected" : ""}`}
                   onClick={handleRevealPrivKey}
                 >
                   <UserAvatar username={contact.name} size="medium" />
                   <div className="dm-info">
                     <p className="dm-name">{contact.name}</p>
-                    <p className="dm-last-message">hello</p>
+                    <p className="dm-last-message">
+                      {getDirectLastMessage(contact.pubkey, chat.directMessages)}
+                    </p>
                   </div>
                 </div>
               </Link>
diff --git a/src/common/components/chats-sidebar/index.scss b/src/common/components/chats-sidebar/index.scss
index f717c951c59..3e18bf38897 100644
--- a/src/common/components/chats-sidebar/index.scss
+++ b/src/common/components/chats-sidebar/index.scss
@@ -192,6 +192,14 @@
         font-size: 13px;
         font-family: 400;
       }
+      .community-last-message {
+        max-width: 255px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 0;
+        font-size: 14px;
+      }
     }
     &.selected {
       @include themify(day) {
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
index 33546643f9d..33234075bb3 100644
--- a/src/common/helper/chat-utils.ts
+++ b/src/common/helper/chat-utils.ts
@@ -10,7 +10,7 @@ import { getAccountFull } from "../api/hive";
 import { updateProfile } from "../api/operations";
 import { GIPHGY } from "../components/chat-box/chat-constants";
 import { ActiveUser } from "../store/active-user/types";
-import { Chat, publicMessagesList } from "../store/chat/types";
+import { Chat, directMessagesList, publicMessagesList } from "../store/chat/types";
 import * as ls from "../util/local-storage";
 
 export interface NostrKeysType {
@@ -197,3 +197,38 @@ export const copyToClipboard = (content: string) => {
   document.execCommand("copy");
   textField.remove();
 };
+
+export const getCommunityLastMessage = (
+  channelId: string,
+  publicMessages: publicMessagesList[]
+) => {
+  const msgsList = fetchChannelMessages(channelId!, publicMessages);
+  const messages = msgsList.sort((a, b) => a.created - b.created);
+  const lastMessage = messages.slice(-1);
+  return lastMessage[0]?.content;
+};
+
+export const fetchChannelMessages = (channelId: string, publicMessages: publicMessagesList[]) => {
+  for (const item of publicMessages) {
+    if (item.channelId === channelId) {
+      return Object.values(item.PublicMessage);
+    }
+  }
+  return [];
+};
+
+export const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
+  for (const item of directMessages) {
+    if (item.peer === peer) {
+      return Object.values(item.chat);
+    }
+  }
+  return [];
+};
+
+export const getDirectLastMessage = (pubkey: string, directMessages: directMessagesList[]) => {
+  const msgsList = fetchDirectMessages(pubkey, directMessages);
+  const messages = msgsList.sort((a, b) => a.created - b.created);
+  const lastMessage = messages.slice(-1);
+  return lastMessage[0]?.content;
+};
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 91e8669b559..d13bc9674c6 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -143,11 +143,8 @@ export const Chats = (props: Props) => {
         className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
       >
         {inProgrss ? (
-          <div
-            className="d-flex justify-content-center align-items-center full-page"
-            style={{ backgroundColor: "#f5f5f5" }}
-          >
-            <h3>Loading...</h3>
+          <div className="d-flex justify-content-center align-items-center full-page">
+            <Spinner animation="border" variant="primary" />
           </div>
         ) : (
           <>
@@ -170,7 +167,11 @@ export const Chats = (props: Props) => {
                     </div>
                   ) : (
                     //if any person has not joined any community then how can he see its message. handle this thing here.
-                    <ChatsMessagesBox {...props} activeUserKeys={activeUserKeys} />
+                    <ChatsMessagesBox
+                      {...props}
+                      activeUserKeys={activeUserKeys}
+                      deletePublicMessage={props.deletePublicMessage}
+                    />
                   )}
                 </>
               ) : (

From 15804137dcbf4cbbcdc38c755a79a753ccf302e2 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 5 Sep 2023 12:19:26 +0500
Subject: [PATCH 053/179] Remove commented code

---
 src/common/components/chat-box/index.tsx      | 107 ++----------------
 .../chats-channel-messages/index.tsx          |  17 ++-
 .../components/chats-messages-view/index.tsx  |  13 ++-
 3 files changed, 29 insertions(+), 108 deletions(-)

diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chat-box/index.tsx
index 4054f7ec7dd..e48cdf42231 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chat-box/index.tsx
@@ -154,7 +154,7 @@ export default function ChatBox(props: Props) {
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  const [resendMessage, setResendMessage] = useState<PublicMessage | DirectMessage>();
+  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [importPrivKey, setImportPrivKey] = useState(false);
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
@@ -282,6 +282,7 @@ export default function ChatBox(props: Props) {
         currentChannel,
         currentChannel.hiddenMessageIds
       );
+      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
     }
@@ -296,6 +297,13 @@ export default function ChatBox(props: Props) {
     }
   }, [isCurrentUser]);
 
+  useEffect(() => {
+    if (removedUsers) {
+      const removed = removedUsers.includes(activeUserKeys?.pub!);
+      setIsActiveUserRemoved(removed);
+    }
+  }, [removedUsers]);
+
   useEffect(() => {
     fetchProfileData();
     const msgsList = fetchDirectMessages(receiverPubKey!);
@@ -574,12 +582,6 @@ export default function ChatBox(props: Props) {
 
   const handleConfirmButton = (actionType: string) => {
     switch (actionType) {
-      case HIDEMESSAGE:
-        handleChannelUpdate(HIDEMESSAGE);
-        break;
-      case BLOCKUSER:
-        handleChannelUpdate(BLOCKUSER);
-        break;
       case NEWCHATACCOUNT:
         setInProgress(true);
         resetProfile(props.activeUser)
@@ -592,9 +594,6 @@ export default function ChatBox(props: Props) {
             error(err);
           });
         break;
-      case RESENDMESSAGE:
-        // handleResendMessage();
-        break;
       default:
         break;
     }
@@ -888,91 +887,6 @@ export default function ChatBox(props: Props) {
                         <p className="not-joined">{_t("chat.not-joined")}</p>
                       )}
                       {isCurrentUser ? (
-                        // directMessagesList.map((msg, i) => {
-                        //   const dayAndMonth = getFormattedDateAndDay(msg, i);
-                        //   let renderedPreview = renderPostBody(
-                        //     msg.content,
-                        //     false,
-                        //     props.global.canUseWebp
-                        //   );
-
-                        //   renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                        //   renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                        //   const isGif = isMessageGif(msg.content);
-
-                        //   const isImage = isMessageImage(msg.content);
-
-                        //   return (
-                        //     <React.Fragment key={msg.id}>
-                        //       {dayAndMonth}
-                        //       {msg.creator !== activeUserKeys?.pub ? (
-                        //         <div key={msg.id} className="message">
-                        //           <div className="user-img">
-                        //             <Link to={`/@${currentUser}`}>
-                        //               <span>
-                        //                 <UserAvatar username={currentUser} size="medium" />
-                        //               </span>
-                        //             </Link>
-                        //           </div>
-                        //           <div className="user-info">
-                        //             <p className="user-msg-time">
-                        //               {formatMessageTime(msg.created)}
-                        //             </p>
-                        //             <div
-                        //               className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                        //                 isImage ? "chat-image" : ""
-                        //               }`}
-                        //               dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                        //             />
-                        //           </div>
-                        //         </div>
-                        //       ) : (
-                        //         <div key={msg.id} className="sender">
-                        //           <p className="sender-message-time">
-                        //             {formatMessageTime(msg.created)}
-                        //           </p>
-                        //           <div
-                        //             className={`sender-message ${
-                        //               msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                        //             }`}
-                        //           >
-                        //             {msg.sent === 2 && (
-                        //               <Tooltip content={"Resend"}>
-                        //                 <span
-                        //                   className="resend-svg"
-                        //                   onClick={() => {
-                        //                     setKeyDialog(true);
-                        //                     setStep(11);
-                        //                     setResendMessage(msg);
-                        //                   }}
-                        //                 >
-                        //                   {resendMessageSvg}
-                        //                 </span>
-                        //               </Tooltip>
-                        //             )}
-                        //             <div
-                        //               className={`sender-message-content ${isGif ? "gif" : ""} ${
-                        //                 isImage ? "chat-image" : ""
-                        //               }`}
-                        //               dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                        //             />
-                        //             {msg.sent === 0 && (
-                        //               <span style={{ margin: "10px 0 0 5px" }}>
-                        //                 <Spinner animation="border" variant="primary" size="sm" />
-                        //               </span>
-                        //             )}
-                        //             {msg.sent === 2 && (
-                        //               <Tooltip content={"Failed"}>
-                        //                 <span className="failed-svg">{failedMessageSvg}</span>
-                        //               </Tooltip>
-                        //             )}
-                        //           </div>
-                        //         </div>
-                        //       )}
-                        //     </React.Fragment>
-                        //   );
-                        // })
                         <ChatsDirectMessages
                           {...props}
                           directMessages={directMessagesList}
@@ -989,6 +903,7 @@ export default function ChatBox(props: Props) {
                           activeUserKeys={activeUserKeys!}
                           activeUser={props.activeUser}
                           isScrollToBottom={false}
+                          isActveUserRemoved={isActveUserRemoved}
                           currentChannelSetter={setCurrentChannel}
                         />
                       )}
@@ -1241,8 +1156,6 @@ export default function ChatBox(props: Props) {
         >
           <Modal.Header closeButton={true} />
           <Modal.Body className="chat-modals-body">
-            {step === 5 && confirmationModal(HIDEMESSAGE)}
-            {step === 6 && confirmationModal(BLOCKUSER)}
             {step === 9 && confirmationModal(NEWCHATACCOUNT)}
             {step === 11 && confirmationModal(RESENDMESSAGE)}
             {step === 10 && successModal(NEWCHATACCOUNT)}
diff --git a/src/common/components/chats-channel-messages/index.tsx b/src/common/components/chats-channel-messages/index.tsx
index 75a0eb5e3a6..ba6613c27b4 100644
--- a/src/common/components/chats-channel-messages/index.tsx
+++ b/src/common/components/chats-channel-messages/index.tsx
@@ -55,6 +55,7 @@ interface Props {
   history: History | null;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
+  isActveUserRemoved: boolean;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
@@ -76,6 +77,7 @@ export default function ChatsChannelMessages(props: Props) {
     isScrollToBottom,
     isScrolled,
     global,
+    isActveUserRemoved,
     scrollToBottom,
     currentChannelSetter,
     deletePublicMessage
@@ -95,8 +97,6 @@ export default function ChatsChannelMessages(props: Props) {
   const [removedUserId, setRemovedUserID] = useState("");
   const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
-  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
-  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
   // useEffect(() => {
@@ -131,17 +131,9 @@ export default function ChatsChannelMessages(props: Props) {
     if (currentChannel) {
       zoomInitializer();
       getPrivilegedUsers(currentChannel?.communityModerators!);
-      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
     }
   }, [currentChannel]);
 
-  useEffect(() => {
-    if (removedUsers) {
-      const removed = removedUsers.includes(activeUserKeys?.pub!);
-      setIsActiveUserRemoved(removed);
-    }
-  }, [removedUsers]);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
@@ -546,6 +538,11 @@ export default function ChatsChannelMessages(props: Props) {
               </React.Fragment>
             );
           })}
+        {isActveUserRemoved && (
+          <span className="d-flex justify-content-center align-items-center mt-3">
+            You have been blocked from this community
+          </span>
+        )}
       </div>
       {step !== 0 && (
         <ChatsConfirmationModal
diff --git a/src/common/components/chats-messages-view/index.tsx b/src/common/components/chats-messages-view/index.tsx
index 80d47bba252..2e2f1cf49a2 100644
--- a/src/common/components/chats-messages-view/index.tsx
+++ b/src/common/components/chats-messages-view/index.tsx
@@ -81,6 +81,8 @@ export default function ChatsMessagesView(props: Props) {
   const [hasMore, setHasMore] = useState(true);
   // const [inProgress, setInProgress] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
+  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
+  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
   useEffect(() => {
     getActiveUserKeys();
@@ -106,6 +108,7 @@ export default function ChatsMessagesView(props: Props) {
       getDirectMessages();
     } else if (communityName && currentChannel) {
       getChannelMessages();
+      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
     }
   }, [directUser, communityName, currentChannel, chat.directMessages]);
 
@@ -121,6 +124,13 @@ export default function ChatsMessagesView(props: Props) {
     }
   }, [isTop]);
 
+  useEffect(() => {
+    if (removedUsers) {
+      const removed = removedUsers.includes(activeUserKeys?.pub!);
+      setIsActiveUserRemoved(removed);
+    }
+  }, [removedUsers]);
+
   const fetchPrevMessages = () => {
     if (!hasMore || inProgress) return;
 
@@ -239,6 +249,7 @@ export default function ChatsMessagesView(props: Props) {
               isScrollToBottom={isScrollToBottom}
               from={CHATPAGE}
               isScrolled={isScrolled}
+              isActveUserRemoved={isActveUserRemoved}
               deletePublicMessage={deletePublicMessage}
               scrollToBottom={scrollToBottom}
               currentChannelSetter={currentChannelSetter}
@@ -273,7 +284,7 @@ export default function ChatsMessagesView(props: Props) {
         isCurrentUser={directUser ? true : false}
         isCommunity={communityName ? true : false}
         receiverPubKey={receiverPubKey}
-        isActveUserRemoved={false}
+        isActveUserRemoved={isActveUserRemoved}
         currentUser={directUser}
         currentChannel={currentChannel!}
         isCurrentUserJoined={true}

From 3a16f3a6b555b5f4489cfad96af38d1f25527f8c Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 6 Sep 2023 11:22:47 +0500
Subject: [PATCH 054/179] Move files in one parent component

---
 src/common/app.tsx                            |  11 +-
 .../{ => chats}/chat-input/index.scss         |   0
 .../{ => chats}/chat-input/index.tsx          |  64 +++--
 .../chat-popup}/chat-constants.ts             |   0
 .../{chat-box => chats/chat-popup}/index.scss |   0
 .../{chat-box => chats/chat-popup}/index.tsx  | 104 ++++----
 .../chats-channel-messages/index.scss         |  10 +-
 .../chats-channel-messages/index.tsx          | 102 ++++----
 .../chats-community-dropdown-menu/index.scss  |   0
 .../chats-community-dropdown-menu/index.tsx   |  22 +-
 .../chats-confirmation-modal/index.tsx        |   2 +-
 .../chats-direct-messages/index.scss          |  10 +-
 .../chats-direct-messages/index.tsx           |  61 ++---
 .../{ => chats}/chats-dropdown-menu/index.tsx |   8 +-
 .../{ => chats}/chats-messages-box/index.scss |   2 +-
 .../{ => chats}/chats-messages-box/index.tsx  |  30 ++-
 .../chats-messages-header/index.scss          |   2 +-
 .../chats-messages-header/index.tsx           |  31 ++-
 .../chats-messages-view/index.scss            |   2 +-
 .../{ => chats}/chats-messages-view/index.tsx |  42 ++--
 .../{ => chats}/chats-profile-box/index.scss  |   2 +-
 .../{ => chats}/chats-profile-box/index.tsx   |  25 +-
 .../{ => chats}/chats-scroller/index.scss     |   2 +-
 .../{ => chats}/chats-scroller/index.tsx      |   6 +-
 .../{ => chats}/chats-sidebar/indes.tsx       |  51 ++--
 .../{ => chats}/chats-sidebar/index.scss      |   2 +-
 .../join-community-chat-btn/index.tsx         |  20 +-
 .../components/chats/types/chat-types.ts      |  25 ++
 src/common/components/chats/types/index.ts    |   1 +
 .../chats/utils/copy-to-clipboard.ts          |   8 +
 .../chats/utils/create-nostr-account.ts       |   7 +
 .../chats/utils/delete-chat-public-key.ts     |  22 ++
 .../chats/utils/fetch-profile-metadata.ts     |  11 +
 .../chats/utils/format-message-data.ts        |   0
 .../chats/utils/format-message-time.ts        |   5 +
 .../chats/utils/formatted-user-name.ts        |   6 +
 .../chats/utils/get-chat-private-key.ts       |   5 +
 .../chats/utils/get-joined-communities.ts     |   5 +
 .../chats/utils/get-user-chat-public-key.ts   |  10 +
 src/common/components/chats/utils/index.ts    |  17 ++
 .../components/chats/utils/is-message-gif.ts  |   5 +
 .../chats/utils/is-message-image.ts           |   3 +
 .../chats/utils/upload-channel-data.ts        |  20 ++
 .../chats/utils/upload-chat-public-key.ts     |  16 ++
 .../utils/use-fetch-community-messages.ts     |  19 ++
 .../chats/utils/use-fetch-direct-messages.ts  |  10 +
 .../utils/use-get-community-last-message.ts   |  20 ++
 .../utils/use-get-direct-last-message.ts      |  17 ++
 .../components/community-cover/index.tsx      |   2 +-
 src/common/components/emoji-picker/index.tsx  |   2 +-
 src/common/components/login/index.tsx         |   2 +-
 src/common/helper/chat-utils.ts               | 234 ------------------
 src/common/helper/message-service.ts          |  31 ++-
 src/common/pages/chats/index.scss             |   8 +-
 src/common/pages/chats/index.tsx              |  39 ++-
 src/common/pages/community-functional.tsx     |  16 +-
 src/providers/message-provider.tsx            |   3 +-
 57 files changed, 598 insertions(+), 582 deletions(-)
 rename src/common/components/{ => chats}/chat-input/index.scss (100%)
 rename src/common/components/{ => chats}/chat-input/index.tsx (84%)
 rename src/common/components/{chat-box => chats/chat-popup}/chat-constants.ts (100%)
 rename src/common/components/{chat-box => chats/chat-popup}/index.scss (100%)
 rename src/common/components/{chat-box => chats/chat-popup}/index.tsx (95%)
 rename src/common/components/{ => chats}/chats-channel-messages/index.scss (96%)
 rename src/common/components/{ => chats}/chats-channel-messages/index.tsx (88%)
 rename src/common/components/{ => chats}/chats-community-dropdown-menu/index.scss (100%)
 rename src/common/components/{ => chats}/chats-community-dropdown-menu/index.tsx (96%)
 rename src/common/components/{ => chats}/chats-confirmation-modal/index.tsx (97%)
 rename src/common/components/{ => chats}/chats-direct-messages/index.scss (95%)
 rename src/common/components/{ => chats}/chats-direct-messages/index.tsx (77%)
 rename src/common/components/{ => chats}/chats-dropdown-menu/index.tsx (78%)
 rename src/common/components/{ => chats}/chats-messages-box/index.scss (93%)
 rename src/common/components/{ => chats}/chats-messages-box/index.tsx (77%)
 rename src/common/components/{ => chats}/chats-messages-header/index.scss (97%)
 rename src/common/components/{ => chats}/chats-messages-header/index.tsx (57%)
 rename src/common/components/{ => chats}/chats-messages-view/index.scss (89%)
 rename src/common/components/{ => chats}/chats-messages-view/index.tsx (89%)
 rename src/common/components/{ => chats}/chats-profile-box/index.scss (96%)
 rename src/common/components/{ => chats}/chats-profile-box/index.tsx (84%)
 rename src/common/components/{ => chats}/chats-scroller/index.scss (92%)
 rename src/common/components/{ => chats}/chats-scroller/index.tsx (85%)
 rename src/common/components/{ => chats}/chats-sidebar/indes.tsx (88%)
 rename src/common/components/{ => chats}/chats-sidebar/index.scss (99%)
 rename src/common/components/{ => chats}/join-community-chat-btn/index.tsx (93%)
 create mode 100644 src/common/components/chats/types/chat-types.ts
 create mode 100644 src/common/components/chats/types/index.ts
 create mode 100644 src/common/components/chats/utils/copy-to-clipboard.ts
 create mode 100644 src/common/components/chats/utils/create-nostr-account.ts
 create mode 100644 src/common/components/chats/utils/delete-chat-public-key.ts
 create mode 100644 src/common/components/chats/utils/fetch-profile-metadata.ts
 create mode 100644 src/common/components/chats/utils/format-message-data.ts
 create mode 100644 src/common/components/chats/utils/format-message-time.ts
 create mode 100644 src/common/components/chats/utils/formatted-user-name.ts
 create mode 100644 src/common/components/chats/utils/get-chat-private-key.ts
 create mode 100644 src/common/components/chats/utils/get-joined-communities.ts
 create mode 100644 src/common/components/chats/utils/get-user-chat-public-key.ts
 create mode 100644 src/common/components/chats/utils/index.ts
 create mode 100644 src/common/components/chats/utils/is-message-gif.ts
 create mode 100644 src/common/components/chats/utils/is-message-image.ts
 create mode 100644 src/common/components/chats/utils/upload-channel-data.ts
 create mode 100644 src/common/components/chats/utils/upload-chat-public-key.ts
 create mode 100644 src/common/components/chats/utils/use-fetch-community-messages.ts
 create mode 100644 src/common/components/chats/utils/use-fetch-direct-messages.ts
 create mode 100644 src/common/components/chats/utils/use-get-community-last-message.ts
 create mode 100644 src/common/components/chats/utils/use-get-direct-last-message.ts
 delete mode 100644 src/common/helper/chat-utils.ts

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 08014f1886b..03c7c378456 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -25,7 +25,7 @@ import { connect } from "react-redux";
 import loadable from "@loadable/component";
 import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
-import ChatBox from "./components/chat-box";
+import ChatPopUp from "./components/chats/chat-popup";
 import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
@@ -135,7 +135,12 @@ const App = (props: any) => {
         <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
         <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
         <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.CHATS} component={ChatsPage} />
+        <Route
+          exact={true}
+          strict={true}
+          path={routes.CHATS}
+          component={global.usePrivate ? ChatsPage : NotFound}
+        />
         <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
         <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
         <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
@@ -180,7 +185,7 @@ const App = (props: any) => {
       <Announcement activeUser={props.activeUser} />
       <FloatingFAQ />
       <MessageProvider {...props} />
-      <ChatBox {...props} />
+      <ChatPopUp {...props} />
     </EntriesCacheManager>
   );
 };
diff --git a/src/common/components/chat-input/index.scss b/src/common/components/chats/chat-input/index.scss
similarity index 100%
rename from src/common/components/chat-input/index.scss
rename to src/common/components/chats/chat-input/index.scss
diff --git a/src/common/components/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
similarity index 84%
rename from src/common/components/chat-input/index.tsx
rename to src/common/components/chats/chat-input/index.tsx
index 16d1e483e94..306716c072f 100644
--- a/src/common/components/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -1,34 +1,33 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Form, FormControl, InputGroup } from "react-bootstrap";
 import axios from "axios";
 
-import { Channel } from "../../../providers/message-provider-types";
-import { Chat } from "../../store/chat/types";
-import { ActiveUser } from "../../store/active-user/types";
-import { Global } from "../../store/global/types";
-
-import ClickAwayListener from "../clickaway-listener";
-import EmojiPicker from "../emoji-picker";
-import GifPicker from "../gif-picker";
-import { error } from "../feedback";
-import Tooltip from "../tooltip";
-
-import { emoticonHappyOutlineSvg, gifIcon, chatBoxImageSvg, messageSendSvg } from "../../img/svg";
-import { GifImagesStyle, UPLOADING } from "../chat-box/chat-constants";
-
-import { _t } from "../../i18n";
-import { getAccessToken } from "../../helper/user-token";
-import { uploadImage } from "../../api/misc";
-import { addImage } from "../../api/private-api";
+import { Channel } from "../../../../providers/message-provider-types";
+import { EmojiPickerStyleProps } from "../types";
+
+import ClickAwayListener from "../../clickaway-listener";
+import EmojiPicker from "../../emoji-picker";
+import GifPicker from "../../gif-picker";
+import { error } from "../../feedback";
+import Tooltip from "../../tooltip";
+
+import {
+  emoticonHappyOutlineSvg,
+  gifIcon,
+  chatBoxImageSvg,
+  messageSendSvg
+} from "../../../img/svg";
+import { GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
+
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+import { getAccessToken } from "../../../helper/user-token";
+import { uploadImage } from "../../../api/misc";
+import { addImage } from "../../../api/private-api";
 
 import "./index.scss";
-import { EmojiPickerStyleProps } from "../chat-box";
-import LinearProgress from "../linear-progress";
 
 interface Props {
-  activeUser: ActiveUser | null;
-  global: Global;
-  chat: Chat;
   isCurrentUser: boolean;
   isCommunity: boolean;
   receiverPubKey: string | null;
@@ -41,7 +40,9 @@ interface Props {
 }
 
 export default function ChatInput(props: Props) {
-  const fileInput = React.createRef<HTMLInputElement>();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const { global, activeUser, chat } = useMappedStore();
+
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
@@ -58,7 +59,6 @@ export default function ChatInput(props: Props) {
     emojiPickerStyles,
     gifPickerStyle
   } = props;
-  // console.log("currentUser in chat input", currentUser);
 
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
@@ -100,7 +100,7 @@ export default function ChatInput(props: Props) {
     }
     if (
       receiverPubKey &&
-      !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
+      !chat.directContacts.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
       console.log("Contact has been published");
@@ -116,9 +116,7 @@ export default function ChatInput(props: Props) {
   const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
     let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
 
-    const {
-      global: { isElectron }
-    } = props;
+    const { isElectron } = global;
 
     if (files.length > 0) {
       e.stopPropagation();
@@ -138,8 +136,6 @@ export default function ChatInput(props: Props) {
     e.target.value = "";
   };
   const upload = async (file: File) => {
-    const { activeUser, global } = props;
-
     const username = activeUser?.username!;
 
     const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
@@ -235,7 +231,7 @@ export default function ChatInput(props: Props) {
                 className="chatbox-image"
                 onClick={(e: React.MouseEvent<HTMLElement>) => {
                   e.stopPropagation();
-                  const el = fileInput.current;
+                  const el = fileInputRef.current;
                   if (el) el.click();
                 }}
               >
@@ -246,7 +242,7 @@ export default function ChatInput(props: Props) {
             <input
               onChange={fileInputChanged}
               className="file-input"
-              ref={fileInput}
+              ref={fileInputRef}
               type="file"
               accept="image/*"
               multiple={true}
diff --git a/src/common/components/chat-box/chat-constants.ts b/src/common/components/chats/chat-popup/chat-constants.ts
similarity index 100%
rename from src/common/components/chat-box/chat-constants.ts
rename to src/common/components/chats/chat-popup/chat-constants.ts
diff --git a/src/common/components/chat-box/index.scss b/src/common/components/chats/chat-popup/index.scss
similarity index 100%
rename from src/common/components/chat-box/index.scss
rename to src/common/components/chats/chat-popup/index.scss
diff --git a/src/common/components/chat-box/index.tsx b/src/common/components/chats/chat-popup/index.tsx
similarity index 95%
rename from src/common/components/chat-box/index.tsx
rename to src/common/components/chats/chat-popup/index.tsx
index e48cdf42231..e9093c6991f 100644
--- a/src/common/components/chat-box/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -5,27 +5,27 @@ import { History } from "history";
 import { Button, Form, InputGroup, Modal, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
-import { ActiveUser } from "../../store/active-user/types";
-import { Chat, DirectContactsType } from "../../store/chat/types";
-import { Community } from "../../store/communities/types";
-import { Global } from "../../store/global/types";
-import { User } from "../../store/users/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { Account } from "../../store/accounts/types";
+import { ActiveUser } from "../../../store/active-user/types";
+import { Chat, DirectContactsType } from "../../../store/chat/types";
+import { Community } from "../../../store/communities/types";
+import { Global } from "../../../store/global/types";
+import { User } from "../../../store/users/types";
+import { ToggleType, UI } from "../../../store/ui/types";
+import { Account } from "../../../store/accounts/types";
 import {
   Channel,
   ChannelUpdate,
   DirectMessage,
   PublicMessage
-} from "../../../providers/message-provider-types";
-
-import Tooltip from "../tooltip";
-import UserAvatar from "../user-avatar";
-import LinearProgress from "../linear-progress";
-import { error, success } from "../feedback";
-import { setNostrkeys } from "../../../providers/message-provider";
-import OrDivider from "../or-divider";
-import ManageChatKey from "../manage-chat-key";
+} from "../../../../providers/message-provider-types";
+
+import Tooltip from "../../tooltip";
+import UserAvatar from "../../user-avatar";
+import LinearProgress from "../../linear-progress";
+import { error, success } from "../../feedback";
+import { setNostrkeys } from "../../../../providers/message-provider";
+import OrDivider from "../../or-divider";
+import ManageChatKey from "../../manage-chat-key";
 import ChatInput from "../chat-input";
 import ChatsProfileBox from "../chats-profile-box";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
@@ -41,7 +41,7 @@ import {
   chevronDownSvgForSlider,
   keySvg,
   syncSvg
-} from "../../img/svg";
+} from "../../../img/svg";
 
 import {
   NOSTRKEY,
@@ -55,49 +55,29 @@ import {
   GifPickerStyle
 } from "./chat-constants";
 
-import { getPublicKey } from "../../../lib/nostr-tools/keys";
-import {
-  createNoStrAccount,
-  getProfileMetaData,
-  NostrKeysType,
-  setProfileMetaData,
-  resetProfile,
-  getCommunities,
-  getPrivateKey,
-  fetchCommunityMessages,
-  getCommunityLastMessage,
-  getDirectLastMessage
-} from "../../helper/chat-utils";
-import * as ls from "../../util/local-storage";
-import accountReputation from "../../helper/account-reputation";
-import { _t } from "../../i18n";
+import { getPublicKey } from "../../../../lib/nostr-tools/keys";
+import * as ls from "../../../util/local-storage";
+import accountReputation from "../../../helper/account-reputation";
+import { _t } from "../../../i18n";
 
-import { getAccountFull, getAccountReputations } from "../../api/hive";
-import { getCommunity } from "../../api/bridge";
+import { getAccountFull, getAccountReputations } from "../../../api/hive";
+import { getCommunity } from "../../../api/bridge";
 
 import "./index.scss";
 import ChatsDirectMessages from "../chats-direct-messages";
-
-export interface profileData {
-  joiningData: string;
-  about: string | undefined;
-  followers: number | undefined;
-}
-
-export interface AccountWithReputation {
-  account: string;
-  reputation: number;
-}
-
-export interface EmojiPickerStyleProps {
-  width: string;
-  bottom: string;
-  left: string | number;
-  marginLeft: string;
-  borderTopLeftRadius: string;
-  borderTopRightRadius: string;
-  borderBottomLeftRadius: string;
-}
+import { AccountWithReputation, NostrKeysType } from "../types";
+import {
+  createNoStrAccount,
+  deleteChatPublicKey,
+  fetchCommunityMessages,
+  getCommunityLastMessage,
+  getDirectLastMessage,
+  getJoinedCommunities,
+  getPrivateKey,
+  getProfileMetaData,
+  setProfileMetaData
+} from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 interface Props {
   users: User[];
@@ -117,10 +97,13 @@ interface Props {
   deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
-export default function ChatBox(props: Props) {
+export default function ChatPopUp(props: Props) {
   const routerLocation = useLocation();
   const prevPropsRef = useRef(props);
-  const chatBodyDivRef = React.createRef<HTMLDivElement>();
+  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
+
+  const { activeUser } = useMappedStore();
+
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
@@ -239,7 +222,7 @@ export default function ChatBox(props: Props) {
   }, [typeof window !== "undefined" && window?.messageService]);
 
   useEffect(() => {
-    const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
+    const communities = getJoinedCommunities(props.chat.channels, props.chat.leftChannelsList);
     setCommunities(communities);
     fetchProfileData();
   }, [props.chat.channels, props.chat.leftChannelsList]);
@@ -584,7 +567,7 @@ export default function ChatBox(props: Props) {
     switch (actionType) {
       case NEWCHATACCOUNT:
         setInProgress(true);
-        resetProfile(props.activeUser)
+        deleteChatPublicKey(props.activeUser)
           .then((updatedProfile) => {
             handleJoinChat();
             setStep(10);
@@ -1129,7 +1112,6 @@ export default function ChatBox(props: Props) {
           </div>
           {(isCurrentUser || isCommunity) && (
             <ChatInput
-              {...props}
               isCurrentUser={isCurrentUser}
               isCommunity={isCommunity}
               receiverPubKey={receiverPubKey}
diff --git a/src/common/components/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
similarity index 96%
rename from src/common/components/chats-channel-messages/index.scss
rename to src/common/components/chats/chats-channel-messages/index.scss
index 67da4d70435..92ea6c119d7 100644
--- a/src/common/components/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -1,10 +1,12 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .channel-messages {
   padding-bottom: 15px;
-  .day-and-month {
-    margin-bottom: 1rem;
-    font-size: 14px;
+  .custom-divider {
+    .custom-divider-text {
+      margin-bottom: 1rem;
+      font-size: 14px;
+    }
   }
   .profile-box {
     padding: 15px;
diff --git a/src/common/components/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
similarity index 88%
rename from src/common/components/chats-channel-messages/index.tsx
rename to src/common/components/chats/chats-channel-messages/index.tsx
index ba6613c27b4..779ad4f7959 100644
--- a/src/common/components/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -3,19 +3,13 @@ import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
   communityModerator,
+  DirectMessage,
+  Profile,
   PublicMessage
-} from "../../../providers/message-provider-types";
-import {
-  formatMessageTime,
-  getFormattedDateAndDay,
-  getProfileName,
-  isMessageGif,
-  isMessageImage,
-  NostrKeysType
-} from "../../helper/chat-utils";
+} from "../../../../providers/message-provider-types";
 import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
-import { useMappedStore } from "../../store/use-mapped-store";
+import { useMappedStore } from "../../../store/use-mapped-store";
 import {
   Button,
   Form,
@@ -25,32 +19,33 @@ import {
   Popover,
   Spinner
 } from "react-bootstrap";
-import UserAvatar from "../user-avatar";
-import FollowControls from "../follow-controls";
-import { Account } from "../../store/accounts/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { Global } from "../../store/global/types";
-import { _t } from "../../i18n";
-import Tooltip from "../tooltip";
-import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../img/svg";
+import UserAvatar from "../../user-avatar";
+import FollowControls from "../../follow-controls";
+import { Account } from "../../../store/accounts/types";
+import { ToggleType, UI } from "../../../store/ui/types";
+import { Global } from "../../../store/global/types";
+import usePrevious from "react-use/lib/usePrevious";
+import { _t } from "../../../i18n";
+import Tooltip from "../../tooltip";
+import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../img/svg";
 
 import "./index.scss";
-import { User } from "../../store/users/types";
-import { ActiveUser } from "../../store/active-user/types";
+import { User } from "../../../store/users/types";
+import { ActiveUser } from "../../../store/active-user/types";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { error } from "../feedback";
-import { CHATPAGE } from "../chat-box/chat-constants";
-import { Theme } from "../../store/global/types";
+import { error } from "../../feedback";
+import { CHATPAGE } from "../chat-popup/chat-constants";
+import { Theme } from "../../../store/global/types";
+import { NostrKeysType } from "../types";
+import { formatMessageTime, isMessageGif, isMessageImage, formatMessageDate } from "../utils";
 
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
   activeUserKeys: NostrKeysType;
   username: string;
-  global: Global;
   from?: string;
   users: User[];
-  activeUser: ActiveUser | null;
   ui: UI;
   history: History | null;
   isScrollToBottom: boolean;
@@ -71,20 +66,18 @@ export default function ChatsChannelMessages(props: Props) {
     publicMessages,
     currentChannel,
     activeUserKeys,
-    activeUser,
     history,
     from,
     isScrollToBottom,
     isScrolled,
-    global,
     isActveUserRemoved,
     scrollToBottom,
     currentChannelSetter,
     deletePublicMessage
   } = props;
-  const { chat } = useMappedStore();
+  const { chat, global, activeUser } = useMappedStore();
 
-  const prevPropsRef = useRef(props);
+  let prevGlobal = usePrevious(global);
 
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const channelMessagesRef = React.createRef<HTMLDivElement>();
@@ -105,18 +98,11 @@ export default function ChatsChannelMessages(props: Props) {
   // }, [publicMessages]);
 
   useEffect(() => {
-    const prevProps = prevPropsRef.current;
-    if (prevProps.global.theme !== props.global.theme) {
+    if (prevGlobal?.theme !== global.theme) {
       setBackground();
     }
-    // if (prevProps.activeUser?.username !== props.activeUser?.username) {
-    //   setIsCommunity(false);
-    //   setIsCurrentUser(false);
-    //   setCurrentUser("");
-    //   setCommunityName("");
-    // }
-    prevPropsRef.current = props;
-  }, [props.global.theme, props.activeUser]);
+    prevGlobal = global;
+  }, [global.theme, activeUser]);
 
   useEffect(() => {
     if (publicMessages.length !== 0) {
@@ -238,6 +224,11 @@ export default function ChatsChannelMessages(props: Props) {
     setCommunityAdmins(communityAdminNames);
   };
 
+  const getProfileName = (creator: string, profiles: Profile[]) => {
+    const profile = profiles.find((x) => x.creator === creator);
+    return profile?.name;
+  };
+
   const handleConfirm = () => {
     let updatedMetaData = {
       name: currentChannel?.name!,
@@ -318,13 +309,29 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
+  const getFormattedDateAndDay = (msg: PublicMessage, i: number) => {
+    const prevMsg = publicMessages[i - 1];
+    const msgDate = formatMessageDate(msg.created);
+    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+    if (msgDate !== prevMsgDate) {
+      return (
+        <div className="custom-divider">
+          <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+            {msgDate}
+          </span>
+        </div>
+      );
+    }
+    return <></>;
+  };
+
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
         {publicMessages.length !== 0 &&
           activeUserKeys &&
           publicMessages.map((pMsg, i) => {
-            const dayAndMonth = getFormattedDateAndDay(pMsg, i, publicMessages);
+            const dayAndMonth = getFormattedDateAndDay(pMsg, i);
             let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
 
             renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
@@ -353,7 +360,12 @@ export default function ChatsChannelMessages(props: Props) {
                             : "justify-content-center"
                         }  profile-box-buttons`}
                       >
-                        <FollowControls {...props} targetUsername={name!} where={"chat-box"} />
+                        <FollowControls
+                          {...props}
+                          activeUser={activeUser}
+                          targetUsername={name!}
+                          where={"chat-box"}
+                        />
 
                         {communityAdmins.includes(activeUser?.username!) && (
                           <>
@@ -414,11 +426,7 @@ export default function ChatsChannelMessages(props: Props) {
 
             return (
               <React.Fragment key={pMsg.id}>
-                {dayAndMonth !== null && (
-                  <span className="d-flex justify-content-center align-items-center mt-3 day-and-month">
-                    {dayAndMonth}
-                  </span>
-                )}
+                {dayAndMonth}
 
                 {pMsg.creator !== activeUserKeys?.pub ? (
                   <div
@@ -455,7 +463,7 @@ export default function ChatsChannelMessages(props: Props) {
                           dangerouslySetInnerHTML={{ __html: renderedPreview }}
                         />
                         {hoveredMessageId === pMsg.id &&
-                          privilegedUsers.includes(props.activeUser?.username!) && (
+                          privilegedUsers.includes(activeUser?.username!) && (
                             <Tooltip content={"Hide Message"}>
                               <div className="hide-msg receiver">
                                 <p
diff --git a/src/common/components/chats-community-dropdown-menu/index.scss b/src/common/components/chats/chats-community-dropdown-menu/index.scss
similarity index 100%
rename from src/common/components/chats-community-dropdown-menu/index.scss
rename to src/common/components/chats/chats-community-dropdown-menu/index.scss
diff --git a/src/common/components/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
similarity index 96%
rename from src/common/components/chats-community-dropdown-menu/index.tsx
rename to src/common/components/chats/chats-community-dropdown-menu/index.tsx
index 17ea29bda9d..19dc308d4b5 100644
--- a/src/common/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../dropdown";
+import DropDown, { MenuItem } from "../../dropdown";
 import useDebounce from "react-use/lib/useDebounce";
 
-import { KebabMenu, linkSvg, chatLeaveSvg, editSVG, removeUserSvg } from "../../img/svg";
-import { _t } from "../../i18n";
+import { KebabMenu, linkSvg, chatLeaveSvg, editSVG, removeUserSvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
 import {
   ADDROLE,
   CHATPAGE,
@@ -12,19 +12,19 @@ import {
   LEAVECOMMUNITY,
   NOSTRKEY,
   UNBLOCKUSER
-} from "../chat-box/chat-constants";
-import { useMappedStore } from "../../store/use-mapped-store";
+} from "../chat-popup/chat-constants";
+import { useMappedStore } from "../../../store/use-mapped-store";
 import {
   Channel,
   ChannelUpdate,
   communityModerator
-} from "../../../providers/message-provider-types";
-import { copyToClipboard, formattedUserName, getProfileMetaData } from "../../helper/chat-utils";
-import { error, success } from "../feedback";
+} from "../../../../providers/message-provider-types";
+import { error, success } from "../../feedback";
 import { Button, Form, Modal, Row, Col, InputGroup, FormControl } from "react-bootstrap";
-import LinearProgress from "../linear-progress";
-import { ROLES } from "../../store/communities";
-import UserAvatar from "../user-avatar";
+import LinearProgress from "../../linear-progress";
+import { ROLES } from "../../../store/communities";
+import UserAvatar from "../../user-avatar";
+import { copyToClipboard, getProfileMetaData } from "../utils";
 
 interface Props {
   history: History | null;
diff --git a/src/common/components/chats-confirmation-modal/index.tsx b/src/common/components/chats/chats-confirmation-modal/index.tsx
similarity index 97%
rename from src/common/components/chats-confirmation-modal/index.tsx
rename to src/common/components/chats/chats-confirmation-modal/index.tsx
index f72eeea6b80..105d9d2a0c4 100644
--- a/src/common/components/chats-confirmation-modal/index.tsx
+++ b/src/common/components/chats/chats-confirmation-modal/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Modal } from "react-bootstrap";
-import { _t } from "../../i18n";
+import { _t } from "../../../i18n";
 
 interface Props {
   // actionType: any;
diff --git a/src/common/components/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
similarity index 95%
rename from src/common/components/chats-direct-messages/index.scss
rename to src/common/components/chats/chats-direct-messages/index.scss
index 2c4315048e2..e6a29211b6f 100644
--- a/src/common/components/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -1,10 +1,12 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .direct-messages {
   padding-bottom: 15px;
-  .day-and-month {
-    margin-bottom: 1rem;
-    font-size: 14px;
+  .custom-divider {
+    .custom-divider-text {
+      margin-bottom: 1rem;
+      font-size: 14px;
+    }
   }
   .receiver {
     display: flex;
diff --git a/src/common/components/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
similarity index 77%
rename from src/common/components/chats-direct-messages/index.tsx
rename to src/common/components/chats/chats-direct-messages/index.tsx
index 823324c54f4..67ef62aee64 100644
--- a/src/common/components/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -1,31 +1,25 @@
 import React, { useEffect, useRef } from "react";
-import { DirectMessage } from "../../../providers/message-provider-types";
+import { DirectMessage } from "../../../../providers/message-provider-types";
 import mediumZoom, { Zoom } from "medium-zoom";
-import { Global, Theme } from "../../store/global/types";
-import {
-  formatMessageTime,
-  getFormattedDateAndDay,
-  isMessageGif,
-  isMessageImage,
-  NostrKeysType
-} from "../../helper/chat-utils";
+import { Global, Theme } from "../../../store/global/types";
+import { formatMessageTime, formatMessageDate, isMessageGif, isMessageImage } from "../utils";
 import { renderPostBody } from "@ecency/render-helper";
-import { useMappedStore } from "../../store/use-mapped-store";
+import { useMappedStore } from "../../../store/use-mapped-store";
 import { Link } from "react-router-dom";
-import UserAvatar from "../user-avatar";
-import Tooltip from "../tooltip";
-import { failedMessageSvg, resendMessageSvg } from "../../img/svg";
+import UserAvatar from "../../user-avatar";
+import Tooltip from "../../tooltip";
+import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
 import { Spinner } from "react-bootstrap";
 
 import "./index.scss";
-import { ActiveUser } from "../../store/active-user/types";
+import { ActiveUser } from "../../../store/active-user/types";
+import usePrevious from "react-use/lib/usePrevious";
+import { NostrKeysType } from "../types";
 
 interface Props {
   directMessages: DirectMessage[];
   activeUserKeys: NostrKeysType;
   currentUser: string;
-  global: Global;
-  activeUser: ActiveUser | null;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
@@ -38,21 +32,18 @@ export default function ChatsDirectMessages(props: Props) {
     activeUserKeys,
     currentUser,
     isScrolled,
-    global,
     isScrollToBottom,
-    activeUser,
     scrollToBottom
   } = props;
-  const { chat } = useMappedStore();
+  const { chat, global, activeUser } = useMappedStore();
 
-  const prevPropsRef = useRef(props);
+  let prevGlobal = usePrevious(global);
 
   useEffect(() => {
-    const prevProps = prevPropsRef.current;
-    if (prevProps.global.theme !== global.theme) {
+    if (prevGlobal?.theme !== global.theme) {
       setBackground();
     }
-    prevPropsRef.current = props;
+    prevGlobal = global;
   }, [global.theme, activeUser]);
 
   useEffect(() => {
@@ -78,11 +69,27 @@ export default function ChatsDirectMessages(props: Props) {
     }
   };
 
+  const getFormattedDateAndDay = (msg: DirectMessage, i: number) => {
+    const prevMsg = directMessages[i - 1];
+    const msgDate = formatMessageDate(msg.created);
+    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+    if (msgDate !== prevMsgDate) {
+      return (
+        <div className="custom-divider">
+          <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+            {msgDate}
+          </span>
+        </div>
+      );
+    }
+    return <></>;
+  };
+
   return (
     <div className="direct-messages">
       {directMessages &&
         directMessages.map((msg, i) => {
-          const dayAndMonth = getFormattedDateAndDay(msg, i, directMessages);
+          const dayAndMonth = getFormattedDateAndDay(msg, i);
           let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
 
           renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
@@ -94,11 +101,7 @@ export default function ChatsDirectMessages(props: Props) {
 
           return (
             <React.Fragment key={msg.id}>
-              {dayAndMonth !== null && (
-                <span className="d-flex justify-content-center align-items-center mt-3 day-and-month">
-                  {dayAndMonth}
-                </span>
-              )}
+              {dayAndMonth}
               {msg.creator !== activeUserKeys?.pub ? (
                 <div key={msg.id} className="receiver">
                   <div className="user-img">
diff --git a/src/common/components/chats-dropdown-menu/index.tsx b/src/common/components/chats/chats-dropdown-menu/index.tsx
similarity index 78%
rename from src/common/components/chats-dropdown-menu/index.tsx
rename to src/common/components/chats/chats-dropdown-menu/index.tsx
index 3e82eaa4387..ae335b04534 100644
--- a/src/common/components/chats-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-dropdown-menu/index.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../dropdown";
+import DropDown, { MenuItem } from "../../dropdown";
 
-import { KebabMenu, chatKeySvg } from "../../img/svg";
-import { _t } from "../../i18n";
-import { DropDownStyle } from "../chat-box/chat-constants";
+import { KebabMenu, chatKeySvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
+import { DropDownStyle } from "../chat-popup/chat-constants";
 
 interface Props {
   history: History | null;
diff --git a/src/common/components/chats-messages-box/index.scss b/src/common/components/chats/chats-messages-box/index.scss
similarity index 93%
rename from src/common/components/chats-messages-box/index.scss
rename to src/common/components/chats/chats-messages-box/index.scss
index 6603c8741ef..fcf93fe9ca6 100644
--- a/src/common/components/chats-messages-box/index.scss
+++ b/src/common/components/chats/chats-messages-box/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .chats-messages-box {
   margin-top: 10px;
diff --git a/src/common/components/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
similarity index 77%
rename from src/common/components/chats-messages-box/index.tsx
rename to src/common/components/chats/chats-messages-box/index.tsx
index 41a644abce7..1f320527604 100644
--- a/src/common/components/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
-import { Account } from "../../store/accounts/types";
-import { ActiveUser } from "../../store/active-user/types";
-import { Chat } from "../../store/chat/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { User } from "../../store/users/types";
+import { Account } from "../../../store/accounts/types";
+import { ToggleType, UI } from "../../../store/ui/types";
+import { User } from "../../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
-import { Global, Theme } from "../../store/global/types";
 
 import "./index.scss";
-import { formattedUserName, NostrKeysType } from "../../helper/chat-utils";
-import { Channel, ChannelUpdate } from "../../../providers/message-provider-types";
-import LinearProgress from "../linear-progress";
+import { Channel, ChannelUpdate } from "../../../../providers/message-provider-types";
+import LinearProgress from "../../linear-progress";
+import { NostrKeysType } from "../types";
+import { formattedUserName } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 interface MatchParams {
   filter: string;
@@ -25,11 +24,8 @@ interface MatchParams {
 
 interface Props {
   match: match<MatchParams>;
-  chat: Chat;
-  global: Global;
   users: User[];
   history: History | null;
-  activeUser: ActiveUser | null;
   ui: UI;
   activeUserKeys: NostrKeysType;
   setActiveUser: (username: string | null) => void;
@@ -40,7 +36,9 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const { match, global, deletePublicMessage } = props;
+  const { activeUser, chat } = useMappedStore();
+  const { channels, updatedChannel } = chat;
+  const { match, deletePublicMessage } = props;
   const username = match.params.username;
 
   const [maxHeight, setMaxHeight] = useState(0);
@@ -57,12 +55,12 @@ export default function ChatsMessagesBox(props: Props) {
 
   useEffect(() => {
     fetchCurrentChannel(formattedUserName(username));
-  }, [props.chat.updatedChannel, username, props.chat.channels]);
+  }, [updatedChannel, username, channels]);
 
   const fetchCurrentChannel = (communityName: string) => {
-    const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
+    const channel = channels.find((channel) => channel.communityName === communityName);
     if (channel) {
-      const updated: ChannelUpdate = props.chat.updatedChannel
+      const updated: ChannelUpdate = updatedChannel
         .filter((x) => x.channelId === channel.id)
         .sort((a, b) => b.created - a.created)[0];
       if (updated) {
diff --git a/src/common/components/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
similarity index 97%
rename from src/common/components/chats-messages-header/index.scss
rename to src/common/components/chats/chats-messages-header/index.scss
index 9dc3eb10914..3bc216a772e 100644
--- a/src/common/components/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .chats-messages-header {
   grid-row: span 1;
diff --git a/src/common/components/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
similarity index 57%
rename from src/common/components/chats-messages-header/index.tsx
rename to src/common/components/chats/chats-messages-header/index.tsx
index 43a08d06360..9c46c04e357 100644
--- a/src/common/components/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { History } from "history";
-import { formattedName, formattedUserName, isChannel } from "../../helper/chat-utils";
-import { _t } from "../../i18n";
-import { useMappedStore } from "../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import UserAvatar from "../user-avatar";
+import UserAvatar from "../../user-avatar";
 
 import "./index.scss";
-import { Channel } from "../../../providers/message-provider-types";
-import { CHATPAGE } from "../chat-box/chat-constants";
+import { Channel } from "../../../../providers/message-provider-types";
+import { CHATPAGE } from "../chat-popup/chat-constants";
+import { Chat } from "../../../store/chat/types";
+import { formattedUserName } from "../utils";
 
 interface Props {
   username: string;
@@ -21,6 +22,24 @@ export default function ChatsMessagesHeader(props: Props) {
   const { username, currentChannel, currentChannelSetter } = props;
   const { chat } = useMappedStore();
 
+  const isChannel = (username: string) => {
+    if (username.startsWith("@")) {
+      return false;
+    }
+    return true;
+  };
+
+  const formattedName = (username: string, chat: Chat) => {
+    if (username && !username.startsWith("@")) {
+      const community = chat.channels.find((channel) => channel.communityName === username);
+      if (community) {
+        return community.name;
+      }
+    }
+    const replacedUserName = username.replace("@", "");
+    return replacedUserName;
+  };
+
   return (
     <div className="chats-messages-header">
       <div className="d-flex justify-content-between header-content">
diff --git a/src/common/components/chats-messages-view/index.scss b/src/common/components/chats/chats-messages-view/index.scss
similarity index 89%
rename from src/common/components/chats-messages-view/index.scss
rename to src/common/components/chats/chats-messages-view/index.scss
index 55c51e27342..5b0b1467b8b 100644
--- a/src/common/components/chats-messages-view/index.scss
+++ b/src/common/components/chats/chats-messages-view/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .chats-messages-view {
   @include themify(day) {
diff --git a/src/common/components/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
similarity index 89%
rename from src/common/components/chats-messages-view/index.tsx
rename to src/common/components/chats/chats-messages-view/index.tsx
index 2e2f1cf49a2..d8bba46f97f 100644
--- a/src/common/components/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -1,31 +1,32 @@
 import React, { RefObject, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Channel, DirectMessage, PublicMessage } from "../../../providers/message-provider-types";
+import {
+  Channel,
+  DirectMessage,
+  PublicMessage
+} from "../../../../providers/message-provider-types";
 import {
   fetchCommunityMessages,
-  fetchCurrentUserData,
   fetchDirectMessages,
   getPrivateKey,
-  getProfileMetaData,
-  NostrKeysType
-} from "../../helper/chat-utils";
+  getProfileMetaData
+} from "../utils";
 import { History } from "history";
-import { useMappedStore } from "../../store/use-mapped-store";
-import { Global, Theme } from "../../store/global/types";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { Global } from "../../../store/global/types";
 import ChatsProfileBox from "../chats-profile-box";
 
 import "./index.scss";
-import { _t } from "../../i18n";
+import { _t } from "../../../i18n";
 import ChatsChannelMessages from "../chats-channel-messages";
 import ChatsDirectMessages from "../chats-direct-messages";
-import { Account } from "../../store/accounts/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { User } from "../../store/users/types";
-import { ActiveUser } from "../../store/active-user/types";
+import { Account } from "../../../store/accounts/types";
+import { ToggleType, UI } from "../../../store/ui/types";
+import { User } from "../../../store/users/types";
 import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
-import { EmojiPickerStyleProps } from "../chat-box";
-import { CHATPAGE } from "../chat-box/chat-constants";
+import { CHATPAGE } from "../chat-popup/chat-constants";
+import { EmojiPickerStyleProps, NostrKeysType } from "../types";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
@@ -40,9 +41,7 @@ interface Props {
   username: string;
   users: User[];
   history: History | null;
-  activeUser: ActiveUser | null;
   ui: UI;
-  global: Global;
   currentChannel: Channel;
   inProgress: boolean;
   setActiveUser: (username: string | null) => void;
@@ -57,8 +56,6 @@ interface Props {
 export default function ChatsMessagesView(props: Props) {
   const {
     username,
-    activeUser,
-    global,
     currentChannel,
     inProgress,
     currentChannelSetter,
@@ -68,7 +65,7 @@ export default function ChatsMessagesView(props: Props) {
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
-  const { chat } = useMappedStore();
+  const { chat, activeUser } = useMappedStore();
   const [directUser, setDirectUser] = useState("");
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
@@ -150,8 +147,8 @@ export default function ChatsMessagesView(props: Props) {
   };
 
   const getActiveUserKeys = async () => {
-    const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const profileData = await getProfileMetaData(activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     const activeUserKeys = {
       pub: profileData?.nsKey,
       priv: noStrPrivKey
@@ -278,9 +275,6 @@ export default function ChatsMessagesView(props: Props) {
       <ChatInput
         emojiPickerStyles={EmojiPickerStyle}
         gifPickerStyle={EmojiPickerStyle}
-        activeUser={activeUser}
-        global={global}
-        chat={chat}
         isCurrentUser={directUser ? true : false}
         isCommunity={communityName ? true : false}
         receiverPubKey={receiverPubKey}
diff --git a/src/common/components/chats-profile-box/index.scss b/src/common/components/chats/chats-profile-box/index.scss
similarity index 96%
rename from src/common/components/chats-profile-box/index.scss
rename to src/common/components/chats/chats-profile-box/index.scss
index 32bb46d57a1..0eac90de329 100644
--- a/src/common/components/chats-profile-box/index.scss
+++ b/src/common/components/chats/chats-profile-box/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .chats-profile-box {
   .user-profile {
diff --git a/src/common/components/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
similarity index 84%
rename from src/common/components/chats-profile-box/index.tsx
rename to src/common/components/chats/chats-profile-box/index.tsx
index 88cd19ce536..97c9f6236a2 100644
--- a/src/common/components/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import UserAvatar from "../user-avatar";
+import UserAvatar from "../../user-avatar";
 
 import "./index.scss";
-import { dateToFormatted } from "../../helper/parse-date";
-import { formatFollowers, formattedUserName } from "../../helper/chat-utils";
-import { _t } from "../../i18n";
-import { useMappedStore } from "../../store/use-mapped-store";
-import { getAccountFull } from "../../api/hive";
-import { getCommunity } from "../../api/bridge";
+import { dateToFormatted } from "../../../helper/parse-date";
+import { _t } from "../../../i18n";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { getAccountFull } from "../../../api/hive";
+import { getCommunity } from "../../../api/bridge";
+import { formattedUserName } from "../utils";
 
 export interface profileData {
   joiningData: string;
@@ -36,6 +36,17 @@ export default function ChatsProfileBox(props: Props) {
     fetchProfileData();
   }, [username, isCommunity, isCurrentUser, communityName, currentUser]);
 
+  const formatFollowers = (count: number | undefined) => {
+    if (count) {
+      return count >= 1e6
+        ? (count / 1e6).toLocaleString() + "M"
+        : count >= 1e3
+        ? (count / 1e3).toLocaleString() + "K"
+        : count.toLocaleString();
+    }
+    return count;
+  };
+
   const fetchProfileData = async () => {
     if (username && username?.length !== 0) {
       if (username?.startsWith("@")) {
diff --git a/src/common/components/chats-scroller/index.scss b/src/common/components/chats/chats-scroller/index.scss
similarity index 92%
rename from src/common/components/chats-scroller/index.scss
rename to src/common/components/chats/chats-scroller/index.scss
index 36f090571a1..aefcae9b48f 100644
--- a/src/common/components/chats-scroller/index.scss
+++ b/src/common/components/chats/chats-scroller/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .scroller {
   position: sticky;
diff --git a/src/common/components/chats-scroller/index.tsx b/src/common/components/chats/chats-scroller/index.tsx
similarity index 85%
rename from src/common/components/chats-scroller/index.tsx
rename to src/common/components/chats/chats-scroller/index.tsx
index c32b793f012..8f77b368621 100644
--- a/src/common/components/chats-scroller/index.tsx
+++ b/src/common/components/chats/chats-scroller/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import Tooltip from "../tooltip";
+import Tooltip from "../../tooltip";
 
-import { _t } from "../../i18n";
-import { chevronDownSvgForSlider, chevronUpSvg } from "../../img/svg";
+import { _t } from "../../../i18n";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../../img/svg";
 
 import "./index.scss";
 
diff --git a/src/common/components/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
similarity index 88%
rename from src/common/components/chats-sidebar/indes.tsx
rename to src/common/components/chats/chats-sidebar/indes.tsx
index f601420deb5..ffa213f8dcc 100644
--- a/src/common/components/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -4,29 +4,25 @@ import { Link } from "react-router-dom";
 import { History } from "history";
 import { match } from "react-router";
 import useDebounce from "react-use/lib/useDebounce";
-import { setNostrkeys } from "../../../providers/message-provider";
-import { Channel } from "../../../providers/message-provider-types";
-import { getAccountReputations } from "../../api/hive";
-import accountReputation from "../../helper/account-reputation";
-import {
-  getCommunities,
-  getCommunityLastMessage,
-  getDirectLastMessage,
-  NostrKeysType
-} from "../../helper/chat-utils";
-import { _t } from "../../i18n";
-import { arrowBackSvg, chatKeySvg, KebabMenu, syncSvg } from "../../img/svg";
-import { Chat, DirectContactsType } from "../../store/chat/types";
-import { AccountWithReputation } from "../chat-box";
+import { setNostrkeys } from "../../../../providers/message-provider";
+import { Channel } from "../../../../providers/message-provider-types";
+import { getAccountReputations } from "../../../api/hive";
+import accountReputation from "../../../helper/account-reputation";
+import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
+import { _t } from "../../../i18n";
+import { arrowBackSvg, syncSvg } from "../../../img/svg";
+import { Chat, DirectContactsType } from "../../../store/chat/types";
 import ChatsScroller from "../chats-scroller";
-import LinearProgress from "../linear-progress";
-import Tooltip from "../tooltip";
-import UserAvatar from "../user-avatar";
+import LinearProgress from "../../linear-progress";
+import Tooltip from "../../tooltip";
+import UserAvatar from "../../user-avatar";
 
 import "./index.scss";
-import DropDown, { MenuItem } from "../dropdown";
-import { CHAT, DropDownStyle } from "../chat-box/chat-constants";
+import DropDown, { MenuItem } from "../../dropdown";
+import { CHAT, DropDownStyle } from "../chat-popup/chat-constants";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
+import { AccountWithReputation, NostrKeysType } from "../types";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 interface MatchParams {
   filter: string;
@@ -37,11 +33,11 @@ interface MatchParams {
 }
 interface Props {
   match: match<MatchParams>;
-  channels: Channel[];
-  directContacts: DirectContactsType[];
+  // channels: Channel[];
+  // directContacts: DirectContactsType[];
   activeUserKeys: NostrKeysType;
   chatPrivKey: string;
-  chat: Chat;
+  // chat: Chat;
   history: History;
   revelPrivateKey: boolean;
   inProgressSetter: (d: boolean) => void;
@@ -49,10 +45,9 @@ interface Props {
   resetChat: () => void;
 }
 export default function ChatsSideBar(props: Props) {
+  const { chat } = useMappedStore();
+  const { channels, directContacts, leftChannelsList } = chat;
   const {
-    channels,
-    chat,
-    directContacts,
     activeUserKeys,
     match,
     revelPrivateKey,
@@ -72,8 +67,6 @@ export default function ChatsSideBar(props: Props) {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [communities, setCommunities] = useState<Channel[]>([]);
 
-  // console.log("username in chats sidebar", username);
-
   useDebounce(
     async () => {
       if (searchText.length !== 0) {
@@ -94,10 +87,10 @@ export default function ChatsSideBar(props: Props) {
   // }, [isScrollToTop]);
 
   useEffect(() => {
-    const communities = getCommunities(props.chat.channels, props.chat.leftChannelsList);
+    const communities = getJoinedCommunities(channels, leftChannelsList);
     setCommunities(communities);
     // fetchProfileData();
-  }, [props.chat.channels, props.chat.leftChannelsList]);
+  }, [channels, leftChannelsList]);
 
   // const communities = [
   //   {
diff --git a/src/common/components/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
similarity index 99%
rename from src/common/components/chats-sidebar/index.scss
rename to src/common/components/chats/chats-sidebar/index.scss
index 3e18bf38897..bbdf3e28add 100644
--- a/src/common/components/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -1,4 +1,4 @@
-@import "../../../style/vars_mixins";
+@import "../../../../style/vars_mixins";
 
 .chats-sidebar {
   @include themify(day) {
diff --git a/src/common/components/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
similarity index 93%
rename from src/common/components/join-community-chat-btn/index.tsx
rename to src/common/components/chats/join-community-chat-btn/index.tsx
index 39140dbe999..10c80455467 100644
--- a/src/common/components/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -2,23 +2,23 @@ import React, { useEffect, useState } from "react";
 import { Button, Spinner } from "react-bootstrap";
 import { History } from "history";
 
-import { Community, ROLES } from "../../store/communities/types";
-import { ActiveUser } from "../../store/active-user/types";
+import { Community, ROLES } from "../../../store/communities/types";
+import { ActiveUser } from "../../../store/active-user/types";
 
-import { _t } from "../../i18n";
+import { _t } from "../../../i18n";
 
-import { useMappedStore } from "../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../providers/message-provider-types";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { Channel, communityModerator } from "../../../../providers/message-provider-types";
+import * as ls from "../../../util/local-storage";
+import { setNostrkeys } from "../../../../providers/message-provider";
+import { NOSTRKEY } from "../chat-popup/chat-constants";
+import { NostrKeysType } from "../types";
 import {
   createNoStrAccount,
   getProfileMetaData,
-  NostrKeysType,
   setChannelMetaData,
   setProfileMetaData
-} from "../../helper/chat-utils";
-import * as ls from "../../util/local-storage";
-import { setNostrkeys } from "../../../providers/message-provider";
-import { NOSTRKEY } from "../chat-box/chat-constants";
+} from "../utils";
 
 interface Props {
   history: History;
diff --git a/src/common/components/chats/types/chat-types.ts b/src/common/components/chats/types/chat-types.ts
new file mode 100644
index 00000000000..1ccd0e3e5b5
--- /dev/null
+++ b/src/common/components/chats/types/chat-types.ts
@@ -0,0 +1,25 @@
+export interface NostrKeysType {
+  pub: string;
+  priv: string;
+}
+
+export interface profileData {
+  joiningData: string;
+  about: string | undefined;
+  followers: number | undefined;
+}
+
+export interface AccountWithReputation {
+  account: string;
+  reputation: number;
+}
+
+export interface EmojiPickerStyleProps {
+  width: string;
+  bottom: string;
+  left: string | number;
+  marginLeft: string;
+  borderTopLeftRadius: string;
+  borderTopRightRadius: string;
+  borderBottomLeftRadius: string;
+}
diff --git a/src/common/components/chats/types/index.ts b/src/common/components/chats/types/index.ts
new file mode 100644
index 00000000000..44983652000
--- /dev/null
+++ b/src/common/components/chats/types/index.ts
@@ -0,0 +1 @@
+export * from "./chat-types";
diff --git a/src/common/components/chats/utils/copy-to-clipboard.ts b/src/common/components/chats/utils/copy-to-clipboard.ts
new file mode 100644
index 00000000000..2683d6f2725
--- /dev/null
+++ b/src/common/components/chats/utils/copy-to-clipboard.ts
@@ -0,0 +1,8 @@
+export const copyToClipboard = (content: string) => {
+  const textField = document.createElement("textarea");
+  textField.innerText = content;
+  document.body.appendChild(textField);
+  textField.select();
+  document.execCommand("copy");
+  textField.remove();
+};
diff --git a/src/common/components/chats/utils/create-nostr-account.ts b/src/common/components/chats/utils/create-nostr-account.ts
new file mode 100644
index 00000000000..6d2ba017c7b
--- /dev/null
+++ b/src/common/components/chats/utils/create-nostr-account.ts
@@ -0,0 +1,7 @@
+import { generatePrivateKey, getPublicKey } from "../../../../lib/nostr-tools/keys";
+
+export const createNoStrAccount = () => {
+  const priv = generatePrivateKey();
+  const pub = getPublicKey(priv);
+  return { pub, priv };
+};
diff --git a/src/common/components/chats/utils/delete-chat-public-key.ts b/src/common/components/chats/utils/delete-chat-public-key.ts
new file mode 100644
index 00000000000..66ad862a979
--- /dev/null
+++ b/src/common/components/chats/utils/delete-chat-public-key.ts
@@ -0,0 +1,22 @@
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+import { ActiveUser } from "../../../store/active-user/types";
+import { getProfileMetaData } from "./fetch-profile-metadata";
+import * as ls from "../../../util/local-storage";
+
+export const deleteChatPublicKey = (activeUser: ActiveUser | null) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const profile = await getProfileMetaData(activeUser?.username!);
+      delete profile.nsKey;
+      delete profile.channel;
+      ls.remove(`${activeUser?.username}_nsPrivKey`);
+      const response = await getAccountFull(activeUser?.username!);
+      const updatedProfile = await updateProfile(response, { ...profile });
+      console.log("Updated profile", updatedProfile);
+      resolve(updatedProfile);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
diff --git a/src/common/components/chats/utils/fetch-profile-metadata.ts b/src/common/components/chats/utils/fetch-profile-metadata.ts
new file mode 100644
index 00000000000..56988efb3cf
--- /dev/null
+++ b/src/common/components/chats/utils/fetch-profile-metadata.ts
@@ -0,0 +1,11 @@
+import { getAccountFull } from "../../../api/hive";
+
+export const getProfileMetaData = async (username: string) => {
+  const response = await getAccountFull(username);
+  const { posting_json_metadata } = response;
+  if (posting_json_metadata) {
+    const profile = JSON.parse(posting_json_metadata!).profile;
+
+    return profile;
+  }
+};
diff --git a/src/common/components/chats/utils/format-message-data.ts b/src/common/components/chats/utils/format-message-data.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/common/components/chats/utils/format-message-time.ts b/src/common/components/chats/utils/format-message-time.ts
new file mode 100644
index 00000000000..41d5f69fe87
--- /dev/null
+++ b/src/common/components/chats/utils/format-message-time.ts
@@ -0,0 +1,5 @@
+import moment from "moment";
+
+export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
+
+export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
diff --git a/src/common/components/chats/utils/formatted-user-name.ts b/src/common/components/chats/utils/formatted-user-name.ts
new file mode 100644
index 00000000000..820af9bf5e8
--- /dev/null
+++ b/src/common/components/chats/utils/formatted-user-name.ts
@@ -0,0 +1,6 @@
+export const formattedUserName = (username: string) => {
+  if (username && username.startsWith("@")) {
+    return username.replace("@", "");
+  }
+  return username;
+};
diff --git a/src/common/components/chats/utils/get-chat-private-key.ts b/src/common/components/chats/utils/get-chat-private-key.ts
new file mode 100644
index 00000000000..c5b04fa691c
--- /dev/null
+++ b/src/common/components/chats/utils/get-chat-private-key.ts
@@ -0,0 +1,5 @@
+import * as ls from "../../../util/local-storage";
+
+export const getPrivateKey = (username: string) => {
+  return ls.get(`${username}_nsPrivKey`);
+};
diff --git a/src/common/components/chats/utils/get-joined-communities.ts b/src/common/components/chats/utils/get-joined-communities.ts
new file mode 100644
index 00000000000..ff486aa1026
--- /dev/null
+++ b/src/common/components/chats/utils/get-joined-communities.ts
@@ -0,0 +1,5 @@
+import { Channel } from "../../../../providers/message-provider-types";
+
+export const getJoinedCommunities = (channels: Channel[], leftChannels: string[]) => {
+  return channels.filter((item) => !leftChannels.includes(item.id));
+};
diff --git a/src/common/components/chats/utils/get-user-chat-public-key.ts b/src/common/components/chats/utils/get-user-chat-public-key.ts
new file mode 100644
index 00000000000..df9c056a671
--- /dev/null
+++ b/src/common/components/chats/utils/get-user-chat-public-key.ts
@@ -0,0 +1,10 @@
+import { getAccountFull } from "../../../api/hive";
+
+export const getUserChatPublicKey = async (username: string) => {
+  const response = await getAccountFull(username);
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+  const { nsKey } = profile || {};
+  console.log("nsKey", nsKey);
+  return nsKey;
+};
diff --git a/src/common/components/chats/utils/index.ts b/src/common/components/chats/utils/index.ts
new file mode 100644
index 00000000000..d1b52969366
--- /dev/null
+++ b/src/common/components/chats/utils/index.ts
@@ -0,0 +1,17 @@
+export * from "./fetch-profile-metadata";
+export * from "./delete-chat-public-key";
+export * from "./upload-chat-public-key";
+export * from "./upload-channel-data";
+export * from "./create-nostr-account";
+export * from "./format-message-time";
+export * from "./use-fetch-community-messages";
+export * from "./is-message-gif";
+export * from "./get-user-chat-public-key";
+export * from "./use-get-community-last-message";
+export * from "./use-get-direct-last-message";
+export * from "./formatted-user-name";
+export * from "./is-message-image";
+export * from "./get-chat-private-key";
+export * from "./get-joined-communities";
+export * from "./copy-to-clipboard";
+export * from "./use-fetch-direct-messages";
diff --git a/src/common/components/chats/utils/is-message-gif.ts b/src/common/components/chats/utils/is-message-gif.ts
new file mode 100644
index 00000000000..e3e2ee5b823
--- /dev/null
+++ b/src/common/components/chats/utils/is-message-gif.ts
@@ -0,0 +1,5 @@
+import { GIPHGY } from "../chat-popup/chat-constants";
+
+export const isMessageGif = (content: string) => {
+  return content.includes(GIPHGY);
+};
diff --git a/src/common/components/chats/utils/is-message-image.ts b/src/common/components/chats/utils/is-message-image.ts
new file mode 100644
index 00000000000..7fbd5b8025c
--- /dev/null
+++ b/src/common/components/chats/utils/is-message-image.ts
@@ -0,0 +1,3 @@
+export const isMessageImage = (content: string) => {
+  return content.includes("https://images.ecency.com");
+};
diff --git a/src/common/components/chats/utils/upload-channel-data.ts b/src/common/components/chats/utils/upload-channel-data.ts
new file mode 100644
index 00000000000..faf34365ff5
--- /dev/null
+++ b/src/common/components/chats/utils/upload-channel-data.ts
@@ -0,0 +1,20 @@
+import { Channel } from "../../../../providers/message-provider-types";
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+
+export const setChannelMetaData = (username: string, channel: Channel) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const response = await getAccountFull(username!);
+      const { posting_json_metadata } = response;
+      const profile = JSON.parse(posting_json_metadata!).profile;
+      const newProfile = {
+        channel: channel
+      };
+      const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+      resolve(updatedProfile);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
diff --git a/src/common/components/chats/utils/upload-chat-public-key.ts b/src/common/components/chats/utils/upload-chat-public-key.ts
new file mode 100644
index 00000000000..c407bb527fb
--- /dev/null
+++ b/src/common/components/chats/utils/upload-chat-public-key.ts
@@ -0,0 +1,16 @@
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+import { ActiveUser } from "../../../store/active-user/types";
+
+export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
+  const response = await getAccountFull(activeUser?.username!);
+
+  const { posting_json_metadata } = response;
+  const profile = JSON.parse(posting_json_metadata!).profile;
+  const newProfile = {
+    nsKey: noStrPubKey
+  };
+
+  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+  return updatedProfile;
+};
diff --git a/src/common/components/chats/utils/use-fetch-community-messages.ts b/src/common/components/chats/utils/use-fetch-community-messages.ts
new file mode 100644
index 00000000000..e490e5d828d
--- /dev/null
+++ b/src/common/components/chats/utils/use-fetch-community-messages.ts
@@ -0,0 +1,19 @@
+import { Channel } from "../../../../providers/message-provider-types";
+import { publicMessagesList } from "../../../store/chat/types";
+
+export const fetchCommunityMessages = (
+  publicMessages: publicMessagesList[],
+  currentChannel: Channel,
+  hiddenMessageIds?: string[]
+) => {
+  const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
+  for (const item of publicMessages) {
+    if (item.channelId === currentChannel.id) {
+      const filteredPublicMessages = Object.values(item.PublicMessage).filter(
+        (message) => !hideMessageIds.includes(message.id)
+      );
+      return filteredPublicMessages;
+    }
+  }
+  return [];
+};
diff --git a/src/common/components/chats/utils/use-fetch-direct-messages.ts b/src/common/components/chats/utils/use-fetch-direct-messages.ts
new file mode 100644
index 00000000000..189d930d98b
--- /dev/null
+++ b/src/common/components/chats/utils/use-fetch-direct-messages.ts
@@ -0,0 +1,10 @@
+import { directMessagesList } from "../../../store/chat/types";
+
+export const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
+  for (const item of directMessages) {
+    if (item.peer === peer) {
+      return Object.values(item.chat);
+    }
+  }
+  return [];
+};
diff --git a/src/common/components/chats/utils/use-get-community-last-message.ts b/src/common/components/chats/utils/use-get-community-last-message.ts
new file mode 100644
index 00000000000..24fea4b2ba9
--- /dev/null
+++ b/src/common/components/chats/utils/use-get-community-last-message.ts
@@ -0,0 +1,20 @@
+import { publicMessagesList } from "../../../store/chat/types";
+
+export const getCommunityLastMessage = (
+  channelId: string,
+  publicMessages: publicMessagesList[]
+) => {
+  const msgsList = fetchChannelMessages(channelId!, publicMessages);
+  const messages = msgsList.sort((a, b) => a.created - b.created);
+  const lastMessage = messages.slice(-1);
+  return lastMessage[0]?.content;
+};
+
+const fetchChannelMessages = (channelId: string, publicMessages: publicMessagesList[]) => {
+  for (const item of publicMessages) {
+    if (item.channelId === channelId) {
+      return Object.values(item.PublicMessage);
+    }
+  }
+  return [];
+};
diff --git a/src/common/components/chats/utils/use-get-direct-last-message.ts b/src/common/components/chats/utils/use-get-direct-last-message.ts
new file mode 100644
index 00000000000..0dc34b20514
--- /dev/null
+++ b/src/common/components/chats/utils/use-get-direct-last-message.ts
@@ -0,0 +1,17 @@
+import { directMessagesList } from "../../../store/chat/types";
+
+export const getDirectLastMessage = (pubkey: string, directMessages: directMessagesList[]) => {
+  const msgsList = fetchDirectMessages(pubkey, directMessages);
+  const messages = msgsList.sort((a, b) => a.created - b.created);
+  const lastMessage = messages.slice(-1);
+  return lastMessage[0]?.content;
+};
+
+const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
+  for (const item of directMessages) {
+    if (item.peer === peer) {
+      return Object.values(item.chat);
+    }
+  }
+  return [];
+};
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 4b5d92dbe9d..cd8d4bcb893 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -21,7 +21,7 @@ setProxyBase(defaults.imageServer);
 import BaseComponent from "../base";
 import SubscriptionBtn from "../subscription-btn";
 import CommunityPostBtn from "../community-post-btn";
-import JoinCommunityChatBtn from "../join-community-chat-btn";
+import JoinCommunityChatBtn from "../chats/join-community-chat-btn";
 import Tooltip from "../tooltip";
 import ImageUploadDialog from "../image-upload";
 
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 70e55b5263e..0a0c478a5bc 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -4,7 +4,7 @@ import { FormControl } from "react-bootstrap";
 
 import BaseComponent from "../base";
 import SearchBox from "../search-box";
-import { EmojiPickerStyleProps } from "../../components/chat-box";
+import { EmojiPickerStyleProps } from "../chats/chat-popup";
 
 import { _t } from "../../i18n";
 
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 6abd54bf919..0c770316cea 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -36,7 +36,7 @@ import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission, revokePostingPermission } from "../../api/operations";
 
 import { getRefreshToken } from "../../helper/user-token";
-import { getPrivateKey, getProfileMetaData } from "../../helper/chat-utils";
+import { getPrivateKey, getProfileMetaData } from "../../components/chats/utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 
diff --git a/src/common/helper/chat-utils.ts b/src/common/helper/chat-utils.ts
deleted file mode 100644
index 33234075bb3..00000000000
--- a/src/common/helper/chat-utils.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import moment from "moment";
-import { generatePrivateKey, getPublicKey } from "../../lib/nostr-tools/keys";
-import {
-  Channel,
-  DirectMessage,
-  Profile,
-  PublicMessage
-} from "../../providers/message-provider-types";
-import { getAccountFull } from "../api/hive";
-import { updateProfile } from "../api/operations";
-import { GIPHGY } from "../components/chat-box/chat-constants";
-import { ActiveUser } from "../store/active-user/types";
-import { Chat, directMessagesList, publicMessagesList } from "../store/chat/types";
-import * as ls from "../util/local-storage";
-
-export interface NostrKeysType {
-  pub: string;
-  priv: string;
-}
-
-export const getProfileMetaData = async (username: string) => {
-  const response = await getAccountFull(username);
-  const { posting_json_metadata } = response;
-  if (posting_json_metadata) {
-    const profile = JSON.parse(posting_json_metadata!).profile;
-
-    return profile;
-  }
-};
-
-export const resetProfile = (activeUser: ActiveUser | null) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const profile = await getProfileMetaData(activeUser?.username!);
-      delete profile.nsKey;
-      delete profile.channel;
-      ls.remove(`${activeUser?.username}_nsPrivKey`);
-      const response = await getAccountFull(activeUser?.username!);
-      const updatedProfile = await updateProfile(response, { ...profile });
-      console.log("Updated profile", updatedProfile);
-      resolve(updatedProfile);
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
-
-export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
-  const response = await getAccountFull(activeUser?.username!);
-
-  const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
-  const newProfile = {
-    nsKey: noStrPubKey
-  };
-
-  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-  return updatedProfile;
-};
-
-export const setChannelMetaData = (username: string, channel: Channel) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const response = await getAccountFull(username!);
-      const { posting_json_metadata } = response;
-      const profile = JSON.parse(posting_json_metadata!).profile;
-      const newProfile = {
-        channel: channel
-      };
-      const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-      resolve(updatedProfile);
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
-
-export const createNoStrAccount = () => {
-  const priv = generatePrivateKey();
-  const pub = getPublicKey(priv);
-  return { pub, priv };
-};
-
-export function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
-  return value !== null && value !== undefined;
-}
-
-export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
-
-export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
-
-export const isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
-
-export const getCommunities = (channels: Channel[], leftChannels: string[]) => {
-  return channels.filter((item) => !leftChannels.includes(item.id));
-};
-
-export const getPrivateKey = (username: string) => {
-  return ls.get(`${username}_nsPrivKey`);
-};
-
-export const formatFollowers = (count: number | undefined) => {
-  if (count) {
-    return count >= 1e6
-      ? (count / 1e6).toLocaleString() + "M"
-      : count >= 1e3
-      ? (count / 1e3).toLocaleString() + "K"
-      : count.toLocaleString();
-  }
-  return count;
-};
-
-export const formattedName = (username: string, chat: Chat) => {
-  if (username && !username.startsWith("@")) {
-    const community = chat.channels.find((channel) => channel.communityName === username);
-    if (community) {
-      return community.name;
-    }
-  }
-  const replacedUserName = username.replace("@", "");
-  return replacedUserName;
-};
-
-export const formattedUserName = (username: string) => {
-  if (username && username.startsWith("@")) {
-    return username.replace("@", "");
-  }
-  return username;
-};
-
-export const isChannel = (username: string) => {
-  if (username.startsWith("@")) {
-    return false;
-  }
-  return true;
-};
-
-export const fetchCommunityMessages = (
-  publicMessages: publicMessagesList[],
-  currentChannel: Channel,
-  hiddenMessageIds?: string[]
-) => {
-  const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
-  for (const item of publicMessages) {
-    if (item.channelId === currentChannel.id) {
-      const filteredPublicMessages = Object.values(item.PublicMessage).filter(
-        (message) => !hideMessageIds.includes(message.id)
-      );
-      return filteredPublicMessages;
-    }
-  }
-  return [];
-};
-
-export const isMessageGif = (content: string) => {
-  return content.includes(GIPHGY);
-};
-
-export const isMessageImage = (content: string) => {
-  return content.includes("https://images.ecency.com");
-};
-
-export const getProfileName = (creator: string, profiles: Profile[]) => {
-  const profile = profiles.find((x) => x.creator === creator);
-  return profile?.name;
-};
-
-export const getFormattedDateAndDay = (
-  msg: DirectMessage | PublicMessage,
-  i: number,
-  messagesList: DirectMessage[] | PublicMessage[]
-) => {
-  const prevMsg = messagesList[i - 1];
-  const msgDate = formatMessageDate(msg.created);
-  const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-  if (msgDate !== prevMsgDate) {
-    return msgDate;
-  }
-  return null;
-};
-
-export const fetchCurrentUserData = async (username: string) => {
-  const response = await getAccountFull(username);
-  const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
-  const { nsKey } = profile || {};
-  console.log("nsKey", nsKey);
-  return nsKey;
-};
-
-export const copyToClipboard = (content: string) => {
-  console.log("copy to clipboard run");
-  const textField = document.createElement("textarea");
-  textField.innerText = content;
-  document.body.appendChild(textField);
-  textField.select();
-  document.execCommand("copy");
-  textField.remove();
-};
-
-export const getCommunityLastMessage = (
-  channelId: string,
-  publicMessages: publicMessagesList[]
-) => {
-  const msgsList = fetchChannelMessages(channelId!, publicMessages);
-  const messages = msgsList.sort((a, b) => a.created - b.created);
-  const lastMessage = messages.slice(-1);
-  return lastMessage[0]?.content;
-};
-
-export const fetchChannelMessages = (channelId: string, publicMessages: publicMessagesList[]) => {
-  for (const item of publicMessages) {
-    if (item.channelId === channelId) {
-      return Object.values(item.PublicMessage);
-    }
-  }
-  return [];
-};
-
-export const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
-  for (const item of directMessages) {
-    if (item.peer === peer) {
-      return Object.values(item.chat);
-    }
-  }
-  return [];
-};
-
-export const getDirectLastMessage = (pubkey: string, directMessages: directMessagesList[]) => {
-  const msgsList = fetchDirectMessages(pubkey, directMessages);
-  const messages = msgsList.sort((a, b) => a.created - b.created);
-  const lastMessage = messages.slice(-1);
-  return lastMessage[0]?.content;
-};
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index ff85f7b6338..db9015710ad 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -15,7 +15,6 @@ import {
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
 import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
-import { isSha256, notEmpty } from "./chat-utils";
 
 const relays = {
   "wss://relay1.nostrchat.io": { read: true, write: true },
@@ -152,7 +151,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
               return undefined;
             })
             .filter((x) => !deletions.includes(x))
-            .filter(notEmpty)
+            .filter(MessageService.notEmpty)
         )
       );
       if (channels.length !== 0) {
@@ -183,7 +182,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             const root = eTags.find((x) => x[3] === "root")?.[1];
             const mentions = MessageService.filterTagValue(ev, "p")
               .map((x) => x?.[1])
-              .filter(notEmpty);
+              .filter(MessageService.notEmpty);
             if (!root) return null;
             return ev.content
               ? {
@@ -197,7 +196,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
                 }
               : null;
           })
-          .filter(notEmpty);
+          .filter(MessageService.notEmpty);
         this.emit(MessageEvents.PreviousPublicMessages, formattedEvents);
       }
 
@@ -460,7 +459,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     const root = eTags.find((x) => x[3] === "root")?.[1];
     const mentions = MessageService.filterTagValue(event, "p")
       .map((x) => x?.[1])
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
     const formattedEvent = event.content
       ? {
           id: event.id,
@@ -641,7 +640,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         const profiles: Array<[string, string]> = e.tags;
         return profiles.map(([pubkey, name]) => ({ pubkey, name }));
       })
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
 
     if (directContacts.length > 0) {
       const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
@@ -664,7 +663,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             }
           : null;
       })
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
     if (profileUpdates.length > 0) {
       this.emit(MessageEvents.ProfileUpdate, profileUpdates);
     }
@@ -679,7 +678,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 
     if (leftChannelListEv) {
       const content = MessageService.parseJson(leftChannelListEv.content);
-      if (Array.isArray(content) && content.every((x) => isSha256(x))) {
+      if (Array.isArray(content) && content.every((x) => MessageService.isSha256(x))) {
         this.emit(MessageEvents.LeftChannelList, content);
       }
     }
@@ -701,7 +700,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             }
           : null;
       })
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
     if (channelCreations.length > 0) {
       this.emit(MessageEvents.ChannelCreation, channelCreations);
     }
@@ -726,7 +725,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             }
           : null;
       })
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
     if (channelUpdates.length > 0) {
       this.emit(MessageEvents.ChannelUpdate, channelUpdates);
     }
@@ -738,7 +737,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         const root = eTags.find((x) => x[3] === "root")?.[1];
         const mentions = MessageService.filterTagValue(ev, "p")
           .map((x) => x?.[1])
-          .filter(notEmpty);
+          .filter(MessageService.notEmpty);
         if (!root) return null;
         return ev.content
           ? {
@@ -752,7 +751,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             }
           : null;
       })
-      .filter(notEmpty);
+      .filter(MessageService.notEmpty);
     if (publicMessages.length > 0) {
       this.emit(MessageEvents.PublicMessageAfterSent, publicMessages);
     }
@@ -790,7 +789,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
             };
           });
         })
-        .filter(notEmpty)
+        .filter(MessageService.notEmpty)
     ).then((directMessages: DirectMessage[]) => {
       if (directMessages.length > 0) {
         this.emit(MessageEvents.DirectMessageAfterSent, directMessages);
@@ -822,6 +821,12 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     }
   }
 
+  static isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
+
+  static notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+    return value !== null && value !== undefined;
+  }
+
   static findTagValue(ev: Event, tag: "e" | "p" | "d") {
     return ev.tags.find(([t]) => t === tag)?.[1];
   }
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
index 58b1e9b3d87..43c87a713fa 100644
--- a/src/common/pages/chats/index.scss
+++ b/src/common/pages/chats/index.scss
@@ -8,9 +8,9 @@
     width: 100vw;
     height: 100vh;
   }
-    .chats-messages-box {
-      .private-key {
-        margin-top: 4.5rem;
-      }
+  .chats-messages-box {
+    .private-key {
+      margin-top: 4.5rem;
     }
+  }
 }
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index d13bc9674c6..6fa1fb3de06 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -1,28 +1,28 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { match } from "react-router";
-
 import NavBar from "../../components/navbar";
 import NavBarElectron from "../../../desktop/app/components/navbar";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
-import ChatsSideBar from "../../components/chats-sidebar/indes";
-import ChatsMessagesBox from "../../components/chats-messages-box";
+import ChatsSideBar from "../../components/chats/chats-sidebar/indes";
+import ChatsMessagesBox from "../../components/chats/chats-messages-box";
 
 import "./index.scss";
 
 import * as ls from "../../util/local-storage";
+import { Button, Spinner } from "react-bootstrap";
+import { setNostrkeys } from "../../../providers/message-provider";
+import ManageChatKey from "../../components/manage-chat-key";
+import Feedback, { success } from "../../components/feedback";
+import { NostrKeysType } from "../../components/chats/types";
 import {
   copyToClipboard,
   createNoStrAccount,
   getPrivateKey,
   getProfileMetaData,
-  NostrKeysType,
   setProfileMetaData
-} from "../../helper/chat-utils";
-import { Button, Spinner } from "react-bootstrap";
-import { setNostrkeys } from "../../../providers/message-provider";
-import ManageChatKey from "../../components/manage-chat-key";
-import Feedback, { success } from "../../components/feedback";
+} from "../../components/chats/utils";
+import { useMappedStore } from "../../store/use-mapped-store";
 
 interface MatchParams {
   filter: string;
@@ -37,7 +37,8 @@ interface Props extends PageProps {
 }
 
 export const Chats = (props: Props) => {
-  const { channels, directContacts } = props.chat;
+  const { chat, activeUser, global } = useMappedStore();
+  const { channels, directContacts } = chat;
 
   const [marginTop, setMarginTop] = useState(0);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
@@ -61,7 +62,7 @@ export const Chats = (props: Props) => {
   useEffect(() => {
     handleResize();
     getActiveUserChatKeys();
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
   }, []);
 
@@ -93,8 +94,8 @@ export const Chats = (props: Props) => {
 
   const getActiveUserChatKeys = async () => {
     setInProgress(true);
-    const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const profileData = await getProfileMetaData(activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     const activeUserKeys = {
       pub: profileData?.nsKey,
       priv: noStrPrivKey
@@ -115,13 +116,13 @@ export const Chats = (props: Props) => {
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
-    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
     setNoStrPrivKey(keys.priv);
-    await setProfileMetaData(props.activeUser, keys.pub);
+    await setProfileMetaData(activeUser, keys.pub);
     // setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.messageService?.updateProfile({
-      name: props.activeUser?.username!,
+      name: activeUser?.username!,
       about: "",
       picture: ""
     });
@@ -136,8 +137,8 @@ export const Chats = (props: Props) => {
 
   return (
     <>
-      <Feedback activeUser={props.activeUser} />
-      {props.global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+      <Feedback activeUser={activeUser} />
+      {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
       <div
         style={{ marginTop: marginTop }}
         className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
@@ -153,8 +154,6 @@ export const Chats = (props: Props) => {
                 <>
                   <ChatsSideBar
                     {...props}
-                    channels={channels}
-                    directContacts={directContacts}
                     activeUserKeys={activeUserKeys}
                     inProgressSetter={inProgressSetter}
                     revealPrivateKeySetter={revealPrivateKeySetter}
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index ecde9a4d210..95b52b6cdb9 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -7,6 +7,12 @@ import { EntryFilter, ListStyle } from "../store/global/types";
 import { Channel } from "../../providers/message-provider-types";
 import { usePrevious } from "../util/use-previous";
 import * as ls from "../util/local-storage";
+import {
+  createNoStrAccount,
+  getJoinedCommunities,
+  getProfileMetaData,
+  setProfileMetaData
+} from "../components/chats/utils";
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -14,7 +20,7 @@ import ScrollToTop from "../components/scroll-to-top";
 import Theme from "../components/theme";
 import Feedback from "../components/feedback";
 import defaults from "../constants/defaults.json";
-import { NOSTRKEY } from "../components/chat-box/chat-constants";
+import { NOSTRKEY } from "../components/chats/chat-popup/chat-constants";
 import CommunitySubscribers from "../components/community-subscribers";
 import CommunityActivities from "../components/community-activities";
 import LinearProgress from "../components/linear-progress";
@@ -39,12 +45,6 @@ import { withPersistentScroll } from "../components/with-persistent-scroll";
 import "./community.scss";
 import { Button, Modal } from "react-bootstrap";
 import LoginRequired from "../components/login-required";
-import {
-  createNoStrAccount,
-  getCommunities,
-  getProfileMetaData,
-  setProfileMetaData
-} from "../helper/chat-utils";
 import { useMappedStore } from "../store/use-mapped-store";
 import { setNostrkeys } from "../../providers/message-provider";
 import { QueryIdentifiers, useCommunityCache } from "../core";
@@ -92,7 +92,7 @@ export const CommunityPage = (props: Props) => {
   }, [props.activeUser]);
 
   useEffect(() => {
-    const communities = getCommunities(chat.channels, chat.leftChannelsList);
+    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
     setCommunities(communities);
   }, [chat.channels, chat.leftChannelsList]);
 
diff --git a/src/providers/message-provider.tsx b/src/providers/message-provider.tsx
index ae00c1f05fb..e48f53ad964 100644
--- a/src/providers/message-provider.tsx
+++ b/src/providers/message-provider.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
 import { DirectContactsType } from "../common/store/chat/types";
+import { NostrKeysType } from "../common/components/chats/types";
 import {
   DirectMessage,
   Profile,
@@ -14,7 +15,7 @@ import {
 } from "./message-provider-types";
 
 import { initMessageService, MessageEvents } from "../common/helper/message-service";
-import { getProfileMetaData, NostrKeysType, getPrivateKey } from "../common/helper/chat-utils";
+import { getProfileMetaData, getPrivateKey } from "../common/components/chats/utils";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
 

From 9cf6ffd133b8d78c6d74f105d83bcb28d33bac9f Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 7 Sep 2023 14:53:41 +0500
Subject: [PATCH 055/179] Context implemented for extended chat page

---
 src/common/components/chats/chat-provider.tsx |  89 +++++++
 .../chats/chats-messages-box/index.tsx        |   7 +-
 .../components/chats/chats-sidebar/indes.tsx  | 146 ++---------
 .../components/manage-chat-key/index.tsx      |  24 +-
 src/common/pages/chats/index.tsx              | 241 ++++++++++--------
 5 files changed, 257 insertions(+), 250 deletions(-)
 create mode 100644 src/common/components/chats/chat-provider.tsx

diff --git a/src/common/components/chats/chat-provider.tsx b/src/common/components/chats/chat-provider.tsx
new file mode 100644
index 00000000000..c3e96ca4c66
--- /dev/null
+++ b/src/common/components/chats/chat-provider.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { NostrKeysType } from "./types";
+import { getPrivateKey, getUserChatPublicKey } from "./utils";
+
+interface Context {
+  activeUserKeys?: NostrKeysType;
+  inProgress: boolean;
+  revealPrivKey: boolean;
+  chatPrivKey: string;
+  setRevealPrivKey: (d: boolean) => void;
+  setInProgress: (d: boolean) => void;
+  setChatPrivKey: (key: string) => void;
+  setActiveUserKeys: (keys: NostrKeysType) => void;
+}
+
+interface ChatProviderProps {
+  children: (context: Context) => React.ReactNode;
+}
+
+export const ChatContext = React.createContext<Context>({
+  activeUserKeys: { pub: " ", priv: "" },
+  inProgress: false,
+  revealPrivKey: false,
+  chatPrivKey: "",
+  setRevealPrivKey: () => {},
+  setInProgress: () => {},
+  setChatPrivKey: () => {},
+  setActiveUserKeys: () => {}
+});
+
+export default function ChatProvider({ children }: ChatProviderProps) {
+  const { activeUser } = useMappedStore();
+
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
+  const [inProgress, setInProgress] = useState(true);
+  const [chatPrivKey, setChatPrivKey] = useState("");
+  const [revealPrivKey, setRevealPrivKey] = useState(false);
+
+  useEffect(() => {
+    getActiveUserKeys();
+  }, []);
+
+  useEffect(() => {
+    if (inProgress) {
+      setTimeout(() => {
+        setInProgress(false);
+      }, 7000);
+    }
+  }, [inProgress]);
+
+  const getActiveUserKeys = async () => {
+    const pubKey = await getUserChatPublicKey(activeUser?.username!);
+    const privKey = getPrivateKey(activeUser?.username!);
+    setChatPrivKey(privKey);
+    const activeUserKeys = {
+      pub: pubKey,
+      priv: privKey
+    };
+    setInProgress(false);
+    setActiveUserKeys(activeUserKeys);
+  };
+
+  return (
+    <ChatContext.Provider
+      value={{
+        activeUserKeys,
+        inProgress,
+        revealPrivKey,
+        chatPrivKey,
+        setRevealPrivKey,
+        setInProgress,
+        setChatPrivKey,
+        setActiveUserKeys
+      }}
+    >
+      {children({
+        activeUserKeys,
+        inProgress,
+        revealPrivKey,
+        chatPrivKey,
+        setRevealPrivKey,
+        setInProgress,
+        setChatPrivKey,
+        setActiveUserKeys
+      })}
+    </ChatContext.Provider>
+  );
+}
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 1f320527604..7b0bf280dfd 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
 import { Account } from "../../../store/accounts/types";
@@ -13,6 +13,7 @@ import LinearProgress from "../../linear-progress";
 import { NostrKeysType } from "../types";
 import { formattedUserName } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-provider";
 
 interface MatchParams {
   filter: string;
@@ -27,7 +28,6 @@ interface Props {
   users: User[];
   history: History | null;
   ui: UI;
-  activeUserKeys: NostrKeysType;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
@@ -36,7 +36,10 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
+  const context = useContext(ChatContext);
+  const { activeUserKeys } = context;
   const { activeUser, chat } = useMappedStore();
+
   const { channels, updatedChannel } = chat;
   const { match, deletePublicMessage } = props;
   const username = match.params.username;
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index ffa213f8dcc..516f9d481e2 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { History } from "history";
@@ -23,6 +23,7 @@ import { CHAT, DropDownStyle } from "../chat-popup/chat-constants";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { AccountWithReputation, NostrKeysType } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-provider";
 
 interface MatchParams {
   filter: string;
@@ -33,36 +34,23 @@ interface MatchParams {
 }
 interface Props {
   match: match<MatchParams>;
-  // channels: Channel[];
-  // directContacts: DirectContactsType[];
-  activeUserKeys: NostrKeysType;
-  chatPrivKey: string;
-  // chat: Chat;
   history: History;
-  revelPrivateKey: boolean;
-  inProgressSetter: (d: boolean) => void;
-  revealPrivateKeySetter: (d: boolean) => void;
   resetChat: () => void;
 }
 export default function ChatsSideBar(props: Props) {
   const { chat } = useMappedStore();
+  const context = useContext(ChatContext);
   const { channels, directContacts, leftChannelsList } = chat;
-  const {
-    activeUserKeys,
-    match,
-    revelPrivateKey,
-    chatPrivKey,
-    resetChat,
-    inProgressSetter,
-    revealPrivateKeySetter
-  } = props;
+  const { match, resetChat } = props;
+
+  const { activeUserKeys, revealPrivKey, chatPrivKey, setInProgress, setRevealPrivKey } = context;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
   const username = match.params.username;
 
   const [showDivider, setShowDivider] = useState(false);
   const [searchText, setSearchText] = useState("");
-  const [inProgress, setInProgress] = useState(false);
+  const [searchInProgress, setSearchInProgress] = useState(false);
   const [userList, setUserList] = useState<AccountWithReputation[]>([]);
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [communities, setCommunities] = useState<Channel[]>([]);
@@ -73,7 +61,7 @@ export default function ChatsSideBar(props: Props) {
         const resp = await getAccountReputations(searchText, 30);
         const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
         setUserList(sortedByReputation);
-        setInProgress(false);
+        setSearchInProgress(false);
       }
     },
     500,
@@ -92,104 +80,6 @@ export default function ChatsSideBar(props: Props) {
     // fetchProfileData();
   }, [channels, leftChannelsList]);
 
-  // const communities = [
-  //   {
-  //     id: "dewf3efq3",
-  //     name: "Best Community"
-  //   },
-  //   {
-  //     id: "kefkjehdewjk",
-  //     name: "Cars Forum"
-  //   },
-  //   {
-  //     id: "hj3fhkl3flk",
-  //     name: "Hive BlockChaiin"
-  //   },
-  //   {
-  //     id: "dewddefq3",
-  //     name: "Devsinc"
-  //   },
-  //   {
-  //     id: "kefksahdewjk",
-  //     name: "Rolustech"
-  //   },
-  //   {
-  //     id: "hj3fdl3flk",
-  //     name: "Stack Overflow"
-  //   },
-  //   {
-  //     id: "kefkjehdsewjk",
-  //     name: "Cars Forum"
-  //   },
-  //   {
-  //     id: "hj3fhkls3flk",
-  //     name: "Hive BlockChain"
-  //   },
-  //   {
-  //     id: "dewddesfq3",
-  //     name: "Devsinc"
-  //   },
-  //   {
-  //     id: "kefksahsdewjk",
-  //     name: "Rolustech"
-  //   },
-  //   {
-  //     id: "hj3fdls3flk",
-  //     name: "Stack Overflow"
-  //   }
-  // ];
-
-  const DMS = [
-    {
-      id: "dewf3efq3",
-      name: "ahmed"
-    },
-    {
-      id: "kefkjehdewjk",
-      name: "hive-189310"
-    },
-    {
-      id: "hj3fhkl3flk",
-      name: "demo.com"
-    },
-    {
-      id: "dewddefq3",
-      name: "good-karma"
-    },
-    {
-      id: "kefksahdewjk",
-      name: "mtsaeed"
-    },
-    {
-      id: "hj3fdl3flk",
-      name: "testers"
-    },
-    {
-      id: "dewf3sefq3",
-      name: "ahmed"
-    },
-    {
-      id: "kefkjeshdewjk",
-      name: "hive-189310"
-    },
-    {
-      id: "hj3fhskl3flk",
-      name: "demo.com"
-    },
-    {
-      id: "dewddesfq3",
-      name: "good-karma"
-    },
-    {
-      id: "kefksashdewjk",
-      name: "mtsaeed"
-    },
-    {
-      id: "hj3fdsl3flk",
-      name: "hive-198973"
-    }
-  ];
-
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     console.log("element.scrollTop", element.scrollTop);
@@ -207,13 +97,13 @@ export default function ChatsSideBar(props: Props) {
 
   const handleRefreshChat = () => {
     resetChat();
-    setNostrkeys(activeUserKeys);
-    inProgressSetter(true);
+    setNostrkeys(activeUserKeys!);
+    setInProgress(true);
   };
 
   const handleRevealPrivKey = () => {
-    if (revelPrivateKey) {
-      revealPrivateKeySetter(false);
+    if (revealPrivKey) {
+      setRevealPrivKey(false);
     }
   };
 
@@ -221,11 +111,11 @@ export default function ChatsSideBar(props: Props) {
     <div className="chats-sidebar">
       <div className="d-flex justify-content-between chats-title">
         <div className="d-flex chats-content">
-          {revelPrivateKey && (
+          {revealPrivKey && (
             <Tooltip content={_t("chat.back")}>
               <div
                 className="back-arrow-image d-flex justify-content-center align-items-center"
-                onClick={() => revealPrivateKeySetter(false)}
+                onClick={() => setRevealPrivKey(false)}
               >
                 <span className="back-arrow-svg"> {arrowBackSvg}</span>
               </div>
@@ -247,7 +137,7 @@ export default function ChatsSideBar(props: Props) {
             <div className="chat-menu">
               <ChatsDropdownMenu
                 onManageChatKey={() => {
-                  revealPrivateKeySetter(!revelPrivateKey);
+                  setRevealPrivKey(!revealPrivKey);
                 }}
                 {...props}
               />
@@ -263,9 +153,9 @@ export default function ChatsSideBar(props: Props) {
             value={searchText}
             onChange={(e) => {
               setSearchText(e.target.value);
-              setInProgress(true);
+              setSearchInProgress(true);
               if (e.target.value.length === 0) {
-                setInProgress(false);
+                setSearchInProgress(false);
                 setUserList([]);
               }
             }}
@@ -273,7 +163,7 @@ export default function ChatsSideBar(props: Props) {
         </Form.Group>
       </div>
       {showDivider && <div className="divider" />}
-      {inProgress && <LinearProgress />}
+      {searchInProgress && <LinearProgress />}
       <div className="chats-list" onScroll={handleScroll} ref={chatsSideBarRef}>
         {searchText ? (
           <div className="searched-users">
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index d0720c122df..9b68d64ec26 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -1,19 +1,25 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Form } from "react-bootstrap";
 import { _t } from "../../i18n";
 import { copyContent } from "../../img/svg";
+import { ChatContext } from "../chats/chat-provider";
+import { copyToClipboard } from "../chats/utils";
+import { success } from "../feedback";
 import OrDivider from "../or-divider";
 import Tooltip from "../tooltip";
 
 import "./index.scss";
 
-interface Props {
-  noStrPrivKey: string;
-  copyPrivateKey: (privKey: string) => void;
-}
+export default function ManageChatKey() {
+  const context = useContext(ChatContext);
+
+  const { chatPrivKey } = context;
+
+  const copyPrivateKey = () => {
+    copyToClipboard(chatPrivKey);
+    success("Key copied into clipboad");
+  };
 
-export default function ManageChatKey(props: Props) {
-  console.log("hello", props);
   return (
     <>
       <div className="manage-chat-key">
@@ -25,14 +31,14 @@ export default function ManageChatKey(props: Props) {
                 className="chat-priv-key"
                 type="text"
                 readOnly={true}
-                value={props.noStrPrivKey}
+                value={chatPrivKey}
               />
               <Tooltip content={_t("chat.copy-priv-key")}>
                 <p
                   className="copy-svg"
                   onClick={() => {
                     console.log("SVG clicked");
-                    props.copyPrivateKey(props.noStrPrivKey);
+                    copyPrivateKey();
                   }}
                 >
                   {copyContent}
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 6fa1fb3de06..7e84c8e0d3a 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { match } from "react-router";
 import NavBar from "../../components/navbar";
@@ -23,6 +23,7 @@ import {
   setProfileMetaData
 } from "../../components/chats/utils";
 import { useMappedStore } from "../../store/use-mapped-store";
+import ChatProvider, { ChatContext } from "../../components/chats/chat-provider";
 
 interface MatchParams {
   filter: string;
@@ -37,15 +38,13 @@ interface Props extends PageProps {
 }
 
 export const Chats = (props: Props) => {
-  const { chat, activeUser, global } = useMappedStore();
-  const { channels, directContacts } = chat;
+  const { activeUser, global } = useMappedStore();
+
+  const context = useContext(ChatContext);
+  const { setChatPrivKey, setActiveUserKeys } = context;
 
   const [marginTop, setMarginTop] = useState(0);
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
-  const [inProgrss, setInProgress] = useState(true);
   const [showSpinner, setShowSpinner] = useState(false);
-  const [noStrPrivKey, setNoStrPrivKey] = useState("");
-  const [revelPrivateKey, setRevealPrivateKey] = useState(false);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -55,21 +54,10 @@ export const Chats = (props: Props) => {
     };
   }, []);
 
-  useEffect(() => {
-    console.log("noStrPrivKey", noStrPrivKey);
-  }, [noStrPrivKey]);
-
   useEffect(() => {
     handleResize();
-    getActiveUserChatKeys();
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    setNoStrPrivKey(noStrPrivKey);
   }, []);
 
-  useEffect(() => {
-    setInProgress(false);
-  }, [activeUserKeys]);
-
   useEffect(() => {
     window.addEventListener("resize", handleResize);
     return () => {
@@ -77,14 +65,6 @@ export const Chats = (props: Props) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (inProgrss) {
-      setTimeout(() => {
-        setInProgress(false);
-      }, 7000);
-    }
-  }, [inProgrss]);
-
   const handleResize = () => {
     const parentElemet = document.getElementById("sticky-container")?.getBoundingClientRect();
     if (parentElemet) {
@@ -92,34 +72,14 @@ export const Chats = (props: Props) => {
     }
   };
 
-  const getActiveUserChatKeys = async () => {
-    setInProgress(true);
-    const profileData = await getProfileMetaData(activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    const activeUserKeys = {
-      pub: profileData?.nsKey,
-      priv: noStrPrivKey
-    };
-    setActiveUserKeys(activeUserKeys);
-  };
-
-  const inProgressSetter = (d: boolean) => {
-    setInProgress(d);
-  };
-
-  const revealPrivateKeySetter = (d: boolean) => {
-    setRevealPrivateKey(d);
-  };
-
   const handleJoinChat = async () => {
     const { resetChat } = props;
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
     ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    setNoStrPrivKey(keys.priv);
+    setChatPrivKey(keys.priv);
     await setProfileMetaData(activeUser, keys.pub);
-    // setHasUserJoinedChat(true);
     setNostrkeys(keys);
     window.messageService?.updateProfile({
       name: activeUser?.username!,
@@ -130,74 +90,133 @@ export const Chats = (props: Props) => {
     setShowSpinner(false);
   };
 
-  const copyPrivateKey = () => {
-    copyToClipboard(noStrPrivKey);
-    success("Key copied into clipboad");
-  };
-
+  // return (
+  //   <>
+  //   <ChatProvider>
+  //     <Feedback activeUser={activeUser} />
+  //     {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+  //     <div
+  //       style={{ marginTop: marginTop }}
+  //       className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
+  //     >
+  //       {inProgrss ? (
+  //         <div className="d-flex justify-content-center align-items-center full-page">
+  //           <Spinner animation="border" variant="primary" />
+  //         </div>
+  //       ) : (
+  //         <>
+  //           {activeUserKeys?.pub ? (
+  //             chatPrivKey ? (
+  //               <>
+  //                 <ChatsSideBar
+  //                   {...props}
+  //                   activeUserKeys={activeUserKeys}
+  //                   inProgressSetter={inProgressSetter}
+  //                   revealPrivateKeySetter={revealPrivateKeySetter}
+  //                   revelPrivateKey={revelPrivateKey}
+  //                   chatPrivKey={chatPrivKey}
+  //                 />
+  //                 {revelPrivateKey ? (
+  //                   <div className="chats-messages-box">
+  //                     <ManageChatKey noStrPrivKey={chatPrivKey} copyPrivateKey={copyPrivateKey} />
+  //                   </div>
+  //                 ) : (
+  //                   //if any person has not joined any community then how can he see its message. handle this thing here.
+  //                   <ChatsMessagesBox
+  //                     {...props}
+  //                     activeUserKeys={activeUserKeys}
+  //                     deletePublicMessage={props.deletePublicMessage}
+  //                   />
+  //                 )}
+  //               </>
+  //             ) : (
+  //               <h2>No private key</h2>
+  //             )
+  //           ) : (
+  //             <div className="d-flex justify-content-center align-items-center full-page">
+  //               <div className="no-chat text-center">
+  //                 <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
+  //                 <Button onClick={handleJoinChat}>
+  //                   {showSpinner && (
+  //                     <Spinner
+  //                       animation="grow"
+  //                       variant="light"
+  //                       size="sm"
+  //                       style={{ marginRight: "6px" }}
+  //                     />
+  //                   )}
+  //                   Join Chat
+  //                 </Button>
+  //               </div>
+  //             </div>
+  //           )}
+  //         </>
+  //       )}
+  //     </div>
+  //     </ChatProvider>
+  //   </>
+  // );
   return (
-    <>
-      <Feedback activeUser={activeUser} />
-      {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
-      <div
-        style={{ marginTop: marginTop }}
-        className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
-      >
-        {inProgrss ? (
-          <div className="d-flex justify-content-center align-items-center full-page">
-            <Spinner animation="border" variant="primary" />
-          </div>
-        ) : (
-          <>
-            {activeUserKeys?.pub ? (
-              noStrPrivKey ? (
-                <>
-                  <ChatsSideBar
-                    {...props}
-                    activeUserKeys={activeUserKeys}
-                    inProgressSetter={inProgressSetter}
-                    revealPrivateKeySetter={revealPrivateKeySetter}
-                    revelPrivateKey={revelPrivateKey}
-                    chatPrivKey={noStrPrivKey}
-                  />
-                  {revelPrivateKey ? (
-                    <div className="chats-messages-box">
-                      <ManageChatKey noStrPrivKey={noStrPrivKey} copyPrivateKey={copyPrivateKey} />
-                    </div>
-                  ) : (
-                    //if any person has not joined any community then how can he see its message. handle this thing here.
-                    <ChatsMessagesBox
-                      {...props}
-                      activeUserKeys={activeUserKeys}
-                      deletePublicMessage={props.deletePublicMessage}
-                    />
-                  )}
-                </>
-              ) : (
-                <h2>No private key</h2>
-              )
-            ) : (
+    <ChatProvider>
+      {(context) => (
+        <>
+          <Feedback activeUser={activeUser} />
+          {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+          <div
+            style={{ marginTop: marginTop }}
+            className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
+          >
+            {context.inProgress ? (
               <div className="d-flex justify-content-center align-items-center full-page">
-                <div className="no-chat text-center">
-                  <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
-                  <Button onClick={handleJoinChat}>
-                    {showSpinner && (
-                      <Spinner
-                        animation="grow"
-                        variant="light"
-                        size="sm"
-                        style={{ marginRight: "6px" }}
-                      />
-                    )}
-                    Join Chat
-                  </Button>
-                </div>
+                <Spinner animation="border" variant="primary" />
               </div>
+            ) : (
+              <>
+                {context.activeUserKeys?.pub ? (
+                  context.chatPrivKey ? (
+                    <>
+                      <ChatsSideBar {...props} />
+                      {context.revealPrivKey ? (
+                        <div className="chats-messages-box">
+                          <ManageChatKey />
+                        </div>
+                      ) : (
+                        // Handle the case when the user hasn't joined any community here
+                        <ChatsMessagesBox
+                          {...props}
+                          deletePublicMessage={props.deletePublicMessage}
+                        />
+                      )}
+                    </>
+                  ) : (
+                    <h2>No private key</h2>
+                  )
+                ) : (
+                  <div className="d-flex justify-content-center align-items-center full-page">
+                    <div className="no-chat text-center">
+                      <p>
+                        You haven't joined the chat yet. Please join the chat to start chatting.
+                      </p>
+                      <Button onClick={handleJoinChat}>
+                        {showSpinner && (
+                          <Spinner
+                            animation="grow"
+                            variant="light"
+                            size="sm"
+                            style={{ marginRight: "6px" }}
+                          />
+                        )}
+                        Join Chat
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
             )}
-          </>
-        )}
-      </div>
-    </>
+          </div>
+        </>
+      )}
+    </ChatProvider>
   );
 };
 export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);

From 70ab1b73dcbfd00470a48265ca34ac24f7149028 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 7 Sep 2023 15:08:19 +0500
Subject: [PATCH 056/179] Fix error in chat-popup

---
 src/common/components/chats/chat-popup/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index e9093c6991f..e36a380ea0b 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -884,7 +884,6 @@ export default function ChatPopUp(props: Props) {
                           publicMessages={publicMessages}
                           currentChannel={currentChannel!}
                           activeUserKeys={activeUserKeys!}
-                          activeUser={props.activeUser}
                           isScrollToBottom={false}
                           isActveUserRemoved={isActveUserRemoved}
                           currentChannelSetter={setCurrentChannel}
@@ -1080,7 +1079,7 @@ export default function ChatPopUp(props: Props) {
                 )}
               </>
             ) : revelPrivateKey ? (
-              <ManageChatKey noStrPrivKey={noStrPrivKey} copyPrivateKey={copyToClipboard} />
+              <ManageChatKey />
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
                 {showSpinner && chatButtonSpinner}

From 9377625780acc8dfe3845d8d77c39cd853ce59d5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 7 Sep 2023 20:11:58 +0500
Subject: [PATCH 057/179] Use context to store states

---
 .../components/chats/chat-input/index.tsx     |  20 +-
 .../components/chats/chat-popup/index.scss    |   4 +
 .../components/chats/chat-popup/index.tsx     | 846 ++++++++----------
 src/common/components/chats/chat-provider.tsx |  15 +-
 .../chats/chats-channel-messages/index.tsx    |   2 +
 .../chats/chats-confirmation-modal/index.tsx  |  11 +-
 .../chats/chats-direct-messages/index.scss    |  10 +-
 .../chats/chats-direct-messages/index.tsx     | 193 ++--
 .../chats/chats-messages-view/index.tsx       |  36 +-
 .../components/chats/import-chats/index.scss  |  13 +
 .../components/chats/import-chats/index.tsx   | 134 +++
 .../components/chats/join-chat/index.tsx      |  51 ++
 .../components/chats/set-chat-keys/index.tsx  |  28 +
 src/common/components/emoji-picker/index.tsx  |   2 +-
 .../components/manage-chat-key/index.tsx      |   2 +
 src/common/helper/message-service.ts          |   1 +
 src/common/pages/chats/index.scss             |   5 +
 src/common/pages/chats/index.tsx              | 115 +--
 18 files changed, 818 insertions(+), 670 deletions(-)
 create mode 100644 src/common/components/chats/import-chats/index.scss
 create mode 100644 src/common/components/chats/import-chats/index.tsx
 create mode 100644 src/common/components/chats/join-chat/index.tsx
 create mode 100644 src/common/components/chats/set-chat-keys/index.tsx

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index 306716c072f..c91831e7d97 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Form, FormControl, InputGroup } from "react-bootstrap";
 import axios from "axios";
 
@@ -26,11 +26,11 @@ import { uploadImage } from "../../../api/misc";
 import { addImage } from "../../../api/private-api";
 
 import "./index.scss";
+import { ChatContext } from "../chat-provider";
 
 interface Props {
   isCurrentUser: boolean;
   isCommunity: boolean;
-  receiverPubKey: string | null;
   isActveUserRemoved: boolean;
   currentChannel: Channel;
   currentUser: string;
@@ -43,6 +43,11 @@ export default function ChatInput(props: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const { global, activeUser, chat } = useMappedStore();
 
+  const context = useContext(ChatContext);
+  const { receiverPubKey } = context;
+
+  console.log("receiverPubKey", receiverPubKey);
+
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
@@ -52,7 +57,6 @@ export default function ChatInput(props: Props) {
     isCommunity,
     isCurrentUser,
     isActveUserRemoved,
-    receiverPubKey,
     currentChannel,
     currentUser,
     isCurrentUserJoined,
@@ -177,7 +181,13 @@ export default function ChatInput(props: Props) {
 
   return (
     <>
-      <div className={`chat ${isActveUserRemoved || !isCurrentUserJoined ? "disable" : ""}`}>
+      <div
+        className={`chat ${
+          isActveUserRemoved || !isCurrentUserJoined || receiverPubKey?.length === 0
+            ? "disable"
+            : ""
+        }`}
+      >
         <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
           <div className="chatbox-emoji-picker">
             <div className="chatbox-emoji">
@@ -270,7 +280,7 @@ export default function ChatInput(props: Props) {
               autoComplete="off"
               className="chat-input"
               style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-              disabled={(isCurrentUser && receiverPubKey) === undefined || isActveUserRemoved}
+              disabled={receiverPubKey?.length === 0 || isActveUserRemoved}
             />
             <InputGroup.Append
               className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/components/chats/chat-popup/index.scss
index cbef7e23d98..e6065a34a2f 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/components/chats/chat-popup/index.scss
@@ -569,6 +569,10 @@
       //   }
       // }
     }
+
+    .import-chats {
+      margin-top: 20px;
+    }
   }
 
   &.small-screen {
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index e36a380ea0b..babfd0921f8 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { useLocation } from "react-router";
 import { History } from "history";
@@ -78,6 +78,9 @@ import {
   setProfileMetaData
 } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
+import ChatProvider, { ChatContext } from "../chat-provider";
+import ImportChats from "../import-chats";
+import SetActiveUserChatKeys from "../set-chat-keys";
 
 interface Props {
   users: User[];
@@ -104,6 +107,9 @@ export default function ChatPopUp(props: Props) {
 
   const { activeUser } = useMappedStore();
 
+  const context = useContext(ChatContext);
+  const { receiverPubKey, setReceiverPubKey } = context;
+
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
   const [isCurrentUser, setIsCurrentUser] = useState(false);
@@ -114,7 +120,6 @@ export default function ChatPopUp(props: Props) {
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
-  const [receiverPubKey, setReceiverPubKey] = useState("");
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
@@ -166,7 +171,7 @@ export default function ChatPopUp(props: Props) {
   }, [isChatPage]);
 
   useEffect(() => {
-    // resetProfile(props.activeUser);
+    // deleteChatPublicKey(props.activeUser);
     fetchProfileData();
     !isChatPage && setShow(!!props.activeUser?.username);
     const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
@@ -210,6 +215,7 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (window.messageService) {
+      console.log("Use effect run");
       setHasUserJoinedChat(true);
       const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
       setNoStrPrivKey(noStrPrivKey);
@@ -410,7 +416,6 @@ export default function ChatPopUp(props: Props) {
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
     const { nsKey } = profile || {};
-    setReceiverPubKey(nsKey);
     setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
@@ -524,16 +529,6 @@ export default function ChatPopUp(props: Props) {
     setCommunityName(community);
   };
 
-  const copyToClipboard = (content: string) => {
-    const textField = document.createElement("textarea");
-    textField.innerText = content;
-    document.body.appendChild(textField);
-    textField.select();
-    document.execCommand("copy");
-    textField.remove();
-    success(`${isCommunity ? "Link" : "Key"} copied into clipboard`);
-  };
-
   const handleImportChatSubmit = () => {
     try {
       const pubKey = getPublicKey(chatPrivKey);
@@ -653,64 +648,6 @@ export default function ChatPopUp(props: Props) {
     );
   };
 
-  const handleChannelUpdate = (operationType: string) => {
-    let updatedMetaData = {
-      name: currentChannel?.name!,
-      about: currentChannel?.about!,
-      picture: "",
-      communityName: currentChannel?.communityName!,
-      communityModerators: currentChannel?.communityModerators,
-      hiddenMessageIds: currentChannel?.hiddenMessageIds,
-      removedUserIds: currentChannel?.removedUserIds
-    };
-
-    switch (operationType) {
-      case HIDEMESSAGE:
-        const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
-        updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
-        break;
-      case BLOCKUSER:
-        const updatedRemovedUsers = [...(currentChannel?.removedUserIds || []), removedUserId!];
-        updatedMetaData.removedUserIds = updatedRemovedUsers;
-
-        const isRemovedUserModerator = currentChannel?.communityModerators?.find(
-          (x) => x.pubkey === removedUserId
-        );
-        const isModerator = !!isRemovedUserModerator;
-        if (isModerator) {
-          const NewUpdatedRoles = currentChannel?.communityModerators?.filter(
-            (item) => item.pubkey !== removedUserId
-          );
-          updatedMetaData.communityModerators = NewUpdatedRoles;
-        }
-        break;
-      default:
-        break;
-    }
-
-    try {
-      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
-      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
-      if (operationType === HIDEMESSAGE) {
-        setStep(0);
-        setKeyDialog(false);
-        fetchCommunityMessages(
-          props.chat.publicMessages,
-          currentChannel!,
-          currentChannel?.hiddenMessageIds
-        );
-        setHiddenMsgId("");
-      }
-      if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
-        setStep(0);
-        setKeyDialog(false);
-        setRemovedUserID("");
-      }
-    } catch (err) {
-      error(_t("chat.error-updating-community"));
-    }
-  };
-
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
     setAddRoleError("");
@@ -730,419 +667,428 @@ export default function ChatPopUp(props: Props) {
   };
 
   return (
-    <>
-      {show && (
-        <div
-          className={`chatbox-container ${expanded ? "expanded" : ""} ${
-            innerWidth <= 666 ? "small-screen" : ""
-          }`}
-        >
-          <div className="chat-header">
-            {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
-              <Tooltip content={_t("chat.back")}>
-                <div className="back-arrow-image">
-                  <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
-                    {" "}
-                    {arrowBackSvg}
-                  </span>
-                </div>
-              </Tooltip>
-            )}
-            <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
-              {(currentUser || isCommunity) && (
-                <p className="user-icon">
-                  <UserAvatar
-                    username={
-                      isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""
-                    }
-                    size="small"
-                  />
-                </p>
-              )}
-
-              <p className="message-header-content">
-                {currentUser
-                  ? currentUser
-                  : isCommunity
-                  ? currentCommunity?.title
-                  : showSearchUser
-                  ? "New Message"
-                  : revelPrivateKey
-                  ? "Manage chat key"
-                  : "Messages"}
-              </p>
-            </div>
-            <div className="actionable-imgs">
-              {!currentUser &&
-                hasUserJoinedChat &&
-                noStrPrivKey &&
-                !isCommunity &&
-                !revelPrivateKey && (
-                  <>
-                    <div className="message-image" onClick={handleMessageSvgClick}>
-                      <Tooltip content={_t("chat.new-message")}>
-                        <p className="message-svg">{addMessageSVG}</p>
-                      </Tooltip>
+    <ChatProvider>
+      {(context) => (
+        <>
+          {show && (
+            <div
+              className={`chatbox-container ${expanded ? "expanded" : ""} ${
+                innerWidth <= 666 ? "small-screen" : ""
+              }`}
+            >
+              <SetActiveUserChatKeys />
+              <div className="chat-header">
+                {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
+                  <Tooltip content={_t("chat.back")}>
+                    <div className="back-arrow-image">
+                      <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
+                        {" "}
+                        {arrowBackSvg}
+                      </span>
                     </div>
-                  </>
-                )}
-              {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
-                <div className="message-image" onClick={handleRefreshSvgClick}>
-                  <Tooltip content={_t("chat.refresh")}>
-                    <p className="message-svg" style={{ paddingTop: "10px" }}>
-                      {syncSvg}
-                    </p>
                   </Tooltip>
-                </div>
-              )}
-              {isCommunity && (
-                <div className="community-menu">
-                  <ChatsCommunityDropdownMenu
-                    username={communityName}
-                    {...props}
-                    currentChannel={currentChannel!}
-                    currentChannelSetter={setCurrentChannel}
-                  />
-                </div>
-              )}{" "}
-              {!isCommunity && !isCurrentUser && noStrPrivKey && (
-                <div className="simple-menu">
-                  <ChatsDropdownMenu
-                    {...props}
-                    onManageChatKey={() => {
-                      setRevealPrivateKey(!revelPrivateKey);
-                    }}
-                  />
-                </div>
-              )}
-              <div className="arrow-image">
-                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                  <p
-                    className="arrow-svg"
-                    onClick={() => {
-                      setExpanded(!expanded);
-                    }}
-                  >
-                    {expanded ? expandArrow : collapseArrow}
-                  </p>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-          {inProgress && <LinearProgress />}
-          {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
-          <div
-            className={`chat-body ${
-              currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${
-              !hasUserJoinedChat
-                ? "join-chat"
-                : clickedMessage || (isTop && hasMore)
-                ? "no-scroll"
-                : ""
-            }`}
-            ref={chatBodyDivRef}
-            onScroll={handleScroll}
-          >
-            {hasUserJoinedChat && !revelPrivateKey ? (
-              <>
-                {currentUser.length !== 0 || communityName.length !== 0 ? (
-                  <div className="chats">
-                    <>
-                      {" "}
-                      <Link
-                        to={
+                )}
+                <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
+                  {(currentUser || isCommunity) && (
+                    <p className="user-icon">
+                      <UserAvatar
+                        username={
                           isCurrentUser
-                            ? `/@${currentUser}`
-                            : isCommunity
-                            ? `/created/${currentCommunity?.name}`
-                            : ""
+                            ? currentUser
+                            : (isCommunity && currentCommunity?.name) || ""
                         }
+                        size="small"
+                      />
+                    </p>
+                  )}
+
+                  <p className="message-header-content">
+                    {currentUser
+                      ? currentUser
+                      : isCommunity
+                      ? currentCommunity?.title
+                      : showSearchUser
+                      ? "New Message"
+                      : revelPrivateKey
+                      ? "Manage chat key"
+                      : "Messages"}
+                  </p>
+                </div>
+                <div className="actionable-imgs">
+                  {!currentUser &&
+                    hasUserJoinedChat &&
+                    noStrPrivKey &&
+                    !isCommunity &&
+                    !revelPrivateKey && (
+                      <>
+                        <div className="message-image" onClick={handleMessageSvgClick}>
+                          <Tooltip content={_t("chat.new-message")}>
+                            <p className="message-svg">{addMessageSVG}</p>
+                          </Tooltip>
+                        </div>
+                      </>
+                    )}
+                  {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
+                    <div className="message-image" onClick={handleRefreshSvgClick}>
+                      <Tooltip content={_t("chat.refresh")}>
+                        <p className="message-svg" style={{ paddingTop: "10px" }}>
+                          {syncSvg}
+                        </p>
+                      </Tooltip>
+                    </div>
+                  )}
+                  {isCommunity && (
+                    <div className="community-menu">
+                      <ChatsCommunityDropdownMenu
+                        username={communityName}
+                        {...props}
+                        currentChannel={currentChannel!}
+                        currentChannelSetter={setCurrentChannel}
+                      />
+                    </div>
+                  )}{" "}
+                  {!isCommunity && !isCurrentUser && noStrPrivKey && (
+                    <div className="simple-menu">
+                      <ChatsDropdownMenu
+                        {...props}
+                        onManageChatKey={() => {
+                          setRevealPrivateKey(!revelPrivateKey);
+                        }}
+                      />
+                    </div>
+                  )}
+                  <div className="arrow-image">
+                    <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+                      <p
+                        className="arrow-svg"
+                        onClick={() => {
+                          setExpanded(!expanded);
+                        }}
                       >
-                        <ChatsProfileBox
-                          isCommunity={isCommunity}
-                          isCurrentUser={isCurrentUser}
-                          communityName={communityName}
-                          currentUser={currentUser}
-                        />
-                      </Link>
-                      {!isCurrentUserJoined && (
-                        <p className="not-joined">{_t("chat.not-joined")}</p>
-                      )}
-                      {isCurrentUser ? (
-                        <ChatsDirectMessages
-                          {...props}
-                          directMessages={directMessagesList}
-                          activeUserKeys={activeUserKeys!}
-                          currentUser={currentUser}
-                          isScrollToBottom={false}
-                        />
-                      ) : (
-                        <ChatsChannelMessages
-                          {...props}
-                          username={communityName}
-                          publicMessages={publicMessages}
-                          currentChannel={currentChannel!}
-                          activeUserKeys={activeUserKeys!}
-                          isScrollToBottom={false}
-                          isActveUserRemoved={isActveUserRemoved}
-                          currentChannelSetter={setCurrentChannel}
-                        />
-                      )}
-                    </>
+                        {expanded ? expandArrow : collapseArrow}
+                      </p>
+                    </Tooltip>
                   </div>
-                ) : showSearchUser ? (
+                </div>
+              </div>
+              {inProgress && <LinearProgress />}
+              {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
+              <div
+                className={`chat-body ${
+                  currentUser ? "current-user" : isCommunity ? "community" : ""
+                } ${
+                  !hasUserJoinedChat
+                    ? "join-chat"
+                    : clickedMessage || (isTop && hasMore)
+                    ? "no-scroll"
+                    : ""
+                }`}
+                ref={chatBodyDivRef}
+                onScroll={handleScroll}
+              >
+                {hasUserJoinedChat && !revelPrivateKey ? (
                   <>
-                    <div className="user-search-bar">
-                      <Form.Group className="w-100 mb-3">
-                        <Form.Control
-                          type="text"
-                          placeholder={_t("chat.search")}
-                          value={searchtext}
-                          autoFocus={true}
-                          onChange={(e) => {
-                            setSearchText(e.target.value);
-                            setInProgress(true);
-                          }}
-                        />
-                      </Form.Group>
-                    </div>
-                    <div className="user-search-suggestion-list">
-                      {userList.map((user, index) => {
-                        return (
-                          <div
-                            key={index}
-                            className="search-content"
-                            onClick={() => {
-                              setCurrentUser(user.account);
-                              setIsCurrentUser(true);
-                            }}
+                    {currentUser.length !== 0 || communityName.length !== 0 ? (
+                      <div className="chats">
+                        <>
+                          {" "}
+                          <Link
+                            to={
+                              isCurrentUser
+                                ? `/@${currentUser}`
+                                : isCommunity
+                                ? `/created/${currentCommunity?.name}`
+                                : ""
+                            }
                           >
-                            <div className="search-user-img">
-                              <span>
-                                <UserAvatar username={user.account} size="medium" />
-                              </span>
-                            </div>
+                            <ChatsProfileBox
+                              isCommunity={isCommunity}
+                              isCurrentUser={isCurrentUser}
+                              communityName={communityName}
+                              currentUser={currentUser}
+                            />
+                          </Link>
+                          {isCurrentUser ? (
+                            <ChatsDirectMessages
+                              {...props}
+                              directMessages={directMessagesList}
+                              activeUserKeys={activeUserKeys!}
+                              currentUser={currentUser}
+                              isScrollToBottom={false}
+                            />
+                          ) : (
+                            <ChatsChannelMessages
+                              {...props}
+                              username={communityName}
+                              publicMessages={publicMessages}
+                              currentChannel={currentChannel!}
+                              activeUserKeys={activeUserKeys!}
+                              isScrollToBottom={false}
+                              isActveUserRemoved={isActveUserRemoved}
+                              currentChannelSetter={setCurrentChannel}
+                            />
+                          )}
+                        </>
+                      </div>
+                    ) : showSearchUser ? (
+                      <>
+                        <div className="user-search-bar">
+                          <Form.Group className="w-100 mb-3">
+                            <Form.Control
+                              type="text"
+                              placeholder={_t("chat.search")}
+                              value={searchtext}
+                              autoFocus={true}
+                              onChange={(e) => {
+                                setSearchText(e.target.value);
+                                setInProgress(true);
+                              }}
+                            />
+                          </Form.Group>
+                        </div>
+                        <div className="user-search-suggestion-list">
+                          {userList.map((user, index) => {
+                            return (
+                              <div
+                                key={index}
+                                className="search-content"
+                                onClick={() => {
+                                  setCurrentUser(user.account);
+                                  setIsCurrentUser(true);
+                                }}
+                              >
+                                <div className="search-user-img">
+                                  <span>
+                                    <UserAvatar username={user.account} size="medium" />
+                                  </span>
+                                </div>
 
-                            <div className="search-user-title">
-                              <p className="search-username">{user.account}</p>
-                              <p className="search-reputation">
-                                ({accountReputation(user.reputation)})
-                              </p>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {(props.chat.directContacts.length !== 0 ||
-                      (props.chat.channels.length !== 0 && communities.length !== 0)) &&
-                    !refreshChat &&
-                    noStrPrivKey ? (
-                      <React.Fragment>
-                        {props.chat.channels.length !== 0 && communities.length !== 0 && (
-                          <>
-                            <div className="community-header">{_t("chat.communities")}</div>
-                            {communities.map((channel) => {
+                                <div className="search-user-title">
+                                  <p className="search-username">{user.account}</p>
+                                  <p className="search-reputation">
+                                    ({accountReputation(user.reputation)})
+                                  </p>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        {(props.chat.directContacts.length !== 0 ||
+                          (props.chat.channels.length !== 0 && communities.length !== 0)) &&
+                        !refreshChat &&
+                        noStrPrivKey ? (
+                          <React.Fragment>
+                            {props.chat.channels.length !== 0 && communities.length !== 0 && (
+                              <>
+                                <div className="community-header">{_t("chat.communities")}</div>
+                                {communities.map((channel) => {
+                                  return (
+                                    <div key={channel.id} className="chat-content">
+                                      <Link to={`/created/${channel.communityName}`}>
+                                        <div className="user-img">
+                                          <span>
+                                            <UserAvatar
+                                              username={channel.communityName!}
+                                              size="medium"
+                                            />
+                                          </span>
+                                        </div>
+                                      </Link>
+
+                                      <div
+                                        className="user-title"
+                                        onClick={() =>
+                                          communityClicked(channel.communityName!, channel.name)
+                                        }
+                                      >
+                                        <p className="username" style={{ paddingTop: "8px" }}>
+                                          {channel.name}
+                                        </p>
+                                        <p className="last-message">
+                                          {getCommunityLastMessage(
+                                            channel.id,
+                                            props.chat.publicMessages
+                                          )}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                                {props.chat.directContacts.length !== 0 && (
+                                  <div className="dm-header">{_t("chat.dms")}</div>
+                                )}
+                              </>
+                            )}
+                            {props.chat.directContacts.map((user: DirectContactsType) => {
                               return (
-                                <div key={channel.id} className="chat-content">
-                                  <Link to={`/created/${channel.communityName}`}>
+                                <div key={user.pubkey} className="chat-content">
+                                  <Link to={`/@${user.name}`}>
                                     <div className="user-img">
                                       <span>
-                                        <UserAvatar
-                                          username={channel.communityName!}
-                                          size="medium"
-                                        />
+                                        <UserAvatar username={user.name} size="medium" />
                                       </span>
                                     </div>
                                   </Link>
 
                                   <div
                                     className="user-title"
-                                    onClick={() =>
-                                      communityClicked(channel.communityName!, channel.name)
-                                    }
+                                    onClick={() => userClicked(user.name)}
                                   >
-                                    <p className="username" style={{ paddingTop: "8px" }}>
-                                      {channel.name}
-                                    </p>
+                                    <p className="username">{user.name}</p>
                                     <p className="last-message">
-                                      {getCommunityLastMessage(
-                                        channel.id,
-                                        props.chat.publicMessages
-                                      )}
+                                      {getDirectLastMessage(user.pubkey, props.chat.directMessages)}
                                     </p>
                                   </div>
                                 </div>
                               );
                             })}
-                            {props.chat.directContacts.length !== 0 && (
-                              <div className="dm-header">{_t("chat.dms")}</div>
+                          </React.Fragment>
+                        ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
+                          <>
+                            {/* <div
+                              className="d-flex justify-content-center import-chat-btn"
+                              style={{ marginTop: "20%" }}
+                            >
+                              <Button
+                                variant="primary"
+                                onClick={() => setImportPrivKey(!importPrivKey)}
+                              >
+                                {_t("chat.import-chat")}
+                              </Button>
+                            </div>
+                            {importPrivKey && (
+                              <div className="private-key" style={{ margin: "15px 10px" }}>
+                                <Form
+                                  onSubmit={(e: React.FormEvent) => {
+                                    e.preventDefault();
+                                  }}
+                                >
+                                  <InputGroup>
+                                    <InputGroup.Prepend>
+                                      <InputGroup.Text>{keySvg}</InputGroup.Text>
+                                    </InputGroup.Prepend>
+                                    <Form.Control
+                                      value={chatPrivKey}
+                                      type="password"
+                                      autoFocus={true}
+                                      autoComplete="off"
+                                      placeholder="Chat private key"
+                                      onChange={(e) => setChatPrivkey(e.target.value)}
+                                    />
+                                    <InputGroup.Append>
+                                      <Button onClick={handleImportChatSubmit}>
+                                        {_t("chat.submit")}
+                                      </Button>
+                                    </InputGroup.Append>
+                                  </InputGroup>
+                                  {addRoleError && (
+                                    <Form.Text className="text-danger">{addRoleError}</Form.Text>
+                                  )}
+                                </Form>
+                              </div>
                             )}
+                            {<OrDivider />}
+                            <div className="d-flex justify-content-center create-new-chat-btn">
+                              <Button
+                                variant="primary"
+                                onClick={() => {
+                                  setKeyDialog(true);
+                                  setStep(9);
+                                }}
+                              >
+                                {_t("chat.create-new-account")}
+                              </Button>
+                            </div> */}
+                            <ImportChats />
                           </>
-                        )}
-                        {props.chat.directContacts.map((user: DirectContactsType) => {
-                          return (
-                            <div key={user.pubkey} className="chat-content">
-                              <Link to={`/@${user.name}`}>
-                                <div className="user-img">
-                                  <span>
-                                    <UserAvatar username={user.name} size="medium" />
-                                  </span>
-                                </div>
-                              </Link>
-
-                              <div className="user-title" onClick={() => userClicked(user.name)}>
-                                <p className="username">{user.name}</p>
-                                <p className="last-message">
-                                  {getDirectLastMessage(user.pubkey, props.chat.directMessages)}
-                                </p>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </React.Fragment>
-                    ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
-                      <>
-                        <div
-                          className="d-flex justify-content-center import-chat-btn"
-                          style={{ marginTop: "20%" }}
-                        >
-                          <Button
-                            variant="primary"
-                            onClick={() => setImportPrivKey(!importPrivKey)}
-                          >
-                            {_t("chat.import-chat")}
-                          </Button>
-                        </div>
-                        {importPrivKey && (
-                          <div className="private-key" style={{ margin: "15px 10px" }}>
-                            <Form
-                              onSubmit={(e: React.FormEvent) => {
-                                e.preventDefault();
-                              }}
-                            >
-                              <InputGroup>
-                                <InputGroup.Prepend>
-                                  <InputGroup.Text>{keySvg}</InputGroup.Text>
-                                </InputGroup.Prepend>
-                                <Form.Control
-                                  value={chatPrivKey}
-                                  type="password"
-                                  autoFocus={true}
-                                  autoComplete="off"
-                                  placeholder="Chat private key"
-                                  onChange={(e) => setChatPrivkey(e.target.value)}
-                                />
-                                <InputGroup.Append>
-                                  <Button onClick={handleImportChatSubmit}>
-                                    {_t("chat.submit")}
-                                  </Button>
-                                </InputGroup.Append>
-                              </InputGroup>
-                              {addRoleError && (
-                                <Form.Text className="text-danger">{addRoleError}</Form.Text>
-                              )}
-                            </Form>
+                        ) : refreshChat ? (
+                          <div className="no-chat">
+                            <Spinner animation="border" variant="primary" />
                           </div>
+                        ) : (
+                          <>
+                            <p className="no-chat">{_t("chat.no-chat")}</p>
+                            <div className="start-chat-btn">
+                              <Button variant="primary" onClick={() => setShowSearchUser(true)}>
+                                {_t("chat.start-chat")}
+                              </Button>
+                            </div>
+                          </>
                         )}
-                        {<OrDivider />}
-                        <div className="d-flex justify-content-center create-new-chat-btn">
-                          <Button
-                            variant="primary"
-                            onClick={() => {
-                              setKeyDialog(true);
-                              setStep(9);
-                            }}
-                          >
-                            {_t("chat.create-new-account")}
-                          </Button>
-                        </div>
-                      </>
-                    ) : refreshChat ? (
-                      <div className="no-chat">
-                        <Spinner animation="border" variant="primary" />
-                      </div>
-                    ) : (
-                      <>
-                        <p className="no-chat">{_t("chat.no-chat")}</p>
-                        <div className="start-chat-btn">
-                          <Button variant="primary" onClick={() => setShowSearchUser(true)}>
-                            {_t("chat.start-chat")}
-                          </Button>
-                        </div>
                       </>
                     )}
                   </>
+                ) : revelPrivateKey ? (
+                  <ManageChatKey />
+                ) : (
+                  <Button className="join-chat-btn" onClick={handleJoinChat}>
+                    {showSpinner && chatButtonSpinner}
+                    {_t("chat.join-chat")}
+                  </Button>
                 )}
-              </>
-            ) : revelPrivateKey ? (
-              <ManageChatKey />
-            ) : (
-              <Button className="join-chat-btn" onClick={handleJoinChat}>
-                {showSpinner && chatButtonSpinner}
-                {_t("chat.join-chat")}
-              </Button>
-            )}
-
-            {((isScrollToTop && !isCurrentUser) ||
-              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
-              <Tooltip
-                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
-              >
-                <div
-                  className="scroller"
-                  style={{
-                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
-                  }}
-                  onClick={scrollerClicked}
-                >
-                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
-                </div>
-              </Tooltip>
-            )}
-            {isActveUserRemoved && isCommunity && (
-              <p className="d-flex justify-content-center mt-4 mb-0">
-                {_t("chat.blocked-user-message")}
-              </p>
-            )}
-          </div>
-          {(isCurrentUser || isCommunity) && (
-            <ChatInput
-              isCurrentUser={isCurrentUser}
-              isCommunity={isCommunity}
-              receiverPubKey={receiverPubKey}
-              isActveUserRemoved={isActveUserRemoved}
-              currentUser={currentUser}
-              currentChannel={currentChannel!}
-              isCurrentUserJoined={isCurrentUserJoined}
-              emojiPickerStyles={EmojiPickerStyle}
-              gifPickerStyle={GifPickerStyle}
-            />
+
+                {((isScrollToTop && !isCurrentUser) ||
+                  ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
+                  <Tooltip
+                    content={
+                      isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")
+                    }
+                  >
+                    <div
+                      className="scroller"
+                      style={{
+                        bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
+                      }}
+                      onClick={scrollerClicked}
+                    >
+                      {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
+                    </div>
+                  </Tooltip>
+                )}
+                {isActveUserRemoved && isCommunity && (
+                  <p className="d-flex justify-content-center mt-4 mb-0">
+                    {_t("chat.blocked-user-message")}
+                  </p>
+                )}
+              </div>
+              {(isCurrentUser || isCommunity) && (
+                <ChatInput
+                  isCurrentUser={isCurrentUser}
+                  isCommunity={isCommunity}
+                  isActveUserRemoved={isActveUserRemoved}
+                  currentUser={currentUser}
+                  currentChannel={currentChannel!}
+                  isCurrentUserJoined={isCurrentUserJoined}
+                  emojiPickerStyles={EmojiPickerStyle}
+                  gifPickerStyle={GifPickerStyle}
+                />
+              )}
+            </div>
           )}
-        </div>
-      )}
 
-      {keyDialog && (
-        <Modal
-          animation={false}
-          show={true}
-          centered={true}
-          onHide={toggleKeyDialog}
-          keyboard={false}
-          className="chats-dialog modal-thin-header"
-          size="lg"
-        >
-          <Modal.Header closeButton={true} />
-          <Modal.Body className="chat-modals-body">
-            {step === 9 && confirmationModal(NEWCHATACCOUNT)}
-            {step === 11 && confirmationModal(RESENDMESSAGE)}
-            {step === 10 && successModal(NEWCHATACCOUNT)}
-          </Modal.Body>
-        </Modal>
+          {keyDialog && (
+            <Modal
+              animation={false}
+              show={true}
+              centered={true}
+              onHide={toggleKeyDialog}
+              keyboard={false}
+              className="chats-dialog modal-thin-header"
+              size="lg"
+            >
+              <Modal.Header closeButton={true} />
+              <Modal.Body className="chat-modals-body">
+                {step === 9 && confirmationModal(NEWCHATACCOUNT)}
+                {step === 11 && confirmationModal(RESENDMESSAGE)}
+                {step === 10 && successModal(NEWCHATACCOUNT)}
+              </Modal.Body>
+            </Modal>
+          )}
+        </>
       )}
-    </>
+    </ChatProvider>
   );
 }
diff --git a/src/common/components/chats/chat-provider.tsx b/src/common/components/chats/chat-provider.tsx
index c3e96ca4c66..7aae07d1d91 100644
--- a/src/common/components/chats/chat-provider.tsx
+++ b/src/common/components/chats/chat-provider.tsx
@@ -8,10 +8,12 @@ interface Context {
   inProgress: boolean;
   revealPrivKey: boolean;
   chatPrivKey: string;
+  receiverPubKey: string;
   setRevealPrivKey: (d: boolean) => void;
   setInProgress: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
   setActiveUserKeys: (keys: NostrKeysType) => void;
+  setReceiverPubKey: (key: string) => void;
 }
 
 interface ChatProviderProps {
@@ -23,10 +25,12 @@ export const ChatContext = React.createContext<Context>({
   inProgress: false,
   revealPrivKey: false,
   chatPrivKey: "",
+  receiverPubKey: "",
   setRevealPrivKey: () => {},
   setInProgress: () => {},
   setChatPrivKey: () => {},
-  setActiveUserKeys: () => {}
+  setActiveUserKeys: () => {},
+  setReceiverPubKey: () => {}
 });
 
 export default function ChatProvider({ children }: ChatProviderProps) {
@@ -35,6 +39,7 @@ export default function ChatProvider({ children }: ChatProviderProps) {
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [inProgress, setInProgress] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
+  const [receiverPubKey, setReceiverPubKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
 
   useEffect(() => {
@@ -68,10 +73,12 @@ export default function ChatProvider({ children }: ChatProviderProps) {
         inProgress,
         revealPrivKey,
         chatPrivKey,
+        receiverPubKey,
         setRevealPrivKey,
         setInProgress,
         setChatPrivKey,
-        setActiveUserKeys
+        setActiveUserKeys,
+        setReceiverPubKey
       }}
     >
       {children({
@@ -79,10 +86,12 @@ export default function ChatProvider({ children }: ChatProviderProps) {
         inProgress,
         revealPrivKey,
         chatPrivKey,
+        receiverPubKey,
         setRevealPrivKey,
         setInProgress,
         setChatPrivKey,
-        setActiveUserKeys
+        setActiveUserKeys,
+        setReceiverPubKey
       })}
     </ChatContext.Provider>
   );
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 779ad4f7959..00a5888b0c5 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -554,6 +554,8 @@ export default function ChatsChannelMessages(props: Props) {
       </div>
       {step !== 0 && (
         <ChatsConfirmationModal
+          actionType={"Confirmation"}
+          content={"Are you sure?"}
           onClose={() => {
             setStep(0);
           }}
diff --git a/src/common/components/chats/chats-confirmation-modal/index.tsx b/src/common/components/chats/chats-confirmation-modal/index.tsx
index 105d9d2a0c4..1049e60aa12 100644
--- a/src/common/components/chats/chats-confirmation-modal/index.tsx
+++ b/src/common/components/chats/chats-confirmation-modal/index.tsx
@@ -3,23 +3,22 @@ import { Button, Modal } from "react-bootstrap";
 import { _t } from "../../../i18n";
 
 interface Props {
-  // actionType: any;
-  // step: any;
+  actionType: string;
+  content: string;
   onClose: () => void;
   onConfirm: () => void;
-  // t: any;
 }
 const ChatsConfirmationModal = (props: Props) => {
-  const { onClose, onConfirm } = props;
+  const { onClose, onConfirm, content, actionType } = props;
   const confirmationModalContent = (
     <>
       <div className="join-community-dialog-header border-bottom">
         <div className="join-community-dialog-titles">
-          <h2 className="join-community-main-title">Confirmation</h2>
+          <h2 className="join-community-main-title">{actionType}</h2>
         </div>
       </div>
       <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
-        Are you sure?
+        {content}
       </div>
       <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
         <Button
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
index e6a29211b6f..1a682e4a2e2 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -155,8 +155,10 @@
     }
   }
 
-  // &.receiver {
-  //   margin-top: 5px;
-  //   margin-left: 10px;
-  // }
+  .not-joined {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 14%;
+  }
 }
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 67ef62aee64..c13b0c68df6 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -1,8 +1,14 @@
-import React, { useEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { DirectMessage } from "../../../../providers/message-provider-types";
 import mediumZoom, { Zoom } from "medium-zoom";
 import { Global, Theme } from "../../../store/global/types";
-import { formatMessageTime, formatMessageDate, isMessageGif, isMessageImage } from "../utils";
+import {
+  formatMessageTime,
+  formatMessageDate,
+  isMessageGif,
+  isMessageImage,
+  getUserChatPublicKey
+} from "../utils";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { Link } from "react-router-dom";
@@ -15,6 +21,8 @@ import "./index.scss";
 import { ActiveUser } from "../../../store/active-user/types";
 import usePrevious from "react-use/lib/usePrevious";
 import { NostrKeysType } from "../types";
+import { _t } from "../../../i18n";
+import { ChatContext } from "../chat-provider";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -35,10 +43,29 @@ export default function ChatsDirectMessages(props: Props) {
     isScrollToBottom,
     scrollToBottom
   } = props;
+
+  const context = useContext(ChatContext);
+  const { receiverPubKey, setReceiverPubKey } = context;
   const { chat, global, activeUser } = useMappedStore();
 
   let prevGlobal = usePrevious(global);
 
+  useEffect(() => {
+    if (currentUser) {
+      getReceiverPubKey();
+    }
+  }, [currentUser]);
+
+  const getReceiverPubKey = async () => {
+    const pubKey = await getUserChatPublicKey(currentUser);
+
+    if (pubKey) {
+      setReceiverPubKey(pubKey);
+    } else {
+      setReceiverPubKey("");
+    }
+  };
+
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -87,87 +114,93 @@ export default function ChatsDirectMessages(props: Props) {
 
   return (
     <div className="direct-messages">
-      {directMessages &&
-        directMessages.map((msg, i) => {
-          const dayAndMonth = getFormattedDateAndDay(msg, i);
-          let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
-
-          renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-          renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-          const isGif = isMessageGif(msg.content);
-
-          const isImage = isMessageImage(msg.content);
-
-          return (
-            <React.Fragment key={msg.id}>
-              {dayAndMonth}
-              {msg.creator !== activeUserKeys?.pub ? (
-                <div key={msg.id} className="receiver">
-                  <div className="user-img">
-                    <Link to={`/@${currentUser}`}>
-                      <span>
-                        <UserAvatar username={currentUser} size="medium" />
-                      </span>
-                    </Link>
-                  </div>
-                  <div className="user-info">
-                    <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
-
-                    <div className="receiver-messag">
+      {receiverPubKey ? (
+        <>
+          {directMessages &&
+            directMessages.map((msg, i) => {
+              const dayAndMonth = getFormattedDateAndDay(msg, i);
+              let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
+
+              renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+              renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+              const isGif = isMessageGif(msg.content);
+
+              const isImage = isMessageImage(msg.content);
+
+              return (
+                <React.Fragment key={msg.id}>
+                  {dayAndMonth}
+                  {msg.creator !== activeUserKeys?.pub ? (
+                    <div key={msg.id} className="receiver">
+                      <div className="user-img">
+                        <Link to={`/@${currentUser}`}>
+                          <span>
+                            <UserAvatar username={currentUser} size="medium" />
+                          </span>
+                        </Link>
+                      </div>
+                      <div className="user-info">
+                        <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
+
+                        <div className="receiver-messag">
+                          <div
+                            className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                              isImage ? "chat-image" : ""
+                            }`}
+                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div key={msg.id} className="sender">
+                      <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
                       <div
-                        className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                          isImage ? "chat-image" : ""
+                        className={`sender-message ${
+                          msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
                         }`}
-                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                      />
+                      >
+                        {msg.sent === 2 && (
+                          <Tooltip content={"Resend"}>
+                            <span
+                              className="resend-svg"
+                              onClick={() => {
+                                // setKeyDialog(true);
+                                // setStep(11);
+                                // setResendMessage(msg);
+                              }}
+                            >
+                              {resendMessageSvg}
+                            </span>
+                          </Tooltip>
+                        )}
+                        <div
+                          className={`sender-message-content ${isGif ? "gif" : ""} ${
+                            isImage ? "chat-image" : ""
+                          }`}
+                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                        />
+                        {msg.sent === 0 && (
+                          <span style={{ margin: "10px 0 0 5px" }}>
+                            <Spinner animation="border" variant="primary" size="sm" />
+                          </span>
+                        )}
+                        {msg.sent === 2 && (
+                          <Tooltip content={"Failed"}>
+                            <span className="failed-svg">{failedMessageSvg}</span>
+                          </Tooltip>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </div>
-              ) : (
-                <div key={msg.id} className="sender">
-                  <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
-                  <div
-                    className={`sender-message ${
-                      msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                    }`}
-                  >
-                    {msg.sent === 2 && (
-                      <Tooltip content={"Resend"}>
-                        <span
-                          className="resend-svg"
-                          onClick={() => {
-                            // setKeyDialog(true);
-                            // setStep(11);
-                            // setResendMessage(msg);
-                          }}
-                        >
-                          {resendMessageSvg}
-                        </span>
-                      </Tooltip>
-                    )}
-                    <div
-                      className={`sender-message-content ${isGif ? "gif" : ""} ${
-                        isImage ? "chat-image" : ""
-                      }`}
-                      dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                    />
-                    {msg.sent === 0 && (
-                      <span style={{ margin: "10px 0 0 5px" }}>
-                        <Spinner animation="border" variant="primary" size="sm" />
-                      </span>
-                    )}
-                    {msg.sent === 2 && (
-                      <Tooltip content={"Failed"}>
-                        <span className="failed-svg">{failedMessageSvg}</span>
-                      </Tooltip>
-                    )}
-                  </div>
-                </div>
-              )}
-            </React.Fragment>
-          );
-        })}
+                  )}
+                </React.Fragment>
+              );
+            })}
+        </>
+      ) : (
+        <p className="not-joined">{_t("chat.not-joined")}</p>
+      )}
     </div>
   );
 }
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index d8bba46f97f..de7d244ed04 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, useRef, useState } from "react";
+import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import {
   Channel,
@@ -27,6 +27,7 @@ import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { EmojiPickerStyleProps, NostrKeysType } from "../types";
+import { ChatContext } from "../chat-provider";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
@@ -63,6 +64,9 @@ export default function ChatsMessagesView(props: Props) {
     deletePublicMessage
   } = props;
 
+  const context = useContext(ChatContext);
+  const { setReceiverPubKey } = context;
+
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
   const { chat, activeUser } = useMappedStore();
@@ -71,26 +75,25 @@ export default function ChatsMessagesView(props: Props) {
   const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
   const [communityName, setCommunityName] = useState("");
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
-  const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  // const [inProgress, setInProgress] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
+  // console.log("yaha kiya a rha ha", setReceiverPubKey);
+
   useEffect(() => {
     getActiveUserKeys();
     isDirectUserOrCommunity();
   }, []);
 
-  useEffect(() => {
-    if (directUser) {
-      getReceiverPubKey();
-    }
-  }, [directUser]);
+  // useEffect(() => {
+  //   if (directUser) {
+  //     getReceiverPubKey();
+  //   }
+  // }, [directUser]);
 
   useEffect(() => {
     isDirectUserOrCommunity();
@@ -156,13 +159,15 @@ export default function ChatsMessagesView(props: Props) {
     setActiveUserKeys(activeUserKeys);
   };
 
-  const getReceiverPubKey = async () => {
-    const profileData = await getProfileMetaData(directUser);
+  // const getReceiverPubKey = async () => {
+  //   const profileData = await getProfileMetaData(directUser);
 
-    if (profileData?.nsKey) {
-      setReceiverPubKey(profileData?.nsKey);
-    }
-  };
+  //   if (profileData?.nsKey) {
+  //     setReceiverPubKey(profileData?.nsKey);
+  //   } else {
+  //     setReceiverPubKey("");
+  //   }
+  // };
 
   const isDirectUserOrCommunity = () => {
     if (username) {
@@ -277,7 +282,6 @@ export default function ChatsMessagesView(props: Props) {
         gifPickerStyle={EmojiPickerStyle}
         isCurrentUser={directUser ? true : false}
         isCommunity={communityName ? true : false}
-        receiverPubKey={receiverPubKey}
         isActveUserRemoved={isActveUserRemoved}
         currentUser={directUser}
         currentChannel={currentChannel!}
diff --git a/src/common/components/chats/import-chats/index.scss b/src/common/components/chats/import-chats/index.scss
new file mode 100644
index 00000000000..64758473829
--- /dev/null
+++ b/src/common/components/chats/import-chats/index.scss
@@ -0,0 +1,13 @@
+.import-chats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // width: 410px;
+  // height: 50%;
+  // width: 100%;
+  // background-color: green;
+  .import-chats-container {
+    // width: 50%;
+    // background-color: red;
+  }
+}
diff --git a/src/common/components/chats/import-chats/index.tsx b/src/common/components/chats/import-chats/index.tsx
new file mode 100644
index 00000000000..c42a23569c9
--- /dev/null
+++ b/src/common/components/chats/import-chats/index.tsx
@@ -0,0 +1,134 @@
+import React, { useContext, useState } from "react";
+import { Button, Form, InputGroup } from "react-bootstrap";
+import { getPublicKey } from "../../../../lib/nostr-tools/keys";
+import { _t } from "../../../i18n";
+import { keySvg } from "../../../img/svg";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import OrDivider from "../../or-divider";
+import * as ls from "../../../util/local-storage";
+import { ChatContext } from "../chat-provider";
+import { setNostrkeys } from "../../../../providers/message-provider";
+
+import "./index.scss";
+import LinearProgress from "../../linear-progress";
+import ChatsConfirmationModal from "../chats-confirmation-modal";
+import { createNoStrAccount, setProfileMetaData } from "../utils";
+
+export default function ImportChats() {
+  const { activeUser } = useMappedStore();
+
+  const [importPrivKey, setImportPrivKey] = useState(false);
+  const [error, setError] = useState("");
+  const [inProgress, setInProgress] = useState(false);
+  const [privKey, setPrivKey] = useState("");
+  const context = useContext(ChatContext);
+  const [step, setStep] = useState(0);
+
+  const { activeUserKeys, setChatPrivKey, setActiveUserKeys } = context;
+
+  const handleImportChatSubmit = () => {
+    try {
+      setInProgress(true);
+      const pubKey = getPublicKey(privKey);
+      console.log("Public key", pubKey);
+      console.log("Active user key", activeUserKeys?.pub);
+      if (pubKey === activeUserKeys?.pub) {
+        setChatPrivKey(privKey);
+        ls.set(`${activeUser?.username}_nsPrivKey`, privKey);
+        const keys = {
+          pub: activeUserKeys?.pub!,
+          priv: privKey
+        };
+        setNostrkeys(keys);
+        setImportPrivKey(false);
+        setChatPrivKey(privKey);
+      } else {
+        setImportPrivKey(true);
+        setError("Invalid Private key");
+      }
+    } catch (error) {
+      setImportPrivKey(true);
+      setError("Invalid Private key");
+    } finally {
+      setInProgress(false);
+    }
+  };
+
+  const handleCreateAccount = async () => {
+    console.log("Confrim run");
+    const keys = createNoStrAccount();
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+    setChatPrivKey(keys.priv);
+    await setProfileMetaData(activeUser, keys.pub);
+    setNostrkeys(keys);
+    window.messageService?.updateProfile({
+      name: activeUser?.username!,
+      about: "",
+      picture: ""
+    });
+    setActiveUserKeys(keys);
+  };
+
+  return (
+    <>
+      <div className="import-chats">
+        <div className="import-chats-container">
+          <div className="d-flex justify-content-center import-chat-btn">
+            <Button variant="primary" onClick={() => setImportPrivKey(!importPrivKey)}>
+              {_t("chat.import-chat")}
+            </Button>
+          </div>
+          {importPrivKey && (
+            <div className="private-key" style={{ margin: "15px 10px" }}>
+              <Form
+                onSubmit={(e: React.FormEvent) => {
+                  e.preventDefault();
+                }}
+              >
+                <InputGroup>
+                  <InputGroup.Prepend>
+                    <InputGroup.Text>{keySvg}</InputGroup.Text>
+                  </InputGroup.Prepend>
+                  <Form.Control
+                    value={privKey}
+                    type="password"
+                    autoFocus={true}
+                    autoComplete="off"
+                    placeholder="Chat private key"
+                    onChange={(e) => setPrivKey(e.target.value)}
+                  />
+                  <InputGroup.Append>
+                    <Button onClick={handleImportChatSubmit}>{_t("chat.submit")}</Button>
+                  </InputGroup.Append>
+                </InputGroup>
+                {inProgress && <LinearProgress />}
+                {error && <Form.Text className="text-danger">{error}</Form.Text>}
+              </Form>
+            </div>
+          )}
+          {<OrDivider />}
+          <div className="d-flex justify-content-center create-new-chat-btn">
+            <Button
+              variant="primary"
+              onClick={() => {
+                setStep(1);
+              }}
+            >
+              {_t("chat.create-new-account")}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {step !== 0 && (
+        <ChatsConfirmationModal
+          actionType={"Warning"}
+          content={"creating new account will reset your chats"}
+          onClose={() => {
+            setStep(0);
+          }}
+          onConfirm={handleCreateAccount}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/common/components/chats/join-chat/index.tsx b/src/common/components/chats/join-chat/index.tsx
new file mode 100644
index 00000000000..8baab224958
--- /dev/null
+++ b/src/common/components/chats/join-chat/index.tsx
@@ -0,0 +1,51 @@
+import React, { useContext, useState } from "react";
+import { Button, Spinner } from "react-bootstrap";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-provider";
+import { createNoStrAccount, setProfileMetaData } from "../utils";
+
+import * as ls from "../../../util/local-storage";
+import { setNostrkeys } from "../../../../providers/message-provider";
+
+interface Props {
+  resetChat: () => void;
+}
+
+export default function JoinChat(props: Props) {
+  const context = useContext(ChatContext);
+  const { setChatPrivKey, setActiveUserKeys } = context;
+
+  const { activeUser } = useMappedStore();
+
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  const handleJoinChat = async () => {
+    const { resetChat } = props;
+    setShowSpinner(true);
+    resetChat();
+    const keys = createNoStrAccount();
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+    setChatPrivKey(keys.priv);
+    await setProfileMetaData(activeUser, keys.pub);
+    setNostrkeys(keys);
+    window.messageService?.updateProfile({
+      name: activeUser?.username!,
+      about: "",
+      picture: ""
+    });
+    setActiveUserKeys(keys);
+    setShowSpinner(false);
+  };
+
+  return (
+    <div className="no-chat text-center">
+      <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
+      <Button onClick={handleJoinChat}>
+        {showSpinner && (
+          <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
+        )}
+        Join Chat
+      </Button>
+    </div>
+  );
+}
diff --git a/src/common/components/chats/set-chat-keys/index.tsx b/src/common/components/chats/set-chat-keys/index.tsx
new file mode 100644
index 00000000000..93abebe740e
--- /dev/null
+++ b/src/common/components/chats/set-chat-keys/index.tsx
@@ -0,0 +1,28 @@
+import React, { useContext, useEffect } from "react";
+import { useMappedStore } from "../../../store/use-mapped-store";
+
+import { ChatContext } from "../chat-provider";
+import { getPrivateKey, getUserChatPublicKey } from "../utils";
+
+export default function SetActiveUserChatKeys() {
+  const context = useContext(ChatContext);
+  const { setActiveUserKeys, setChatPrivKey } = context;
+  const { activeUser } = useMappedStore();
+
+  useEffect(() => {
+    getActiveUserKeys();
+  }, []);
+
+  const getActiveUserKeys = async () => {
+    const pubKey = await getUserChatPublicKey(activeUser?.username!);
+    const privKey = getPrivateKey(activeUser?.username!);
+    const keys = {
+      pub: pubKey,
+      priv: privKey
+    };
+    setChatPrivKey(privKey);
+    setActiveUserKeys(keys);
+  };
+
+  return <></>;
+}
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 0a0c478a5bc..021649830b8 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -4,7 +4,6 @@ import { FormControl } from "react-bootstrap";
 
 import BaseComponent from "../base";
 import SearchBox from "../search-box";
-import { EmojiPickerStyleProps } from "../chats/chat-popup";
 
 import { _t } from "../../i18n";
 
@@ -14,6 +13,7 @@ import * as ls from "../../util/local-storage";
 
 import { insertOrReplace } from "../../util/input-util";
 import "./_index.scss";
+import { EmojiPickerStyleProps } from "../chats/types/chat-types";
 
 interface Emoji {
   a: string;
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index 9b68d64ec26..973bb5ba708 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -15,6 +15,8 @@ export default function ManageChatKey() {
 
   const { chatPrivKey } = context;
 
+  console.log("chatPrivKey in manage chat key", chatPrivKey);
+
   const copyPrivateKey = () => {
     copyToClipboard(chatPrivKey);
     success("Key copied into clipboad");
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index db9015710ad..c3c8c09cac8 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -847,6 +847,7 @@ export const initMessageService = (keys: Keys): MessageService | undefined => {
   if (keys) {
     window.messageService = new MessageService(keys.priv, keys.pub);
   }
+  console.log("raven instance created");
 
   return window.messageService;
 };
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
index 43c87a713fa..905f03fd7bf 100644
--- a/src/common/pages/chats/index.scss
+++ b/src/common/pages/chats/index.scss
@@ -13,4 +13,9 @@
       margin-top: 4.5rem;
     }
   }
+  .import-chat {
+    width: 100%;
+    height: 100%;
+    margin-top: 10%;
+  }
 }
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 7e84c8e0d3a..f9b72c1c33a 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -24,6 +24,9 @@ import {
 } from "../../components/chats/utils";
 import { useMappedStore } from "../../store/use-mapped-store";
 import ChatProvider, { ChatContext } from "../../components/chats/chat-provider";
+import ImportChats from "../../components/chats/import-chats";
+import JoinChat from "../../components/chats/join-chat";
+import SetActiveUserChatKeys from "../../components/chats/set-chat-keys";
 
 interface MatchParams {
   filter: string;
@@ -40,11 +43,7 @@ interface Props extends PageProps {
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
 
-  const context = useContext(ChatContext);
-  const { setChatPrivKey, setActiveUserKeys } = context;
-
   const [marginTop, setMarginTop] = useState(0);
-  const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -72,95 +71,12 @@ export const Chats = (props: Props) => {
     }
   };
 
-  const handleJoinChat = async () => {
-    const { resetChat } = props;
-    setShowSpinner(true);
-    resetChat();
-    const keys = createNoStrAccount();
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    setChatPrivKey(keys.priv);
-    await setProfileMetaData(activeUser, keys.pub);
-    setNostrkeys(keys);
-    window.messageService?.updateProfile({
-      name: activeUser?.username!,
-      about: "",
-      picture: ""
-    });
-    setActiveUserKeys(keys);
-    setShowSpinner(false);
-  };
-
-  // return (
-  //   <>
-  //   <ChatProvider>
-  //     <Feedback activeUser={activeUser} />
-  //     {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
-  //     <div
-  //       style={{ marginTop: marginTop }}
-  //       className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
-  //     >
-  //       {inProgrss ? (
-  //         <div className="d-flex justify-content-center align-items-center full-page">
-  //           <Spinner animation="border" variant="primary" />
-  //         </div>
-  //       ) : (
-  //         <>
-  //           {activeUserKeys?.pub ? (
-  //             chatPrivKey ? (
-  //               <>
-  //                 <ChatsSideBar
-  //                   {...props}
-  //                   activeUserKeys={activeUserKeys}
-  //                   inProgressSetter={inProgressSetter}
-  //                   revealPrivateKeySetter={revealPrivateKeySetter}
-  //                   revelPrivateKey={revelPrivateKey}
-  //                   chatPrivKey={chatPrivKey}
-  //                 />
-  //                 {revelPrivateKey ? (
-  //                   <div className="chats-messages-box">
-  //                     <ManageChatKey noStrPrivKey={chatPrivKey} copyPrivateKey={copyPrivateKey} />
-  //                   </div>
-  //                 ) : (
-  //                   //if any person has not joined any community then how can he see its message. handle this thing here.
-  //                   <ChatsMessagesBox
-  //                     {...props}
-  //                     activeUserKeys={activeUserKeys}
-  //                     deletePublicMessage={props.deletePublicMessage}
-  //                   />
-  //                 )}
-  //               </>
-  //             ) : (
-  //               <h2>No private key</h2>
-  //             )
-  //           ) : (
-  //             <div className="d-flex justify-content-center align-items-center full-page">
-  //               <div className="no-chat text-center">
-  //                 <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
-  //                 <Button onClick={handleJoinChat}>
-  //                   {showSpinner && (
-  //                     <Spinner
-  //                       animation="grow"
-  //                       variant="light"
-  //                       size="sm"
-  //                       style={{ marginRight: "6px" }}
-  //                     />
-  //                   )}
-  //                   Join Chat
-  //                 </Button>
-  //               </div>
-  //             </div>
-  //           )}
-  //         </>
-  //       )}
-  //     </div>
-  //     </ChatProvider>
-  //   </>
-  // );
   return (
     <ChatProvider>
       {(context) => (
         <>
           <Feedback activeUser={activeUser} />
+          <SetActiveUserChatKeys />
           {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
           <div
             style={{ marginTop: marginTop }}
@@ -189,26 +105,15 @@ export const Chats = (props: Props) => {
                       )}
                     </>
                   ) : (
-                    <h2>No private key</h2>
+                    <>
+                      <div className="import-chat">
+                        <ImportChats />
+                      </div>
+                    </>
                   )
                 ) : (
                   <div className="d-flex justify-content-center align-items-center full-page">
-                    <div className="no-chat text-center">
-                      <p>
-                        You haven't joined the chat yet. Please join the chat to start chatting.
-                      </p>
-                      <Button onClick={handleJoinChat}>
-                        {showSpinner && (
-                          <Spinner
-                            animation="grow"
-                            variant="light"
-                            size="sm"
-                            style={{ marginRight: "6px" }}
-                          />
-                        )}
-                        Join Chat
-                      </Button>
-                    </div>
+                    <JoinChat {...props} />
                   </div>
                 )}
               </>

From 49adf6fa6f3f9d86179d92beca55514f53d8ad30 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 7 Sep 2023 20:37:22 +0500
Subject: [PATCH 058/179] Small issue fix

---
 src/common/components/chats/chat-popup/index.tsx           | 7 ++++---
 .../components/chats/chats-direct-messages/index.tsx       | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index babfd0921f8..18dfdb3c1b7 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -108,7 +108,6 @@ export default function ChatPopUp(props: Props) {
   const { activeUser } = useMappedStore();
 
   const context = useContext(ChatContext);
-  const { receiverPubKey, setReceiverPubKey } = context;
 
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
@@ -120,6 +119,7 @@ export default function ChatPopUp(props: Props) {
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
+  const [receiverPubKey, setReceiverPubKey] = useState();
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
@@ -150,8 +150,8 @@ export default function ChatPopUp(props: Props) {
   const [refreshChat, setRefreshChat] = useState(false);
 
   useEffect(() => {
-    console.log("Chat in store", props.chat);
-  }, [props.chat]);
+    console.log("directMessagesList in chat popup", directMessagesList);
+  }, [directMessagesList]);
 
   useEffect(() => {
     if (currentChannel && props.chat.leftChannelsList.includes(currentChannel.id)) {
@@ -416,6 +416,7 @@ export default function ChatPopUp(props: Props) {
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
     const { nsKey } = profile || {};
+    setReceiverPubKey(nsKey);
     setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index c13b0c68df6..d0bd91c9b7e 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -48,11 +48,14 @@ export default function ChatsDirectMessages(props: Props) {
   const { receiverPubKey, setReceiverPubKey } = context;
   const { chat, global, activeUser } = useMappedStore();
 
+  console.log("directMessages", directMessages);
+
   let prevGlobal = usePrevious(global);
 
   useEffect(() => {
     if (currentUser) {
       getReceiverPubKey();
+      console.log("use effect in currentUser");
     }
   }, [currentUser]);
 

From bf0585d18c7105c2d3d3935008cd2caae089b08f Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 8 Sep 2023 15:19:53 +0500
Subject: [PATCH 059/179] Add receiver public key in context

---
 .../components/chats/chat-input/index.tsx     |  16 ++-
 .../components/chats/chat-popup/index.tsx     | 102 +++---------------
 src/common/components/chats/chat-provider.tsx |   6 +-
 .../chats/chats-direct-messages/index.tsx     |  24 +----
 .../chats/chats-messages-view/index.tsx       |  24 +----
 .../chats/chats-profile-box/index.tsx         |   4 -
 .../components/chats/chats-sidebar/indes.tsx  |  53 +++++++--
 .../components/chats/chats-sidebar/index.scss |  11 +-
 8 files changed, 83 insertions(+), 157 deletions(-)

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index c91831e7d97..8f8f21673b7 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -35,6 +35,7 @@ interface Props {
   currentChannel: Channel;
   currentUser: string;
   isCurrentUserJoined: boolean;
+  receiverPubKey: string;
   emojiPickerStyles: EmojiPickerStyleProps;
   gifPickerStyle: EmojiPickerStyleProps;
 }
@@ -43,11 +44,6 @@ export default function ChatInput(props: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const { global, activeUser, chat } = useMappedStore();
 
-  const context = useContext(ChatContext);
-  const { receiverPubKey } = context;
-
-  console.log("receiverPubKey", receiverPubKey);
-
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
@@ -61,7 +57,8 @@ export default function ChatInput(props: Props) {
     currentUser,
     isCurrentUserJoined,
     emojiPickerStyles,
-    gifPickerStyle
+    gifPickerStyle,
+    receiverPubKey
   } = props;
 
   useEffect(() => {
@@ -107,7 +104,6 @@ export default function ChatInput(props: Props) {
       !chat.directContacts.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
-      console.log("Contact has been published");
       window.messageService?.publishContacts(currentUser, receiverPubKey);
     }
   };
@@ -183,7 +179,9 @@ export default function ChatInput(props: Props) {
     <>
       <div
         className={`chat ${
-          isActveUserRemoved || !isCurrentUserJoined || receiverPubKey?.length === 0
+          isActveUserRemoved ||
+          !isCurrentUserJoined ||
+          (isCurrentUser && receiverPubKey?.length === 0)
             ? "disable"
             : ""
         }`}
@@ -280,7 +278,7 @@ export default function ChatInput(props: Props) {
               autoComplete="off"
               className="chat-input"
               style={{ maxWidth: "100%", overflowWrap: "break-word" }}
-              disabled={receiverPubKey?.length === 0 || isActveUserRemoved}
+              disabled={(isCurrentUser && receiverPubKey?.length === 0) || isActveUserRemoved}
             />
             <InputGroup.Append
               className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 18dfdb3c1b7..36c5f053ab2 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -119,7 +119,7 @@ export default function ChatPopUp(props: Props) {
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
-  const [receiverPubKey, setReceiverPubKey] = useState();
+  const [receiverPubKey, setReceiverPubKey] = useState("");
   const [showSpinner, setShowSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
@@ -279,7 +279,6 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (isCurrentUser) {
-      // zoomInitializer();
       scrollerClicked();
     } else {
       scrollerClicked();
@@ -319,11 +318,12 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (currentUser) {
-      const isCurrentUserFound = props.chat.directContacts.some(
+      const isCurrentUserFound = props.chat.directContacts.find(
         (contact) => contact.name === currentUser
       );
       if (isCurrentUserFound) {
-        fetchCurrentUserData();
+        setReceiverPubKey(isCurrentUserFound.pubkey);
+        setIsCurrentUserJoined(true);
       } else {
         setInProgress(true);
         fetchCurrentUserData();
@@ -416,7 +416,12 @@ export default function ChatPopUp(props: Props) {
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata!).profile;
     const { nsKey } = profile || {};
-    setReceiverPubKey(nsKey);
+    if (nsKey) {
+      setReceiverPubKey(nsKey);
+    } else {
+      setReceiverPubKey("");
+    }
+
     setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
@@ -530,30 +535,6 @@ export default function ChatPopUp(props: Props) {
     setCommunityName(community);
   };
 
-  const handleImportChatSubmit = () => {
-    try {
-      const pubKey = getPublicKey(chatPrivKey);
-      if (pubKey === activeUserKeys?.pub) {
-        setNoStrPrivKey(chatPrivKey);
-        ls.set(`${props.activeUser?.username}_nsPrivKey`, chatPrivKey);
-        const keys = {
-          pub: activeUserKeys?.pub!,
-          priv: chatPrivKey
-        };
-        setNostrkeys(keys);
-        setStep(4);
-        setChatPrivkey("");
-        setImportPrivKey(false);
-      } else {
-        setImportPrivKey(true);
-        setAddRoleError("Invalid Private key");
-      }
-    } catch (error) {
-      setImportPrivKey(true);
-      setAddRoleError("Invalid Private key");
-    }
-  };
-
   const finish = () => {
     setStep(0);
     setKeyDialog(false);
@@ -677,7 +658,7 @@ export default function ChatPopUp(props: Props) {
                 innerWidth <= 666 ? "small-screen" : ""
               }`}
             >
-              <SetActiveUserChatKeys />
+              {/* <SetActiveUserChatKeys /> */}
               <div className="chat-header">
                 {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
                   <Tooltip content={_t("chat.back")}>
@@ -812,6 +793,7 @@ export default function ChatPopUp(props: Props) {
                           {isCurrentUser ? (
                             <ChatsDirectMessages
                               {...props}
+                              receiverPubKey={receiverPubKey}
                               directMessages={directMessagesList}
                               activeUserKeys={activeUserKeys!}
                               currentUser={currentUser}
@@ -936,7 +918,10 @@ export default function ChatPopUp(props: Props) {
 
                                   <div
                                     className="user-title"
-                                    onClick={() => userClicked(user.name)}
+                                    onClick={() => {
+                                      userClicked(user.name);
+                                      setReceiverPubKey(user.pubkey);
+                                    }}
                                   >
                                     <p className="username">{user.name}</p>
                                     <p className="last-message">
@@ -949,60 +934,6 @@ export default function ChatPopUp(props: Props) {
                           </React.Fragment>
                         ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
                           <>
-                            {/* <div
-                              className="d-flex justify-content-center import-chat-btn"
-                              style={{ marginTop: "20%" }}
-                            >
-                              <Button
-                                variant="primary"
-                                onClick={() => setImportPrivKey(!importPrivKey)}
-                              >
-                                {_t("chat.import-chat")}
-                              </Button>
-                            </div>
-                            {importPrivKey && (
-                              <div className="private-key" style={{ margin: "15px 10px" }}>
-                                <Form
-                                  onSubmit={(e: React.FormEvent) => {
-                                    e.preventDefault();
-                                  }}
-                                >
-                                  <InputGroup>
-                                    <InputGroup.Prepend>
-                                      <InputGroup.Text>{keySvg}</InputGroup.Text>
-                                    </InputGroup.Prepend>
-                                    <Form.Control
-                                      value={chatPrivKey}
-                                      type="password"
-                                      autoFocus={true}
-                                      autoComplete="off"
-                                      placeholder="Chat private key"
-                                      onChange={(e) => setChatPrivkey(e.target.value)}
-                                    />
-                                    <InputGroup.Append>
-                                      <Button onClick={handleImportChatSubmit}>
-                                        {_t("chat.submit")}
-                                      </Button>
-                                    </InputGroup.Append>
-                                  </InputGroup>
-                                  {addRoleError && (
-                                    <Form.Text className="text-danger">{addRoleError}</Form.Text>
-                                  )}
-                                </Form>
-                              </div>
-                            )}
-                            {<OrDivider />}
-                            <div className="d-flex justify-content-center create-new-chat-btn">
-                              <Button
-                                variant="primary"
-                                onClick={() => {
-                                  setKeyDialog(true);
-                                  setStep(9);
-                                }}
-                              >
-                                {_t("chat.create-new-account")}
-                              </Button>
-                            </div> */}
                             <ImportChats />
                           </>
                         ) : refreshChat ? (
@@ -1061,6 +992,7 @@ export default function ChatPopUp(props: Props) {
                   isCommunity={isCommunity}
                   isActveUserRemoved={isActveUserRemoved}
                   currentUser={currentUser}
+                  receiverPubKey={receiverPubKey}
                   currentChannel={currentChannel!}
                   isCurrentUserJoined={isCurrentUserJoined}
                   emojiPickerStyles={EmojiPickerStyle}
diff --git a/src/common/components/chats/chat-provider.tsx b/src/common/components/chats/chat-provider.tsx
index 7aae07d1d91..7ea46627e0a 100644
--- a/src/common/components/chats/chat-provider.tsx
+++ b/src/common/components/chats/chat-provider.tsx
@@ -39,8 +39,8 @@ export default function ChatProvider({ children }: ChatProviderProps) {
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [inProgress, setInProgress] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
-  const [receiverPubKey, setReceiverPubKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
+  const [receiverPubKey, setReceiverPubKey] = useState("");
 
   useEffect(() => {
     getActiveUserKeys();
@@ -72,8 +72,8 @@ export default function ChatProvider({ children }: ChatProviderProps) {
         activeUserKeys,
         inProgress,
         revealPrivKey,
-        chatPrivKey,
         receiverPubKey,
+        chatPrivKey,
         setRevealPrivKey,
         setInProgress,
         setChatPrivKey,
@@ -85,8 +85,8 @@ export default function ChatProvider({ children }: ChatProviderProps) {
         activeUserKeys,
         inProgress,
         revealPrivKey,
-        chatPrivKey,
         receiverPubKey,
+        chatPrivKey,
         setRevealPrivKey,
         setInProgress,
         setChatPrivKey,
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index d0bd91c9b7e..5b741bb9612 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -22,7 +22,6 @@ import { ActiveUser } from "../../../store/active-user/types";
 import usePrevious from "react-use/lib/usePrevious";
 import { NostrKeysType } from "../types";
 import { _t } from "../../../i18n";
-import { ChatContext } from "../chat-provider";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -30,6 +29,7 @@ interface Props {
   currentUser: string;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
+  receiverPubKey: string;
   scrollToBottom?: () => void;
 }
 
@@ -40,35 +40,17 @@ export default function ChatsDirectMessages(props: Props) {
     activeUserKeys,
     currentUser,
     isScrolled,
+    receiverPubKey,
     isScrollToBottom,
     scrollToBottom
   } = props;
 
-  const context = useContext(ChatContext);
-  const { receiverPubKey, setReceiverPubKey } = context;
   const { chat, global, activeUser } = useMappedStore();
 
   console.log("directMessages", directMessages);
 
   let prevGlobal = usePrevious(global);
 
-  useEffect(() => {
-    if (currentUser) {
-      getReceiverPubKey();
-      console.log("use effect in currentUser");
-    }
-  }, [currentUser]);
-
-  const getReceiverPubKey = async () => {
-    const pubKey = await getUserChatPublicKey(currentUser);
-
-    if (pubKey) {
-      setReceiverPubKey(pubKey);
-    } else {
-      setReceiverPubKey("");
-    }
-  };
-
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -83,7 +65,7 @@ export default function ChatsDirectMessages(props: Props) {
     if (!isScrollToBottom && directMessages && directMessages.length !== 0 && !isScrolled) {
       scrollToBottom && scrollToBottom();
     }
-  }, [directMessages, isScrollToBottom, scrollToBottom]);
+  }, [directMessages, isScrollToBottom, scrollToBottom, receiverPubKey]);
 
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index de7d244ed04..6cb285e96ef 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -65,7 +65,9 @@ export default function ChatsMessagesView(props: Props) {
   } = props;
 
   const context = useContext(ChatContext);
-  const { setReceiverPubKey } = context;
+  const { receiverPubKey } = context;
+
+  // console.log("Receiver pubkey in Message view component", receiverPubKey, setReceiverPubKey);
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
@@ -82,19 +84,11 @@ export default function ChatsMessagesView(props: Props) {
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
-  // console.log("yaha kiya a rha ha", setReceiverPubKey);
-
   useEffect(() => {
     getActiveUserKeys();
     isDirectUserOrCommunity();
   }, []);
 
-  // useEffect(() => {
-  //   if (directUser) {
-  //     getReceiverPubKey();
-  //   }
-  // }, [directUser]);
-
   useEffect(() => {
     isDirectUserOrCommunity();
   }, [chat.channels]);
@@ -159,16 +153,6 @@ export default function ChatsMessagesView(props: Props) {
     setActiveUserKeys(activeUserKeys);
   };
 
-  // const getReceiverPubKey = async () => {
-  //   const profileData = await getProfileMetaData(directUser);
-
-  //   if (profileData?.nsKey) {
-  //     setReceiverPubKey(profileData?.nsKey);
-  //   } else {
-  //     setReceiverPubKey("");
-  //   }
-  // };
-
   const isDirectUserOrCommunity = () => {
     if (username) {
       if (username && username.startsWith("@")) {
@@ -264,6 +248,7 @@ export default function ChatsMessagesView(props: Props) {
             activeUserKeys={activeUserKeys!}
             currentUser={directUser!}
             isScrolled={isScrolled}
+            receiverPubKey={receiverPubKey}
             isScrollToBottom={isScrollToBottom}
             scrollToBottom={scrollToBottom}
           />
@@ -278,6 +263,7 @@ export default function ChatsMessagesView(props: Props) {
         )}
       </div>
       <ChatInput
+        receiverPubKey={receiverPubKey}
         emojiPickerStyles={EmojiPickerStyle}
         gifPickerStyle={EmojiPickerStyle}
         isCurrentUser={directUser ? true : false}
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
index 97c9f6236a2..173f71c2c9d 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -51,7 +51,6 @@ export default function ChatsProfileBox(props: Props) {
     if (username && username?.length !== 0) {
       if (username?.startsWith("@")) {
         const response = await getAccountFull(formattedUserName(username));
-        console.log("1", response);
         setProfileData({
           joiningData: response.created,
           about: response.profile?.about,
@@ -62,7 +61,6 @@ export default function ChatsProfileBox(props: Props) {
         });
       } else {
         const community = await getCommunity(username!, activeUser?.username);
-        console.log("2", community);
         setProfileData({
           joiningData: community?.created_at!,
           about: community?.about,
@@ -75,7 +73,6 @@ export default function ChatsProfileBox(props: Props) {
     } else {
       if (isCurrentUser && currentUser?.length !== 0) {
         const response = await getAccountFull(currentUser!);
-        console.log("3", response);
         setProfileData({
           joiningData: response.created,
           about: response.profile?.about,
@@ -86,7 +83,6 @@ export default function ChatsProfileBox(props: Props) {
         });
       } else {
         const community = await getCommunity(communityName!, activeUser?.username);
-        console.log("4", community);
         setProfileData({
           joiningData: community?.created_at!,
           about: community?.about,
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 516f9d481e2..81f300e6075 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -24,6 +24,7 @@ import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { AccountWithReputation, NostrKeysType } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-provider";
+import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
 
 interface MatchParams {
   filter: string;
@@ -43,7 +44,14 @@ export default function ChatsSideBar(props: Props) {
   const { channels, directContacts, leftChannelsList } = chat;
   const { match, resetChat } = props;
 
-  const { activeUserKeys, revealPrivKey, chatPrivKey, setInProgress, setRevealPrivKey } = context;
+  const {
+    activeUserKeys,
+    revealPrivKey,
+    chatPrivKey,
+    setInProgress,
+    setRevealPrivKey,
+    setReceiverPubKey
+  } = context;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
   const username = match.params.username;
@@ -55,6 +63,8 @@ export default function ChatsSideBar(props: Props) {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [communities, setCommunities] = useState<Channel[]>([]);
 
+  console.log("username in chats sidebar", username);
+
   useDebounce(
     async () => {
       if (searchText.length !== 0) {
@@ -68,11 +78,11 @@ export default function ChatsSideBar(props: Props) {
     [searchText]
   );
 
-  // useEffect(() => {
-  //   if (isScrollToTop) {
-  //     // console.log("Hurrah");
-  //   }
-  // }, [isScrollToTop]);
+  useEffect(() => {
+    if (username.startsWith("@")) {
+      getReceiverPubKey(formattedUserName(username));
+    }
+  }, [username]);
 
   useEffect(() => {
     const communities = getJoinedCommunities(channels, leftChannelsList);
@@ -107,6 +117,22 @@ export default function ChatsSideBar(props: Props) {
     }
   };
 
+  const getReceiverPubKey = async (username: string) => {
+    console.log("Username ha yar", username);
+    const peer = directContacts.find((x) => x.name === username)?.pubkey ?? "";
+    if (peer) {
+      setReceiverPubKey(peer);
+    } else {
+      const pubkey = await getUserChatPublicKey(username);
+      console.log("Pubkey", pubkey);
+      if (pubkey === undefined) {
+        setReceiverPubKey("");
+      } else {
+        setReceiverPubKey(pubkey);
+      }
+    }
+  };
+
   return (
     <div className="chats-sidebar">
       <div className="d-flex justify-content-between chats-title">
@@ -173,7 +199,14 @@ export default function ChatsSideBar(props: Props) {
                 onClick={() => setSearchText("")}
                 key={user.account}
               >
-                <div className="d-flex user-info" key={user.account} onClick={handleRevealPrivKey}>
+                <div
+                  className="d-flex user-info"
+                  key={user.account}
+                  onClick={() => {
+                    handleRevealPrivKey();
+                    getReceiverPubKey(user.account);
+                  }}
+                >
                   <span>
                     <UserAvatar username={user.account} size="medium" />
                   </span>
@@ -205,7 +238,11 @@ export default function ChatsSideBar(props: Props) {
             ))}
             {directContacts.length !== 0 && <p className="dm-title">DMs</p>}
             {directContacts.map((contact) => (
-              <Link to={`/chats/@${contact.name}`} key={contact.pubkey}>
+              <Link
+                to={`/chats/@${contact.name}`}
+                key={contact.pubkey}
+                onClick={() => setReceiverPubKey(contact.pubkey)}
+              >
                 <div
                   className={`dm ${username && username === `@${contact.name}` ? "selected" : ""}`}
                   onClick={handleRevealPrivKey}
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index bbdf3e28add..9eeda140b33 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -185,20 +185,15 @@
         font-size: 18px;
         font-weight: 700;
       }
-      .community-last-message,
-      .dm-last-message {
-        margin-bottom: 0;
-        padding: 4px 0 0 25px;
-        font-size: 13px;
-        font-family: 400;
-      }
+      .dm-last-message,
       .community-last-message {
         max-width: 255px;
+        padding: 4px 0 0 25px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         margin-bottom: 0;
-        font-size: 14px;
+        font-size: 13px;
       }
     }
     &.selected {

From 7d4fd2e824dadd991598657c28383fe92a662c55 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 8 Sep 2023 19:52:28 +0500
Subject: [PATCH 060/179] handle username in chats sidebar component

---
 src/common/components/chats/chats-sidebar/indes.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 81f300e6075..9831e8cf95a 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -79,8 +79,10 @@ export default function ChatsSideBar(props: Props) {
   );
 
   useEffect(() => {
-    if (username.startsWith("@")) {
-      getReceiverPubKey(formattedUserName(username));
+    if (username !== undefined) {
+      if (username.startsWith("@")) {
+        getReceiverPubKey(formattedUserName(username));
+      }
     }
   }, [username]);
 

From c8d4506ab1e2c24ea18e3a6c72303677065038f3 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 12 Sep 2023 19:44:22 +0500
Subject: [PATCH 061/179] WIP

---
 src/common/app.tsx                            |  11 +-
 ...provider.tsx => chat-context-provider.tsx} |  60 +-
 .../components/chats/chat-input/index.scss    |   8 +-
 .../components/chats/chat-input/index.tsx     |  34 +-
 .../chats/chat-popup/chat-constants.ts        |   2 +
 .../components/chats/chat-popup/index.scss    | 197 +---
 .../components/chats/chat-popup/index.tsx     | 846 +++++++++---------
 .../chats/chats-channel-messages/index.tsx    |  21 +-
 .../chats-community-dropdown-menu/index.scss  |   0
 .../chats-community-dropdown-menu/index.tsx   |  13 +-
 .../chats/chats-direct-messages/index.tsx     |   2 +-
 .../chats/chats-messages-box/index.tsx        |   8 +-
 .../chats/chats-messages-header/index.tsx     |   2 +-
 .../chats/chats-messages-view/index.tsx       |  13 +-
 .../chats/chats-profile-box/index.tsx         |  11 +-
 .../components/chats/chats-sidebar/indes.tsx  |  10 +-
 .../components/chats/import-chats/index.scss  |   2 +
 .../components/chats/import-chats/index.tsx   |  10 +-
 .../components/chats/join-chat/index.tsx      |   9 +-
 .../chats/join-community-chat-btn/index.tsx   |  16 +-
 .../components/chats/set-chat-keys/index.tsx  |  28 -
 src/common/components/chats/types/index.ts    |   1 +
 .../chats/utils/get-joined-communities.ts     |   2 +-
 .../chats/utils/get-user-chat-public-key.ts   |   2 +-
 .../chats/utils/upload-channel-data.ts        |   2 +-
 .../utils/use-fetch-community-messages.ts     |   2 +-
 .../components/community-cover/index.tsx      |   6 +-
 src/common/components/login/index.tsx         |   2 +-
 .../components/manage-chat-key/index.tsx      |   2 +-
 src/common/helper/message-service.ts          |  33 +-
 src/common/pages/chats/index.tsx              | 106 +--
 src/common/pages/community-functional.tsx     |  22 +-
 src/common/store/chat/index.ts                |   2 +-
 src/common/store/chat/types.ts                |   2 +-
 .../message-manager-types.ts}                 |   0
 .../message-manager.tsx}                      |  54 +-
 36 files changed, 698 insertions(+), 843 deletions(-)
 rename src/common/components/chats/{chat-provider.tsx => chat-context-provider.tsx} (57%)
 delete mode 100644 src/common/components/chats/chats-community-dropdown-menu/index.scss
 delete mode 100644 src/common/components/chats/set-chat-keys/index.tsx
 rename src/{providers/message-provider-types.ts => managers/message-manager-types.ts} (100%)
 rename src/{providers/message-provider.tsx => managers/message-manager.tsx} (89%)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 03c7c378456..ced6574a230 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Route, Switch } from "react-router-dom";
 import EntryIndexContainer from "./pages/index";
-import MessageProvider from "../providers/message-provider";
+import MessageManager from "../managers/message-manager";
 import { EntryScreen } from "./pages/entry";
 import { SearchMorePageContainer, SearchPageContainer } from "./pages/search";
 import { ProposalDetailContainer, ProposalsIndexContainer } from "./pages/proposals";
@@ -25,11 +25,12 @@ import { connect } from "react-redux";
 import loadable from "@loadable/component";
 import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
-import ChatPopUp from "./components/chats/chat-popup";
 import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
+import ChatContextProvider from "./components/chats/chat-context-provider";
+import ChatPopUp from "./components/chats/chat-popup";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -184,8 +185,10 @@ const App = (props: any) => {
 
       <Announcement activeUser={props.activeUser} />
       <FloatingFAQ />
-      <MessageProvider {...props} />
-      <ChatPopUp {...props} />
+      <ChatContextProvider>
+        <MessageManager {...props} />
+        <ChatPopUp {...props} />
+      </ChatContextProvider>
     </EntriesCacheManager>
   );
 };
diff --git a/src/common/components/chats/chat-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
similarity index 57%
rename from src/common/components/chats/chat-provider.tsx
rename to src/common/components/chats/chat-context-provider.tsx
index 7ea46627e0a..6c1d8b765af 100644
--- a/src/common/components/chats/chat-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Keys } from "../../../managers/message-manager-types";
+import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
 import { getPrivateKey, getUserChatPublicKey } from "./utils";
@@ -9,15 +11,19 @@ interface Context {
   revealPrivKey: boolean;
   chatPrivKey: string;
   receiverPubKey: string;
+  messageServiceInstance: MessageService | undefined;
   setRevealPrivKey: (d: boolean) => void;
   setInProgress: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
   setActiveUserKeys: (keys: NostrKeysType) => void;
   setReceiverPubKey: (key: string) => void;
+
+  setMessageServiceInstance: (instance: MessageService | undefined) => void;
+  initMessageServiceInstance: (keys: Keys) => void;
 }
 
-interface ChatProviderProps {
-  children: (context: Context) => React.ReactNode;
+interface Props {
+  children: JSX.Element | JSX.Element[];
 }
 
 export const ChatContext = React.createContext<Context>({
@@ -26,14 +32,17 @@ export const ChatContext = React.createContext<Context>({
   revealPrivKey: false,
   chatPrivKey: "",
   receiverPubKey: "",
+  messageServiceInstance: undefined,
   setRevealPrivKey: () => {},
   setInProgress: () => {},
   setChatPrivKey: () => {},
   setActiveUserKeys: () => {},
-  setReceiverPubKey: () => {}
+  setReceiverPubKey: () => {},
+  setMessageServiceInstance: () => {},
+  initMessageServiceInstance: () => {}
 });
 
-export default function ChatProvider({ children }: ChatProviderProps) {
+export default function ChatContextProvider({ children }: Props) {
   const { activeUser } = useMappedStore();
 
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
@@ -41,11 +50,20 @@ export default function ChatProvider({ children }: ChatProviderProps) {
   const [chatPrivKey, setChatPrivKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
+  const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | undefined>(
+    undefined
+  );
 
   useEffect(() => {
     getActiveUserKeys();
   }, []);
 
+  useEffect(() => {
+    if (messageServiceInstance) {
+      console.log("messageServiceInstance in context", messageServiceInstance);
+    }
+  }, [messageServiceInstance]);
+
   useEffect(() => {
     if (inProgress) {
       setTimeout(() => {
@@ -66,6 +84,22 @@ export default function ChatProvider({ children }: ChatProviderProps) {
     setActiveUserKeys(activeUserKeys);
   };
 
+  const initMessageServiceInstance = (keys: Keys) => {
+    console.log("Keys are in context", keys, messageServiceInstance);
+    if (messageServiceInstance) {
+      messageServiceInstance.close();
+      setMessageServiceInstance(undefined);
+    }
+
+    let newMessageService: MessageService | undefined = undefined;
+    if (keys) {
+      newMessageService = new MessageService(keys.priv, keys.pub);
+      console.log("raven instance created", newMessageService);
+      setMessageServiceInstance(newMessageService);
+    }
+    return newMessageService;
+  };
+
   return (
     <ChatContext.Provider
       value={{
@@ -74,25 +108,17 @@ export default function ChatProvider({ children }: ChatProviderProps) {
         revealPrivKey,
         receiverPubKey,
         chatPrivKey,
+        messageServiceInstance,
         setRevealPrivKey,
         setInProgress,
         setChatPrivKey,
         setActiveUserKeys,
-        setReceiverPubKey
+        setReceiverPubKey,
+        setMessageServiceInstance,
+        initMessageServiceInstance
       }}
     >
-      {children({
-        activeUserKeys,
-        inProgress,
-        revealPrivKey,
-        receiverPubKey,
-        chatPrivKey,
-        setRevealPrivKey,
-        setInProgress,
-        setChatPrivKey,
-        setActiveUserKeys,
-        setReceiverPubKey
-      })}
+      {children}
     </ChatContext.Provider>
   );
 }
diff --git a/src/common/components/chats/chat-input/index.scss b/src/common/components/chats/chat-input/index.scss
index b5af1d1fa20..a93f6b97fd1 100644
--- a/src/common/components/chats/chat-input/index.scss
+++ b/src/common/components/chats/chat-input/index.scss
@@ -1,7 +1,4 @@
-@import "src/style/colors";
-@import "src/style/variables";
-@import "src/style/bootstrap_vars";
-@import "src/style/mixins";
+@import "../../../../style/vars_mixins";
 
 .chat {
   grid-row: span 1;
@@ -44,6 +41,9 @@
     .chat-input {
       padding-top: 10px;
       border: none;
+      max-width: 100%;
+      overflow-wrap: break-word;
+
       @include themify(day) {
         background: #e4e6eb;
       }
diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index 8f8f21673b7..7ac59dae052 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { Form, FormControl, InputGroup } from "react-bootstrap";
 import axios from "axios";
 
-import { Channel } from "../../../../providers/message-provider-types";
+import { Channel } from "../../../../managers/message-manager-types";
 import { EmojiPickerStyleProps } from "../types";
 
 import ClickAwayListener from "../../clickaway-listener";
@@ -17,7 +17,8 @@ import {
   chatBoxImageSvg,
   messageSendSvg
 } from "../../../img/svg";
-import { GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
+import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
+import { classNameObject } from "../../../helper/class-name-object";
 
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
@@ -26,7 +27,7 @@ import { uploadImage } from "../../../api/misc";
 import { addImage } from "../../../api/private-api";
 
 import "./index.scss";
-import { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   isCurrentUser: boolean;
@@ -49,6 +50,9 @@ export default function ChatInput(props: Props) {
   const [shGif, setShGif] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
 
+  const { messageServiceInstance, chatPrivKey } = useContext(ChatContext);
+  // console.log("yaha check kar ka dekho", messageServiceInstance, chatPrivKey);
+
   const {
     isCommunity,
     isCurrentUser,
@@ -80,21 +84,21 @@ export default function ChatInput(props: Props) {
 
   const handleGifSelection = (gif: string) => {
     isCurrentUser
-      ? window.messageService?.sendDirectMessage(receiverPubKey!, gif)
-      : window?.messageService?.sendPublicMessage(currentChannel, gif, [], "");
+      ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, gif)
+      : messageServiceInstance?.sendPublicMessage(currentChannel, gif, [], "");
   };
 
   const sendMessage = () => {
     if (message.length !== 0 && !message.includes(UPLOADING)) {
       if (isCommunity) {
         if (!isActveUserRemoved) {
-          window?.messageService?.sendPublicMessage(currentChannel, message, [], "");
+          messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
         } else {
           error(_t("chat.message-warning"));
         }
       }
       if (isCurrentUser) {
-        window.messageService?.sendDirectMessage(receiverPubKey!, message);
+        messageServiceInstance?.sendDirectMessage(receiverPubKey!, message);
       }
       setMessage("");
       setIsMessageText(false);
@@ -104,13 +108,13 @@ export default function ChatInput(props: Props) {
       !chat.directContacts.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
-      window.messageService?.publishContacts(currentUser, receiverPubKey);
+      messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
     }
   };
 
   const checkFile = (filename: string) => {
     const filenameLow = filename.toLowerCase();
-    return ["jpg", "jpeg", "gif", "png"].some((el) => filenameLow.endsWith(el));
+    return CHAT_FILE_CONTENT_TYPES.some((el) => filenameLow.endsWith(el));
   };
 
   const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -249,12 +253,11 @@ export default function ChatInput(props: Props) {
 
             <input
               onChange={fileInputChanged}
-              className="file-input"
+              className="file-input d-none"
               ref={fileInputRef}
               type="file"
               accept="image/*"
               multiple={true}
-              style={{ display: "none" }}
             />
           </React.Fragment>
         )}
@@ -265,7 +268,7 @@ export default function ChatInput(props: Props) {
             e.stopPropagation();
             sendMessage();
           }}
-          style={{ width: "100%" }}
+          className="w-100"
         >
           <InputGroup className="chat-input-group">
             <Form.Control
@@ -277,11 +280,14 @@ export default function ChatInput(props: Props) {
               placeholder={_t("chat.start-chat-placeholder")}
               autoComplete="off"
               className="chat-input"
-              style={{ maxWidth: "100%", overflowWrap: "break-word" }}
               disabled={(isCurrentUser && receiverPubKey?.length === 0) || isActveUserRemoved}
             />
             <InputGroup.Append
-              className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
+              // className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
+              className={classNameObject({
+                "msg-svg": true,
+                active: isMessageText || message.length !== 0
+              })}
               onClick={sendMessage}
             >
               {messageSendSvg}
diff --git a/src/common/components/chats/chat-popup/chat-constants.ts b/src/common/components/chats/chat-popup/chat-constants.ts
index dab6f664135..5401fcde0b6 100644
--- a/src/common/components/chats/chat-popup/chat-constants.ts
+++ b/src/common/components/chats/chat-popup/chat-constants.ts
@@ -27,6 +27,8 @@ export const GifImagesStyle = {
   width: "170px"
 };
 
+export const CHAT_FILE_CONTENT_TYPES = ["jpg", "jpeg", "gif", "png"];
+
 export const NOSTRKEY = "nsKey";
 export const UPLOADING = "Uploading";
 export const GIPHGY = "giphy";
diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/components/chats/chat-popup/index.scss
index e6065a34a2f..d7a117ad0f3 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/components/chats/chat-popup/index.scss
@@ -1,7 +1,4 @@
-@import "src/style/colors";
-@import "src/style/variables";
-@import "src/style/bootstrap_vars";
-@import "src/style/mixins";
+@import "../../../../style/vars_mixins";
 
 .chatbox-container {
   position: fixed;
@@ -161,7 +158,6 @@
       padding-left: 14px;
       font-family: Faktum, sans-serif;
       font-weight: 700;
-      // background: #e4e6eb;
     }
 
     &.current-user {
@@ -258,7 +254,7 @@
         padding: 13px 16px;
       }
       .user-title {
-        padding-top: 13px;
+        padding-top: 6px;
         width: -webkit-fill-available;
 
         .username {
@@ -403,171 +399,6 @@
         justify-content: center;
         margin-top: 14%;
       }
-      // .custom-divider {
-      //   margin: 12px 24px 0px 24px;
-      //   font-size: 0.7em;
-      //   color: $dark;
-      //   .custom-divider-text {
-      //     display: flex;
-      //     justify-content: center;
-      //     padding: 0 8px;
-      //   }
-      // }
-      // .message {
-      // display: flex;
-      // .user-img {
-      //   padding: 18px 8px 8px 16px;
-      // }
-      // .community-user-img {
-      //   padding: 8px 8px 8px 16px;
-      //   .user-avatar.medium {
-      //     cursor: pointer;
-      //   }
-      // }
-      // .user-info {
-      //   padding-top: 8px;
-      //   .user-msg-time {
-      //     margin: 0;
-      //     color: rgb(138, 141, 145);
-      //     font-weight: 400;
-      //     font-size: 12px;
-      //     margin-left: 4px;
-      //     margin-bottom: 2px;
-      //     .username-community {
-      //       margin-right: 8px;
-      //     }
-      //   }
-      //   .receiver-message-content {
-      //     @include themify(day) {
-      //       background: #e4e6eb;
-      //     }
-      //     @include themify(night) {
-      //       background: #cee2ff;
-      //     }
-
-      //     &.gif {
-      //       background: none;
-      //       img {
-      //         max-width: 100%;
-      //       }
-      //     }
-
-      //     &.chat-image {
-      //       background: none;
-      //       img {
-      //         max-width: 100%;
-      //       }
-      //     }
-      //     color: #050505;
-      //     max-width: 290px;
-      //     word-wrap: break-word;
-      //     padding: 10px;
-      //     border-radius: 0px 10px 10px;
-      //   }
-      // }
-      // }
-      // .sender {
-      //   margin-bottom: 0.17rem;
-      //   .sender-message-time {
-      //     color: rgb(138, 141, 145);
-      //     display: flex;
-      //     font-weight: 400;
-      //     justify-content: flex-end;
-      //     font-size: 12px;
-      //     margin: 0;
-      //     margin-right: 18px;
-      //     margin-bottom: 2px;
-      //   }
-      //   .sender-message {
-      //     // max-width: 320px;
-      //     margin-left: auto;
-
-      //     display: flex;
-      //     justify-content: flex-end;
-      //     margin-right: 17px;
-
-      //     .resend-svg {
-      //       margin: 5px 15px 0 0;
-      //       cursor: pointer;
-      //       svg {
-      //         @include themify(day) {
-      //           fill: $light-black;
-      //         }
-      //         @include themify(night) {
-      //           fill: $white;
-      //         }
-      //       }
-      //     }
-
-      //     .failed-svg {
-      //       margin: 8px 0 0 5px;
-      //       svg {
-      //         width: 16px;
-      //         height: 16px;
-      //         fill: $red !important;
-      //       }
-      //     }
-
-      //     &.sending {
-      //       margin-right: 5px;
-      //     }
-      //     &.failed {
-      //       margin-right: 7px;
-      //     }
-
-      //     .sender-message-content {
-      //       border-radius: 10px 10px 0px;
-      //       max-width: 290px;
-      //       word-wrap: break-word;
-      //       margin-bottom: 0;
-      //       color: $charcoal-grey;
-      //       font-size: 16px;
-      //       font-weight: 400;
-      //       padding: 8px 12px 8px 12px;
-      //       a {
-      //         text-decoration: underline;
-      //         color: white;
-      //       }
-      //       @include themify(day) {
-      //         background-color: rgb(0, 132, 255);
-      //         color: $white;
-      //       }
-      //       @include themify(night) {
-      //         background: $charcoal-grey;
-      //         color: $white;
-      //       }
-      //       &.gif {
-      //         background: none;
-      //         img {
-      //           max-width: 100%;
-      //         }
-      //       }
-
-      //       &.chat-image {
-      //         background: none;
-      //         img {
-      //           max-width: 100%;
-      //         }
-      //       }
-      //     }
-      //   }
-      // }
-      // .hide-msg {
-      //   margin-right: 15px;
-      //   margin-top: 5px;
-      //   svg {
-      //     height: 14px;
-      //     width: 14px;
-      //   }
-      //   .hide-msg-svg {
-      //     cursor: pointer;
-      //     margin-bottom: 0;
-      //   }
-      //   &.receiver {
-      //     margin-top: 33px;
-      //     margin-left: 10px;
-      //   }
-      // }
     }
 
     .import-chats {
@@ -606,6 +437,12 @@
     .chat-body {
       grid-row: span 16;
       height: 100%;
+
+      .chat-content {
+        .last-message {
+          max-width: 75vw;
+        }
+      }
     }
     .chat {
       grid-row: span 1;
@@ -662,24 +499,6 @@
   }
 }
 
-// .profile-box {
-//   padding: 15px;
-//   .profile-box-content {
-//     .user-avatar.large {
-//       margin-bottom: 20px;
-//     }
-//     .profile-name {
-//       margin-bottom: 10px;
-//       font-size: 18px;
-//       font-weight: 800;
-//     }
-//     .profile-box-buttons {
-//       margin-bottom: 15px;
-//       padding: 0 5px;
-//     }
-//   }
-// }
-
 .chat-button {
   position: fixed;
   z-index: 99;
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 36c5f053ab2..025ffff88eb 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -2,13 +2,10 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { useLocation } from "react-router";
 import { History } from "history";
-import { Button, Form, InputGroup, Modal, Spinner } from "react-bootstrap";
+import { Button, Form, Modal, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
-import { ActiveUser } from "../../../store/active-user/types";
-import { Chat, DirectContactsType } from "../../../store/chat/types";
 import { Community } from "../../../store/communities/types";
-import { Global } from "../../../store/global/types";
 import { User } from "../../../store/users/types";
 import { ToggleType, UI } from "../../../store/ui/types";
 import { Account } from "../../../store/accounts/types";
@@ -17,14 +14,13 @@ import {
   ChannelUpdate,
   DirectMessage,
   PublicMessage
-} from "../../../../providers/message-provider-types";
+} from "../../../../managers/message-manager-types";
 
 import Tooltip from "../../tooltip";
 import UserAvatar from "../../user-avatar";
 import LinearProgress from "../../linear-progress";
-import { error, success } from "../../feedback";
-import { setNostrkeys } from "../../../../providers/message-provider";
-import OrDivider from "../../or-divider";
+import { error } from "../../feedback";
+import { setNostrkeys } from "../../../../managers/message-manager";
 import ManageChatKey from "../../manage-chat-key";
 import ChatInput from "../chat-input";
 import ChatsProfileBox from "../chats-profile-box";
@@ -39,15 +35,11 @@ import {
   arrowBackSvg,
   chevronUpSvg,
   chevronDownSvgForSlider,
-  keySvg,
   syncSvg
 } from "../../../img/svg";
 
 import {
   NOSTRKEY,
-  HIDEMESSAGE,
-  BLOCKUSER,
-  UNBLOCKUSER,
   NEWCHATACCOUNT,
   CHATIMPORT,
   RESENDMESSAGE,
@@ -55,10 +47,10 @@ import {
   GifPickerStyle
 } from "./chat-constants";
 
-import { getPublicKey } from "../../../../lib/nostr-tools/keys";
 import * as ls from "../../../util/local-storage";
 import accountReputation from "../../../helper/account-reputation";
 import { _t } from "../../../i18n";
+import { usePrevious } from "../../../util/use-previous";
 
 import { getAccountFull, getAccountReputations } from "../../../api/hive";
 import { getCommunity } from "../../../api/bridge";
@@ -78,19 +70,11 @@ import {
   setProfileMetaData
 } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import ChatProvider, { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 import ImportChats from "../import-chats";
-import SetActiveUserChatKeys from "../set-chat-keys";
 
 interface Props {
-  users: User[];
-  activeUser: ActiveUser | null;
-  ui: UI;
-  targetUsername: string;
-  where?: string;
   history: History;
-  global: Global;
-  chat: Chat;
   resetChat: () => void;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
@@ -100,14 +84,33 @@ interface Props {
   deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
+export const profileUpdater = () => {
+  const ev = new CustomEvent("profileUpdater");
+  window.dispatchEvent(ev);
+};
+
 export default function ChatPopUp(props: Props) {
-  const routerLocation = useLocation();
-  const prevPropsRef = useRef(props);
-  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
+  const { activeUser, global, chat } = useMappedStore();
+
+  const chatContext = useContext(ChatContext);
+  // const messageServiceContext = useContext(MessageServiceContext);
+
+  const {
+    // activeUserKeys,
+    setRevealPrivKey,
+    // setReceiverPubKey,
+    messageServiceInstance,
+    chatPrivKey,
+    revealPrivKey
+  } = chatContext;
 
-  const { activeUser } = useMappedStore();
+  // const { messageServiceInstance } = messageServiceContext;
 
-  const context = useContext(ChatContext);
+  console.log("messageServiceInstance chatpop up", chatPrivKey, messageServiceInstance);
+
+  const routerLocation = useLocation();
+  const prevActiveUser = usePrevious(activeUser);
+  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
 
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
@@ -134,31 +137,41 @@ export default function ChatPopUp(props: Props) {
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [searchtext, setSearchText] = useState("");
   const [userList, setUserList] = useState<AccountWithReputation[]>([]);
-  const [addRoleError, setAddRoleError] = useState("");
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
-  const [chatPrivKey, setChatPrivkey] = useState("");
-  const [hiddenMsgId, setHiddenMsgId] = useState("");
-  const [removedUserId, setRemovedUserID] = useState("");
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
-  const [importPrivKey, setImportPrivKey] = useState(false);
   const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
   const [refreshChat, setRefreshChat] = useState(false);
 
+  // useEffect(() => {
+  //   console.log("directMessagesList in chat popup", directMessagesList);
+  // }, [directMessagesList]);
+
   useEffect(() => {
-    console.log("directMessagesList in chat popup", directMessagesList);
-  }, [directMessagesList]);
+    window.addEventListener("profileUpdater", noStrProfileUpdater);
+
+    return () => {
+      window.removeEventListener("profileUpdater", noStrProfileUpdater);
+    };
+  }, []);
 
   useEffect(() => {
-    if (currentChannel && props.chat.leftChannelsList.includes(currentChannel.id)) {
+    console.log(
+      "-----------------------------------------------------------------",
+      messageServiceInstance
+    );
+  }, [messageServiceInstance]);
+
+  useEffect(() => {
+    if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
       setCommunityName("");
     }
-  }, [props.chat.leftChannelsList]);
+  }, [chat.leftChannelsList]);
 
   useEffect(() => {
     handleRouterChange();
@@ -171,21 +184,21 @@ export default function ChatPopUp(props: Props) {
   }, [isChatPage]);
 
   useEffect(() => {
-    // deleteChatPublicKey(props.activeUser);
+    // deleteChatPublicKey(activeUser);
     fetchProfileData();
-    !isChatPage && setShow(!!props.activeUser?.username);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    setShow(!!activeUser?.username && !isChatPage);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
     setInnerWidth(window.innerWidth);
   }, []);
 
   useEffect(() => {
-    const updated: ChannelUpdate = props.chat.updatedChannel
+    const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
       .sort((a, b) => b.created - a.created)[0];
     if (currentChannel && updated) {
       const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        props.chat.publicMessages,
+        chat.publicMessages,
         currentChannel,
         updated?.hiddenMessageIds
       );
@@ -205,7 +218,7 @@ export default function ChatPopUp(props: Props) {
       };
       setCurrentChannel(channel);
     }
-  }, [props.chat.updatedChannel]);
+  }, [chat.updatedChannel]);
 
   useEffect(() => {
     if (isTop) {
@@ -214,47 +227,40 @@ export default function ChatPopUp(props: Props) {
   }, [isTop]);
 
   useEffect(() => {
-    if (window.messageService) {
-      console.log("Use effect run");
+    if (messageServiceInstance) {
       setHasUserJoinedChat(true);
-      const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+      const noStrPrivKey = getPrivateKey(activeUser?.username!);
       setNoStrPrivKey(noStrPrivKey);
     }
     setTimeout(() => {
-      if (props.chat.channels.length === 0 && props.chat.directContacts.length === 0) {
+      if (chat.channels.length === 0 && chat.directContacts.length === 0) {
         setRefreshChat(false);
       }
     }, 5000);
-  }, [typeof window !== "undefined" && window?.messageService]);
+  }, [typeof window !== "undefined" && messageServiceInstance]);
 
   useEffect(() => {
-    const communities = getJoinedCommunities(props.chat.channels, props.chat.leftChannelsList);
+    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
     setCommunities(communities);
     fetchProfileData();
-  }, [props.chat.channels, props.chat.leftChannelsList]);
+  }, [chat.channels, chat.leftChannelsList]);
 
   useEffect(() => {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
-  }, [props.chat.directMessages]);
+  }, [chat.directMessages]);
 
   useEffect(() => {
-    const prevProps = prevPropsRef.current;
-
-    if (prevProps.activeUser?.username !== props.activeUser?.username) {
+    if (prevActiveUser?.username !== activeUser?.username) {
       setIsCommunity(false);
       setIsCurrentUser(false);
       setCurrentUser("");
       setCommunityName("");
     }
-    prevPropsRef.current = props;
-  }, [props.global.theme, props.activeUser]);
+  }, [global.theme, activeUser]);
 
   useEffect(() => {
-    if (directMessagesList.length !== 0 || publicMessages.length !== 0) {
-      // zoomInitializer();
-    }
     if (directMessagesList.length !== 0) {
       scrollerClicked();
     }
@@ -267,7 +273,7 @@ export default function ChatPopUp(props: Props) {
     if (currentChannel && isCommunity) {
       window?.messageService?.fetchChannel(currentChannel.id);
       const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        props.chat.publicMessages,
+        chat.publicMessages,
         currentChannel,
         currentChannel.hiddenMessageIds
       );
@@ -275,7 +281,7 @@ export default function ChatPopUp(props: Props) {
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
     }
-  }, [currentChannel, isCommunity, props.chat.publicMessages]);
+  }, [currentChannel, isCommunity, chat.publicMessages]);
 
   useEffect(() => {
     if (isCurrentUser) {
@@ -297,9 +303,9 @@ export default function ChatPopUp(props: Props) {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
-  }, [props.activeUser]);
+  }, [activeUser]);
 
   useEffect(() => {
     if (isCommunity) {
@@ -318,7 +324,7 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (currentUser) {
-      const isCurrentUserFound = props.chat.directContacts.find(
+      const isCurrentUserFound = chat.directContacts.find(
         (contact) => contact.name === currentUser
       );
       if (isCurrentUserFound) {
@@ -329,11 +335,11 @@ export default function ChatPopUp(props: Props) {
         fetchCurrentUserData();
       }
 
-      const peer = props.chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
+      const peer = chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
       const msgsList = fetchDirectMessages(peer!);
       const messages = msgsList.sort((a, b) => a.created - b.created);
       setDirectMessagesList(messages);
-      if (!window.messageService) {
+      if (!messageServiceInstance) {
         setNostrkeys(activeUserKeys!);
       }
     } else {
@@ -367,15 +373,24 @@ export default function ChatPopUp(props: Props) {
     }
   };
 
+  const noStrProfileUpdater = () => {
+    console.log("Function run", messageServiceInstance);
+    messageServiceInstance?.updateProfile({
+      name: activeUser?.username!,
+      about: "",
+      picture: ""
+    });
+  };
+
   const fetchCommunity = async () => {
-    const community = await getCommunity(communityName, props.activeUser?.username);
+    const community = await getCommunity(communityName, activeUser?.username);
     setCurrentCommunity(community!);
   };
 
   const fetchCurrentChannel = (communityName: string) => {
-    const channel = props.chat.channels.find((channel) => channel.communityName === communityName);
+    const channel = chat.channels.find((channel) => channel.communityName === communityName);
     if (channel) {
-      const updated: ChannelUpdate = props.chat.updatedChannel
+      const updated: ChannelUpdate = chat.updatedChannel
         .filter((x) => x.channelId === channel.id)
         .sort((a, b) => b.created - a.created)[0];
       if (updated) {
@@ -403,7 +418,7 @@ export default function ChatPopUp(props: Props) {
   };
 
   const fetchDirectMessages = (peer: string) => {
-    for (const item of props.chat.directMessages) {
+    for (const item of chat.directMessages) {
       if (item.peer === peer) {
         return Object.values(item.chat);
       }
@@ -427,8 +442,8 @@ export default function ChatPopUp(props: Props) {
   };
 
   const fetchProfileData = async () => {
-    const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(props.activeUser?.username!);
+    const profileData = await getProfileMetaData(activeUser?.username!);
+    const noStrPrivKey = getPrivateKey(activeUser?.username!);
     const activeUserKeys = {
       pub: profileData?.nsKey,
       priv: noStrPrivKey
@@ -447,7 +462,7 @@ export default function ChatPopUp(props: Props) {
     if (!hasMore || inProgress) return;
 
     setInProgress(true);
-    window.messageService
+    messageServiceInstance
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
         if (num < 25) {
@@ -492,11 +507,11 @@ export default function ChatPopUp(props: Props) {
     const { resetChat } = props;
     resetChat();
     handleBackArrowSvg();
-    if (getPrivateKey(props.activeUser?.username!)) {
-      setRefreshChat(true);
+    if (getPrivateKey(activeUser?.username!)) {
+      // setRefreshChat(true);
       const keys = {
         pub: activeUserKeys?.pub!,
-        priv: getPrivateKey(props.activeUser?.username!)
+        priv: getPrivateKey(activeUser?.username!)
       };
       setNostrkeys(keys);
       if (isCommunity && communityName) {
@@ -512,16 +527,12 @@ export default function ChatPopUp(props: Props) {
     setShowSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
-    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
     setNoStrPrivKey(keys.priv);
-    await setProfileMetaData(props.activeUser, keys.pub);
+    await setProfileMetaData(activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    window.messageService?.updateProfile({
-      name: props.activeUser?.username!,
-      about: "",
-      picture: ""
-    });
+    noStrProfileUpdater();
     setActiveUserKeys(keys);
     setShowSpinner(false);
   };
@@ -544,7 +555,7 @@ export default function ChatPopUp(props: Props) {
     switch (actionType) {
       case NEWCHATACCOUNT:
         setInProgress(true);
-        deleteChatPublicKey(props.activeUser)
+        deleteChatPublicKey(activeUser)
           .then((updatedProfile) => {
             handleJoinChat();
             setStep(10);
@@ -632,7 +643,6 @@ export default function ChatPopUp(props: Props) {
 
   const toggleKeyDialog = () => {
     setKeyDialog(!keyDialog);
-    setAddRoleError("");
   };
 
   const handleBackArrowSvg = () => {
@@ -645,383 +655,369 @@ export default function ChatPopUp(props: Props) {
     setSearchText("");
     setHasMore(true);
     setRevealPrivateKey(false);
-    setAddRoleError("");
   };
 
   return (
-    <ChatProvider>
-      {(context) => (
-        <>
-          {show && (
-            <div
-              className={`chatbox-container ${expanded ? "expanded" : ""} ${
-                innerWidth <= 666 ? "small-screen" : ""
-              }`}
-            >
-              {/* <SetActiveUserChatKeys /> */}
-              <div className="chat-header">
-                {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
-                  <Tooltip content={_t("chat.back")}>
-                    <div className="back-arrow-image">
-                      <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
-                        {" "}
-                        {arrowBackSvg}
-                      </span>
+    <>
+      {show && (
+        <div
+          className={`chatbox-container ${expanded ? "expanded" : ""} ${
+            innerWidth <= 666 ? "small-screen" : ""
+          }`}
+        >
+          <div className="chat-header">
+            {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
+              <Tooltip content={_t("chat.back")}>
+                <div className="back-arrow-image">
+                  <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
+                    {" "}
+                    {arrowBackSvg}
+                  </span>
+                </div>
+              </Tooltip>
+            )}
+            <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
+              {(currentUser || isCommunity) && (
+                <p className="user-icon">
+                  <UserAvatar
+                    username={
+                      isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""
+                    }
+                    size="small"
+                  />
+                </p>
+              )}
+
+              <p className="message-header-content">
+                {currentUser
+                  ? currentUser
+                  : isCommunity
+                  ? currentCommunity?.title
+                  : showSearchUser
+                  ? "New Message"
+                  : revelPrivateKey
+                  ? "Manage chat key"
+                  : "Messages"}
+              </p>
+            </div>
+            <div className="actionable-imgs">
+              {!currentUser &&
+                hasUserJoinedChat &&
+                noStrPrivKey &&
+                !isCommunity &&
+                !revelPrivateKey && (
+                  <>
+                    <div className="message-image" onClick={handleMessageSvgClick}>
+                      <Tooltip content={_t("chat.new-message")}>
+                        <p className="message-svg">{addMessageSVG}</p>
+                      </Tooltip>
                     </div>
-                  </Tooltip>
+                  </>
                 )}
-                <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
-                  {(currentUser || isCommunity) && (
-                    <p className="user-icon">
-                      <UserAvatar
-                        username={
-                          isCurrentUser
-                            ? currentUser
-                            : (isCommunity && currentCommunity?.name) || ""
-                        }
-                        size="small"
-                      />
+              {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
+                <div className="message-image" onClick={handleRefreshSvgClick}>
+                  <Tooltip content={_t("chat.refresh")}>
+                    <p className="message-svg" style={{ paddingTop: "10px" }}>
+                      {syncSvg}
                     </p>
-                  )}
-
-                  <p className="message-header-content">
-                    {currentUser
-                      ? currentUser
-                      : isCommunity
-                      ? currentCommunity?.title
-                      : showSearchUser
-                      ? "New Message"
-                      : revelPrivateKey
-                      ? "Manage chat key"
-                      : "Messages"}
-                  </p>
+                  </Tooltip>
                 </div>
-                <div className="actionable-imgs">
-                  {!currentUser &&
-                    hasUserJoinedChat &&
-                    noStrPrivKey &&
-                    !isCommunity &&
-                    !revelPrivateKey && (
-                      <>
-                        <div className="message-image" onClick={handleMessageSvgClick}>
-                          <Tooltip content={_t("chat.new-message")}>
-                            <p className="message-svg">{addMessageSVG}</p>
-                          </Tooltip>
-                        </div>
-                      </>
-                    )}
-                  {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
-                    <div className="message-image" onClick={handleRefreshSvgClick}>
-                      <Tooltip content={_t("chat.refresh")}>
-                        <p className="message-svg" style={{ paddingTop: "10px" }}>
-                          {syncSvg}
-                        </p>
-                      </Tooltip>
-                    </div>
-                  )}
-                  {isCommunity && (
-                    <div className="community-menu">
-                      <ChatsCommunityDropdownMenu
-                        username={communityName}
-                        {...props}
-                        currentChannel={currentChannel!}
-                        currentChannelSetter={setCurrentChannel}
-                      />
-                    </div>
-                  )}{" "}
-                  {!isCommunity && !isCurrentUser && noStrPrivKey && (
-                    <div className="simple-menu">
-                      <ChatsDropdownMenu
-                        {...props}
-                        onManageChatKey={() => {
-                          setRevealPrivateKey(!revelPrivateKey);
-                        }}
-                      />
-                    </div>
-                  )}
-                  <div className="arrow-image">
-                    <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                      <p
-                        className="arrow-svg"
-                        onClick={() => {
-                          setExpanded(!expanded);
-                        }}
-                      >
-                        {expanded ? expandArrow : collapseArrow}
-                      </p>
-                    </Tooltip>
-                  </div>
+              )}
+              {isCommunity && (
+                <div className="community-menu">
+                  <ChatsCommunityDropdownMenu
+                    history={props.history}
+                    username={communityName}
+                    currentChannel={currentChannel!}
+                    currentChannelSetter={setCurrentChannel}
+                  />
+                </div>
+              )}{" "}
+              {!isCommunity && !isCurrentUser && noStrPrivKey && (
+                <div className="simple-menu">
+                  <ChatsDropdownMenu
+                    history={props.history}
+                    onManageChatKey={() => {
+                      setRevealPrivateKey(!revelPrivateKey);
+                    }}
+                  />
                 </div>
+              )}
+              <div className="arrow-image">
+                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+                  <p
+                    className="arrow-svg"
+                    onClick={() => {
+                      setExpanded(!expanded);
+                    }}
+                  >
+                    {expanded ? expandArrow : collapseArrow}
+                  </p>
+                </Tooltip>
               </div>
-              {inProgress && <LinearProgress />}
-              {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
-              <div
-                className={`chat-body ${
-                  currentUser ? "current-user" : isCommunity ? "community" : ""
-                } ${
-                  !hasUserJoinedChat
-                    ? "join-chat"
-                    : clickedMessage || (isTop && hasMore)
-                    ? "no-scroll"
-                    : ""
-                }`}
-                ref={chatBodyDivRef}
-                onScroll={handleScroll}
-              >
-                {hasUserJoinedChat && !revelPrivateKey ? (
+            </div>
+          </div>
+          {inProgress && <LinearProgress />}
+          {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
+          <div
+            className={`chat-body ${
+              currentUser ? "current-user" : isCommunity ? "community" : ""
+            } ${
+              !hasUserJoinedChat
+                ? "join-chat"
+                : clickedMessage || (isTop && hasMore)
+                ? "no-scroll"
+                : ""
+            }`}
+            ref={chatBodyDivRef}
+            onScroll={handleScroll}
+          >
+            {hasUserJoinedChat && !revelPrivateKey ? (
+              <>
+                {currentUser.length !== 0 || communityName.length !== 0 ? (
+                  <div className="chats">
+                    <>
+                      {" "}
+                      <Link
+                        to={
+                          isCurrentUser
+                            ? `/@${currentUser}`
+                            : isCommunity
+                            ? `/created/${currentCommunity?.name}`
+                            : ""
+                        }
+                      >
+                        <ChatsProfileBox
+                          isCommunity={isCommunity}
+                          isCurrentUser={isCurrentUser}
+                          communityName={communityName}
+                          currentUser={currentUser}
+                        />
+                      </Link>
+                      {isCurrentUser ? (
+                        <ChatsDirectMessages
+                          receiverPubKey={receiverPubKey}
+                          directMessages={directMessagesList}
+                          activeUserKeys={activeUserKeys!}
+                          currentUser={currentUser}
+                          isScrollToBottom={false}
+                        />
+                      ) : (
+                        <ChatsChannelMessages
+                          {...props}
+                          username={communityName}
+                          publicMessages={publicMessages}
+                          currentChannel={currentChannel!}
+                          activeUserKeys={activeUserKeys!}
+                          isScrollToBottom={false}
+                          isActveUserRemoved={isActveUserRemoved}
+                          currentChannelSetter={setCurrentChannel}
+                        />
+                      )}
+                    </>
+                  </div>
+                ) : showSearchUser ? (
                   <>
-                    {currentUser.length !== 0 || communityName.length !== 0 ? (
-                      <div className="chats">
-                        <>
-                          {" "}
-                          <Link
-                            to={
-                              isCurrentUser
-                                ? `/@${currentUser}`
-                                : isCommunity
-                                ? `/created/${currentCommunity?.name}`
-                                : ""
-                            }
+                    <div className="user-search-bar">
+                      <Form.Group className="w-100 mb-3">
+                        <Form.Control
+                          type="text"
+                          placeholder={_t("chat.search")}
+                          value={searchtext}
+                          autoFocus={true}
+                          onChange={(e) => {
+                            setSearchText(e.target.value);
+                            setInProgress(true);
+                          }}
+                        />
+                      </Form.Group>
+                    </div>
+                    <div className="user-search-suggestion-list">
+                      {userList.map((user, index) => {
+                        return (
+                          <div
+                            key={index}
+                            className="search-content"
+                            onClick={() => {
+                              setCurrentUser(user.account);
+                              setIsCurrentUser(true);
+                            }}
                           >
-                            <ChatsProfileBox
-                              isCommunity={isCommunity}
-                              isCurrentUser={isCurrentUser}
-                              communityName={communityName}
-                              currentUser={currentUser}
-                            />
-                          </Link>
-                          {isCurrentUser ? (
-                            <ChatsDirectMessages
-                              {...props}
-                              receiverPubKey={receiverPubKey}
-                              directMessages={directMessagesList}
-                              activeUserKeys={activeUserKeys!}
-                              currentUser={currentUser}
-                              isScrollToBottom={false}
-                            />
-                          ) : (
-                            <ChatsChannelMessages
-                              {...props}
-                              username={communityName}
-                              publicMessages={publicMessages}
-                              currentChannel={currentChannel!}
-                              activeUserKeys={activeUserKeys!}
-                              isScrollToBottom={false}
-                              isActveUserRemoved={isActveUserRemoved}
-                              currentChannelSetter={setCurrentChannel}
-                            />
-                          )}
-                        </>
-                      </div>
-                    ) : showSearchUser ? (
-                      <>
-                        <div className="user-search-bar">
-                          <Form.Group className="w-100 mb-3">
-                            <Form.Control
-                              type="text"
-                              placeholder={_t("chat.search")}
-                              value={searchtext}
-                              autoFocus={true}
-                              onChange={(e) => {
-                                setSearchText(e.target.value);
-                                setInProgress(true);
-                              }}
-                            />
-                          </Form.Group>
-                        </div>
-                        <div className="user-search-suggestion-list">
-                          {userList.map((user, index) => {
-                            return (
-                              <div
-                                key={index}
-                                className="search-content"
-                                onClick={() => {
-                                  setCurrentUser(user.account);
-                                  setIsCurrentUser(true);
-                                }}
-                              >
-                                <div className="search-user-img">
-                                  <span>
-                                    <UserAvatar username={user.account} size="medium" />
-                                  </span>
-                                </div>
+                            <div className="search-user-img">
+                              <span>
+                                <UserAvatar username={user.account} size="medium" />
+                              </span>
+                            </div>
 
-                                <div className="search-user-title">
-                                  <p className="search-username">{user.account}</p>
-                                  <p className="search-reputation">
-                                    ({accountReputation(user.reputation)})
-                                  </p>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        {(props.chat.directContacts.length !== 0 ||
-                          (props.chat.channels.length !== 0 && communities.length !== 0)) &&
-                        !refreshChat &&
-                        noStrPrivKey ? (
-                          <React.Fragment>
-                            {props.chat.channels.length !== 0 && communities.length !== 0 && (
-                              <>
-                                <div className="community-header">{_t("chat.communities")}</div>
-                                {communities.map((channel) => {
-                                  return (
-                                    <div key={channel.id} className="chat-content">
-                                      <Link to={`/created/${channel.communityName}`}>
-                                        <div className="user-img">
-                                          <span>
-                                            <UserAvatar
-                                              username={channel.communityName!}
-                                              size="medium"
-                                            />
-                                          </span>
-                                        </div>
-                                      </Link>
-
-                                      <div
-                                        className="user-title"
-                                        onClick={() =>
-                                          communityClicked(channel.communityName!, channel.name)
-                                        }
-                                      >
-                                        <p className="username" style={{ paddingTop: "8px" }}>
-                                          {channel.name}
-                                        </p>
-                                        <p className="last-message">
-                                          {getCommunityLastMessage(
-                                            channel.id,
-                                            props.chat.publicMessages
-                                          )}
-                                        </p>
-                                      </div>
-                                    </div>
-                                  );
-                                })}
-                                {props.chat.directContacts.length !== 0 && (
-                                  <div className="dm-header">{_t("chat.dms")}</div>
-                                )}
-                              </>
-                            )}
-                            {props.chat.directContacts.map((user: DirectContactsType) => {
+                            <div className="search-user-title">
+                              <p className="search-username">{user.account}</p>
+                              <p className="search-reputation">
+                                ({accountReputation(user.reputation)})
+                              </p>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    {(chat.directContacts.length !== 0 ||
+                      (chat.channels.length !== 0 && communities.length !== 0)) &&
+                    !refreshChat &&
+                    noStrPrivKey ? (
+                      <React.Fragment>
+                        {chat.channels.length !== 0 && communities.length !== 0 && (
+                          <>
+                            <div className="community-header">{_t("chat.communities")}</div>
+                            {communities.map((channel) => {
                               return (
-                                <div key={user.pubkey} className="chat-content">
-                                  <Link to={`/@${user.name}`}>
+                                <div key={channel.id} className="chat-content">
+                                  <Link to={`/created/${channel.communityName}`}>
                                     <div className="user-img">
                                       <span>
-                                        <UserAvatar username={user.name} size="medium" />
+                                        <UserAvatar
+                                          username={channel.communityName!}
+                                          size="medium"
+                                        />
                                       </span>
                                     </div>
                                   </Link>
 
                                   <div
                                     className="user-title"
-                                    onClick={() => {
-                                      userClicked(user.name);
-                                      setReceiverPubKey(user.pubkey);
-                                    }}
+                                    onClick={() =>
+                                      communityClicked(channel.communityName!, channel.name)
+                                    }
                                   >
-                                    <p className="username">{user.name}</p>
+                                    <p className="username" style={{ paddingTop: "8px" }}>
+                                      {channel.name}
+                                    </p>
                                     <p className="last-message">
-                                      {getDirectLastMessage(user.pubkey, props.chat.directMessages)}
+                                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
                                     </p>
                                   </div>
                                 </div>
                               );
                             })}
-                          </React.Fragment>
-                        ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
-                          <>
-                            <ImportChats />
-                          </>
-                        ) : refreshChat ? (
-                          <div className="no-chat">
-                            <Spinner animation="border" variant="primary" />
-                          </div>
-                        ) : (
-                          <>
-                            <p className="no-chat">{_t("chat.no-chat")}</p>
-                            <div className="start-chat-btn">
-                              <Button variant="primary" onClick={() => setShowSearchUser(true)}>
-                                {_t("chat.start-chat")}
-                              </Button>
-                            </div>
+                            {chat.directContacts.length !== 0 && (
+                              <div className="dm-header">{_t("chat.dms")}</div>
+                            )}
                           </>
                         )}
+                        {chat.directContacts.map((user) => {
+                          return (
+                            <div key={user.pubkey} className="chat-content">
+                              <Link to={`/@${user.name}`}>
+                                <div className="user-img">
+                                  <span>
+                                    <UserAvatar username={user.name} size="medium" />
+                                  </span>
+                                </div>
+                              </Link>
+
+                              <div
+                                className="user-title"
+                                onClick={() => {
+                                  userClicked(user.name);
+                                  setReceiverPubKey(user.pubkey);
+                                }}
+                              >
+                                <p className="username">{user.name}</p>
+                                <p className="last-message">
+                                  {getDirectLastMessage(user.pubkey, chat.directMessages)}
+                                </p>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </React.Fragment>
+                    ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
+                      <>
+                        <ImportChats />
+                      </>
+                    ) : refreshChat ? (
+                      <div className="no-chat">
+                        <Spinner animation="border" variant="primary" />
+                      </div>
+                    ) : (
+                      <>
+                        <p className="no-chat">{_t("chat.no-chat")}</p>
+                        <div className="start-chat-btn">
+                          <Button variant="primary" onClick={() => setShowSearchUser(true)}>
+                            {_t("chat.start-chat")}
+                          </Button>
+                        </div>
                       </>
                     )}
                   </>
-                ) : revelPrivateKey ? (
-                  <ManageChatKey />
-                ) : (
-                  <Button className="join-chat-btn" onClick={handleJoinChat}>
-                    {showSpinner && chatButtonSpinner}
-                    {_t("chat.join-chat")}
-                  </Button>
-                )}
-
-                {((isScrollToTop && !isCurrentUser) ||
-                  ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
-                  <Tooltip
-                    content={
-                      isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")
-                    }
-                  >
-                    <div
-                      className="scroller"
-                      style={{
-                        bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
-                      }}
-                      onClick={scrollerClicked}
-                    >
-                      {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
-                    </div>
-                  </Tooltip>
-                )}
-                {isActveUserRemoved && isCommunity && (
-                  <p className="d-flex justify-content-center mt-4 mb-0">
-                    {_t("chat.blocked-user-message")}
-                  </p>
                 )}
-              </div>
-              {(isCurrentUser || isCommunity) && (
-                <ChatInput
-                  isCurrentUser={isCurrentUser}
-                  isCommunity={isCommunity}
-                  isActveUserRemoved={isActveUserRemoved}
-                  currentUser={currentUser}
-                  receiverPubKey={receiverPubKey}
-                  currentChannel={currentChannel!}
-                  isCurrentUserJoined={isCurrentUserJoined}
-                  emojiPickerStyles={EmojiPickerStyle}
-                  gifPickerStyle={GifPickerStyle}
-                />
-              )}
-            </div>
+              </>
+            ) : revelPrivateKey ? (
+              <ManageChatKey />
+            ) : (
+              <Button className="join-chat-btn" onClick={handleJoinChat}>
+                {showSpinner && chatButtonSpinner}
+                {_t("chat.join-chat")}
+              </Button>
+            )}
+
+            {((isScrollToTop && !isCurrentUser) ||
+              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
+              <Tooltip
+                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
+              >
+                <div
+                  className="scroller"
+                  style={{
+                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
+                  }}
+                  onClick={scrollerClicked}
+                >
+                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
+                </div>
+              </Tooltip>
+            )}
+            {isActveUserRemoved && isCommunity && (
+              <p className="d-flex justify-content-center mt-4 mb-0">
+                {_t("chat.blocked-user-message")}
+              </p>
+            )}
+          </div>
+          {(isCurrentUser || isCommunity) && (
+            <ChatInput
+              isCurrentUser={isCurrentUser}
+              isCommunity={isCommunity}
+              isActveUserRemoved={isActveUserRemoved}
+              currentUser={currentUser}
+              receiverPubKey={receiverPubKey}
+              currentChannel={currentChannel!}
+              isCurrentUserJoined={isCurrentUserJoined}
+              emojiPickerStyles={EmojiPickerStyle}
+              gifPickerStyle={GifPickerStyle}
+            />
           )}
+        </div>
+      )}
 
-          {keyDialog && (
-            <Modal
-              animation={false}
-              show={true}
-              centered={true}
-              onHide={toggleKeyDialog}
-              keyboard={false}
-              className="chats-dialog modal-thin-header"
-              size="lg"
-            >
-              <Modal.Header closeButton={true} />
-              <Modal.Body className="chat-modals-body">
-                {step === 9 && confirmationModal(NEWCHATACCOUNT)}
-                {step === 11 && confirmationModal(RESENDMESSAGE)}
-                {step === 10 && successModal(NEWCHATACCOUNT)}
-              </Modal.Body>
-            </Modal>
-          )}
-        </>
+      {keyDialog && (
+        <Modal
+          animation={false}
+          show={true}
+          centered={true}
+          onHide={toggleKeyDialog}
+          keyboard={false}
+          className="chats-dialog modal-thin-header"
+          size="lg"
+        >
+          <Modal.Header closeButton={true} />
+          <Modal.Body className="chat-modals-body">
+            {step === 9 && confirmationModal(NEWCHATACCOUNT)}
+            {step === 11 && confirmationModal(RESENDMESSAGE)}
+            {step === 10 && successModal(NEWCHATACCOUNT)}
+          </Modal.Body>
+        </Modal>
       )}
-    </ChatProvider>
+    </>
   );
 }
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 00a5888b0c5..0c5029d6203 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, RefObject, useEffect } from "react";
+import React, { useRef, useState, RefObject, useEffect, useContext } from "react";
 import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
@@ -6,7 +6,7 @@ import {
   DirectMessage,
   Profile,
   PublicMessage
-} from "../../../../providers/message-provider-types";
+} from "../../../../managers/message-manager-types";
 import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -38,6 +38,7 @@ import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Theme } from "../../../store/global/types";
 import { NostrKeysType } from "../types";
 import { formatMessageTime, isMessageGif, isMessageImage, formatMessageDate } from "../utils";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -45,9 +46,7 @@ interface Props {
   activeUserKeys: NostrKeysType;
   username: string;
   from?: string;
-  users: User[];
-  ui: UI;
-  history: History | null;
+  history: History;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   isActveUserRemoved: boolean;
@@ -75,7 +74,7 @@ export default function ChatsChannelMessages(props: Props) {
     currentChannelSetter,
     deletePublicMessage
   } = props;
-  const { chat, global, activeUser } = useMappedStore();
+  const { chat, global, activeUser, ui, users } = useMappedStore();
 
   let prevGlobal = usePrevious(global);
 
@@ -92,6 +91,8 @@ export default function ChatsChannelMessages(props: Props) {
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
+  const { messageServiceInstance } = useContext(ChatContext);
+
   // useEffect(() => {
   //   scrollToBottom();
   //   console.log("Heloooooooo");
@@ -153,7 +154,7 @@ export default function ChatsChannelMessages(props: Props) {
 
   const sendDM = (name: string, pubkey: string) => {
     if (dmMessage) {
-      window.messageService?.sendDirectMessage(pubkey, dmMessage);
+      messageServiceInstance?.sendDirectMessage(pubkey, dmMessage);
 
       // setIsCurrentUser(true);
       // setCurrentUser(name);
@@ -167,7 +168,7 @@ export default function ChatsChannelMessages(props: Props) {
       //   !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
       //   isCurrentUser
       // ) {
-      //   window.messageService?.publishContacts(currentUser, receiverPubKey);
+      //   messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
       // }
 
       if (from && from === CHATPAGE) {
@@ -286,7 +287,7 @@ export default function ChatsChannelMessages(props: Props) {
     }
 
     try {
-      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+      messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
       currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
       setStep(0);
       // if (operationType === HIDEMESSAGE) {
@@ -365,6 +366,8 @@ export default function ChatsChannelMessages(props: Props) {
                           activeUser={activeUser}
                           targetUsername={name!}
                           where={"chat-box"}
+                          ui={ui}
+                          users={users}
                         />
 
                         {communityAdmins.includes(activeUser?.username!) && (
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.scss b/src/common/components/chats/chats-community-dropdown-menu/index.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index 19dc308d4b5..5d8d1508fca 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
 import DropDown, { MenuItem } from "../../dropdown";
 import useDebounce from "react-use/lib/useDebounce";
@@ -18,16 +18,17 @@ import {
   Channel,
   ChannelUpdate,
   communityModerator
-} from "../../../../providers/message-provider-types";
+} from "../../../../managers/message-manager-types";
 import { error, success } from "../../feedback";
 import { Button, Form, Modal, Row, Col, InputGroup, FormControl } from "react-bootstrap";
 import LinearProgress from "../../linear-progress";
 import { ROLES } from "../../../store/communities";
 import UserAvatar from "../../user-avatar";
 import { copyToClipboard, getProfileMetaData } from "../utils";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
-  history: History | null;
+  history: History;
   from?: string;
   username: string;
   currentChannel: Channel;
@@ -50,6 +51,8 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
 
+  const { messageServiceInstance } = useContext(ChatContext);
+
   useEffect(() => {
     getCommunityAdmins();
 
@@ -113,7 +116,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       newUpdatedModerator.role = selectedRole;
       newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
       currentChannelSetter(newUpdatedChannel);
-      window.messageService?.updateChannel(currentChannel, newUpdatedChannel);
+      messageServiceInstance?.updateChannel(currentChannel, newUpdatedChannel);
       success("Roles updated succesfully");
     }
   };
@@ -481,7 +484,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         break;
     }
     try {
-      window.messageService?.updateChannel(currentChannel!, updatedMetaData);
+      messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
       currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
 
       if (operationType === UNBLOCKUSER) {
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 5b741bb9612..c54d76d0b90 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef } from "react";
-import { DirectMessage } from "../../../../providers/message-provider-types";
+import { DirectMessage } from "../../../../managers/message-manager-types";
 import mediumZoom, { Zoom } from "medium-zoom";
 import { Global, Theme } from "../../../store/global/types";
 import {
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 7b0bf280dfd..071f732c2ae 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -8,12 +8,12 @@ import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
 
 import "./index.scss";
-import { Channel, ChannelUpdate } from "../../../../providers/message-provider-types";
+import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
 import LinearProgress from "../../linear-progress";
 import { NostrKeysType } from "../types";
 import { formattedUserName } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 
 interface MatchParams {
   filter: string;
@@ -36,8 +36,8 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const context = useContext(ChatContext);
-  const { activeUserKeys } = context;
+  const chatContext = useContext(ChatContext);
+  const { activeUserKeys } = chatContext;
   const { activeUser, chat } = useMappedStore();
 
   const { channels, updatedChannel } = chat;
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
index 9c46c04e357..8a6340aabcc 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -6,7 +6,7 @@ import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
 import UserAvatar from "../../user-avatar";
 
 import "./index.scss";
-import { Channel } from "../../../../providers/message-provider-types";
+import { Channel } from "../../../../managers/message-manager-types";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index 6cb285e96ef..06d3c4cd816 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -1,10 +1,6 @@
 import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import {
-  Channel,
-  DirectMessage,
-  PublicMessage
-} from "../../../../providers/message-provider-types";
+import { Channel, DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
 import {
   fetchCommunityMessages,
   fetchDirectMessages,
@@ -27,7 +23,7 @@ import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { EmojiPickerStyleProps, NostrKeysType } from "../types";
-import { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
@@ -64,8 +60,7 @@ export default function ChatsMessagesView(props: Props) {
     deletePublicMessage
   } = props;
 
-  const context = useContext(ChatContext);
-  const { receiverPubKey } = context;
+  const { messageServiceInstance, receiverPubKey } = useContext(ChatContext);
 
   // console.log("Receiver pubkey in Message view component", receiverPubKey, setReceiverPubKey);
 
@@ -129,7 +124,7 @@ export default function ChatsMessagesView(props: Props) {
     if (!hasMore || inProgress) return;
 
     setInProgress(true);
-    window.messageService
+    messageServiceInstance
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
         console.log("number", num);
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
index 173f71c2c9d..35f7e4e03d2 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -8,6 +8,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { getAccountFull } from "../../../api/hive";
 import { getCommunity } from "../../../api/bridge";
 import { formattedUserName } from "../utils";
+import { useCommunityCache } from "../../../core/caches/communities-cache";
 
 export interface profileData {
   joiningData: string;
@@ -32,6 +33,14 @@ export default function ChatsProfileBox(props: Props) {
 
   const [profileData, setProfileData] = useState<profileData>();
 
+  const { data: community } = useCommunityCache(username ? username! : communityName!);
+
+  // useEffect(() => {
+  //   if (community) {
+  //     console.log("Community 1st", community);
+  //   }
+  // }, [community, communityName]);
+
   useEffect(() => {
     fetchProfileData();
   }, [username, isCommunity, isCurrentUser, communityName, currentUser]);
@@ -60,7 +69,6 @@ export default function ChatsProfileBox(props: Props) {
           username: response.name
         });
       } else {
-        const community = await getCommunity(username!, activeUser?.username);
         setProfileData({
           joiningData: community?.created_at!,
           about: community?.about,
@@ -82,7 +90,6 @@ export default function ChatsProfileBox(props: Props) {
           username: response.name
         });
       } else {
-        const community = await getCommunity(communityName!, activeUser?.username);
         setProfileData({
           joiningData: community?.created_at!,
           about: community?.about,
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 9831e8cf95a..41e112e259f 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -4,8 +4,8 @@ import { Link } from "react-router-dom";
 import { History } from "history";
 import { match } from "react-router";
 import useDebounce from "react-use/lib/useDebounce";
-import { setNostrkeys } from "../../../../providers/message-provider";
-import { Channel } from "../../../../providers/message-provider-types";
+import { setNostrkeys } from "../../../../managers/message-manager";
+import { Channel } from "../../../../managers/message-manager-types";
 import { getAccountReputations } from "../../../api/hive";
 import accountReputation from "../../../helper/account-reputation";
 import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
@@ -23,7 +23,7 @@ import { CHAT, DropDownStyle } from "../chat-popup/chat-constants";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { AccountWithReputation, NostrKeysType } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
 
 interface MatchParams {
@@ -40,7 +40,7 @@ interface Props {
 }
 export default function ChatsSideBar(props: Props) {
   const { chat } = useMappedStore();
-  const context = useContext(ChatContext);
+  const chatContext = useContext(ChatContext);
   const { channels, directContacts, leftChannelsList } = chat;
   const { match, resetChat } = props;
 
@@ -51,7 +51,7 @@ export default function ChatsSideBar(props: Props) {
     setInProgress,
     setRevealPrivKey,
     setReceiverPubKey
-  } = context;
+  } = chatContext;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
   const username = match.params.username;
diff --git a/src/common/components/chats/import-chats/index.scss b/src/common/components/chats/import-chats/index.scss
index 64758473829..08c32779aa7 100644
--- a/src/common/components/chats/import-chats/index.scss
+++ b/src/common/components/chats/import-chats/index.scss
@@ -1,3 +1,5 @@
+@import "../../../../style/vars_mixins";
+
 .import-chats {
   display: flex;
   justify-content: center;
diff --git a/src/common/components/chats/import-chats/index.tsx b/src/common/components/chats/import-chats/index.tsx
index c42a23569c9..23a5d0d7327 100644
--- a/src/common/components/chats/import-chats/index.tsx
+++ b/src/common/components/chats/import-chats/index.tsx
@@ -6,8 +6,8 @@ import { keySvg } from "../../../img/svg";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import OrDivider from "../../or-divider";
 import * as ls from "../../../util/local-storage";
-import { ChatContext } from "../chat-provider";
-import { setNostrkeys } from "../../../../providers/message-provider";
+import { ChatContext } from "../chat-context-provider";
+import { setNostrkeys } from "../../../../managers/message-manager";
 
 import "./index.scss";
 import LinearProgress from "../../linear-progress";
@@ -21,10 +21,10 @@ export default function ImportChats() {
   const [error, setError] = useState("");
   const [inProgress, setInProgress] = useState(false);
   const [privKey, setPrivKey] = useState("");
-  const context = useContext(ChatContext);
   const [step, setStep] = useState(0);
 
-  const { activeUserKeys, setChatPrivKey, setActiveUserKeys } = context;
+  const { activeUserKeys, messageServiceInstance, setActiveUserKeys, setChatPrivKey } =
+    useContext(ChatContext);
 
   const handleImportChatSubmit = () => {
     try {
@@ -61,7 +61,7 @@ export default function ImportChats() {
     setChatPrivKey(keys.priv);
     await setProfileMetaData(activeUser, keys.pub);
     setNostrkeys(keys);
-    window.messageService?.updateProfile({
+    messageServiceInstance?.updateProfile({
       name: activeUser?.username!,
       about: "",
       picture: ""
diff --git a/src/common/components/chats/join-chat/index.tsx b/src/common/components/chats/join-chat/index.tsx
index 8baab224958..84e8e047436 100644
--- a/src/common/components/chats/join-chat/index.tsx
+++ b/src/common/components/chats/join-chat/index.tsx
@@ -1,19 +1,18 @@
 import React, { useContext, useState } from "react";
 import { Button, Spinner } from "react-bootstrap";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-provider";
+import { ChatContext } from "../chat-context-provider";
 import { createNoStrAccount, setProfileMetaData } from "../utils";
 
 import * as ls from "../../../util/local-storage";
-import { setNostrkeys } from "../../../../providers/message-provider";
+import { setNostrkeys } from "../../../../managers/message-manager";
 
 interface Props {
   resetChat: () => void;
 }
 
 export default function JoinChat(props: Props) {
-  const context = useContext(ChatContext);
-  const { setChatPrivKey, setActiveUserKeys } = context;
+  const { messageServiceInstance, setChatPrivKey, setActiveUserKeys } = useContext(ChatContext);
 
   const { activeUser } = useMappedStore();
 
@@ -28,7 +27,7 @@ export default function JoinChat(props: Props) {
     setChatPrivKey(keys.priv);
     await setProfileMetaData(activeUser, keys.pub);
     setNostrkeys(keys);
-    window.messageService?.updateProfile({
+    messageServiceInstance?.updateProfile({
       name: activeUser?.username!,
       about: "",
       picture: ""
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index 10c80455467..14abd8e1c8c 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button, Spinner } from "react-bootstrap";
 import { History } from "history";
 
@@ -8,9 +8,9 @@ import { ActiveUser } from "../../../store/active-user/types";
 import { _t } from "../../../i18n";
 
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../providers/message-provider-types";
+import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import * as ls from "../../../util/local-storage";
-import { setNostrkeys } from "../../../../providers/message-provider";
+import { setNostrkeys } from "../../../../managers/message-manager";
 import { NOSTRKEY } from "../chat-popup/chat-constants";
 import { NostrKeysType } from "../types";
 import {
@@ -19,6 +19,7 @@ import {
   setChannelMetaData,
   setProfileMetaData
 } from "../utils";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   history: History;
@@ -28,6 +29,8 @@ interface Props {
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
+  const { messageServiceInstance } = useContext(ChatContext);
+  console.log("Bhai kiya masla ha apko", messageServiceInstance);
   const { chat } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
@@ -55,7 +58,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [activeUserKeys]);
 
   useEffect(() => {
-    if (window.messageService) {
+    if (messageServiceInstance) {
       fetchUserProfileData();
       if (loadCommunity) {
         window?.messageService?.loadChannel(currentChannel?.id!);
@@ -65,7 +68,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       }
     }
   }, [
-    typeof window !== "undefined" && window?.messageService,
+    typeof window !== "undefined" && messageServiceInstance,
     loadCommunity,
     communityRoles,
     initiateCommunityChat
@@ -174,6 +177,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const joinCommunityChat = () => {
+    console.log("Join community chat", messageServiceInstance);
     if (!hasUserJoinedChat) {
       handleJoinChat();
       setLoadCommunity(true);
@@ -220,7 +224,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    window.messageService?.updateProfile({
+    messageServiceInstance?.updateProfile({
       name: props.activeUser?.username!,
       about: "",
       picture: ""
diff --git a/src/common/components/chats/set-chat-keys/index.tsx b/src/common/components/chats/set-chat-keys/index.tsx
deleted file mode 100644
index 93abebe740e..00000000000
--- a/src/common/components/chats/set-chat-keys/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-import { ChatContext } from "../chat-provider";
-import { getPrivateKey, getUserChatPublicKey } from "../utils";
-
-export default function SetActiveUserChatKeys() {
-  const context = useContext(ChatContext);
-  const { setActiveUserKeys, setChatPrivKey } = context;
-  const { activeUser } = useMappedStore();
-
-  useEffect(() => {
-    getActiveUserKeys();
-  }, []);
-
-  const getActiveUserKeys = async () => {
-    const pubKey = await getUserChatPublicKey(activeUser?.username!);
-    const privKey = getPrivateKey(activeUser?.username!);
-    const keys = {
-      pub: pubKey,
-      priv: privKey
-    };
-    setChatPrivKey(privKey);
-    setActiveUserKeys(keys);
-  };
-
-  return <></>;
-}
diff --git a/src/common/components/chats/types/index.ts b/src/common/components/chats/types/index.ts
index 44983652000..61514842ced 100644
--- a/src/common/components/chats/types/index.ts
+++ b/src/common/components/chats/types/index.ts
@@ -1 +1,2 @@
 export * from "./chat-types";
+export * from "./message-service-types";
diff --git a/src/common/components/chats/utils/get-joined-communities.ts b/src/common/components/chats/utils/get-joined-communities.ts
index ff486aa1026..c04b2b20567 100644
--- a/src/common/components/chats/utils/get-joined-communities.ts
+++ b/src/common/components/chats/utils/get-joined-communities.ts
@@ -1,4 +1,4 @@
-import { Channel } from "../../../../providers/message-provider-types";
+import { Channel } from "../../../../managers/message-manager-types";
 
 export const getJoinedCommunities = (channels: Channel[], leftChannels: string[]) => {
   return channels.filter((item) => !leftChannels.includes(item.id));
diff --git a/src/common/components/chats/utils/get-user-chat-public-key.ts b/src/common/components/chats/utils/get-user-chat-public-key.ts
index df9c056a671..8352b301047 100644
--- a/src/common/components/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/components/chats/utils/get-user-chat-public-key.ts
@@ -5,6 +5,6 @@ export const getUserChatPublicKey = async (username: string) => {
   const { posting_json_metadata } = response;
   const profile = JSON.parse(posting_json_metadata!).profile;
   const { nsKey } = profile || {};
-  console.log("nsKey", nsKey);
+  // console.log("nsKey", nsKey);
   return nsKey;
 };
diff --git a/src/common/components/chats/utils/upload-channel-data.ts b/src/common/components/chats/utils/upload-channel-data.ts
index faf34365ff5..0a0f13477a6 100644
--- a/src/common/components/chats/utils/upload-channel-data.ts
+++ b/src/common/components/chats/utils/upload-channel-data.ts
@@ -1,4 +1,4 @@
-import { Channel } from "../../../../providers/message-provider-types";
+import { Channel } from "../../../../managers/message-manager-types";
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
 
diff --git a/src/common/components/chats/utils/use-fetch-community-messages.ts b/src/common/components/chats/utils/use-fetch-community-messages.ts
index e490e5d828d..8c0bc6f0c63 100644
--- a/src/common/components/chats/utils/use-fetch-community-messages.ts
+++ b/src/common/components/chats/utils/use-fetch-community-messages.ts
@@ -1,4 +1,4 @@
-import { Channel } from "../../../../providers/message-provider-types";
+import { Channel } from "../../../../managers/message-manager-types";
 import { publicMessagesList } from "../../../store/chat/types";
 
 export const fetchCommunityMessages = (
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index cd8d4bcb893..fc60ee3ef70 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -35,6 +35,7 @@ import { _t } from "../../i18n";
 
 import { pencilOutlineSvg } from "../../img/svg";
 import "./_index.scss";
+import ChatContextProvider from "../chats/chat-context-provider";
 
 const coverFallbackDay = require("../../img/cover-fallback-day.png");
 const coverFallbackNight = require("../../img/cover-fallback-night.png");
@@ -205,7 +206,10 @@ export class CommunityCover extends Component<Props> {
         <div className="controls-holder">
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
-          <JoinCommunityChatBtn {...this.props} />
+
+          <ChatContextProvider>
+            <JoinCommunityChatBtn {...this.props} />
+          </ChatContextProvider>
         </div>
         {canUpdateCoverImage && (
           <EditCoverImage
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 0c770316cea..92cd06a3aa2 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -41,7 +41,7 @@ import { getPrivateKey, getProfileMetaData } from "../../components/chats/utils"
 import ReCAPTCHA from "react-google-recaptcha";
 
 import { addAccountAuthority, removeAccountAuthority, signBuffer } from "../../helper/keychain";
-import { setNostrkeys } from "../../../providers/message-provider";
+import { setNostrkeys } from "../../../managers/message-manager";
 
 import { _t } from "../../i18n";
 import _c from "../../util/fix-class-names";
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index 973bb5ba708..a4007b0b7cf 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { Form } from "react-bootstrap";
 import { _t } from "../../i18n";
 import { copyContent } from "../../img/svg";
-import { ChatContext } from "../chats/chat-provider";
+import { ChatContext } from "../chats/chat-context-provider";
 import { copyToClipboard } from "../chats/utils";
 import { success } from "../feedback";
 import OrDivider from "../or-divider";
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index c3c8c09cac8..44a6c96d32c 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -11,7 +11,7 @@ import {
   Metadata,
   Profile,
   PublicMessage
-} from "../../providers/message-provider-types";
+} from "../../managers/message-manager-types";
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
 import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
@@ -92,6 +92,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   private async init() {
+    console.log("Init run of message service");
     this.eventQueue = [];
     this.eventQueueFlag = true;
     this.eventQueueBuffer = [];
@@ -530,6 +531,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
+    console.log("Profile update run");
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -701,6 +703,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           : null;
       })
       .filter(MessageService.notEmpty);
+    console.log("Channel creation event is emitted", channelCreations);
     if (channelCreations.length > 0) {
       this.emit(MessageEvents.ChannelCreation, channelCreations);
     }
@@ -800,7 +803,8 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     this.eventQueueFlag = true;
   }
 
-  close = () => {
+  public close = () => {
+    console.log("Close run");
     this.pool.close(this.readRelays);
     this.removeAllListeners();
   };
@@ -838,16 +842,19 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 
 export default MessageService;
 
-export const initMessageService = (keys: Keys): MessageService | undefined => {
-  if (window.messageService) {
-    window.messageService.close();
-    window.messageService = undefined;
-  }
+// export const initMessageService = (keys: Keys): MessageService | undefined => {
+//   if (window.messageService) {
+//     window.messageService.close();
+//     window.messageService = undefined;
+//   }
 
-  if (keys) {
-    window.messageService = new MessageService(keys.priv, keys.pub);
-  }
-  console.log("raven instance created");
+//   // const { messageServiceInstance, setMessageServiceInstance } = useMessageServiceContext();
+//   // console.log("I have to check this", messageServiceInstance, setMessageServiceInstance);
 
-  return window.messageService;
-};
+//   if (keys) {
+//     window.messageService = new MessageService(keys.priv, keys.pub);
+//   }
+//   console.log("raven instance created", window.messageService);
+
+//   return window.messageService;
+// };
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index f9b72c1c33a..f44b9259946 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -11,22 +11,13 @@ import "./index.scss";
 
 import * as ls from "../../util/local-storage";
 import { Button, Spinner } from "react-bootstrap";
-import { setNostrkeys } from "../../../providers/message-provider";
+import { setNostrkeys } from "../../../managers/message-manager";
 import ManageChatKey from "../../components/manage-chat-key";
 import Feedback, { success } from "../../components/feedback";
-import { NostrKeysType } from "../../components/chats/types";
-import {
-  copyToClipboard,
-  createNoStrAccount,
-  getPrivateKey,
-  getProfileMetaData,
-  setProfileMetaData
-} from "../../components/chats/utils";
 import { useMappedStore } from "../../store/use-mapped-store";
-import ChatProvider, { ChatContext } from "../../components/chats/chat-provider";
+import ChatContextProvider, { ChatContext } from "../../components/chats/chat-context-provider";
 import ImportChats from "../../components/chats/import-chats";
 import JoinChat from "../../components/chats/join-chat";
-import SetActiveUserChatKeys from "../../components/chats/set-chat-keys";
 
 interface MatchParams {
   filter: string;
@@ -72,56 +63,53 @@ export const Chats = (props: Props) => {
   };
 
   return (
-    <ChatProvider>
-      {(context) => (
-        <>
-          <Feedback activeUser={activeUser} />
-          <SetActiveUserChatKeys />
-          {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
-          <div
-            style={{ marginTop: marginTop }}
-            className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
-          >
-            {context.inProgress ? (
-              <div className="d-flex justify-content-center align-items-center full-page">
-                <Spinner animation="border" variant="primary" />
-              </div>
-            ) : (
-              <>
-                {context.activeUserKeys?.pub ? (
-                  context.chatPrivKey ? (
-                    <>
-                      <ChatsSideBar {...props} />
-                      {context.revealPrivKey ? (
-                        <div className="chats-messages-box">
-                          <ManageChatKey />
-                        </div>
-                      ) : (
-                        // Handle the case when the user hasn't joined any community here
-                        <ChatsMessagesBox
-                          {...props}
-                          deletePublicMessage={props.deletePublicMessage}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      <div className="import-chat">
-                        <ImportChats />
+    <ChatContextProvider>
+      <>
+        <Feedback activeUser={activeUser} />
+        {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+        <div
+          style={{ marginTop: marginTop }}
+          className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
+        >
+          {context.inProgress ? (
+            <div className="d-flex justify-content-center align-items-center full-page">
+              <Spinner animation="border" variant="primary" />
+            </div>
+          ) : (
+            <>
+              {context.activeUserKeys?.pub ? (
+                context.chatPrivKey ? (
+                  <>
+                    <ChatsSideBar {...props} />
+                    {context.revealPrivKey ? (
+                      <div className="chats-messages-box">
+                        <ManageChatKey />
                       </div>
-                    </>
-                  )
+                    ) : (
+                      // Handle the case when the user hasn't joined any community here
+                      <ChatsMessagesBox
+                        {...props}
+                        deletePublicMessage={props.deletePublicMessage}
+                      />
+                    )}
+                  </>
                 ) : (
-                  <div className="d-flex justify-content-center align-items-center full-page">
-                    <JoinChat {...props} />
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </>
-      )}
-    </ChatProvider>
+                  <>
+                    <div className="import-chat">
+                      <ImportChats />
+                    </div>
+                  </>
+                )
+              ) : (
+                <div className="d-flex justify-content-center align-items-center full-page">
+                  <JoinChat {...props} />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </>
+    </ChatContextProvider>
   );
 };
 export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 95b52b6cdb9..0ff211a78c5 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -4,7 +4,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
-import { Channel } from "../../providers/message-provider-types";
+import { Channel } from "../../managers/message-manager-types";
 import { usePrevious } from "../util/use-previous";
 import * as ls from "../util/local-storage";
 import {
@@ -46,9 +46,10 @@ import "./community.scss";
 import { Button, Modal } from "react-bootstrap";
 import LoginRequired from "../components/login-required";
 import { useMappedStore } from "../store/use-mapped-store";
-import { setNostrkeys } from "../../providers/message-provider";
+import { setNostrkeys } from "../../managers/message-manager";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
+import { profileUpdater } from "../components/chats/chat-popup";
 
 interface MatchParams {
   filter: string;
@@ -83,6 +84,7 @@ export const CommunityPage = (props: Props) => {
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [isCommunityAlreadyJoined, setIsCommunityAlreadyJoined] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
@@ -91,6 +93,13 @@ export const CommunityPage = (props: Props) => {
     fetchUserProfileData();
   }, [props.activeUser]);
 
+  useEffect(() => {
+    if (shouldUpdateProfile) {
+      console.log("state changed in useeffect");
+      profileUpdater();
+    }
+  }, [shouldUpdateProfile]);
+
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
     setCommunities(communities);
@@ -243,15 +252,12 @@ export const CommunityPage = (props: Props) => {
     setInProgress(true);
     const keys = createNoStrAccount();
     ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
-    await setProfileMetaData(props.activeUser, keys.pub);
     setNostrkeys(keys);
+    await setProfileMetaData(props.activeUser, keys.pub);
     setHasUserJoinedChat(true);
-    window.messageService?.updateProfile({
-      name: props.activeUser?.username!,
-      about: "",
-      picture: ""
-    });
     setInProgress(false);
+    console.log("State has been changed");
+    setShouldUpdateProfile(true);
   };
 
   const joinCommunityChat = () => {
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 80e4c8088e4..6bbcb79a15c 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -5,7 +5,7 @@ import {
   Profile,
   ChannelUpdate,
   MessagesObject
-} from "./../../../providers/message-provider-types";
+} from "../../../managers/message-manager-types";
 import { Dispatch } from "redux";
 
 import {
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index f2cda78d603..2d9629331ae 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -5,7 +5,7 @@ import {
   MessagesObject,
   Profile,
   PublicMessage
-} from "./../../../providers/message-provider-types";
+} from "../../../managers/message-manager-types";
 
 export interface DirectContactsType {
   name: string;
diff --git a/src/providers/message-provider-types.ts b/src/managers/message-manager-types.ts
similarity index 100%
rename from src/providers/message-provider-types.ts
rename to src/managers/message-manager-types.ts
diff --git a/src/providers/message-provider.tsx b/src/managers/message-manager.tsx
similarity index 89%
rename from src/providers/message-provider.tsx
rename to src/managers/message-manager.tsx
index e48f53ad964..820cfdc7b48 100644
--- a/src/providers/message-provider.tsx
+++ b/src/managers/message-manager.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
 import { DirectContactsType } from "../common/store/chat/types";
@@ -12,12 +12,13 @@ import {
   PublicMessage,
   ChannelUpdate,
   MessagesObject
-} from "./message-provider-types";
+} from "./message-manager-types";
 
-import { initMessageService, MessageEvents } from "../common/helper/message-service";
+import MessageService, { MessageEvents } from "../common/helper/message-service";
 import { getProfileMetaData, getPrivateKey } from "../common/components/chats/utils";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
+import { ChatContext } from "../common/components/chats/chat-context-provider";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -43,12 +44,18 @@ interface Props {
   addPreviousPublicMessages: (channelId: string, data: MessagesObject) => void;
 }
 
-const MessageProvider = (props: Props) => {
+const MessageManager = (props: Props) => {
   const { activeUser, chat } = useMappedStore();
+
+  // const messageServiceContext = useContext(MessageServiceContext);
+  // const { setMessageServiceInstance } = messageServiceContext;
+
+  // console.log("messageServiceContext", messageServiceContext);
+
   const [messageServiceReady, setMessageServiceReady] = useState(false);
-  const [since, setSince] = useState<number>(0);
+  const [since, setSince] = useState(0);
   const [keys, setKeys] = useState<Keys>();
-  const [messageService, setMessageService] = useState<any>();
+  const [messageService, setMessageService] = useState<MessageService | undefined>(undefined);
   const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
   const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
   const [isCommunityCreated, setIsCommunityCreated] = useState(false);
@@ -56,6 +63,9 @@ const MessageProvider = (props: Props) => {
   const [isDirectChatCreated, setIsDirectChatCreated] = useState(false);
   const [replacedDirectMessagesBuffer, setReplacedDirectMessagesBuffer] = useState<string[]>([]);
 
+  const { messageServiceInstance, initMessageServiceInstance, setMessageServiceInstance } =
+    useContext(ChatContext);
+
   useEffect(() => {
     if (chat.channels.length !== 0) {
       setIsCommunityCreated(true);
@@ -74,9 +84,11 @@ const MessageProvider = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    if (!window.messageService && keys?.priv) {
-      const messageServiceInstance = initMessageService(keys);
-      setMessageService(messageServiceInstance);
+    if (!messageServiceInstance && keys?.priv) {
+      const messageService = initMessageServiceInstance(keys);
+      console.log("I run from that", messageService);
+      setMessageServiceInstance(messageService!);
+      setMessageService(messageService!);
     }
   }, [keys]);
 
@@ -88,8 +100,10 @@ const MessageProvider = (props: Props) => {
 
   const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeysType;
-    const messageServiceInstance = initMessageService(detail);
-    setMessageService(messageServiceInstance);
+    const messageService = initMessageServiceInstance(detail);
+    console.log("I am here messageServiceInstance", messageService);
+    setMessageServiceInstance(messageService!);
+    setMessageService(messageService!);
   };
 
   const getNostrKeys = async (activeUser: ActiveUser) => {
@@ -264,8 +278,8 @@ const MessageProvider = (props: Props) => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    const append = data.filter((x) => chat.channels.find((y) => y.id === x.id) === undefined);
-    props.addChannels(append);
+    console.log("handle channel creation run");
+    props.addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
   };
 
   useEffect(() => {
@@ -343,20 +357,18 @@ const MessageProvider = (props: Props) => {
     } else {
       setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
     }
-
     let uniqueUsers: string[] = [];
+
     for (const item of data) {
-      const isCreatorMatch = chat.profiles.some((profile) => profile.creator === item.creator);
+      const isCreatorMatch = chat.profiles.find((profile) => profile.creator === item.creator);
 
       if (!isCreatorMatch) {
-        for (const item of data) {
-          if (!uniqueUsers.includes(item.creator)) {
-            uniqueUsers.push(item.creator);
-          }
+        if (!uniqueUsers.includes(item.creator)) {
+          uniqueUsers.push(item.creator);
         }
       }
     }
-    window?.messageService?.loadProfiles(uniqueUsers);
+    messageServiceInstance?.loadProfiles(uniqueUsers);
   };
 
   useEffect(() => {
@@ -469,4 +481,4 @@ const MessageProvider = (props: Props) => {
   return <>{}</>;
 };
 
-export default MessageProvider;
+export default MessageManager;

From dfc864fc90e45c53e60e9b646c4b4c7457044b77 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 13 Sep 2023 15:48:55 +0500
Subject: [PATCH 062/179] Implement Chat context

---
 src/common/app.tsx                            | 175 ++++++++++--------
 .../chats/chat-context-provider.tsx           |  35 ++--
 .../components/chats/chat-popup/index.tsx     | 125 ++++++-------
 .../chats/chats-channel-messages/index.tsx    |   8 +-
 .../chats-community-dropdown-menu/index.tsx   |   2 +-
 .../chats/chats-direct-messages/index.tsx     |   4 +-
 .../components/chats/chats-sidebar/indes.tsx  |   6 +-
 .../chats/join-community-chat-btn/index.tsx   |  29 ++-
 .../components/community-cover/index.tsx      |   5 +-
 src/common/helper/message-service.ts          |   3 +-
 src/common/pages/chats/index.tsx              | 103 +++++------
 src/common/pages/community-functional.tsx     |  21 ++-
 12 files changed, 262 insertions(+), 254 deletions(-)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index ced6574a230..94aaa913874 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -103,89 +103,100 @@ const App = (props: any) => {
       {/*<ReactQueryDevtools initialIsOpen={false} />*/}
       <Tracker />
       <UserActivityRecorder />
-      <Switch>
-        <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.USER_FEED} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
-        <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
-        <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE}
-          component={CommunityCreatePage}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE_HS}
-          component={CommunityCreateHSPage}
-        />
-        <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.FILTER_TAG}
-          component={EntryIndexContainer}
-        />
-        <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
-        <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
-        <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
-        <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
-        <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.CHATS}
-          component={global.usePrivate ? ChatsPage : NotFound}
-        />
-        <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
-        <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
-        <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
-        <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSALS}
-          component={ProposalsIndexContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSAL_DETAIL}
-          component={ProposalDetailContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={`/me${routes.PROPOSAL_DETAIL}`}
-          component={ProposalDetailContainer}
-        />
-        <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
-        <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
-        <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
-        <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
-        <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
-        <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTORS} component={ContributorsPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.DECKS}
-          component={global.usePrivate ? DecksPage : NotFound}
-        />
-        <Route component={NotFound} />
-      </Switch>
-
-      <Announcement activeUser={props.activeUser} />
-      <FloatingFAQ />
       <ChatContextProvider>
+        <Switch>
+          <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
+          <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.USER_FEED}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
+          <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
+          <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE}
+            component={CommunityCreatePage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE_HS}
+            component={CommunityCreateHSPage}
+          />
+          <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.FILTER_TAG}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
+          <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
+          <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
+          <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
+          <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.CHATS}
+            component={global.usePrivate ? ChatsPage : NotFound}
+          />
+          <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
+          <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
+          <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
+          <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSALS}
+            component={ProposalsIndexContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSAL_DETAIL}
+            component={ProposalDetailContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={`/me${routes.PROPOSAL_DETAIL}`}
+            component={ProposalDetailContainer}
+          />
+          <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
+          <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
+          <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
+          <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
+          <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
+          <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
+          <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.CONTRIBUTORS}
+            component={ContributorsPage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.DECKS}
+            component={global.usePrivate ? DecksPage : NotFound}
+          />
+          <Route component={NotFound} />
+        </Switch>
+
+        <Announcement activeUser={props.activeUser} />
+        <FloatingFAQ />
+
         <MessageManager {...props} />
         <ChatPopUp {...props} />
       </ChatContextProvider>
diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 6c1d8b765af..87d3e91c869 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -6,18 +6,17 @@ import { NostrKeysType } from "./types";
 import { getPrivateKey, getUserChatPublicKey } from "./utils";
 
 interface Context {
-  activeUserKeys?: NostrKeysType;
-  inProgress: boolean;
+  activeUserKeys: NostrKeysType;
+  showSpinner: boolean;
   revealPrivKey: boolean;
   chatPrivKey: string;
   receiverPubKey: string;
   messageServiceInstance: MessageService | undefined;
   setRevealPrivKey: (d: boolean) => void;
-  setInProgress: (d: boolean) => void;
+  setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
   setActiveUserKeys: (keys: NostrKeysType) => void;
   setReceiverPubKey: (key: string) => void;
-
   setMessageServiceInstance: (instance: MessageService | undefined) => void;
   initMessageServiceInstance: (keys: Keys) => void;
 }
@@ -28,13 +27,13 @@ interface Props {
 
 export const ChatContext = React.createContext<Context>({
   activeUserKeys: { pub: " ", priv: "" },
-  inProgress: false,
+  showSpinner: false,
   revealPrivKey: false,
   chatPrivKey: "",
   receiverPubKey: "",
   messageServiceInstance: undefined,
   setRevealPrivKey: () => {},
-  setInProgress: () => {},
+  setShowSpinner: () => {},
   setChatPrivKey: () => {},
   setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
@@ -45,8 +44,8 @@ export const ChatContext = React.createContext<Context>({
 export default function ChatContextProvider({ children }: Props) {
   const { activeUser } = useMappedStore();
 
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
-  const [inProgress, setInProgress] = useState(true);
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: " ", priv: "" });
+  const [showSpinner, setShowSpinner] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
@@ -59,18 +58,12 @@ export default function ChatContextProvider({ children }: Props) {
   }, []);
 
   useEffect(() => {
-    if (messageServiceInstance) {
-      console.log("messageServiceInstance in context", messageServiceInstance);
-    }
-  }, [messageServiceInstance]);
-
-  useEffect(() => {
-    if (inProgress) {
+    if (showSpinner) {
       setTimeout(() => {
-        setInProgress(false);
+        setShowSpinner(false);
       }, 7000);
     }
-  }, [inProgress]);
+  }, [showSpinner]);
 
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
@@ -80,12 +73,11 @@ export default function ChatContextProvider({ children }: Props) {
       pub: pubKey,
       priv: privKey
     };
-    setInProgress(false);
+    setShowSpinner(false);
     setActiveUserKeys(activeUserKeys);
   };
 
   const initMessageServiceInstance = (keys: Keys) => {
-    console.log("Keys are in context", keys, messageServiceInstance);
     if (messageServiceInstance) {
       messageServiceInstance.close();
       setMessageServiceInstance(undefined);
@@ -94,7 +86,6 @@ export default function ChatContextProvider({ children }: Props) {
     let newMessageService: MessageService | undefined = undefined;
     if (keys) {
       newMessageService = new MessageService(keys.priv, keys.pub);
-      console.log("raven instance created", newMessageService);
       setMessageServiceInstance(newMessageService);
     }
     return newMessageService;
@@ -104,13 +95,13 @@ export default function ChatContextProvider({ children }: Props) {
     <ChatContext.Provider
       value={{
         activeUserKeys,
-        inProgress,
+        showSpinner,
         revealPrivKey,
         receiverPubKey,
         chatPrivKey,
         messageServiceInstance,
         setRevealPrivKey,
-        setInProgress,
+        setShowSpinner,
         setChatPrivKey,
         setActiveUserKeys,
         setReceiverPubKey,
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 025ffff88eb..af33ade39b1 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -6,8 +6,7 @@ import { Button, Form, Modal, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 import { Community } from "../../../store/communities/types";
-import { User } from "../../../store/users/types";
-import { ToggleType, UI } from "../../../store/ui/types";
+import { ToggleType } from "../../../store/ui/types";
 import { Account } from "../../../store/accounts/types";
 import {
   Channel,
@@ -72,6 +71,7 @@ import {
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ImportChats from "../import-chats";
+import MessageService from "../../../helper/message-service";
 
 interface Props {
   history: History;
@@ -84,29 +84,31 @@ interface Props {
   deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
-export const profileUpdater = () => {
-  const ev = new CustomEvent("profileUpdater");
+export const profileUpdater = (messageServiceInstance: MessageService) => {
+  const detail = {
+    messageServiceInstance
+  };
+  const ev = new CustomEvent("profileUpdater", { detail });
   window.dispatchEvent(ev);
 };
 
 export default function ChatPopUp(props: Props) {
   const { activeUser, global, chat } = useMappedStore();
 
-  const chatContext = useContext(ChatContext);
-  // const messageServiceContext = useContext(MessageServiceContext);
-
   const {
-    // activeUserKeys,
-    setRevealPrivKey,
-    // setReceiverPubKey,
     messageServiceInstance,
-    chatPrivKey,
-    revealPrivKey
-  } = chatContext;
+    revealPrivKey,
+    activeUserKeys,
+    showSpinner,
+    setRevealPrivKey,
+    setShowSpinner,
+    setActiveUserKeys
+  } = useContext(ChatContext);
+  // const messageServiceContext = useContext(MessageServiceContext);
 
   // const { messageServiceInstance } = messageServiceContext;
 
-  console.log("messageServiceInstance chatpop up", chatPrivKey, messageServiceInstance);
+  // console.log("messageServiceInstance chatpop up", messageServiceInstance);
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -121,9 +123,8 @@ export default function ChatPopUp(props: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [showSpinner, setShowSpinner] = useState(false);
+  const [isSpinner, setIsSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
   const [isCommunity, setIsCommunity] = useState(false);
@@ -140,16 +141,15 @@ export default function ChatPopUp(props: Props) {
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [isTop, setIsTop] = useState(false);
+  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
-  const [revelPrivateKey, setRevealPrivateKey] = useState(false);
   const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
-  const [refreshChat, setRefreshChat] = useState(false);
 
-  // useEffect(() => {
-  //   console.log("directMessagesList in chat popup", directMessagesList);
-  // }, [directMessagesList]);
+  useEffect(() => {
+    console.log("chat in store", chat);
+  }, [chat]);
 
   useEffect(() => {
     window.addEventListener("profileUpdater", noStrProfileUpdater);
@@ -159,13 +159,6 @@ export default function ChatPopUp(props: Props) {
     };
   }, []);
 
-  useEffect(() => {
-    console.log(
-      "-----------------------------------------------------------------",
-      messageServiceInstance
-    );
-  }, [messageServiceInstance]);
-
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
@@ -192,6 +185,12 @@ export default function ChatPopUp(props: Props) {
     setInnerWidth(window.innerWidth);
   }, []);
 
+  useEffect(() => {
+    if (shouldUpdateProfile && messageServiceInstance) {
+      profileUpdater(messageServiceInstance);
+    }
+  }, [shouldUpdateProfile, messageServiceInstance]);
+
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -229,12 +228,13 @@ export default function ChatPopUp(props: Props) {
   useEffect(() => {
     if (messageServiceInstance) {
       setHasUserJoinedChat(true);
+      setShouldUpdateProfile(false);
       const noStrPrivKey = getPrivateKey(activeUser?.username!);
       setNoStrPrivKey(noStrPrivKey);
     }
     setTimeout(() => {
       if (chat.channels.length === 0 && chat.directContacts.length === 0) {
-        setRefreshChat(false);
+        setShowSpinner(false);
       }
     }, 5000);
   }, [typeof window !== "undefined" && messageServiceInstance]);
@@ -271,7 +271,7 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (currentChannel && isCommunity) {
-      window?.messageService?.fetchChannel(currentChannel.id);
+      messageServiceInstance?.fetchChannel(currentChannel.id);
       const publicMessages: PublicMessage[] = fetchCommunityMessages(
         chat.publicMessages,
         currentChannel,
@@ -373,9 +373,10 @@ export default function ChatPopUp(props: Props) {
     }
   };
 
-  const noStrProfileUpdater = () => {
-    console.log("Function run", messageServiceInstance);
-    messageServiceInstance?.updateProfile({
+  const noStrProfileUpdater = (e: Event) => {
+    const detail = (e as CustomEvent).detail;
+    console.log("detail", detail.messageServiceInstance);
+    detail.messageServiceInstance.updateProfile({
       name: activeUser?.username!,
       about: "",
       picture: ""
@@ -443,12 +444,6 @@ export default function ChatPopUp(props: Props) {
 
   const fetchProfileData = async () => {
     const profileData = await getProfileMetaData(activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    const activeUserKeys = {
-      pub: profileData?.nsKey,
-      priv: noStrPrivKey
-    };
-    setActiveUserKeys(activeUserKeys);
     const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
     setHasUserJoinedChat(hasNoStrKey);
   };
@@ -508,7 +503,7 @@ export default function ChatPopUp(props: Props) {
     resetChat();
     handleBackArrowSvg();
     if (getPrivateKey(activeUser?.username!)) {
-      // setRefreshChat(true);
+      setShowSpinner(true);
       const keys = {
         pub: activeUserKeys?.pub!,
         priv: getPrivateKey(activeUser?.username!)
@@ -524,7 +519,7 @@ export default function ChatPopUp(props: Props) {
 
   const handleJoinChat = async () => {
     const { resetChat } = props;
-    setShowSpinner(true);
+    setIsSpinner(true);
     resetChat();
     const keys = createNoStrAccount();
     ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
@@ -532,9 +527,9 @@ export default function ChatPopUp(props: Props) {
     await setProfileMetaData(activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
-    noStrProfileUpdater();
+    setShouldUpdateProfile(true);
     setActiveUserKeys(keys);
-    setShowSpinner(false);
+    setIsSpinner(false);
   };
 
   const chatButtonSpinner = (
@@ -654,7 +649,7 @@ export default function ChatPopUp(props: Props) {
     setShowSearchUser(false);
     setSearchText("");
     setHasMore(true);
-    setRevealPrivateKey(false);
+    setRevealPrivKey(false);
   };
 
   return (
@@ -666,7 +661,7 @@ export default function ChatPopUp(props: Props) {
           }`}
         >
           <div className="chat-header">
-            {(currentUser || communityName || showSearchUser || revelPrivateKey) && expanded && (
+            {(currentUser || communityName || showSearchUser || revealPrivKey) && expanded && (
               <Tooltip content={_t("chat.back")}>
                 <div className="back-arrow-image">
                   <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
@@ -695,26 +690,22 @@ export default function ChatPopUp(props: Props) {
                   ? currentCommunity?.title
                   : showSearchUser
                   ? "New Message"
-                  : revelPrivateKey
+                  : revealPrivKey
                   ? "Manage chat key"
                   : "Messages"}
               </p>
             </div>
             <div className="actionable-imgs">
-              {!currentUser &&
-                hasUserJoinedChat &&
-                noStrPrivKey &&
-                !isCommunity &&
-                !revelPrivateKey && (
-                  <>
-                    <div className="message-image" onClick={handleMessageSvgClick}>
-                      <Tooltip content={_t("chat.new-message")}>
-                        <p className="message-svg">{addMessageSVG}</p>
-                      </Tooltip>
-                    </div>
-                  </>
-                )}
-              {hasUserJoinedChat && noStrPrivKey && !revelPrivateKey && (
+              {!currentUser && hasUserJoinedChat && noStrPrivKey && !isCommunity && !revealPrivKey && (
+                <>
+                  <div className="message-image" onClick={handleMessageSvgClick}>
+                    <Tooltip content={_t("chat.new-message")}>
+                      <p className="message-svg">{addMessageSVG}</p>
+                    </Tooltip>
+                  </div>
+                </>
+              )}
+              {hasUserJoinedChat && noStrPrivKey && !revealPrivKey && (
                 <div className="message-image" onClick={handleRefreshSvgClick}>
                   <Tooltip content={_t("chat.refresh")}>
                     <p className="message-svg" style={{ paddingTop: "10px" }}>
@@ -738,7 +729,7 @@ export default function ChatPopUp(props: Props) {
                   <ChatsDropdownMenu
                     history={props.history}
                     onManageChatKey={() => {
-                      setRevealPrivateKey(!revelPrivateKey);
+                      setRevealPrivKey(!revealPrivKey);
                     }}
                   />
                 </div>
@@ -772,7 +763,7 @@ export default function ChatPopUp(props: Props) {
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
-            {hasUserJoinedChat && !revelPrivateKey ? (
+            {hasUserJoinedChat && !revealPrivKey ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
                   <div className="chats">
@@ -798,7 +789,6 @@ export default function ChatPopUp(props: Props) {
                         <ChatsDirectMessages
                           receiverPubKey={receiverPubKey}
                           directMessages={directMessagesList}
-                          activeUserKeys={activeUserKeys!}
                           currentUser={currentUser}
                           isScrollToBottom={false}
                         />
@@ -808,7 +798,6 @@ export default function ChatPopUp(props: Props) {
                           username={communityName}
                           publicMessages={publicMessages}
                           currentChannel={currentChannel!}
-                          activeUserKeys={activeUserKeys!}
                           isScrollToBottom={false}
                           isActveUserRemoved={isActveUserRemoved}
                           currentChannelSetter={setCurrentChannel}
@@ -864,7 +853,7 @@ export default function ChatPopUp(props: Props) {
                   <>
                     {(chat.directContacts.length !== 0 ||
                       (chat.channels.length !== 0 && communities.length !== 0)) &&
-                    !refreshChat &&
+                    !showSpinner &&
                     noStrPrivKey ? (
                       <React.Fragment>
                         {chat.channels.length !== 0 && communities.length !== 0 && (
@@ -936,7 +925,7 @@ export default function ChatPopUp(props: Props) {
                       <>
                         <ImportChats />
                       </>
-                    ) : refreshChat ? (
+                    ) : showSpinner ? (
                       <div className="no-chat">
                         <Spinner animation="border" variant="primary" />
                       </div>
@@ -953,11 +942,11 @@ export default function ChatPopUp(props: Props) {
                   </>
                 )}
               </>
-            ) : revelPrivateKey ? (
+            ) : revealPrivKey ? (
               <ManageChatKey />
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
-                {showSpinner && chatButtonSpinner}
+                {isSpinner && chatButtonSpinner}
                 {_t("chat.join-chat")}
               </Button>
             )}
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 0c5029d6203..cc8a1070dee 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -43,7 +43,6 @@ import { ChatContext } from "../chat-context-provider";
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
-  activeUserKeys: NostrKeysType;
   username: string;
   from?: string;
   history: History;
@@ -64,7 +63,6 @@ export default function ChatsChannelMessages(props: Props) {
   const {
     publicMessages,
     currentChannel,
-    activeUserKeys,
     history,
     from,
     isScrollToBottom,
@@ -76,6 +74,8 @@ export default function ChatsChannelMessages(props: Props) {
   } = props;
   const { chat, global, activeUser, ui, users } = useMappedStore();
 
+  const { messageServiceInstance, activeUserKeys } = useContext(ChatContext);
+
   let prevGlobal = usePrevious(global);
 
   const popoverRef = useRef<HTMLDivElement | null>(null);
@@ -91,8 +91,6 @@ export default function ChatsChannelMessages(props: Props) {
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
-  const { messageServiceInstance } = useContext(ChatContext);
-
   // useEffect(() => {
   //   scrollToBottom();
   //   console.log("Heloooooooo");
@@ -274,7 +272,7 @@ export default function ChatsChannelMessages(props: Props) {
       case 4:
         if (resendMessage) {
           deletePublicMessage(currentChannel.id, resendMessage?.id);
-          window?.messageService?.sendPublicMessage(
+          messageServiceInstance?.sendPublicMessage(
             currentChannel!,
             resendMessage?.content,
             [],
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index 5d8d1508fca..ee9be8fb671 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -442,7 +442,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const handleConfirmButton = (actionType: string) => {
     switch (actionType) {
       case LEAVECOMMUNITY:
-        window?.messageService
+        messageServiceInstance
           ?.updateLeftChannelList([...chat.leftChannelsList!, currentChannel?.id!])
           .then(() => {})
           .finally(() => {
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index c54d76d0b90..1337e1c47c6 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -22,10 +22,10 @@ import { ActiveUser } from "../../../store/active-user/types";
 import usePrevious from "react-use/lib/usePrevious";
 import { NostrKeysType } from "../types";
 import { _t } from "../../../i18n";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   directMessages: DirectMessage[];
-  activeUserKeys: NostrKeysType;
   currentUser: string;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
@@ -37,7 +37,6 @@ let zoom: Zoom | null = null;
 export default function ChatsDirectMessages(props: Props) {
   const {
     directMessages,
-    activeUserKeys,
     currentUser,
     isScrolled,
     receiverPubKey,
@@ -46,6 +45,7 @@ export default function ChatsDirectMessages(props: Props) {
   } = props;
 
   const { chat, global, activeUser } = useMappedStore();
+  const { activeUserKeys } = useContext(ChatContext);
 
   console.log("directMessages", directMessages);
 
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 41e112e259f..11ea4684aea 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -48,7 +48,7 @@ export default function ChatsSideBar(props: Props) {
     activeUserKeys,
     revealPrivKey,
     chatPrivKey,
-    setInProgress,
+    setShowSpinner,
     setRevealPrivKey,
     setReceiverPubKey
   } = chatContext;
@@ -63,7 +63,7 @@ export default function ChatsSideBar(props: Props) {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [communities, setCommunities] = useState<Channel[]>([]);
 
-  console.log("username in chats sidebar", username);
+  console.log("setInProgress in chats sidebar", setShowSpinner);
 
   useDebounce(
     async () => {
@@ -110,7 +110,7 @@ export default function ChatsSideBar(props: Props) {
   const handleRefreshChat = () => {
     resetChat();
     setNostrkeys(activeUserKeys!);
-    setInProgress(true);
+    setShowSpinner(true);
   };
 
   const handleRevealPrivKey = () => {
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index 14abd8e1c8c..a9c1bc17a2e 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -11,6 +11,8 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import * as ls from "../../../util/local-storage";
 import { setNostrkeys } from "../../../../managers/message-manager";
+import { ChatContext } from "../chat-context-provider";
+import { profileUpdater } from "../chat-popup";
 import { NOSTRKEY } from "../chat-popup/chat-constants";
 import { NostrKeysType } from "../types";
 import {
@@ -19,7 +21,6 @@ import {
   setChannelMetaData,
   setProfileMetaData
 } from "../utils";
-import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   history: History;
@@ -29,8 +30,7 @@ interface Props {
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
-  const { messageServiceInstance } = useContext(ChatContext);
-  console.log("Bhai kiya masla ha apko", messageServiceInstance);
+  const { messageServiceInstance, setShowSpinner } = useContext(ChatContext);
   const { chat } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
@@ -41,6 +41,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [loadCommunity, setLoadCommunity] = useState(false);
   const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
+  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
   useEffect(() => {
     fetchCommunityProfile();
@@ -57,11 +58,23 @@ export default function JoinCommunityChatBtn(props: Props) {
     }
   }, [activeUserKeys]);
 
+  useEffect(() => {
+    if (shouldUpdateProfile && messageServiceInstance) {
+      profileUpdater(messageServiceInstance);
+    }
+  }, [shouldUpdateProfile, messageServiceInstance]);
+
+  useEffect(() => {
+    if (messageServiceInstance && shouldUpdateProfile) {
+      setShouldUpdateProfile(false);
+    }
+  }, [messageServiceInstance]);
+
   useEffect(() => {
     if (messageServiceInstance) {
       fetchUserProfileData();
       if (loadCommunity) {
-        window?.messageService?.loadChannel(currentChannel?.id!);
+        messageServiceInstance?.loadChannel(currentChannel?.id!);
       }
       if (initiateCommunityChat && communityRoles.length !== 0) {
         createCommunityChat();
@@ -146,7 +159,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     const { community } = props;
     try {
       setInProgress(true);
-      const data = await window?.messageService?.createChannel({
+      const data = await messageServiceInstance?.createChannel({
         name: community.title,
         about: community.description,
         communityName: community.name,
@@ -179,18 +192,19 @@ export default function JoinCommunityChatBtn(props: Props) {
   const joinCommunityChat = () => {
     console.log("Join community chat", messageServiceInstance);
     if (!hasUserJoinedChat) {
+      setShowSpinner(true);
       handleJoinChat();
       setLoadCommunity(true);
       setIsCommunityChatJoined(true);
       return;
     }
     if (chat.leftChannelsList.includes(currentChannel?.id!)) {
-      window?.messageService?.updateLeftChannelList(
+      messageServiceInstance?.updateLeftChannelList(
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
     }
     setIsCommunityChatJoined(true);
-    window?.messageService?.loadChannel(currentChannel?.id!);
+    messageServiceInstance?.loadChannel(currentChannel?.id!);
     setIsCommunityChatJoined(true);
   };
 
@@ -232,6 +246,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     setInProgress(false);
     fetchCommunityProfile();
     resetChat();
+    setShouldUpdateProfile(true);
   };
 
   const chatButtonSpinner = (
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index fc60ee3ef70..7d973086661 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -35,7 +35,6 @@ import { _t } from "../../i18n";
 
 import { pencilOutlineSvg } from "../../img/svg";
 import "./_index.scss";
-import ChatContextProvider from "../chats/chat-context-provider";
 
 const coverFallbackDay = require("../../img/cover-fallback-day.png");
 const coverFallbackNight = require("../../img/cover-fallback-night.png");
@@ -207,9 +206,7 @@ export class CommunityCover extends Component<Props> {
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
 
-          <ChatContextProvider>
-            <JoinCommunityChatBtn {...this.props} />
-          </ChatContextProvider>
+          <JoinCommunityChatBtn {...this.props} />
         </div>
         {canUpdateCoverImage && (
           <EditCoverImage
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 44a6c96d32c..2c54508493d 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -531,7 +531,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    console.log("Profile update run");
+    console.log("Profile update run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -574,6 +574,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         sig: ""
       })
         .then((event) => {
+          console.log("event failed", event);
           if (!event) {
             reject("Couldn't sign event!");
             return;
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index f44b9259946..85b684fc1d6 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -1,24 +1,22 @@
 import React, { useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { match } from "react-router";
+import { Spinner } from "react-bootstrap";
 import NavBar from "../../components/navbar";
 import NavBarElectron from "../../../desktop/app/components/navbar";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
 import ChatsSideBar from "../../components/chats/chats-sidebar/indes";
 import ChatsMessagesBox from "../../components/chats/chats-messages-box";
 
-import "./index.scss";
-
-import * as ls from "../../util/local-storage";
-import { Button, Spinner } from "react-bootstrap";
-import { setNostrkeys } from "../../../managers/message-manager";
 import ManageChatKey from "../../components/manage-chat-key";
-import Feedback, { success } from "../../components/feedback";
+import Feedback from "../../components/feedback";
 import { useMappedStore } from "../../store/use-mapped-store";
-import ChatContextProvider, { ChatContext } from "../../components/chats/chat-context-provider";
+import { ChatContext } from "../../components/chats/chat-context-provider";
 import ImportChats from "../../components/chats/import-chats";
 import JoinChat from "../../components/chats/join-chat";
 
+import "./index.scss";
+
 interface MatchParams {
   filter: string;
   name: string;
@@ -33,9 +31,13 @@ interface Props extends PageProps {
 
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
-
   const [marginTop, setMarginTop] = useState(0);
 
+  const chatContext = useContext(ChatContext);
+  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } = chatContext;
+
+  console.log("inProgress in chats page", showSpinner);
+
   useEffect(() => {
     document.body.style.overflow = "hidden";
 
@@ -63,53 +65,48 @@ export const Chats = (props: Props) => {
   };
 
   return (
-    <ChatContextProvider>
-      <>
-        <Feedback activeUser={activeUser} />
-        {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
-        <div
-          style={{ marginTop: marginTop }}
-          className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
-        >
-          {context.inProgress ? (
-            <div className="d-flex justify-content-center align-items-center full-page">
-              <Spinner animation="border" variant="primary" />
-            </div>
-          ) : (
-            <>
-              {context.activeUserKeys?.pub ? (
-                context.chatPrivKey ? (
-                  <>
-                    <ChatsSideBar {...props} />
-                    {context.revealPrivKey ? (
-                      <div className="chats-messages-box">
-                        <ManageChatKey />
-                      </div>
-                    ) : (
-                      // Handle the case when the user hasn't joined any community here
-                      <ChatsMessagesBox
-                        {...props}
-                        deletePublicMessage={props.deletePublicMessage}
-                      />
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <div className="import-chat">
-                      <ImportChats />
+    <>
+      <Feedback activeUser={activeUser} />
+      {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+      <div
+        style={{ marginTop: marginTop }}
+        className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
+      >
+        {showSpinner ? (
+          <div className="d-flex justify-content-center align-items-center full-page">
+            <Spinner animation="border" variant="primary" />
+          </div>
+        ) : (
+          <>
+            {activeUserKeys?.pub ? (
+              chatPrivKey ? (
+                <>
+                  <ChatsSideBar {...props} />
+                  {revealPrivKey ? (
+                    <div className="chats-messages-box">
+                      <ManageChatKey />
                     </div>
-                  </>
-                )
+                  ) : (
+                    // Handle the case when the user hasn't joined any community here
+                    <ChatsMessagesBox {...props} deletePublicMessage={props.deletePublicMessage} />
+                  )}
+                </>
               ) : (
-                <div className="d-flex justify-content-center align-items-center full-page">
-                  <JoinChat {...props} />
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </>
-    </ChatContextProvider>
+                <>
+                  <div className="import-chat">
+                    <ImportChats />
+                  </div>
+                </>
+              )
+            ) : (
+              <div className="d-flex justify-content-center align-items-center full-page">
+                <JoinChat {...props} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
   );
 };
 export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 0ff211a78c5..4e5fa2bc9d2 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -1,6 +1,6 @@
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
 import { match } from "react-router";
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
@@ -50,6 +50,7 @@ import { setNostrkeys } from "../../managers/message-manager";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
 import { profileUpdater } from "../components/chats/chat-popup";
+import { ChatContext } from "../components/chats/chat-context-provider";
 
 interface MatchParams {
   filter: string;
@@ -89,16 +90,24 @@ export const CommunityPage = (props: Props) => {
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
+  const chatContext = useContext(ChatContext);
+  const { messageServiceInstance } = chatContext;
+
   useEffect(() => {
     fetchUserProfileData();
   }, [props.activeUser]);
 
   useEffect(() => {
-    if (shouldUpdateProfile) {
-      console.log("state changed in useeffect");
-      profileUpdater();
+    if (shouldUpdateProfile && messageServiceInstance) {
+      profileUpdater(messageServiceInstance);
+    }
+  }, [shouldUpdateProfile, messageServiceInstance]);
+
+  useEffect(() => {
+    if (messageServiceInstance && shouldUpdateProfile) {
+      setShouldUpdateProfile(false);
     }
-  }, [shouldUpdateProfile]);
+  }, [messageServiceInstance]);
 
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
@@ -263,7 +272,7 @@ export const CommunityPage = (props: Props) => {
   const joinCommunityChat = () => {
     const communityIds = new Set(communities.map((community) => community.id));
     if (!communityIds.has(channelId)) {
-      const messageService = window?.messageService;
+      const messageService = messageServiceInstance;
       if (messageService) {
         const updatedLeftChannelsList = chat.leftChannelsList.filter((x) => x !== channelId);
         messageService.updateLeftChannelList(updatedLeftChannelsList);

From 30668037332ee58853042a128afd538fd0804219 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 13 Sep 2023 17:23:51 +0500
Subject: [PATCH 063/179] Minor fixes

---
 src/common/components/chats/chat-popup/index.scss |  1 +
 src/common/components/chats/chat-popup/index.tsx  | 13 ++++---------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/components/chats/chat-popup/index.scss
index d7a117ad0f3..1c56a18b60a 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/components/chats/chat-popup/index.scss
@@ -258,6 +258,7 @@
         width: -webkit-fill-available;
 
         .username {
+          padding-top: 8px;
           @include themify(day) {
             color: $charcoal-grey;
           }
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index af33ade39b1..0f83e3e06d1 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -284,12 +284,8 @@ export default function ChatPopUp(props: Props) {
   }, [currentChannel, isCommunity, chat.publicMessages]);
 
   useEffect(() => {
-    if (isCurrentUser) {
-      scrollerClicked();
-    } else {
-      scrollerClicked();
-    }
-  }, [isCurrentUser]);
+    scrollerClicked();
+  }, [isCurrentUser, isCommunity]);
 
   useEffect(() => {
     if (removedUsers) {
@@ -488,6 +484,7 @@ export default function ChatPopUp(props: Props) {
   };
 
   const scrollerClicked = () => {
+    console.log("Scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
@@ -879,9 +876,7 @@ export default function ChatPopUp(props: Props) {
                                       communityClicked(channel.communityName!, channel.name)
                                     }
                                   >
-                                    <p className="username" style={{ paddingTop: "8px" }}>
-                                      {channel.name}
-                                    </p>
+                                    <p className="username">{channel.name}</p>
                                     <p className="last-message">
                                       {getCommunityLastMessage(channel.id, chat.publicMessages)}
                                     </p>

From 72fd2ba9933c03d2c251def1e99e29083bb2d872 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 13 Sep 2023 18:18:06 +0500
Subject: [PATCH 064/179] Resolve conflicts with development

---
 .github/workflows/master.yml                  |  45 +-
 .github/workflows/staging.yml                 |  14 +-
 docker-compose.production.yml                 |  17 +
 docker-compose.yml                            |  17 +
 package.json                                  |   7 +-
 src/common/api/operations.ts                  |   1 +
 src/common/api/threespeak/queries.ts          |   4 +
 .../components/chats/chat-input/index.tsx     |   2 +-
 .../comment/__snapshots__/index.spec.tsx.snap |   2 +
 .../columns/deck-items/deck-thread-item.tsx   |   7 +-
 .../decks/deck-settings/decks-settings.tsx    |   2 +-
 .../deck-threads-form-emoji-picker.tsx        |  25 +-
 .../decks/deck-threads-form/index.tsx         |  24 +-
 .../deck-toolbar-base-actions.tsx             |   4 +-
 .../__snapshots__/test1.spec.tsx.snap         |   4 +-
 src/common/components/discussion/index.tsx    |  21 +-
 .../components/editor-toolbar/index.tsx       |  18 +-
 .../components/emoji-picker/_index-old.scss   |  74 +++
 .../components/emoji-picker/_index.scss       |  86 +--
 .../components/emoji-picker/index-old.tsx     | 207 ++++++
 .../components/emoji-picker/index.spec.tsx    |   2 +-
 src/common/components/emoji-picker/index.tsx  | 294 +++------
 .../entry-menu/menu-items-generator.ts        |   4 +-
 src/common/components/entry-votes/index.tsx   |  17 +-
 src/common/components/navbar/index.tsx        |   2 +-
 src/common/components/user-nav/index.spec.tsx |  11 +-
 src/common/components/user-nav/index.tsx      | 424 ++++--------
 .../components/user-nav/wallet-badge.tsx      |  33 +
 .../components/video-gallery/index.scss       |  18 +-
 src/common/components/video-gallery/index.tsx |  11 +-
 .../video-gallery/video-gallery-item.tsx      |  10 +-
 .../video-upload-threespeak/index.scss        |  82 ++-
 .../video-upload-threespeak/index.tsx         |  52 +-
 .../video-upload-threespeak/utils/index.ts    |   1 +
 .../utils/use-get-camera-list.ts              |  18 +
 .../video-upload-item.tsx                     |   2 +-
 .../video-upload-recorder-actions.tsx         |  66 ++
 .../video-upload-recorder-no-permission.tsx   |  10 +
 .../video-upload-recorder.tsx                 | 188 ++++++
 src/common/constants/dmca.json                | 601 +++++++++---------
 src/common/constants/exchanges.ts             |   3 +-
 src/common/core/caches/entries-cache.tsx      |   4 +-
 src/common/core/react-query.ts                |   4 +-
 src/common/helper/posting.ts                  |   5 +-
 src/common/i18n/locales/ac-ace.json           |   3 +-
 src/common/i18n/locales/ar-SA.json            | 147 ++---
 src/common/i18n/locales/az-AZ.json            |   3 +-
 src/common/i18n/locales/bg-BG.json            |   3 +-
 src/common/i18n/locales/bn-BD.json            |   3 +-
 src/common/i18n/locales/da-DK.json            |   3 +-
 src/common/i18n/locales/de-DE.json            |   3 +-
 src/common/i18n/locales/el-GR.json            |   3 +-
 src/common/i18n/locales/en-US.json            |  11 +-
 src/common/i18n/locales/es-ES.json            |   3 +-
 src/common/i18n/locales/et-EE.json            |   3 +-
 src/common/i18n/locales/fa-IR.json            |   3 +-
 src/common/i18n/locales/fi-FI.json            | 153 ++---
 src/common/i18n/locales/fil-PH.json           |   3 +-
 src/common/i18n/locales/fr-FR.json            |   3 +-
 src/common/i18n/locales/he-IL.json            |   3 +-
 src/common/i18n/locales/hi-IN.json            |   3 +-
 src/common/i18n/locales/hr-HR.json            |   3 +-
 src/common/i18n/locales/hu-HU.json            |   3 +-
 src/common/i18n/locales/id-ID.json            |   3 +-
 src/common/i18n/locales/it-IT.json            |   3 +-
 src/common/i18n/locales/ja-JP.json            |   3 +-
 src/common/i18n/locales/ka-GE.json            |   3 +-
 src/common/i18n/locales/kk-KZ.json            |   3 +-
 src/common/i18n/locales/ko-KR.json            |   3 +-
 src/common/i18n/locales/ku-TR.json            |   3 +-
 src/common/i18n/locales/ky-KG.json            |   3 +-
 src/common/i18n/locales/lt-LT.json            |   3 +-
 src/common/i18n/locales/lv-LV.json            |   3 +-
 src/common/i18n/locales/ms-MY.json            |   3 +-
 src/common/i18n/locales/ne-NP.json            |   3 +-
 src/common/i18n/locales/nl-NL.json            |   3 +-
 src/common/i18n/locales/no-NO.json            |   3 +-
 src/common/i18n/locales/pa-IN.json            |   3 +-
 src/common/i18n/locales/pcm-NG.json           |   3 +-
 src/common/i18n/locales/pl-PL.json            |   3 +-
 src/common/i18n/locales/pt-PT.json            |   3 +-
 src/common/i18n/locales/ro-RO.json            |   3 +-
 src/common/i18n/locales/ru-RU.json            |   7 +-
 src/common/i18n/locales/sk-SK.json            |   3 +-
 src/common/i18n/locales/sl-SI.json            |   3 +-
 src/common/i18n/locales/sr-CS.json            |   3 +-
 src/common/i18n/locales/sv-SE.json            |   3 +-
 src/common/i18n/locales/ta-IN.json            |   3 +-
 src/common/i18n/locales/th-TH.json            |   3 +-
 src/common/i18n/locales/tr-TR.json            |   3 +-
 src/common/i18n/locales/uk-UA.json            |   3 +-
 src/common/i18n/locales/ur-IN.json            |   3 +-
 src/common/i18n/locales/ur-PK.json            |   3 +-
 src/common/i18n/locales/uz-UZ.json            |   3 +-
 src/common/i18n/locales/vi-VN.json            |   3 +-
 src/common/i18n/locales/yo-NG.json            |   3 +-
 src/common/i18n/locales/zh-CN.json            |   3 +-
 src/common/i18n/locales/zh-TW.json            |   3 +-
 src/common/img/svg.tsx                        |  54 ++
 src/common/pages/entry/index-amp.tsx          |   2 +-
 src/common/pages/entry/index.tsx              |   2 +-
 src/common/pages/submit/api/publish.ts        |   6 +-
 src/common/pages/submit/api/update.ts         |   9 +-
 .../submit/hooks/body-versioning-manager.tsx  | 115 ++++
 src/common/pages/submit/hooks/index.ts        |   1 +
 .../submit/hooks/three-speak-manager.tsx      | 125 +++-
 src/common/pages/submit/index.tsx             |  33 +-
 src/desktop/app/components/navbar/index.tsx   |  23 +-
 src/server/handlers/entry.tsx                 |   2 +-
 src/server/services/amp-pages.ts              |   2 +
 yarn.lock                                     |  23 +-
 111 files changed, 2066 insertions(+), 1242 deletions(-)
 create mode 100644 src/common/components/emoji-picker/_index-old.scss
 create mode 100644 src/common/components/emoji-picker/index-old.tsx
 create mode 100644 src/common/components/user-nav/wallet-badge.tsx
 create mode 100644 src/common/components/video-upload-threespeak/utils/index.ts
 create mode 100644 src/common/components/video-upload-threespeak/utils/use-get-camera-list.ts
 create mode 100644 src/common/components/video-upload-threespeak/video-upload-recorder-actions.tsx
 create mode 100644 src/common/components/video-upload-threespeak/video-upload-recorder-no-permission.tsx
 create mode 100644 src/common/components/video-upload-threespeak/video-upload-recorder.tsx
 create mode 100644 src/common/pages/submit/hooks/body-versioning-manager.tsx

diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml
index bac3987ea0d..7833b2e43bf 100644
--- a/.github/workflows/master.yml
+++ b/.github/workflows/master.yml
@@ -58,18 +58,31 @@ jobs:
       env:
         USE_PRIVATE: ${{secrets.USE_PRIVATE}}
         REDIS_HOST_PASSWORD: ${{secrets.REDIS_HOST_PASSWORD}}
+        PRIVATE_API_ADDR: ${{secrets.PRIVATE_API_ADDR}}
+        PRIVATE_API_AUTH: ${{secrets.PRIVATE_API_AUTH}}
+        HIVESIGNER_CLIENT_SECRET: ${{secrets.HIVESIGNER_CLIENT_SECRET}}
+        SEARCH_API_ADDR: ${{secrets.SEARCH_API_ADDR}}
+        SEARCH_API_SECRET: ${{secrets.SEARCH_API_SECRET}}
+        API_PORT: ${{secrets.API_PORT}}
       with:
         host: ${{ secrets.SSH_HOST_EU }}
         username: ${{ secrets.SSH_USERNAME }}
         key: ${{ secrets.SSH_KEY }}
         port: ${{ secrets.SSH_PORT }}
-        envs: USE_PRIVATE, REDIS_HOST_PASSWORD
+        envs: USE_PRIVATE,REDIS_HOST_PASSWORD,PRIVATE_API_ADDR,PRIVATE_API_AUTH,HIVESIGNER_CLIENT_SECRET,SEARCH_API_ADDR,SEARCH_API_SECRET,API_PORT
         script: |
           export USE_PRIVATE=$USE_PRIVATE
           export REDIS_HOST_PASSWORD=$REDIS_HOST_PASSWORD
+          export PRIVATE_API_ADDR=$PRIVATE_API_ADDR
+          export PRIVATE_API_AUTH=$PRIVATE_API_AUTH
+          export HIVESIGNER_CLIENT_SECRET=$HIVESIGNER_CLIENT_SECRET
+          export SEARCH_API_ADDR=$SEARCH_API_ADDR
+          export SEARCH_API_SECRET=$SEARCH_API_SECRET
+          export API_PORT=$API_PORT
           cd ~/vision-production
           git pull origin master
           docker pull ecency/vision:latest
+          docker pull ecency/api:latest
           docker-compose -f docker-compose.production.yml up -d
 
   deploy-US:
@@ -81,18 +94,31 @@ jobs:
       env:
         USE_PRIVATE: ${{secrets.USE_PRIVATE}}
         REDIS_HOST_PASSWORD: ${{secrets.REDIS_HOST_PASSWORD}}
+        PRIVATE_API_ADDR: ${{secrets.PRIVATE_API_ADDR}}
+        PRIVATE_API_AUTH: ${{secrets.PRIVATE_API_AUTH}}
+        HIVESIGNER_CLIENT_SECRET: ${{secrets.HIVESIGNER_CLIENT_SECRET}}
+        SEARCH_API_ADDR: ${{secrets.SEARCH_API_ADDR}}
+        SEARCH_API_SECRET: ${{secrets.SEARCH_API_SECRET}}
+        API_PORT: ${{secrets.API_PORT}}
       with:
         host: ${{ secrets.SSH_HOST_US }}
         username: ${{ secrets.SSH_USERNAME }}
         key: ${{ secrets.SSH_KEY }}
         port: ${{ secrets.SSH_PORT }}
-        envs: USE_PRIVATE, REDIS_HOST_PASSWORD
+        envs: USE_PRIVATE,REDIS_HOST_PASSWORD,PRIVATE_API_ADDR,PRIVATE_API_AUTH,HIVESIGNER_CLIENT_SECRET,SEARCH_API_ADDR,SEARCH_API_SECRET,API_PORT
         script: |
           export USE_PRIVATE=$USE_PRIVATE
           export REDIS_HOST_PASSWORD=$REDIS_HOST_PASSWORD
+          export PRIVATE_API_ADDR=$PRIVATE_API_ADDR
+          export PRIVATE_API_AUTH=$PRIVATE_API_AUTH
+          export HIVESIGNER_CLIENT_SECRET=$HIVESIGNER_CLIENT_SECRET
+          export SEARCH_API_ADDR=$SEARCH_API_ADDR
+          export SEARCH_API_SECRET=$SEARCH_API_SECRET
+          export API_PORT=$API_PORT
           cd ~/vision-production
           git pull origin master
           docker pull ecency/vision:latest
+          docker pull ecency/api:latest
           docker-compose -f docker-compose.production.yml up -d
 
   deploy-SG:
@@ -104,16 +130,29 @@ jobs:
       env:
         USE_PRIVATE: ${{secrets.USE_PRIVATE}}
         REDIS_HOST_PASSWORD: ${{secrets.REDIS_HOST_PASSWORD}}
+        PRIVATE_API_ADDR: ${{secrets.PRIVATE_API_ADDR}}
+        PRIVATE_API_AUTH: ${{secrets.PRIVATE_API_AUTH}}
+        HIVESIGNER_CLIENT_SECRET: ${{secrets.HIVESIGNER_CLIENT_SECRET}}
+        SEARCH_API_ADDR: ${{secrets.SEARCH_API_ADDR}}
+        SEARCH_API_SECRET: ${{secrets.SEARCH_API_SECRET}}
+        API_PORT: ${{secrets.API_PORT}}
       with:
         host: ${{ secrets.SSH_HOST_SG }}
         username: ${{ secrets.SSH_USERNAME }}
         key: ${{ secrets.SSH_KEY }}
         port: ${{ secrets.SSH_PORT }}
-        envs: USE_PRIVATE, REDIS_HOST_PASSWORD
+        envs: USE_PRIVATE,REDIS_HOST_PASSWORD,PRIVATE_API_ADDR,PRIVATE_API_AUTH,HIVESIGNER_CLIENT_SECRET,SEARCH_API_ADDR,SEARCH_API_SECRET,API_PORT
         script: |
           export USE_PRIVATE=$USE_PRIVATE
           export REDIS_HOST_PASSWORD=$REDIS_HOST_PASSWORD
+          export PRIVATE_API_ADDR=$PRIVATE_API_ADDR
+          export PRIVATE_API_AUTH=$PRIVATE_API_AUTH
+          export HIVESIGNER_CLIENT_SECRET=$HIVESIGNER_CLIENT_SECRET
+          export SEARCH_API_ADDR=$SEARCH_API_ADDR
+          export SEARCH_API_SECRET=$SEARCH_API_SECRET
+          export API_PORT=$API_PORT
           cd ~/vision-production
           git pull origin master
           docker pull ecency/vision:latest
+          docker pull ecency/api:latest
           docker-compose -f docker-compose.production.yml up -d
diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index fb398adfbc5..24c3d56e00f 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -58,15 +58,27 @@ jobs:
       env:
         USE_PRIVATE: ${{secrets.USE_PRIVATE}}
         REDIS_HOST_PASSWORD: ${{secrets.REDIS_HOST_PASSWORD}}
+        PRIVATE_API_ADDR: ${{secrets.PRIVATE_API_ADDR}}
+        PRIVATE_API_AUTH: ${{secrets.PRIVATE_API_AUTH}}
+        HIVESIGNER_CLIENT_SECRET: ${{secrets.HIVESIGNER_CLIENT_SECRET}}
+        SEARCH_API_ADDR: ${{secrets.SEARCH_API_ADDR}}
+        SEARCH_API_SECRET: ${{secrets.SEARCH_API_SECRET}}
+        API_PORT: ${{secrets.API_PORT}}
       with:
         host: ${{ secrets.SSH_STAGING_HOST }}
         username: ${{ secrets.SSH_USERNAME }}
         key: ${{ secrets.SSH_KEY }}
         port: ${{ secrets.SSH_PORT }}
-        envs: USE_PRIVATE, REDIS_HOST_PASSWORD
+        envs: USE_PRIVATE,REDIS_HOST_PASSWORD,PRIVATE_API_ADDR,PRIVATE_API_AUTH,HIVESIGNER_CLIENT_SECRET,SEARCH_API_ADDR,SEARCH_API_SECRET,API_PORT
         script: |
           export USE_PRIVATE=$USE_PRIVATE
           export REDIS_HOST_PASSWORD=$REDIS_HOST_PASSWORD
+          export PRIVATE_API_ADDR=$PRIVATE_API_ADDR
+          export PRIVATE_API_AUTH=$PRIVATE_API_AUTH
+          export HIVESIGNER_CLIENT_SECRET=$HIVESIGNER_CLIENT_SECRET
+          export SEARCH_API_ADDR=$SEARCH_API_ADDR
+          export SEARCH_API_SECRET=$SEARCH_API_SECRET
+          export API_PORT=$API_PORT
           cd ~/vision-staging
           git pull origin development
           docker pull ecency/vision:development
diff --git a/docker-compose.production.yml b/docker-compose.production.yml
index 124c3423f6d..0108d1b86b5 100644
--- a/docker-compose.production.yml
+++ b/docker-compose.production.yml
@@ -18,6 +18,23 @@ services:
     networks:
       - vision
 
+  vapi:
+    image: ecency/api:latest
+    environment:
+      - PRIVATE_API_ADDR
+      - PRIVATE_API_AUTH
+      - HIVESIGNER_CLIENT_SECRET
+      - SEARCH_API_ADDR
+      - SEARCH_API_SECRET
+    restart: always
+    ports:
+      - "4000:4000"
+    hostname: vapi
+    depends_on:
+      - redis
+    networks:
+      - vision
+
   web1:
     image: ecency/vision:latest
     environment:
diff --git a/docker-compose.yml b/docker-compose.yml
index 5ab37e61a24..9ef5262f80b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,6 +18,23 @@ services:
     networks:
       - vision
 
+  vapi:
+    image: ecency/api:latest
+    environment:
+      - PRIVATE_API_ADDR
+      - PRIVATE_API_AUTH
+      - HIVESIGNER_CLIENT_SECRET
+      - SEARCH_API_ADDR
+      - SEARCH_API_SECRET
+    restart: always
+    ports:
+      - "4000:4000"
+    hostname: vapi
+    depends_on:
+      - redis
+    networks:
+      - vision
+
   web1:
     image: ecency/vision:development
     environment:
diff --git a/package.json b/package.json
index 831b58bcc1b..bcf0bd2561a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ecency-vision",
-  "version": "3.0.35",
+  "version": "3.0.36",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -13,8 +13,9 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/render-helper": "^2.2.25",
+    "@ecency/render-helper": "^2.2.26",
     "@ecency/render-helper-amp": "^1.1.0",
+    "@emoji-mart/data": "^1.1.2",
     "@firebase/analytics": "^0.8.0",
     "@firebase/app": "^0.7.28",
     "@firebase/messaging": "^0.9.16",
@@ -35,6 +36,7 @@
     "currency-symbol-map": "^4.0.4",
     "debounce": "^1.2.1",
     "diff-match-patch": "^1.0.5",
+    "emoji-mart": "^5.5.2",
     "express": "^4.17.3",
     "history": "^4.7.2",
     "hive-uri": "^0.2.3",
@@ -100,6 +102,7 @@
     "@types/bytebuffer": "^5.0.41",
     "@types/cookie-parser": "^1.4.2",
     "@types/diff-match-patch": "^1.0.32",
+    "@types/dom-mediacapture-record": "^1.0.16",
     "@types/express": "^4.17.0",
     "@types/jest": "^26.0.24",
     "@types/js-cookie": "^2.2.6",
diff --git a/src/common/api/operations.ts b/src/common/api/operations.ts
index 58b0c319307..702328164ff 100644
--- a/src/common/api/operations.ts
+++ b/src/common/api/operations.ts
@@ -40,6 +40,7 @@ export interface MetaData {
   community?: string;
   description?: string;
   video?: any;
+  type?: string;
 }
 
 export interface BeneficiaryRoute {
diff --git a/src/common/api/threespeak/queries.ts b/src/common/api/threespeak/queries.ts
index 3aaf4239f80..7cbc0bb993d 100644
--- a/src/common/api/threespeak/queries.ts
+++ b/src/common/api/threespeak/queries.ts
@@ -18,6 +18,10 @@ export function useThreeSpeakVideo(
   const apiQuery = useQuery(
     [QueryIdentifiers.THREE_SPEAK_VIDEO_LIST, activeUser?.username ?? ""],
     async () => {
+      if (!activeUser) {
+        return [];
+      }
+
       try {
         return await getAllVideoStatuses(activeUser!.username);
       } catch (e) {
diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index 7ac59dae052..eca1dd740e9 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -6,7 +6,7 @@ import { Channel } from "../../../../managers/message-manager-types";
 import { EmojiPickerStyleProps } from "../types";
 
 import ClickAwayListener from "../../clickaway-listener";
-import EmojiPicker from "../../emoji-picker";
+import EmojiPicker from "../../emoji-picker/index-old";
 import GifPicker from "../../gif-picker";
 import { error } from "../../feedback";
 import Tooltip from "../../tooltip";
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index 77680626640..1a2628f958d 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -203,6 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
+      id="editor-tool-emoji-picker"
       role="none"
       title="Emoji"
     >
@@ -545,6 +546,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
+      id="editor-tool-emoji-picker"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/decks/columns/deck-items/deck-thread-item.tsx b/src/common/components/decks/columns/deck-items/deck-thread-item.tsx
index 00bff1f3d84..a04ab85597c 100644
--- a/src/common/components/decks/columns/deck-items/deck-thread-item.tsx
+++ b/src/common/components/decks/columns/deck-items/deck-thread-item.tsx
@@ -16,7 +16,6 @@ import { EntriesCacheContext, useEntryCache } from "../../../../core";
 import { useEntryChecking } from "../../utils";
 import { Entry } from "../../../../store/entries/types";
 import { DeckThreadItemHeader } from "./deck-thread-item-header";
-import moment from "moment";
 import { dateToRelative } from "../../../../helper/parse-date";
 import EntryMenu from "../../../entry-menu";
 
@@ -102,6 +101,12 @@ export const ThreadItem = ({
     // }
   }, [entry]);
 
+  useEffect(() => {
+    if (entry.updated !== entry.created) {
+      setStatus("default");
+    }
+  }, [entry]);
+
   return (
     <div
       ref={ref}
diff --git a/src/common/components/decks/deck-settings/decks-settings.tsx b/src/common/components/decks/deck-settings/decks-settings.tsx
index 407ea36d42c..9b9b8058f08 100644
--- a/src/common/components/decks/deck-settings/decks-settings.tsx
+++ b/src/common/components/decks/deck-settings/decks-settings.tsx
@@ -2,7 +2,7 @@ import { Alert, Button, Form, InputGroup, Modal } from "react-bootstrap";
 import React, { useContext, useEffect, useState } from "react";
 import "./_decks-settings.scss";
 import { DeckGrid } from "../types";
-import EmojiPicker from "../../emoji-picker";
+import EmojiPicker from "../../emoji-picker/index-old";
 import { deleteForeverSvg, emoticonHappyOutlineSvg } from "../../../img/svg";
 import ClickAwayListener from "../../clickaway-listener";
 import * as uuid from "uuid";
diff --git a/src/common/components/decks/deck-threads-form/deck-threads-form-emoji-picker.tsx b/src/common/components/decks/deck-threads-form/deck-threads-form-emoji-picker.tsx
index e3711ead1c3..72587416795 100644
--- a/src/common/components/decks/deck-threads-form/deck-threads-form-emoji-picker.tsx
+++ b/src/common/components/decks/deck-threads-form/deck-threads-form-emoji-picker.tsx
@@ -1,28 +1,23 @@
-import React from "react";
+import React, { useRef } from "react";
 import { emojiIconSvg } from "../icons";
 import { _t } from "../../../i18n";
-import { PopperDropdown } from "../../popper-dropdown";
 import Tooltip from "../../tooltip";
-import EmojiPicker from "../../emoji-picker";
+import { EmojiPicker } from "../../emoji-picker";
 
 interface Props {
   onPick: (v: string) => void;
 }
 
 export const DeckThreadsFormEmojiPicker = ({ onPick }: Props) => {
+  const anchorRef = useRef<HTMLDivElement | null>(null);
+
   return (
-    <div className="deck-threads-form-emoji-picker">
-      <Tooltip content={_t("editor-toolbar.image")}>
-        <PopperDropdown toggle={emojiIconSvg}>
-          <div className="emoji-picker-container">
-            <EmojiPicker
-              fallback={(value) => {
-                onPick(value);
-              }}
-            />
-          </div>
-        </PopperDropdown>
-      </Tooltip>
+    <div
+      className="btn btn-link d-flex align-items-center justify-content-center deck-threads-form-emoji-picker"
+      ref={anchorRef}
+    >
+      <Tooltip content={_t("editor-toolbar.image")}>{emojiIconSvg}</Tooltip>
+      <EmojiPicker anchor={anchorRef.current} onSelect={(value) => onPick(value)} />
     </div>
   );
 };
diff --git a/src/common/components/decks/deck-threads-form/index.tsx b/src/common/components/decks/deck-threads-form/index.tsx
index c1c9386a270..8aa7302c793 100644
--- a/src/common/components/decks/deck-threads-form/index.tsx
+++ b/src/common/components/decks/deck-threads-form/index.tsx
@@ -89,11 +89,25 @@ export const DeckThreadsForm = ({
 
   useEffect(() => {
     if (persistable) {
-      setThreadHost(threadHost ? threadHost : persistedForm?.threadHost);
-      setText(text ? text : persistedForm?.text ?? "");
-      setImage(image ? image : persistedForm?.image);
-      setImageName(imageName ? imageName : persistedForm?.imageName);
-      setVideo(video ? video : persistedForm?.video);
+      if (!threadHost && persistedForm?.threadHost) {
+        setThreadHost(persistedForm.threadHost);
+      }
+
+      if (!text && persistedForm?.text) {
+        setText(persistedForm.text);
+      }
+
+      if (!image && persistedForm?.image) {
+        setImage(persistedForm.image);
+      }
+
+      if (!imageName && persistedForm?.imageName) {
+        setImageName(persistedForm.imageName);
+      }
+
+      if (!video && persistedForm?.video) {
+        setVideo(persistedForm.video);
+      }
     }
   }, [persistedForm]);
 
diff --git a/src/common/components/decks/deck-toolbar/deck-toolbar-base-actions.tsx b/src/common/components/decks/deck-toolbar/deck-toolbar-base-actions.tsx
index 3c554450642..4fbfb3a1090 100644
--- a/src/common/components/decks/deck-toolbar/deck-toolbar-base-actions.tsx
+++ b/src/common/components/decks/deck-toolbar/deck-toolbar-base-actions.tsx
@@ -4,7 +4,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { WalletBadge } from "../../user-nav";
 import { Dropdown } from "react-bootstrap";
 import DropdownToggle from "react-bootstrap/DropdownToggle";
-import { dotsMenuIconSvg, notificationsIconSvg, walletIconSvg } from "../icons";
+import { dotsMenuIconSvg, walletIconSvg } from "../icons";
 import { _t } from "../../../i18n";
 import Link from "../../alink";
 
@@ -36,7 +36,7 @@ export const DeckToolbarBaseActions = ({
             </div>
           )}
           {global.usePrivate && <div onClick={() => setShowPurchaseDialog(true)}>{rocketSvg}</div>}
-          <WalletBadge icon={walletIconSvg} activeUser={activeUser} dynamicProps={dynamicProps} />
+          <WalletBadge icon={walletIconSvg} />
         </>
       )}
       {isExpanded || !activeUser ? (
diff --git a/src/common/components/discussion/__snapshots__/test1.spec.tsx.snap b/src/common/components/discussion/__snapshots__/test1.spec.tsx.snap
index 2176675657b..05977fb6b6e 100644
--- a/src/common/components/discussion/__snapshots__/test1.spec.tsx.snap
+++ b/src/common/components/discussion/__snapshots__/test1.spec.tsx.snap
@@ -915,7 +915,7 @@ exports[`(1) Full render with active user 1`] = `
             dangerouslySetInnerHTML={
               Object {
                 "__html": "<p><span><a class=\\"markdown-author-link\\" href=\\"/@esteemapp\\">@esteemapp</a></span><br />
-Bug report <a href=\\"/esteem/@iliyan90/bug-report-to-esteemapp\\" class=\\"markdown-post-link\\">click here</a></p>",
+Bug report <a href=\\"https://esteem.app/esteem/@iliyan90/bug-report-to-esteemapp\\" class=\\"markdown-external-link\\" target=\\"_blank\\" rel=\\"noopener\\">click here</a></p>",
               }
             }
           />
@@ -2696,7 +2696,7 @@ exports[`(3) With selected item 1`] = `
             dangerouslySetInnerHTML={
               Object {
                 "__html": "<p><span><a class=\\"markdown-author-link\\" href=\\"/@esteemapp\\">@esteemapp</a></span><br />
-Bug report <a href=\\"/esteem/@iliyan90/bug-report-to-esteemapp\\" class=\\"markdown-post-link\\">click here</a></p>",
+Bug report <a href=\\"https://esteem.app/esteem/@iliyan90/bug-report-to-esteemapp\\" class=\\"markdown-external-link\\" target=\\"_blank\\" rel=\\"noopener\\">click here</a></p>",
               }
             }
           />
diff --git a/src/common/components/discussion/index.tsx b/src/common/components/discussion/index.tsx
index b3ae099f0db..1135f363c89 100644
--- a/src/common/components/discussion/index.tsx
+++ b/src/common/components/discussion/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect } from "react";
+import React, { Component, useEffect, useState } from "react";
 
 import { History, Location } from "history";
 
@@ -7,9 +7,6 @@ import { Button, Form, FormControl } from "react-bootstrap";
 import defaults from "../../constants/defaults.json";
 
 import { renderPostBody, setProxyBase } from "@ecency/render-helper";
-
-setProxyBase(defaults.imageServer);
-
 import { Entry, EntryVote } from "../../store/entries/types";
 import { Account, FullAccount } from "../../store/accounts/types";
 import { Community, ROLES } from "../../store/communities/types";
@@ -18,9 +15,7 @@ import { Global } from "../../store/global/types";
 import { User } from "../../store/users/types";
 import { ActiveUser } from "../../store/active-user/types";
 import { Discussion as DiscussionType, SortOrder } from "../../store/discussion/types";
-import { UI, ToggleType } from "../../store/ui/types";
-
-import BaseComponent from "../base";
+import { ToggleType, UI } from "../../store/ui/types";
 import ProfileLink from "../profile-link";
 import EntryLink from "../entry-link";
 import UserAvatar from "../user-avatar";
@@ -48,13 +43,7 @@ import { error } from "../feedback";
 
 import _c from "../../util/fix-class-names";
 
-import {
-  commentSvg,
-  pencilOutlineSvg,
-  deleteForeverSvg,
-  menuDownSvg,
-  dotsHorizontal
-} from "../../img/svg";
+import { commentSvg, deleteForeverSvg, dotsHorizontal, pencilOutlineSvg } from "../../img/svg";
 
 import { version } from "../../../../package.json";
 import { getFollowing } from "../../api/hive";
@@ -64,6 +53,8 @@ import MyDropDown from "../dropdown";
 import { ProfilePopover } from "../profile-popover";
 import "./_index.scss";
 
+setProxyBase(defaults.imageServer);
+
 interface ItemBodyProps {
   entry: Entry;
   global: Global;
@@ -382,7 +373,7 @@ export const Item = (props: ItemProps) => {
             const entryIsMuted = mutedData.includes(entry.author);
             const isComment = !!entry.parent_author;
             const ownEntry = activeUser && activeUser.username === entry.author;
-            const isHidden = entry?.net_rshares < -7000000000 && entry?.active_votes.length > 3; // 1000 HP
+            const isHidden = entry?.net_rshares < -7000000000 && entry?.active_votes?.length > 3; // 1000 HP
             const isMuted =
               entry?.stats?.gray && entry?.net_rshares >= 0 && entry?.author_reputation >= 0;
             const isLowReputation =
diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx
index c144bbf0b64..26a7e83099b 100644
--- a/src/common/components/editor-toolbar/index.tsx
+++ b/src/common/components/editor-toolbar/index.tsx
@@ -7,7 +7,7 @@ import { User } from "../../store/users/types";
 import { Global } from "../../store/global/types";
 
 import Tooltip from "../tooltip";
-import EmojiPicker from "../emoji-picker";
+import { EmojiPicker } from "../emoji-picker";
 import GifPicker from "../gif-picker";
 import Gallery from "../gallery";
 import Fragments from "../fragments";
@@ -65,6 +65,7 @@ interface State {
   shGif: boolean;
   showVideoUpload: boolean;
   showVideoGallery: boolean;
+  isMounted: boolean;
 }
 
 export const detectEvent = (eventType: string) => {
@@ -86,7 +87,8 @@ export class EditorToolbar extends Component<Props> {
     mobileImage: false,
     shGif: false,
     showVideoUpload: false,
-    showVideoGallery: false
+    showVideoGallery: false,
+    isMounted: false
   };
 
   holder = React.createRef<HTMLDivElement>();
@@ -155,6 +157,9 @@ export class EditorToolbar extends Component<Props> {
     window.addEventListener("blockquote", this.quote);
     window.addEventListener("image", this.toggleImage);
     window.addEventListener("customToolbarEvent", this.handleCustomToolbarEvent);
+    this.setState({
+      isMounted: true
+    });
   }
 
   componentWillUnmount() {
@@ -576,13 +581,12 @@ export class EditorToolbar extends Component<Props> {
             </Tooltip>
           )}
           <Tooltip content={_t("editor-toolbar.emoji")}>
-            <div className="editor-tool" role="none">
+            <div className="editor-tool" id="editor-tool-emoji-picker" role="none">
               {emoticonHappyOutlineSvg}
-              {showEmoji && (
+              {showEmoji && this.state.isMounted && (
                 <EmojiPicker
-                  fallback={(e) => {
-                    this.insertText(e, "");
-                  }}
+                  anchor={document.querySelector("#editor-tool-emoji-picker")!!}
+                  onSelect={(e) => this.insertText(e, "")}
                 />
               )}
             </div>
diff --git a/src/common/components/emoji-picker/_index-old.scss b/src/common/components/emoji-picker/_index-old.scss
new file mode 100644
index 00000000000..db99e703f4b
--- /dev/null
+++ b/src/common/components/emoji-picker/_index-old.scss
@@ -0,0 +1,74 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
+.emoji-picker {
+  width: 280px;
+  position: absolute;
+  right: 0;
+  z-index: 100;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  padding: 14px 6px;
+
+  @media (max-width: $sm-break) {
+    width: 160px;
+  }
+
+  @include themify(day) {
+    background: darken($white-three, 5);
+  }
+
+  @include themify(night) {
+    background: $dark-two;
+  }
+
+  .emoji-cat-list {
+    height: 160px;
+    overflow: auto;
+
+    .emoji-cat {
+      .cat-title {
+        font-weight: 500;
+        font-size: 14px;
+        margin: 4px 0 6px 0;
+
+        @include themify(day) {
+          color: $charcoal-grey;
+        }
+
+        @include themify(night) {
+          color: $pinkish-grey;
+        }
+      }
+
+      .emoji-list {
+        @include clearfix();
+        display: flex;
+        flex-wrap: wrap;
+
+        .emoji {
+          cursor: pointer;
+          font-size: 18px;
+          margin: 3px 3px 1px 3px;
+          align-items: center;
+          justify-content: center;
+          display: flex;
+          font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+          border-bottom: 2px solid transparent;
+
+          &:hover {
+            @include themify(day) {
+              border-bottom: 2px solid $white-three;
+            }
+
+            @include themify(night) {
+              border-bottom: 2px solid lighten($dark-six, 14);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index db99e703f4b..a4e81d69034 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -1,74 +1,30 @@
-@import "src/style/colors";
-@import "src/style/variables";
-@import "src/style/bootstrap_vars";
-@import "src/style/mixins";
+@import "src/style/vars_mixins";
 
-.emoji-picker {
-  width: 280px;
+.emoji-picker-dialog {
   position: absolute;
-  right: 0;
-  z-index: 100;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  padding: 14px 6px;
+  z-index: 201;
 
-  @media (max-width: $sm-break) {
-    width: 160px;
+  em-emoji-picker {
+    width: 300px;
   }
 
-  @include themify(day) {
-    background: darken($white-three, 5);
-  }
-
-  @include themify(night) {
-    background: $dark-two;
-  }
-
-  .emoji-cat-list {
-    height: 160px;
-    overflow: auto;
-
-    .emoji-cat {
-      .cat-title {
-        font-weight: 500;
-        font-size: 14px;
-        margin: 4px 0 6px 0;
-
-        @include themify(day) {
-          color: $charcoal-grey;
-        }
-
-        @include themify(night) {
-          color: $pinkish-grey;
-        }
-      }
-
-      .emoji-list {
-        @include clearfix();
-        display: flex;
-        flex-wrap: wrap;
-
-        .emoji {
-          cursor: pointer;
-          font-size: 18px;
-          margin: 3px 3px 1px 3px;
-          align-items: center;
-          justify-content: center;
-          display: flex;
-          font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
-          border-bottom: 2px solid transparent;
-
-          &:hover {
-            @include themify(day) {
-              border-bottom: 2px solid $white-three;
-            }
+  @include media-breakpoint-down(sm) {
+    bottom: 0;
+    top: unset !important;
+    left: 0 !important;
+    width: 100%;
+    background: #fff;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--border-color);
+    position: fixed;
+
+    @include themify(night) {
+      background-color: rgba(21, 22, 23);
+    }
 
-            @include themify(night) {
-              border-bottom: 2px solid lighten($dark-six, 14);
-            }
-          }
-        }
-      }
+    em-emoji-picker {
+      width: 100%;
     }
   }
 }
diff --git a/src/common/components/emoji-picker/index-old.tsx b/src/common/components/emoji-picker/index-old.tsx
new file mode 100644
index 00000000000..25f0d189bb7
--- /dev/null
+++ b/src/common/components/emoji-picker/index-old.tsx
@@ -0,0 +1,207 @@
+import React from "react";
+import { FormControl } from "react-bootstrap";
+import BaseComponent from "../base";
+import SearchBox from "../search-box";
+import { _t } from "../../i18n";
+import { getEmojiData } from "../../api/misc";
+import * as ls from "../../util/local-storage";
+import { insertOrReplace } from "../../util/input-util";
+import { EmojiPickerStyleProps } from "../chats/types/chat-types";
+import "./_index-old.scss";
+
+interface Emoji {
+  a: string;
+  b: string;
+  j: string[];
+}
+
+interface EmojiCategory {
+  id: string;
+  name: string;
+  emojis: string[];
+}
+
+interface EmojiData {
+  categories: EmojiCategory[];
+  emojis: Record<string, Emoji>;
+}
+
+interface EmojiCacheItem {
+  id: string;
+  name: string;
+  keywords: string[];
+}
+
+interface Props {
+  fallback?: (e: string) => void;
+  style?: EmojiPickerStyleProps;
+}
+
+interface State {
+  data: EmojiData | null;
+  cache: EmojiCacheItem[] | null;
+  filter: string;
+}
+
+export default class EmojiPicker extends BaseComponent<Props> {
+  state: State = {
+    data: null,
+    cache: null,
+    filter: ""
+  };
+
+  _target: HTMLInputElement | null = null;
+
+  componentDidMount() {
+    getEmojiData().then((data) => this.setData(data));
+
+    this.watchTarget(); // initial
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("focus", this.watchTarget, true);
+    }
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("focus", this.watchTarget, true);
+    }
+  }
+
+  watchTarget = () => {
+    if (document.activeElement?.classList.contains("accepts-emoji")) {
+      this._target = document.activeElement as HTMLInputElement;
+    }
+  };
+
+  setData = (data: EmojiData) => {
+    const cache: EmojiCacheItem[] = Object.keys(data.emojis).map((e) => {
+      const em = data.emojis[e];
+      return {
+        id: e,
+        name: em.a.toLowerCase(),
+        keywords: em.j ? em.j : []
+      };
+    });
+
+    this.stateSet({ data, cache });
+  };
+
+  filterChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+    this.setState({ filter: e.target.value });
+  };
+
+  clicked = (id: string, native: string) => {
+    const recent = ls.get("recent-emoji", []);
+    if (!recent.includes(id)) {
+      const newRecent = [...new Set([id, ...recent])].slice(0, 18);
+      ls.set("recent-emoji", newRecent);
+      this.forceUpdate(); // Re-render recent list
+    }
+
+    if (this._target) {
+      insertOrReplace(this._target, native);
+    } else {
+      const { fallback } = this.props;
+      if (fallback) fallback(native);
+    }
+  };
+
+  renderEmoji = (emoji: string) => {
+    const { data } = this.state;
+    const em = data!.emojis[emoji];
+    if (!em) {
+      return null;
+    }
+    const unicodes = em.b.split("-");
+    const codePoints = unicodes.map((u) => Number(`0x${u}`));
+    const native = String.fromCodePoint(...codePoints);
+
+    return (
+      <div
+        onClick={() => {
+          this.clicked(emoji, native);
+        }}
+        key={emoji}
+        className="emoji"
+        title={em.a}
+      >
+        {native}
+      </div>
+    );
+  };
+
+  render() {
+    const { data, cache, filter } = this.state;
+    if (!data || !cache) {
+      return null;
+    }
+
+    const recent: string[] = ls.get("recent-emoji", []);
+
+    const emojiPickerStyle = {
+      ...(this.props.style && this.props.style)
+    };
+
+    return (
+      <div className="emoji-picker" style={emojiPickerStyle}>
+        <SearchBox
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          placeholder={_t("emoji-picker.filter-placeholder")}
+          value={filter}
+          onChange={this.filterChanged}
+        />
+
+        {(() => {
+          if (filter) {
+            const results = cache
+              .filter(
+                (i) =>
+                  i.id.indexOf(filter) !== -1 ||
+                  i.name.indexOf(filter) !== -1 ||
+                  i.keywords.includes(filter)
+              )
+              .map((i) => i.id);
+
+            return (
+              <div className="emoji-cat-list">
+                <div className="emoji-cat">
+                  <div className="emoji-list">
+                    {results.length === 0 && _t("emoji-picker.filter-no-match")}
+                    {results.length > 0 && results.map((emoji) => this.renderEmoji(emoji))}
+                  </div>
+                </div>
+              </div>
+            );
+          } else {
+            return (
+              <div className="emoji-cat-list">
+                {recent.length > 0 && (
+                  <div className="emoji-cat">
+                    <div className="cat-title">{_t("emoji-picker.recently-used")}</div>
+                    <div className="emoji-list">
+                      {recent.map((emoji) => this.renderEmoji(emoji))}
+                    </div>
+                  </div>
+                )}
+
+                {data.categories.map((cat) => (
+                  <div className="emoji-cat" key={cat.id}>
+                    <div className="cat-title">{cat.name}</div>
+                    <div className="emoji-list">
+                      {cat.emojis.map((emoji) => this.renderEmoji(emoji))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            );
+          }
+        })()}
+      </div>
+    );
+  }
+}
diff --git a/src/common/components/emoji-picker/index.spec.tsx b/src/common/components/emoji-picker/index.spec.tsx
index 3d5ade5679b..09ccc449af5 100644
--- a/src/common/components/emoji-picker/index.spec.tsx
+++ b/src/common/components/emoji-picker/index.spec.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import renderer from "react-test-renderer";
 
-import EmojiPicker from "./index";
+import EmojiPicker from "./index-old";
 
 import emojiData from "../../../../public/emoji.json";
 
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 021649830b8..370196f7496 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -1,212 +1,106 @@
-import React from "react";
-
-import { FormControl } from "react-bootstrap";
-
-import BaseComponent from "../base";
-import SearchBox from "../search-box";
-
-import { _t } from "../../i18n";
-
-import { getEmojiData } from "../../api/misc";
-
-import * as ls from "../../util/local-storage";
-
-import { insertOrReplace } from "../../util/input-util";
+import React, { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { QueryIdentifiers } from "../../core";
+import { Picker } from "emoji-mart";
+import { createPortal } from "react-dom";
+import useClickAway from "react-use/lib/useClickAway";
+import useMountedState from "react-use/lib/useMountedState";
 import "./_index.scss";
-import { EmojiPickerStyleProps } from "../chats/types/chat-types";
-
-interface Emoji {
-  a: string;
-  b: string;
-  j: string[];
-}
-
-interface EmojiCategory {
-  id: string;
-  name: string;
-  emojis: string[];
-}
-
-interface EmojiData {
-  categories: EmojiCategory[];
-  emojis: Record<string, Emoji>;
-}
-
-interface EmojiCacheItem {
-  id: string;
-  name: string;
-  keywords: string[];
-}
+import { useMappedStore } from "../../store/use-mapped-store";
+
+export const DEFAULT_EMOJI_DATA = {
+  categories: [],
+  emojis: {},
+  aliases: {},
+  sheet: {
+    cols: 0,
+    rows: 0
+  }
+};
 
 interface Props {
-  fallback?: (e: string) => void;
-  style?: EmojiPickerStyleProps;
-}
-
-interface State {
-  data: EmojiData | null;
-  cache: EmojiCacheItem[] | null;
-  filter: string;
+  anchor: Element | null;
+  onSelect: (e: string) => void;
 }
-export default class EmojiPicker extends BaseComponent<Props> {
-  state: State = {
-    data: null,
-    cache: null,
-    filter: ""
-  };
-
-  _target: HTMLInputElement | null = null;
-
-  componentDidMount() {
-    getEmojiData().then((data) => this.setData(data));
-
-    this.watchTarget(); // initial
-
-    if (typeof window !== "undefined") {
-      window.addEventListener("focus", this.watchTarget, true);
-    }
-  }
 
-  componentWillUnmount() {
-    super.componentWillUnmount();
-    if (typeof window !== "undefined") {
-      window.removeEventListener("focus", this.watchTarget, true);
+/**
+ * Renders an emoji picker dialog.
+ *
+ * @param {Props} anchor - The anchor element to position the picker relative to.
+ * @param {function} onSelect - The callback function to be called when an emoji is selected.
+ * @return The rendered emoji picker dialog.
+ */
+export function EmojiPicker({ anchor, onSelect }: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const { global } = useMappedStore();
+
+  const [show, setShow] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [pickerInstance, setPickerInstance] = useState<Picker>();
+
+  useClickAway(ref, () => {
+    setShow(false);
+  });
+
+  const { data } = useQuery(
+    [QueryIdentifiers.EMOJI_PICKER],
+    async () => {
+      try {
+        const data = await import(/* webpackChunkName: "emojis" */ "@emoji-mart/data");
+        return data.default as typeof DEFAULT_EMOJI_DATA;
+      } catch (e) {
+        console.error("Failed to load emoji data");
+      }
+
+      return DEFAULT_EMOJI_DATA;
+    },
+    {
+      initialData: DEFAULT_EMOJI_DATA
     }
-  }
-
-  watchTarget = () => {
-    if (document.activeElement?.classList.contains("accepts-emoji")) {
-      this._target = document.activeElement as HTMLInputElement;
+  );
+
+  const isMounted = useMountedState();
+
+  useEffect(() => {
+    if (data.categories.length > 0) {
+      setPickerInstance(
+        new Picker({
+          dynamicWidth: true,
+          onEmojiSelect: (e: { native: string }) => onSelect(e.native),
+          previewPosition: "none",
+          ref,
+          set: "apple",
+          theme: global.theme === "day" ? "light" : "dark"
+        })
+      );
     }
-  };
-
-  setData = (data: EmojiData) => {
-    const cache: EmojiCacheItem[] = Object.keys(data.emojis).map((e) => {
-      const em = data.emojis[e];
-      return {
-        id: e,
-        name: em.a.toLowerCase(),
-        keywords: em.j ? em.j : []
-      };
-    });
-
-    this.stateSet({ data, cache });
-  };
-
-  filterChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    this.setState({ filter: e.target.value });
-  };
-
-  clicked = (id: string, native: string) => {
-    const recent = ls.get("recent-emoji", []);
-    if (!recent.includes(id)) {
-      const newRecent = [...new Set([id, ...recent])].slice(0, 18);
-      ls.set("recent-emoji", newRecent);
-      this.forceUpdate(); // Re-render recent list
+  }, [data, global.theme]);
+
+  useEffect(() => {
+    if (anchor) {
+      anchor.addEventListener("click", () => {
+        const { x, y } = anchor.getBoundingClientRect();
+        setPosition({ x: x + window.scrollX, y: y + window.scrollY });
+        setShow(true);
+      });
     }
+  }, [anchor]);
 
-    if (this._target) {
-      insertOrReplace(this._target, native);
-    } else {
-      const { fallback } = this.props;
-      if (fallback) fallback(native);
-    }
-  };
-
-  renderEmoji = (emoji: string) => {
-    const { data } = this.state;
-    const em = data!.emojis[emoji];
-    if (!em) {
-      return null;
-    }
-    const unicodes = em.b.split("-");
-    const codePoints = unicodes.map((u) => Number(`0x${u}`));
-    const native = String.fromCodePoint(...codePoints);
-
-    return (
+  return isMounted() ? (
+    createPortal(
       <div
-        onClick={() => {
-          this.clicked(emoji, native);
+        className="emoji-picker-dialog"
+        ref={ref}
+        style={{
+          top: position.y + 40,
+          left: position.x,
+          display: show ? "flex" : "none"
         }}
-        key={emoji}
-        className="emoji"
-        title={em.a}
-      >
-        {native}
-      </div>
-    );
-  };
-
-  render() {
-    const { data, cache, filter } = this.state;
-    if (!data || !cache) {
-      return null;
-    }
-
-    const recent: string[] = ls.get("recent-emoji", []);
-
-    const emojiPickerStyle = {
-      ...(this.props.style && this.props.style) // Merge the passed style props if available
-    };
-
-    return (
-      <div className="emoji-picker" style={emojiPickerStyle}>
-        <SearchBox
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          placeholder={_t("emoji-picker.filter-placeholder")}
-          value={filter}
-          onChange={this.filterChanged}
-        />
-
-        {(() => {
-          if (filter) {
-            const results = cache
-              .filter(
-                (i) =>
-                  i.id.indexOf(filter) !== -1 ||
-                  i.name.indexOf(filter) !== -1 ||
-                  i.keywords.includes(filter)
-              )
-              .map((i) => i.id);
-
-            return (
-              <div className="emoji-cat-list">
-                <div className="emoji-cat">
-                  <div className="emoji-list">
-                    {results.length === 0 && _t("emoji-picker.filter-no-match")}
-                    {results.length > 0 && results.map((emoji) => this.renderEmoji(emoji))}
-                  </div>
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div className="emoji-cat-list">
-                {recent.length > 0 && (
-                  <div className="emoji-cat">
-                    <div className="cat-title">{_t("emoji-picker.recently-used")}</div>
-                    <div className="emoji-list">
-                      {recent.map((emoji) => this.renderEmoji(emoji))}
-                    </div>
-                  </div>
-                )}
-
-                {data.categories.map((cat) => (
-                  <div className="emoji-cat" key={cat.id}>
-                    <div className="cat-title">{cat.name}</div>
-                    <div className="emoji-list">
-                      {cat.emojis.map((emoji) => this.renderEmoji(emoji))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            );
-          }
-        })()}
-      </div>
-    );
-  }
+      />,
+      document.querySelector("#root")!!
+    )
+  ) : (
+    <></>
+  );
 }
diff --git a/src/common/components/entry-menu/menu-items-generator.ts b/src/common/components/entry-menu/menu-items-generator.ts
index 86cb6990598..69b1f12c02b 100644
--- a/src/common/components/entry-menu/menu-items-generator.ts
+++ b/src/common/components/entry-menu/menu-items-generator.ts
@@ -58,7 +58,7 @@ export function useMenuItemsGenerator(
   useEffect(() => {
     setCanMute(
       activeUser && community
-        ? !!community.team.find(
+        ? !!community.team?.find(
             (m) =>
               m[0] === activeUser.username &&
               [ROLES.OWNER.toString(), ROLES.ADMIN.toString(), ROLES.MOD.toString()].includes(m[1])
@@ -216,7 +216,7 @@ export function useMenuItemsGenerator(
 
   const isTeamManager = () =>
     activeUser && community
-      ? !!community.team.find((m) => {
+      ? !!community.team?.find((m) => {
           return (
             m[0] === activeUser.username &&
             [ROLES.OWNER.toString(), ROLES.ADMIN.toString(), ROLES.MOD.toString()].includes(m[1])
diff --git a/src/common/components/entry-votes/index.tsx b/src/common/components/entry-votes/index.tsx
index 44ac5fa5909..d36a2ad00bd 100644
--- a/src/common/components/entry-votes/index.tsx
+++ b/src/common/components/entry-votes/index.tsx
@@ -1,11 +1,9 @@
 import React, { Component } from "react";
 
-import { Alert, Form, FormControl } from "react-bootstrap";
+import { Alert, Form, FormControl, Modal, Spinner } from "react-bootstrap";
 
 import { History } from "history";
 
-import { Modal, Spinner } from "react-bootstrap";
-
 import { Global } from "../../store/global/types";
 import { Entry } from "../../store/entries/types";
 import { Account } from "../../store/accounts/types";
@@ -18,7 +16,7 @@ import ProfileLink from "../profile-link/index";
 import Tooltip from "../tooltip";
 import Pagination from "../pagination";
 
-import { Vote, getActiveVotes } from "../../api/hive";
+import { getActiveVotes, Vote } from "../../api/hive";
 
 import parseAsset from "../../helper/parse-asset";
 import parseDate, { dateToFormatted, dateToFullRelative } from "../../helper/parse-date";
@@ -159,7 +157,7 @@ export class EntryVotesDetail extends BaseComponent<DetailProps, DetailState> {
       })
       .slice(start, end);
     const totalVotes =
-      (this.props.entry.active_votes && this.props.entry.active_votes.length) ||
+      (this.props.entry.active_votes && this.props.entry.active_votes?.length) ||
       this.props.entry.total_votes ||
       0;
 
@@ -263,7 +261,12 @@ export class EntryVotes extends Component<Props, State> {
   };
 
   componentDidUpdate(prevProps: Readonly<Props>) {
-    if (prevProps.entry?.active_votes?.length !== this.props.entry?.active_votes?.length) {
+    const hasDifferentVotes =
+      prevProps.entry?.active_votes?.length !== this.props.entry?.active_votes?.length;
+    const hasCurrentUserVote = this.props.entry?.active_votes?.find(
+      ({ voter }) => voter === this.props.activeUser?.username
+    );
+    if (hasCurrentUserVote && hasDifferentVotes) {
       this.setState({ vote: true });
     }
   }
@@ -284,7 +287,7 @@ export class EntryVotes extends Component<Props, State> {
   render() {
     const { entry } = this.props;
     const { visible, searchText, searchTextDisabled, vote } = this.state;
-    const totalVotes = (entry.active_votes && entry.active_votes.length) || entry.total_votes || 0;
+    const totalVotes = (entry.active_votes && entry.active_votes?.length) || entry.total_votes || 0;
     const { voted } = this.isVoted();
     let cls = _c(`heart-icon ${voted ? "voted" : ""} ${vote ? "vote-done" : ""} `);
 
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index e778c821fe6..b16c3cb2a93 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -9,7 +9,7 @@ import SwitchLang from "../switch-lang";
 import ToolTip from "../tooltip";
 import Search from "../search";
 import Login from "../login";
-import UserNav from "../user-nav";
+import { UserNav } from "../user-nav";
 import UserNotifications from "../notifications";
 import Gallery from "../gallery";
 import Drafts from "../drafts";
diff --git a/src/common/components/user-nav/index.spec.tsx b/src/common/components/user-nav/index.spec.tsx
index 3a82e149c18..4c2860423b9 100644
--- a/src/common/components/user-nav/index.spec.tsx
+++ b/src/common/components/user-nav/index.spec.tsx
@@ -3,15 +3,14 @@ import { StaticRouter } from "react-router-dom";
 
 import { createBrowserHistory, createLocation } from "history";
 
-import UserNav from "./index";
-import renderer from "react-test-renderer";
+import { UserNav } from "./index";
 
 import {
-  notificationsInstance1,
-  UiInstance,
-  globalInstance,
+  dynamicPropsIntance1,
   fullAccountInstance,
-  dynamicPropsIntance1
+  globalInstance,
+  notificationsInstance1,
+  UiInstance
 } from "../../helper/test-helper";
 import { withStore } from "../../tests/with-store";
 
diff --git a/src/common/components/user-nav/index.tsx b/src/common/components/user-nav/index.tsx
index 3b54616435d..dac40c6275c 100644
--- a/src/common/components/user-nav/index.tsx
+++ b/src/common/components/user-nav/index.tsx
@@ -1,193 +1,92 @@
-import React, { Component } from "react";
-import { History, Location } from "history";
-import { Link } from "react-router-dom";
-
-import { Global } from "../../store/global/types";
-import { User } from "../../store/users/types";
-import { Account } from "../../store/accounts/types";
-import { ActiveUser } from "../../store/active-user/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { NotificationFilter, Notifications } from "../../store/notifications/types";
-import { DynamicProps } from "../../store/dynamic-props/types";
-
+import React, { useState } from "react";
+import { _t } from "../../i18n";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { useLocation } from "react-router";
+import "./_index.scss";
+import { bellOffSvg, bellSvg, chevronUpSvg, messangerSvg, rocketSvg } from "../../img/svg";
+import { downVotingPower, votingPower } from "../../api/hive";
+import { WalletBadge } from "./wallet-badge";
 import ToolTip from "../tooltip";
-import UserAvatar from "../user-avatar";
 import DropDown from "../dropdown";
 import UserNotifications from "../notifications";
+import { PurchaseQrDialog } from "../purchase-qr";
+import { History } from "history";
+import UserAvatar from "../user-avatar";
 import Gallery from "../gallery";
 import Drafts from "../drafts";
 import Bookmarks from "../bookmarks";
 import Schedules from "../schedules";
 import Fragments from "../fragments";
+import { Link } from "react-router-dom";
 
-import { _t } from "../../i18n";
-
-import HiveWallet from "../../helper/hive-wallet";
-
-import {
-  creditCardSvg,
-  gifCardSvg,
-  bellSvg,
-  bellOffSvg,
-  chevronUpSvg,
-  rocketSvg,
-  messangerSvg
-} from "../../img/svg";
-
-import { votingPower, downVotingPower } from "../../api/hive";
-import {
-  updateNotificationsSettings,
-  setNotificationsSettingsItem
-} from "../../store/notifications";
-import { PurchaseQrDialog } from "../purchase-qr";
-import { useMappedStore } from "../../store/use-mapped-store";
-import { useLocation } from "react-router";
-import "./_index.scss";
-
-export class WalletBadge extends Component<{
-  activeUser: ActiveUser;
-  dynamicProps: DynamicProps;
-  icon?: JSX.Element;
-}> {
-  render() {
-    const { activeUser, dynamicProps } = this.props;
-
-    let hasUnclaimedRewards = false;
-    const { data: account } = activeUser;
-
-    if (account.__loaded) {
-      hasUnclaimedRewards = new HiveWallet(account, dynamicProps).hasUnclaimedRewards;
-    }
-
-    return (
-      <>
-        <ToolTip
-          content={
-            hasUnclaimedRewards ? _t("user-nav.unclaimed-reward-notice") : _t("user-nav.wallet")
-          }
-        >
-          <Link to={`/@${activeUser.username}/wallet`} className="user-wallet">
-            {hasUnclaimedRewards && <span className="reward-badge" />}
-            {this.props.icon ?? creditCardSvg}
-          </Link>
-        </ToolTip>
-      </>
-    );
-  }
-}
-
-class PointsBadge extends Component<{ activeUser: ActiveUser }> {
-  render() {
-    const { activeUser } = this.props;
-
-    let hasUnclaimedPoints = activeUser.points.uPoints !== "0.000";
-
-    return (
-      <>
-        <ToolTip
-          content={
-            hasUnclaimedPoints ? _t("user-nav.unclaimed-points-notice") : _t("user-nav.points")
-          }
-        >
-          <Link to={`/@${activeUser.username}/points`} className="user-points">
-            {hasUnclaimedPoints && <span className="reward-badge" />}
-            {gifCardSvg}
-          </Link>
-        </ToolTip>
-      </>
-    );
-  }
-}
+export * from "./wallet-badge";
 
 interface Props {
-  global: Global;
-  dynamicProps: DynamicProps;
   history: History;
-  location: Location;
-  users: User[];
-  ui: UI;
-  activeUser: ActiveUser;
-  notifications: Notifications;
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  addAccount: (data: Account) => void;
-  fetchNotifications: (since: string | null) => void;
-  fetchUnreadNotificationCount: () => void;
-  setNotificationsFilter: (filter: NotificationFilter | null) => void;
-  markNotifications: (id: string | null) => void;
-  toggleUIProp: (what: ToggleType) => void;
-  muteNotifications: () => void;
-  unMuteNotifications: () => void;
-  updateNotificationsSettings: typeof updateNotificationsSettings;
-  setNotificationsSettingsItem: typeof setNotificationsSettingsItem;
-}
-
-interface State {
-  gallery: boolean;
-  drafts: boolean;
-  bookmarks: boolean;
-  schedules: boolean;
-  fragments: boolean;
-  showPurchaseDialog: boolean;
+  icon?: JSX.Element;
 }
 
-class UserNav extends Component<Props, State> {
-  state: State = {
-    gallery: false,
-    drafts: false,
-    bookmarks: false,
-    schedules: false,
-    fragments: false,
-    showPurchaseDialog: false
-  };
-
-  toggleLogin = () => {
-    const { toggleUIProp } = this.props;
-    toggleUIProp("login");
-  };
-
-  toggleDrafts = () => {
-    const { drafts } = this.state;
-    this.setState({ drafts: !drafts });
-  };
-
-  toggleGallery = () => {
-    const { gallery } = this.state;
-    this.setState({ gallery: !gallery });
-  };
-
-  toggleBookmarks = () => {
-    const { bookmarks } = this.state;
-    this.setState({ bookmarks: !bookmarks });
-  };
-
-  toggleSchedules = () => {
-    const { schedules } = this.state;
-    this.setState({ schedules: !schedules });
-  };
-
-  toggleFragments = () => {
-    const { fragments } = this.state;
-    this.setState({ fragments: !fragments });
-  };
-
-  toggleNotifications = () => {
-    const { toggleUIProp } = this.props;
-    toggleUIProp("notifications");
-  };
-
-  goToSettings = () => {
-    const { activeUser, history } = this.props;
-    history.push(`/@${activeUser.username}/settings`);
-  };
-
-  render() {
-    const { gallery, drafts, bookmarks, schedules, fragments } = this.state;
-    const { activeUser, ui, notifications, global, dynamicProps } = this.props;
-    const { unread } = notifications;
+export const UserNav = ({ history, icon }: Props) => {
+  const location = useLocation();
+  const { global, ui, activeUser, notifications, setActiveUser, toggleUIProp } = useMappedStore();
+
+  const [gallery, setGallery] = useState(false);
+  const [drafts, setDrafts] = useState(false);
+  const [bookmarks, setBookmarks] = useState(false);
+  const [schedules, setSchedules] = useState(false);
+  const [fragments, setFragments] = useState(false);
+  const [showPurchaseDialog, setShowPurchaseDialog] = useState(false);
+
+  const dropDownItems = [
+    {
+      label: _t("user-nav.profile"),
+      href: `/@${activeUser?.username}`
+    },
+    ...(global.usePrivate
+      ? [
+          {
+            label: _t("user-nav.drafts"),
+            onClick: () => setDrafts(!drafts)
+          },
+          {
+            label: _t("user-nav.gallery"),
+            onClick: () => setGallery(!gallery)
+          },
+          {
+            label: _t("user-nav.bookmarks"),
+            onClick: () => setBookmarks(!bookmarks)
+          },
+          {
+            label: _t("user-nav.schedules"),
+            onClick: () => setSchedules(!schedules)
+          },
+          {
+            label: _t("user-nav.fragments"),
+            onClick: () => setFragments(!fragments)
+          }
+        ]
+      : []),
+    {
+      label: _t("user-nav.settings"),
+      onClick: () => history.push(`/@${activeUser?.username}/settings`)
+    },
+    {
+      label: _t("g.login-as"),
+      onClick: () => toggleUIProp("login")
+    },
+    {
+      label: _t("user-nav.logout"),
+      onClick: () => {
+        setActiveUser(null);
+      }
+    }
+  ];
 
-    const preDropDownElem = activeUser.data.__loaded ? (
+  const dropDownConfig = {
+    history: history,
+    label: <UserAvatar username={activeUser?.username ?? ""} size="medium" />,
+    items: dropDownItems,
+    preElem: activeUser?.data.__loaded ? (
       <div className="drop-down-menu-power">
         <div className="label">{_t("user-nav.vote-power")}</div>
         <div className="power">
@@ -203,160 +102,55 @@ class UserNav extends Component<Props, State> {
           </div>
         </div>
       </div>
-    ) : undefined;
-
-    const dropDownItems = [
-      {
-        label: _t("user-nav.profile"),
-        href: `/@${activeUser.username}`
-      },
-      ...(global.usePrivate
-        ? [
-            {
-              label: _t("user-nav.drafts"),
-              onClick: this.toggleDrafts
-            },
-            {
-              label: _t("user-nav.gallery"),
-              onClick: this.toggleGallery
-            },
-            {
-              label: _t("user-nav.bookmarks"),
-              onClick: this.toggleBookmarks
-            },
-            {
-              label: _t("user-nav.schedules"),
-              onClick: this.toggleSchedules
-            },
-            {
-              label: _t("user-nav.fragments"),
-              onClick: this.toggleFragments
-            }
-          ]
-        : []),
-      {
-        label: _t("user-nav.settings"),
-        onClick: this.goToSettings
-      },
-      {
-        label: _t("g.login-as"),
-        onClick: this.toggleLogin
-      },
-      {
-        label: _t("user-nav.logout"),
-        onClick: () => {
-          const { setActiveUser } = this.props;
-          setActiveUser(null);
-        }
-      }
-    ];
-
-    const dropDownConfig = {
-      history: this.props.history,
-      label: <UserAvatar username={activeUser.username} size="medium" />,
-      items: dropDownItems,
-      preElem: preDropDownElem
-    };
+    ) : undefined
+  };
 
-    return (
-      <>
-        <div className="user-nav">
-          {global.usePrivate && (
-            <div
-              onClick={() => this.setState({ showPurchaseDialog: true })}
-              className="user-points cursor-pointer"
-            >
-              {rocketSvg}
-            </div>
-          )}
-          <WalletBadge activeUser={activeUser} dynamicProps={dynamicProps} />
+  return (
+    <>
+      <div className="user-nav">
+        {global.usePrivate && (
+          <div onClick={() => setShowPurchaseDialog(true)} className="user-points cursor-pointer">
+            {rocketSvg}
+          </div>
+        )}
+        <WalletBadge icon={icon} />
 
-          {global.usePrivate && (
+        {global.usePrivate ? (
+          <>
             <ToolTip content={_t("user-nav.notifications")}>
-              <span className="notifications" onClick={this.toggleNotifications}>
-                {unread > 0 && (
+              <span className="notifications" onClick={() => toggleUIProp("notifications")}>
+                {notifications.unread > 0 && (
                   <span className="notifications-badge notranslate">
-                    {unread.toString().length < 3 ? unread : "..."}
+                    {notifications.unread.toString().length < 3 ? notifications.unread : "..."}
                   </span>
                 )}
                 {global.notifications ? bellSvg : bellOffSvg}
               </span>
             </ToolTip>
-          )}
-          {global.usePrivate && (
             <ToolTip content={_t("user-nav.chats")}>
               <Link to={`/chats`}>
                 <span className="chats">{messangerSvg}</span>
               </Link>
             </ToolTip>
-          )}
-
-          <DropDown {...dropDownConfig} float="right" header={`@${activeUser.username}`} />
-        </div>
-        {ui.notifications && <UserNotifications {...this.props} />}
-        {gallery && <Gallery {...this.props} onHide={this.toggleGallery} />}
-        {drafts && <Drafts {...this.props} onHide={this.toggleDrafts} />}
-        {bookmarks && <Bookmarks {...this.props} onHide={this.toggleBookmarks} />}
-        {schedules && <Schedules {...this.props} onHide={this.toggleSchedules} />}
-        {fragments && <Fragments {...this.props} onHide={this.toggleFragments} />}
-        <PurchaseQrDialog
-          show={this.state.showPurchaseDialog}
-          setShow={(v) => this.setState({ showPurchaseDialog: v })}
-          activeUser={activeUser}
-          location={this.props.location}
-        />
-      </>
-    );
-  }
-}
+          </>
+        ) : (
+          <></>
+        )}
 
-export default ({ history }: Pick<Props, "history">) => {
-  const {
-    global,
-    dynamicProps,
-    users,
-    ui,
-    activeUser,
-    notifications,
-    setActiveUser,
-    updateActiveUser,
-    deleteUser,
-    addAccount,
-    fetchNotifications,
-    fetchUnreadNotificationCount,
-    setNotificationsFilter,
-    markNotifications,
-    toggleUIProp,
-    muteNotifications,
-    unMuteNotifications,
-    updateNotificationsSettings,
-    setNotificationsSettingsItem
-  } = useMappedStore();
-  const location = useLocation();
-
-  return (
-    <UserNav
-      global={global}
-      dynamicProps={dynamicProps}
-      history={history}
-      location={location}
-      users={users}
-      ui={ui}
-      activeUser={activeUser!!}
-      notifications={notifications}
-      setActiveUser={setActiveUser}
-      updateActiveUser={updateActiveUser}
-      deleteUser={deleteUser}
-      addAccount={addAccount}
-      fetchNotifications={fetchNotifications}
-      fetchUnreadNotificationCount={fetchUnreadNotificationCount}
-      setNotificationsFilter={setNotificationsFilter}
-      markNotifications={markNotifications}
-      toggleUIProp={toggleUIProp}
-      muteNotifications={muteNotifications}
-      unMuteNotifications={unMuteNotifications}
-      updateNotificationsSettings={updateNotificationsSettings}
-      setNotificationsSettingsItem={setNotificationsSettingsItem}
-    />
+        <DropDown {...dropDownConfig} float="right" header={`@${activeUser?.username}`} />
+      </div>
+      {ui.notifications && <UserNotifications history={history} />}
+      {gallery && <Gallery onHide={() => setGallery(false)} />}
+      {drafts && <Drafts history={history} onHide={() => setDrafts(false)} />}
+      {bookmarks && <Bookmarks history={history} onHide={() => setBookmarks(false)} />}
+      {schedules && <Schedules history={history} onHide={() => setSchedules(false)} />}
+      {fragments && <Fragments onHide={() => setFragments(false)} />}
+      <PurchaseQrDialog
+        show={showPurchaseDialog}
+        setShow={setShowPurchaseDialog}
+        activeUser={activeUser}
+        location={location}
+      />
+    </>
   );
 };
diff --git a/src/common/components/user-nav/wallet-badge.tsx b/src/common/components/user-nav/wallet-badge.tsx
new file mode 100644
index 00000000000..39adaa0b9c6
--- /dev/null
+++ b/src/common/components/user-nav/wallet-badge.tsx
@@ -0,0 +1,33 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import HiveWallet from "../../helper/hive-wallet";
+import { _t } from "../../i18n";
+import { creditCardSvg } from "../../img/svg";
+import ToolTip from "../tooltip";
+import { useMappedStore } from "../../store/use-mapped-store";
+
+export const WalletBadge = ({ icon }: { icon: ReactNode }) => {
+  const { activeUser, dynamicProps } = useMappedStore();
+
+  const [hasUnclaimedRewards, setHasUnclaimedRewards] = useState(false);
+
+  useEffect(() => {
+    if (activeUser?.data?.__loaded) {
+      setHasUnclaimedRewards(new HiveWallet(activeUser.data, dynamicProps).hasUnclaimedRewards);
+    }
+  }, [activeUser]);
+  return (
+    <>
+      <ToolTip
+        content={
+          hasUnclaimedRewards ? _t("user-nav.unclaimed-reward-notice") : _t("user-nav.wallet")
+        }
+      >
+        <Link to={`/@${activeUser?.username}/wallet`} className="user-wallet">
+          {hasUnclaimedRewards && <span className="reward-badge" />}
+          {icon ?? creditCardSvg}
+        </Link>
+      </ToolTip>
+    </>
+  );
+};
diff --git a/src/common/components/video-gallery/index.scss b/src/common/components/video-gallery/index.scss
index c6360b557d8..7c2fc534d80 100644
--- a/src/common/components/video-gallery/index.scss
+++ b/src/common/components/video-gallery/index.scss
@@ -131,13 +131,27 @@
   }
 }
 
+.video-center {
+  text-align: center;
+  width: auto;
+}
+
+.video-info {
+  padding: 0.5rem;
+  @include themify(night) {
+    color: $gray-500;
+  }
+  @include themify(day) {
+    color: $gray-600;
+  }
+}
+
 .video-status-picker {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
   border-bottom: 1px solid var(--border-color);
-  padding: 1rem;
+  padding: 0 1rem;
   font-size: 0.875rem;
 
   .custom-dropdown .dropdown-btn .label {
diff --git a/src/common/components/video-gallery/index.tsx b/src/common/components/video-gallery/index.tsx
index 1806700b269..d857eaec775 100644
--- a/src/common/components/video-gallery/index.tsx
+++ b/src/common/components/video-gallery/index.tsx
@@ -66,7 +66,7 @@ const VideoGallery = ({
             {!preFilter && !isEditing ? (
               <DropDown
                 float="left"
-                label={label}
+                label={label?.toUpperCase()}
                 history={"" as any}
                 items={[
                   {
@@ -132,6 +132,9 @@ const VideoGallery = ({
           </div>
           <div className="dialog-content">
             {isFetching && <LinearProgress />}
+            {!isFetching && items?.length != 0 && (
+              <div className="video-info">{_t("video-gallery.video-info")}</div>
+            )}
             <div className="video-list">
               {items?.map((item) => (
                 <VideoGalleryItem
@@ -144,10 +147,10 @@ const VideoGallery = ({
                   setVideoMetadata={setVideoMetadata}
                 />
               ))}
-              {!isFetching && items?.length === 0 && (
-                <div className="gallery-list">{_t("g.empty-list")}</div>
-              )}
             </div>
+            {!isFetching && items?.length === 0 && (
+              <div className="video-center">{_t("g.empty-list")}</div>
+            )}
           </div>
         </Modal.Body>
       </Modal>
diff --git a/src/common/components/video-gallery/video-gallery-item.tsx b/src/common/components/video-gallery/video-gallery-item.tsx
index ca44f5f94a3..c4d8324689f 100644
--- a/src/common/components/video-gallery/video-gallery-item.tsx
+++ b/src/common/components/video-gallery/video-gallery-item.tsx
@@ -4,6 +4,8 @@ import { dateToFullRelative } from "../../helper/parse-date";
 import React, { useEffect, useState } from "react";
 import { ThreeSpeakVideo, useThreeSpeakVideo } from "../../api/threespeak";
 import { Button } from "react-bootstrap";
+import { proxifyImageSrc } from "@ecency/render-helper";
+import { useMappedStore } from "../../store/use-mapped-store";
 
 interface videoProps {
   status: string;
@@ -30,6 +32,7 @@ export function VideoGalleryItem({
   setShowGallery,
   setVideoMetadata
 }: Props) {
+  const { global } = useMappedStore();
   const { data } = useThreeSpeakVideo("all");
 
   const [showMoreInfo, setShowMoreInfo] = useState(false);
@@ -52,7 +55,7 @@ export function VideoGalleryItem({
   const embeddVideo = (video: videoProps) => {
     const speakFile = `[![](${video.thumbUrl})](${speakUrl}${video.owner}/${video.permlink})`;
 
-    const element = ` <center>${speakFile}[Download](${video.filename.replace(
+    const element = ` <center>${speakFile}[Source](${video.filename.replace(
       "ipfs://",
       "https://ipfs-3speak.b-cdn.net/ipfs/"
     )})</center>`;
@@ -125,7 +128,10 @@ export function VideoGalleryItem({
   return (
     <div className="video-list-body">
       <div className="thumnail-wrapper">
-        <img src={item.thumbUrl} alt="" />
+        <img
+          src={proxifyImageSrc(item.thumbUrl, 600, 500, global.canUseWebp ? "webp" : "match")}
+          alt=""
+        />
       </div>
       <div className="list-details-wrapper">
         <div className="list-title">
diff --git a/src/common/components/video-upload-threespeak/index.scss b/src/common/components/video-upload-threespeak/index.scss
index dc1def00a9c..989520fc46f 100644
--- a/src/common/components/video-upload-threespeak/index.scss
+++ b/src/common/components/video-upload-threespeak/index.scss
@@ -16,7 +16,7 @@
     @include themify(night) {
       background-color: lighten($dark, 6);
     }
-    
+
   }
 }
 
@@ -88,11 +88,81 @@ label {
 
 
 .three-speak-video-uploading {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
 
-  @include media-breakpoint-down(xs) {
-    grid-template-columns: 1fr;
+  .video-source {
+    display: flex;
+    gap: 1rem;
+
+    > div {
+      width: 100%;
+    }
+  }
+}
+
+.video-upload-recorder {
+  position: relative;
+
+  .reset-btn {
+    position: absolute;
+    top: -2.65rem;
+    right: 0;
+  }
+
+  .actions {
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-content: center;
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .switch-camera {
+      opacity: 0.75;
+      cursor: pointer;
+      color: $white;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .record-btn {
+      color: $danger;
+      border: 0.25rem solid $white;
+      border-radius: 50%;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--border-color);
+      }
+    }
+  }
+
+  video {
+    width: 100%;
+    border-radius: 1rem;
+  }
+
+  .no-permission {
+    width: 100%;
+    height: 300px;
+    border-radius: 1rem;
+    background-color: var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      font-size: 1.125rem;
+      font-weight: bold;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/common/components/video-upload-threespeak/index.tsx b/src/common/components/video-upload-threespeak/index.tsx
index bb9e95e0e4e..1e3f0b99f2d 100644
--- a/src/common/components/video-upload-threespeak/index.tsx
+++ b/src/common/components/video-upload-threespeak/index.tsx
@@ -6,6 +6,9 @@ import "./index.scss";
 import { VideoUploadItem } from "./video-upload-item";
 import { createFile } from "../../util/create-file";
 import { useMappedStore } from "../../store/use-mapped-store";
+import { recordVideoSvg } from "../../img/svg";
+import { VideoUploadRecorder } from "./video-upload-recorder";
+import useMountedState from "react-use/lib/useMountedState";
 
 const DEFAULT_THUMBNAIL = require("./assets/thumbnail-play.jpg");
 
@@ -42,8 +45,11 @@ export const VideoUpload = (props: Props & React.HTMLAttributes<HTMLDivElement>)
   const [videoUrl, setVideoUrl] = useState("");
   const [thumbUrl, setThumbUrl] = useState("");
   const [duration, setDuration] = useState("");
+  const [showRecorder, setShowRecorder] = useState(false);
 
-  const canUpload = videoUrl && videoPercentage === 100;
+  const canUpload = videoUrl;
+
+  const isMounted = useMountedState();
 
   // Reset on dialog hide
   useEffect(() => {
@@ -60,6 +66,7 @@ export const VideoUpload = (props: Props & React.HTMLAttributes<HTMLDivElement>)
       setStep("upload");
       setVideoPercentage(0);
       setThumbnailPercentage(0);
+      setShowRecorder(false);
     }
   }, [props.show]);
 
@@ -108,19 +115,44 @@ export const VideoUpload = (props: Props & React.HTMLAttributes<HTMLDivElement>)
 
   const uploadVideoModal = (
     <div className="dialog-content ">
-      <div className="three-speak-video-uploading">
-        <VideoUploadItem
-          label={_t("video-upload.choose-video")}
-          onFileChange={handleVideoChange}
-          type="video"
-          accept="video/*"
-          completed={videoPercentage}
-        />
+      <div className="three-speak-video-uploading position-relative">
+        <p className="font-weight-bold">Video source</p>
+        {showRecorder ? (
+          <VideoUploadRecorder
+            setVideoUrl={setVideoUrl}
+            setFilevName={setFilevName}
+            setFilevSize={setFilevSize}
+            setSelectedFile={setSelectedFile}
+            onReset={() => setShowRecorder(false)}
+          />
+        ) : (
+          <div className="video-source">
+            {isMounted() && !selectedFile && "MediaRecorder" in window ? (
+              <div
+                className="d-flex align-items-center flex-column border rounded p-3 video-upload-item"
+                onClick={() => setShowRecorder(true)}
+              >
+                {recordVideoSvg}
+                {_t("video-upload.record-video")}
+              </div>
+            ) : (
+              <></>
+            )}
+            <VideoUploadItem
+              label={_t("video-upload.choose-video")}
+              onFileChange={handleVideoChange}
+              type="video"
+              accept="video/mp4, video/webm"
+              completed={videoPercentage}
+            />
+          </div>
+        )}
+        <p className="font-weight-bold mt-5">Thumbnail</p>
         <VideoUploadItem
           label={_t("video-upload.choose-thumbnail")}
           onFileChange={handleThumbnailChange}
           type="thumbnail"
-          accept="image/*"
+          accept="image/jpg, image/jpeg, image/png"
           completed={thumbnailPercentage}
         />
       </div>
diff --git a/src/common/components/video-upload-threespeak/utils/index.ts b/src/common/components/video-upload-threespeak/utils/index.ts
new file mode 100644
index 00000000000..b990ef0b9b8
--- /dev/null
+++ b/src/common/components/video-upload-threespeak/utils/index.ts
@@ -0,0 +1 @@
+export * from "./use-get-camera-list";
diff --git a/src/common/components/video-upload-threespeak/utils/use-get-camera-list.ts b/src/common/components/video-upload-threespeak/utils/use-get-camera-list.ts
new file mode 100644
index 00000000000..912a0fdd9cf
--- /dev/null
+++ b/src/common/components/video-upload-threespeak/utils/use-get-camera-list.ts
@@ -0,0 +1,18 @@
+import { useState } from "react";
+import useMount from "react-use/lib/useMount";
+
+/**
+ * Retrieves a list of available cameras.
+ *
+ * @return {MediaDeviceInfo[]} The list of available cameras.
+ */
+export function useGetCameraList() {
+  const [list, setList] = useState<MediaDeviceInfo[]>([]);
+
+  useMount(async () => {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    setList(devices.filter(({ kind }) => kind === "videoinput"));
+  });
+
+  return list;
+}
diff --git a/src/common/components/video-upload-threespeak/video-upload-item.tsx b/src/common/components/video-upload-threespeak/video-upload-item.tsx
index 37ecc896dcb..90db8f82564 100644
--- a/src/common/components/video-upload-threespeak/video-upload-item.tsx
+++ b/src/common/components/video-upload-threespeak/video-upload-item.tsx
@@ -5,7 +5,7 @@ import { ProgressBar } from "react-bootstrap";
 interface Props {
   onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   type: "video" | "thumbnail";
-  accept: "video/*" | "image/*";
+  accept: string;
   label: string;
   completed: number;
 }
diff --git a/src/common/components/video-upload-threespeak/video-upload-recorder-actions.tsx b/src/common/components/video-upload-threespeak/video-upload-recorder-actions.tsx
new file mode 100644
index 00000000000..f558e0cfbb9
--- /dev/null
+++ b/src/common/components/video-upload-threespeak/video-upload-recorder-actions.tsx
@@ -0,0 +1,66 @@
+import { circleSvg, rectSvg, switchCameraSvg } from "../../img/svg";
+import React, { useState } from "react";
+import { useGetCameraList } from "./utils";
+
+interface Props {
+  noPermission: boolean;
+  mediaRecorder?: MediaRecorder;
+  onCameraSelect: (camera: MediaDeviceInfo) => void;
+}
+
+export function VideoUploadRecorderActions({ noPermission, mediaRecorder, onCameraSelect }: Props) {
+  const cameraList = useGetCameraList();
+
+  const [currentCameraIndex, setCurrentCameraIndex] = useState(0);
+  const [recordStarted, setRecordStarted] = useState(false);
+
+  const getNextCameraIndex = (index: number) => (index + 1) % cameraList.length;
+
+  return (
+    <div className="actions">
+      <div>
+        {!recordStarted && cameraList.length > 1 ? (
+          <div
+            className="switch-camera"
+            onClick={() => {
+              const nextCameraIndex = getNextCameraIndex(currentCameraIndex);
+              onCameraSelect(cameraList[nextCameraIndex]);
+              setCurrentCameraIndex(nextCameraIndex);
+            }}
+          >
+            {switchCameraSvg}
+          </div>
+        ) : (
+          <></>
+        )}
+      </div>
+
+      <div>
+        {recordStarted ? (
+          <div
+            aria-disabled={noPermission}
+            className="record-btn"
+            onClick={() => {
+              mediaRecorder?.stop();
+              setRecordStarted(false);
+            }}
+          >
+            {rectSvg}
+          </div>
+        ) : (
+          <div
+            aria-disabled={noPermission}
+            className="record-btn"
+            onClick={() => {
+              mediaRecorder?.start();
+              setRecordStarted(true);
+            }}
+          >
+            {circleSvg}
+          </div>
+        )}
+      </div>
+      <div />
+    </div>
+  );
+}
diff --git a/src/common/components/video-upload-threespeak/video-upload-recorder-no-permission.tsx b/src/common/components/video-upload-threespeak/video-upload-recorder-no-permission.tsx
new file mode 100644
index 00000000000..95b907ae2d9
--- /dev/null
+++ b/src/common/components/video-upload-threespeak/video-upload-recorder-no-permission.tsx
@@ -0,0 +1,10 @@
+import { _t } from "../../i18n";
+import React from "react";
+
+export function VideoUploadRecorderNoPermission() {
+  return (
+    <div className="no-permission">
+      <p>{_t("video-upload.no-record-permission")}</p>
+    </div>
+  );
+}
diff --git a/src/common/components/video-upload-threespeak/video-upload-recorder.tsx b/src/common/components/video-upload-threespeak/video-upload-recorder.tsx
new file mode 100644
index 00000000000..a3e9a762ea7
--- /dev/null
+++ b/src/common/components/video-upload-threespeak/video-upload-recorder.tsx
@@ -0,0 +1,188 @@
+import React, { useEffect, useRef, useState } from "react";
+import useMount from "react-use/lib/useMount";
+import { VideoUploadRecorderActions } from "./video-upload-recorder-actions";
+import { VideoUploadRecorderNoPermission } from "./video-upload-recorder-no-permission";
+import { Button } from "react-bootstrap";
+import { _t } from "../../i18n";
+import { useThreeSpeakVideoUpload } from "../../api/threespeak";
+import { error } from "../feedback";
+import { v4 } from "uuid";
+import { useUnmount } from "react-use";
+
+interface Props {
+  setVideoUrl: (v: string) => void;
+  setFilevName: (v: string) => void;
+  setFilevSize: (v: number) => void;
+  setSelectedFile: (v: string) => void;
+  onReset: () => void;
+}
+
+export function VideoUploadRecorder({
+  setVideoUrl,
+  setFilevName,
+  setFilevSize,
+  onReset,
+  setSelectedFile
+}: Props) {
+  const [stream, setStream] = useState<MediaStream>();
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
+  const [recordedVideoSrc, setRecordedVideoSrc] = useState<string>();
+  const [recordedBlob, setRecordedBlob] = useState<Blob>();
+  const [noPermission, setNoPermission] = useState(false);
+  const [currentCamera, setCurrentCamera] = useState<MediaDeviceInfo>();
+
+  const ref = useRef<HTMLVideoElement | null>(null);
+
+  const {
+    mutateAsync: uploadVideo,
+    completed,
+    isLoading,
+    isSuccess
+  } = useThreeSpeakVideoUpload("video");
+
+  useMount(() => initStreamSafe());
+
+  useUnmount(() => {
+    stream?.getTracks().forEach((track) => track.stop());
+  });
+
+  useEffect(() => {
+    initStreamSafe();
+  }, [currentCamera]);
+
+  useEffect(() => {
+    if (stream && ref.current) {
+      // @ts-ignore
+      ref.current?.srcObject = stream;
+    }
+  }, [stream, ref]);
+
+  const initStream = async (mimeType: string) => {
+    setNoPermission(false);
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: currentCamera ? { deviceId: currentCamera.deviceId } : true,
+        audio: true
+      });
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType
+      });
+
+      setMediaRecorder(mediaRecorder);
+      setStream(stream);
+
+      mediaRecorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) {
+          setRecordedVideoSrc(URL.createObjectURL(event.data));
+          setRecordedBlob(event.data);
+          stream.getTracks().forEach((track) => track.stop());
+        }
+      });
+    } catch (e) {
+      setNoPermission(true);
+      throw e;
+    }
+  };
+
+  const initStreamSafe = async () => {
+    try {
+      await initStream("video/webm");
+    } catch (e) {
+      await initStream("video/mp4");
+    }
+  };
+
+  return (
+    <div className="video-upload-recorder">
+      {recordedBlob ? (
+        <Button className="reset-btn" variant="link" onClick={() => onReset()}>
+          {_t("video-upload.reset")}
+        </Button>
+      ) : (
+        <></>
+      )}
+
+      {!noPermission && !recordedVideoSrc ? (
+        <VideoUploadRecorderActions
+          noPermission={noPermission}
+          mediaRecorder={mediaRecorder}
+          onCameraSelect={(camera) => {
+            stream
+              ?.getTracks()
+              .filter(({ kind }) => kind === "video")
+              .forEach((track) => track.stop());
+
+            setCurrentCamera(camera);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+
+      {noPermission ? (
+        <VideoUploadRecorderNoPermission />
+      ) : (
+        <>
+          <video
+            hidden={!recordedVideoSrc}
+            controls={true}
+            src={recordedVideoSrc}
+            autoPlay={false}
+            playsInline={true}
+            id="videoRecorded"
+          />
+          <video
+            hidden={!!recordedVideoSrc}
+            ref={ref}
+            muted={true}
+            autoPlay={true}
+            playsInline={true}
+            id="videoLive"
+          />
+          {recordedVideoSrc ? (
+            <div className="d-flex align-items-center justify-content-center mt-3">
+              {recordedBlob && isSuccess ? (
+                <div className="bg-success text-white p-3 text-sm rounded-pill w-100">
+                  {_t("video-upload.uploaded")}
+                </div>
+              ) : (
+                <Button
+                  disabled={isLoading}
+                  onClick={async () => {
+                    if (!recordedBlob) {
+                      return;
+                    }
+
+                    try {
+                      const file = new File([recordedBlob], `ecency-recorder-${v4()}.webm`, {
+                        type: "video/webm"
+                      });
+                      const result = await uploadVideo({
+                        file
+                      });
+                      if (result) {
+                        setVideoUrl(result.fileUrl);
+                        setFilevName(result.fileName);
+                        setFilevSize(result.fileSize);
+                        setSelectedFile(URL.createObjectURL(file));
+                      }
+                    } catch (e) {
+                      error(e);
+                    }
+                  }}
+                >
+                  {isLoading
+                    ? _t("video-upload.uploading", { n: completed, total: 100 })
+                    : _t("video-upload.confirm-and-upload")}
+                </Button>
+              )}
+            </div>
+          ) : (
+            <></>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/constants/dmca.json b/src/common/constants/dmca.json
index 2c33cccbb85..e0fd6cdb409 100644
--- a/src/common/constants/dmca.json
+++ b/src/common/constants/dmca.json
@@ -1,302 +1,303 @@
 [
-  "aasdaura/.*",
-  "ah3p5idsebhn/.*",
-  "aishacorona/.*",
-  "arefinishingpros/.*",
-  "allenk/.*",
-  "anny08/.*",
-  "beeryallen/.*",
-  "billjd/.*",
-  "binance.support/.*",
-  "binance.help/.*",
-  "binanceehelp/.*",
-  "binancesupport/.*",
-  "binancesupport1/.*",
-  "binancesupportt/.*",
-  "binancetoll/.*",
-  "bio9kftyptni/.*",
-  "bitcoinsmarkett/.*",
-  "blockchaink/.*",
-  "blockdifind/.*",
-  "bqtumaeso0zl/.*",
-  "brbaramille/.*",
-  "btcbtcgvsagvcsa/.*",
-  "btccare/.*",
-  "btcservice/.*",
-  "btcsupportcare/.*",
-  "c4bqqi5jzf46/.*",
-  "callcbsupport/.*",
-  "callscoinbase/.*",
-  "carenumber/.*",
-  "caresuppoert/.*",
-  "caval/.*",
-  "cbservice/.*",
-  "cbsupport/.*",
-  "cbsupportservice/.*",
-  "cbsupportnumber/.*",
-  "cex.iosupport/.*",
-  "coinbaseeus/.*",
-  "coinbase.service/.*",
-  "coinbase-usa/.*",
-  "coinbasecare/.*",
-  "coinbascare/.*",
-  "coinbase.care/.*",
-  "coinbase.help/.*",
-  "coinbase.support/.*",
-  "coinbasecall/.*",
-  "coinbasecall1/.*",
-  "coinbasecalls/.*",
-  "coinbasedesk/.*",
-  "coinbasefree/.*",
-  "coinbasegold/.*",
-  "coinbasehelpline/.*",
-  "coinbasehelps/.*",
-  "coinbaselogin/.*",
-  "coinbaseloginn/.*",
-  "coinbaseno/.*",
-  "coinbasepay/.*",
-  "coinbasephn/.*",
-  "coinbasereal/.*",
-  "coinbasertss/.*",
-  "coinbaseservice/.*",
-  "coinbaseservicen/.*",
-  "coinbaseservices/.*",
-  "coinbasessup/.*",
-  "coinbasesupp/.*",
-  "coinbasesupport/.*",
-  "coinbasesupportc/.*",
-  "coinbasesupportp/.*",
-  "coinbasesupports/.*",
-  "coinbasesupportt/.*",
-  "coinbasesuprt/.*",
-  "coinbasetollfree/.*",
-  "coinbaseuk/.*",
-  "coinbaseus/.*",
-  "coinbaseus.com/.*",
-  "coinbaseusa/.*",
-  "coinbasewallet/.*",
-  "coinbashelp/.*",
-  "coinbassupport/.*",
-  "coinsbasesup/.*",
-  "coinbasesuprt/.*",
-  "coinbasetollfree/.*",
-  "coinbaseuk/.*",
-  "coinbbasepro/.*",
-  "coinbesesupport/.*",
-  "communicateus/.*",
-  "communityus/.*",
-  "costaricht/.*",
-  "contactmetamask/.*",
-  "cryptoservice/.*",
-  "cryptosupports/.*",
-  "cryptotokens/.*",
-  "cryptousero1/.*",
-  "cplahariya72/.*",
-  "customer.service/.*",
-  "customerservice/.*",
-  "customer800/.*",
-  "customercare/.*",
-  "customerlive/.*",
-  "customeronline/.*",
-  "customerservice/.*",
-  "customersupport/.*",
-  "customtoll/.*",
-  "customerwallet/.*",
-  "customtoll/.*",
-  "cxcbnxzcb/.*",
-  "damiwiy184/.*",
-  "danincomplete/warning-openledger-and-geneos-scam-alert-fraudulent-activity-detected",
-  "darkknight11/.*",
-  "dfdsfd45/.*",
-  "dialcoinbase/.*",
-  "djwtu/.*",
-  "ecency01/.*",
-  "ecencymaster/.*",
-  "ecensepop/.*",
-  "edwardspensor/.*",
-  "ellamason612/.*",
-  "ericahonolu/.*",
-  "faumaulloin/.*",
-  "ficih425/.*",
-  "foul1uxqcse6/.*",
-  "frankkohn/.*",
-  "geminiusa/.*",
-  "ggyivaiapyju/.*",
-  "genegg691/.*",
-  "ginas1900/.*",
-  "gunman4466/.*",
-  "gugytgydvvv/.*",
-  "harryxosborn/.*",
-  "hackmon90/.*",
-  "help.coinbase/.*",
-  "helpbinancee/.*",
-  "helpcoinbas/.*",
-  "helpcoinbase/.*",
-  "helplinesupport/.*",
-  "hikccbsc5k/.*",
-  "iag9479/.*",
-  "jacksparrowcz/.*",
-  "jacksparrowzx/.*",
-  "janiceadams/.*",
-  "jaibalaj123/.*",
-  "jakelaw915/.*",
-  "jallhlcv8/.*",
-  "jameesspaul/.*",
-  "jamesniton675/.*",
-  "janeliz72/.*",
-  "jayapartha/.*",
-  "jhagsdh265/.*",
-  "jimmyshergillxz/.*",
-  "joannegdunn/.*",
-  "jonathonsmithsz/.*",
-  "jonydevitis/.*",
-  "justinkanwal/.*",
-  "jundi1443/--r0jhik",
-  "jundi1/.*",
-  "kalimkopaaer/.*",
-  "karolinalowe/.*",
-  "kclentroaster/.*",
-  "kirstyxnaylor/.*",
-  "kissmenotddvf/.*",
-  "krakensupport/.*",
-  "leasha/.*",
-  "ledgernano/.*",
-  "ledgernanox/.*",
-  "ledgernanohelp/.*",
-  "ledgernanoy/.*",
-  "lindacare87/.*",
-  "lisachapaul/.*",
-  "lobstrsupport/.*",
-  "lobstrusa/.*",
-  "loginpending/.*",
-  "lumiwallet/.*",
-  "lylezmclean/.*",
-  "margueritec0668/the-possession-of-hannah-grace-2018-720p-1080p-brrip-dvdrip-high-quality",
-  "mariasmith/.*",
-  "marimcalister4/.*",
-  "markalan/.*",
-  "marquisea/.*",
-  "marsila/.*",
-  "metamask.support/.*",
-  "metamasklive/.*",
-  "metamaskliveus/.*",
-  "metamaskloginus/.*",
-  "metamasksupport/.*",
-  "metamasksupportu/.*",
-  "metamaskus/.*",
-  "melodi/.*",
-  "mmfuture/.*",
-  "mondkratzert5445/.*",
-  "moonpay.wallet/.*",
-  "moonpaysupport/.*",
-  "narniatailor/.*",
-  "nehemiahc/.*",
-  "nickfurrie/.*",
-  "nickfuryx/.*",
-  "npleasent/.*",
-  "oliviajames7/.*",
-  "oliver7219jeny/.*",
-  "omotayoaina/.*",
-  "onobel/.*",
-  "p90usskw36tv/.*",
-  "paulfjones966/.*",
-  "perciejacksondxc/.*",
-  "pesen05/.*",
-  "phbgg/.*",
-  "pintowallet/.*",
-  "poilebraubragra/.*",
-  "pramodranis/.*",
-  "psejsvtk9547/.*",
-  "qctaviwx/.*",
-  "rarec44537/.*",
-  "rajniraraa/.*",
-  "rcxrvaarejthw/.*",
-  "recoversupport/.*",
-  "rewqas568/.*",
-  "ronkasp/.*",
-  "samuel2000/.*",
-  "samuel2004/.*",
-  "samuel2005/.*",
-  "samuel2006/.*",
-  "samuel2007/.*",
-  "samuel2008/.*",
-  "samuel2009/.*",
-  "samuel2011/.*",
-  "samuel2012/.*",
-  "samuel2015/.*",
-  "samuel2016/.*",
-  "samuel2018/.*",
-  "samuel210/.*",
-  "samueldoctor2019/.*",
-  "service.customer/.*",
-  "servicecoinbase/.*",
-  "servicehelp/.*",
-  "sdeborah824/.*",
-  "shaunxcannon/.*",
-  "shahzifpc/nitro-pro-crack-keygen-torrent",
-  "shepardbernard2/.*",
-  "sofiazwayne/.*",
-  "starct053/.*",
-  "stephenyjohnsn/.*",
-  "supporthelp/coinbase-customer-service-number-1",
-  "support.coinbase/.*",
-  "support.gemini/.*",
-  "support.metamask/.*",
-  "support.wallet/.*",
-  "supportcoinbase/.*",
-  "supportcare/.*",
-  "support.tollfree/.*",
-  "supportdodge/.*",
-  "sscomm/.*",
-  "supporthelp/.*",
-  "support.binance/.*",
-  "supportnumber/.*",
-  "supportnumberbit/.*",
-  "supportnumberus/.*",
-  "supportrefund/.*",
-  "sylvestestalom/.*",
-  "synyppzvv3ub/.*",
-  "systembuster/.*",
-  "technicalusa/.*",
-  "techonoal/.*",
-  "tenda/.*",
-  "techsupport1/.*",
-  "tedsx7347848/.*",
-  "terimaachuma/.*",
-  "tklbidramu/.*",
-  "tollfree/.*",
-  "tollfrenumber/.*",
-  "trustcrypto/.*",
-  "trusttwallet/.*",
-  "trustwallett/.*",
-  "trustwalletuk/.*",
-  "trustwalletus/.*",
-  "ttja0lfaccoz/.*",
-  "tyuq3wg/.*",
-  "tzhpof/.*",
-  "uniswaphelp/.*",
-  "uniswapsupport/.*",
-  "usacoinbase/.*",
-  "usacbservice/.*",
-  "uscoinbase.care/.*",
-  "usercoinbaseapp/.*",
-  "ustrustwallet/.*",
-  "venomawn/.*",
-  "veronicaxwilson/.*",
-  "veudufideprei/.*",
-  "vfdbvfgbvdfgdf/.*",
-  "vnpst9lynksk/.*",
-  "vojsjh79vzqu/.*",
-  "vzo6b8fs6ifu/.*",
-  "walletcrypto/.*",
-  "wallet.trust/.*",
-  "walletuscoin/.*",
-  "walletusa/.*",
-  "wallet.usa/.*",
-  "walletusa/.*",
-  "yedanad275/.*",
-  "zakiartist85y/.*",
-  "zhgsildfh/.*",
-  "zkbvu0tcv2la/.*",
-  "xcoinbbaseproxx/.*"
+  "@aasdaura/.*",
+  "@ah3p5idsebhn/.*",
+  "@aishacorona/.*",
+  "@arefinishingpros/.*",
+  "@allenk/.*",
+  "@anny08/.*",
+  "@beeryallen/.*",
+  "@billjd/.*",
+  "@binance.support/.*",
+  "@binance.help/.*",
+  "@binanceehelp/.*",
+  "@binancesupport/.*",
+  "@binancesupport1/.*",
+  "@binancesupportt/.*",
+  "@binancetoll/.*",
+  "@bio9kftyptni/.*",
+  "@bitcoinsmarkett/.*",
+  "@blockchaink/.*",
+  "@blockdifind/.*",
+  "@bqtumaeso0zl/.*",
+  "@brbaramille/.*",
+  "@btcbtcgvsagvcsa/.*",
+  "@btccare/.*",
+  "@btcservice/.*",
+  "@btcsupportcare/.*",
+  "@c4bqqi5jzf46/.*",
+  "@callcbsupport/.*",
+  "@callscoinbase/.*",
+  "@carenumber/.*",
+  "@caresuppoert/.*",
+  "@caval/.*",
+  "@cbservice/.*",
+  "@cbsupport/.*",
+  "@cbsupportservice/.*",
+  "@cbsupportnumber/.*",
+  "@cex.iosupport/.*",
+  "@coinbaseeus/.*",
+  "@coinbase.service/.*",
+  "@coinbase-usa/.*",
+  "@coinbasecare/.*",
+  "@coinbascare/.*",
+  "@coinbase.care/.*",
+  "@coinbase.help/.*",
+  "@coinbase.support/.*",
+  "@coinbasecall/.*",
+  "@coinbasecall1/.*",
+  "@coinbasecalls/.*",
+  "@coinbasedesk/.*",
+  "@coinbasefree/.*",
+  "@coinbasegold/.*",
+  "@coinbasehelpline/.*",
+  "@coinbasehelps/.*",
+  "@coinbaselogin/.*",
+  "@coinbaseloginn/.*",
+  "@coinbaseno/.*",
+  "@coinbasepay/.*",
+  "@coinbasephn/.*",
+  "@coinbasereal/.*",
+  "@coinbasertss/.*",
+  "@coinbaseservice/.*",
+  "@coinbaseservicen/.*",
+  "@coinbaseservices/.*",
+  "@coinbasessup/.*",
+  "@coinbasesupp/.*",
+  "@coinbasesupport/.*",
+  "@coinbasesupportc/.*",
+  "@coinbasesupportp/.*",
+  "@coinbasesupports/.*",
+  "@coinbasesupportt/.*",
+  "@coinbasesuprt/.*",
+  "@coinbasetollfree/.*",
+  "@coinbaseuk/.*",
+  "@coinbaseus/.*",
+  "@coinbaseus.com/.*",
+  "@coinbaseusa/.*",
+  "@coinbasewallet/.*",
+  "@coinbashelp/.*",
+  "@coinbassupport/.*",
+  "@coinsbasesup/.*",
+  "@coinbasesuprt/.*",
+  "@coinbasetollfree/.*",
+  "@coinbaseuk/.*",
+  "@coinbbasepro/.*",
+  "@coinbesesupport/.*",
+  "@communicateus/.*",
+  "@communityus/.*",
+  "@costaricht/.*",
+  "@contactmetamask/.*",
+  "@cryptoservice/.*",
+  "@cryptosupports/.*",
+  "@cryptotokens/.*",
+  "@cryptousero1/.*",
+  "@cplahariya72/.*",
+  "@customer.service/.*",
+  "@customerservice/.*",
+  "@customer800/.*",
+  "@customercare/.*",
+  "@customerlive/.*",
+  "@customeronline/.*",
+  "@customerservice/.*",
+  "@customersupport/.*",
+  "@customtoll/.*",
+  "@customerwallet/.*",
+  "@customtoll/.*",
+  "@cxcbnxzcb/.*",
+  "@damiwiy184/.*",
+  "@danincomplete/warning-openledger-and-geneos-scam-alert-fraudulent-activity-detected",
+  "@darkknight11/.*",
+  "@dfdsfd45/.*",
+  "@dialcoinbase/.*",
+  "@djwtu/.*",
+  "@ecency01/.*",
+  "@ecencymaster/.*",
+  "@ecensepop/.*",
+  "@edwardspensor/.*",
+  "@ellamason612/.*",
+  "@ericahonolu/.*",
+  "@faumaulloin/.*",
+  "@ficih425/.*",
+  "@foul1uxqcse6/.*",
+  "@frankkohn/.*",
+  "@geminiusa/.*",
+  "@ggyivaiapyju/.*",
+  "@genegg691/.*",
+  "@ginas1900/.*",
+  "@gunman4466/.*",
+  "@gugytgydvvv/.*",
+  "@guthrie121/.*",
+  "@harryxosborn/.*",
+  "@hackmon90/.*",
+  "@help.coinbase/.*",
+  "@helpbinancee/.*",
+  "@helpcoinbas/.*",
+  "@helpcoinbase/.*",
+  "@helplinesupport/.*",
+  "@hikccbsc5k/.*",
+  "@iag9479/.*",
+  "@jacksparrowcz/.*",
+  "@jacksparrowzx/.*",
+  "@janiceadams/.*",
+  "@jaibalaj123/.*",
+  "@jakelaw915/.*",
+  "@jallhlcv8/.*",
+  "@jameesspaul/.*",
+  "@jamesniton675/.*",
+  "@janeliz72/.*",
+  "@jayapartha/.*",
+  "@jhagsdh265/.*",
+  "@jimmyshergillxz/.*",
+  "@joannegdunn/.*",
+  "@jonathonsmithsz/.*",
+  "@jonydevitis/.*",
+  "@justinkanwal/.*",
+  "@jundi1443/--r0jhik",
+  "@jundi1/.*",
+  "@kalimkopaaer/.*",
+  "@karolinalowe/.*",
+  "@kclentroaster/.*",
+  "@kirstyxnaylor/.*",
+  "@kissmenotddvf/.*",
+  "@krakensupport/.*",
+  "@leasha/.*",
+  "@ledgernano/.*",
+  "@ledgernanox/.*",
+  "@ledgernanohelp/.*",
+  "@ledgernanoy/.*",
+  "@lindacare87/.*",
+  "@lisachapaul/.*",
+  "@lobstrsupport/.*",
+  "@lobstrusa/.*",
+  "@loginpending/.*",
+  "@lumiwallet/.*",
+  "@lylezmclean/.*",
+  "@margueritec0668/the-possession-of-hannah-grace-2018-720p-1080p-brrip-dvdrip-high-quality",
+  "@mariasmith/.*",
+  "@marimcalister4/.*",
+  "@markalan/.*",
+  "@marquisea/.*",
+  "@marsila/.*",
+  "@metamask.support/.*",
+  "@metamasklive/.*",
+  "@metamaskliveus/.*",
+  "@metamaskloginus/.*",
+  "@metamasksupport/.*",
+  "@metamasksupportu/.*",
+  "@metamaskus/.*",
+  "@melodi/.*",
+  "@mmfuture/.*",
+  "@mondkratzert5445/.*",
+  "@moonpay.wallet/.*",
+  "@moonpaysupport/.*",
+  "@narniatailor/.*",
+  "@nehemiahc/.*",
+  "@nickfurrie/.*",
+  "@nickfuryx/.*",
+  "@npleasent/.*",
+  "@oliviajames7/.*",
+  "@oliver7219jeny/.*",
+  "@omotayoaina/.*",
+  "@onobel/.*",
+  "@p90usskw36tv/.*",
+  "@paulfjones966/.*",
+  "@perciejacksondxc/.*",
+  "@pesen05/.*",
+  "@phbgg/.*",
+  "@pintowallet/.*",
+  "@poilebraubragra/.*",
+  "@pramodranis/.*",
+  "@psejsvtk9547/.*",
+  "@qctaviwx/.*",
+  "@rarec44537/.*",
+  "@rajniraraa/.*",
+  "@rcxrvaarejthw/.*",
+  "@recoversupport/.*",
+  "@rewqas568/.*",
+  "@ronkasp/.*",
+  "@samuel2000/.*",
+  "@samuel2004/.*",
+  "@samuel2005/.*",
+  "@samuel2006/.*",
+  "@samuel2007/.*",
+  "@samuel2008/.*",
+  "@samuel2009/.*",
+  "@samuel2011/.*",
+  "@samuel2012/.*",
+  "@samuel2015/.*",
+  "@samuel2016/.*",
+  "@samuel2018/.*",
+  "@samuel210/.*",
+  "@samueldoctor2019/.*",
+  "@service.customer/.*",
+  "@servicecoinbase/.*",
+  "@servicehelp/.*",
+  "@sdeborah824/.*",
+  "@shaunxcannon/.*",
+  "@shahzifpc/nitro-pro-crack-keygen-torrent",
+  "@shepardbernard2/.*",
+  "@sofiazwayne/.*",
+  "@starct053/.*",
+  "@stephenyjohnsn/.*",
+  "@supporthelp/coinbase-customer-service-number-1",
+  "@support.coinbase/.*",
+  "@support.gemini/.*",
+  "@support.metamask/.*",
+  "@support.wallet/.*",
+  "@supportcoinbase/.*",
+  "@supportcare/.*",
+  "@support.tollfree/.*",
+  "@supportdodge/.*",
+  "@sscomm/.*",
+  "@supporthelp/.*",
+  "@support.binance/.*",
+  "@supportnumber/.*",
+  "@supportnumberbit/.*",
+  "@supportnumberus/.*",
+  "@supportrefund/.*",
+  "@sylvestestalom/.*",
+  "@synyppzvv3ub/.*",
+  "@systembuster/.*",
+  "@technicalusa/.*",
+  "@techonoal/.*",
+  "@tenda/.*",
+  "@techsupport1/.*",
+  "@tedsx7347848/.*",
+  "@terimaachuma/.*",
+  "@tklbidramu/.*",
+  "@tollfree/.*",
+  "@tollfrenumber/.*",
+  "@trustcrypto/.*",
+  "@trusttwallet/.*",
+  "@trustwallett/.*",
+  "@trustwalletuk/.*",
+  "@trustwalletus/.*",
+  "@ttja0lfaccoz/.*",
+  "@tyuq3wg/.*",
+  "@tzhpof/.*",
+  "@uniswaphelp/.*",
+  "@uniswapsupport/.*",
+  "@usacoinbase/.*",
+  "@usacbservice/.*",
+  "@uscoinbase.care/.*",
+  "@usercoinbaseapp/.*",
+  "@ustrustwallet/.*",
+  "@venomawn/.*",
+  "@veronicaxwilson/.*",
+  "@veudufideprei/.*",
+  "@vfdbvfgbvdfgdf/.*",
+  "@vnpst9lynksk/.*",
+  "@vojsjh79vzqu/.*",
+  "@vzo6b8fs6ifu/.*",
+  "@walletcrypto/.*",
+  "@wallet.trust/.*",
+  "@walletuscoin/.*",
+  "@walletusa/.*",
+  "@wallet.usa/.*",
+  "@walletusa/.*",
+  "@yedanad275/.*",
+  "@zakiartist85y/.*",
+  "@zhgsildfh/.*",
+  "@zkbvu0tcv2la/.*",
+  "@xcoinbbaseproxx/.*"
 ]
diff --git a/src/common/constants/exchanges.ts b/src/common/constants/exchanges.ts
index a6febe64a58..51bf442a3e6 100644
--- a/src/common/constants/exchanges.ts
+++ b/src/common/constants/exchanges.ts
@@ -13,7 +13,8 @@ const exchangeAccounts = [
   "hitbtc-exchange",
   "poloniex",
   "upbit-exchange",
-  "onepagex"
+  "onepagex",
+  "bdhivesteem"
 ];
 
 export default exchangeAccounts;
diff --git a/src/common/core/caches/entries-cache.tsx b/src/common/core/caches/entries-cache.tsx
index 3ae0f74629d..3bb51b22fb6 100644
--- a/src/common/core/caches/entries-cache.tsx
+++ b/src/common/core/caches/entries-cache.tsx
@@ -34,7 +34,7 @@ export const EntriesCacheManager = ({ children }: { children: any }) => {
 
   const updateCache = (entries: Entry[], skipInvalidation = false) => {
     entries.forEach((e) => {
-      if (dmca.some((rx: string) => new RegExp(rx).test(`${e.author}/${e.permlink}`))) {
+      if (dmca.some((rx: string) => new RegExp(rx).test(`@${e.author}/${e.permlink}`))) {
         e.body = "This post is not available due to a copyright/fraudulent claim.";
         e.title = "";
       }
@@ -199,7 +199,7 @@ export function useEntryCache<T extends Entry>(
 
     for (const k of groupKeys) {
       entry = entries[k].entries.find((x) => {
-        if (dmca.some((rx: string) => new RegExp(rx).test(`${x.author}/${x.permlink}`))) {
+        if (dmca.some((rx: string) => new RegExp(rx).test(`@${x.author}/${x.permlink}`))) {
           x.body = "This post is not available due to a copyright/fraudulent claim.";
           x.title = "";
         }
diff --git a/src/common/core/react-query.ts b/src/common/core/react-query.ts
index f3db0fc44c1..de5ac6e4422 100644
--- a/src/common/core/react-query.ts
+++ b/src/common/core/react-query.ts
@@ -25,5 +25,7 @@ export enum QueryIdentifiers {
   THREE_SPEAK_VIDEO_LIST = "three-speak-video-list",
   THREE_SPEAK_VIDEO_LIST_FILTERED = "three-speak-video-list-filtered",
   DRAFTS = "drafts",
-  BY_DRAFT_ID = "by-draft-id"
+  BY_DRAFT_ID = "by-draft-id",
+
+  EMOJI_PICKER = "emoji-picker"
 }
diff --git a/src/common/helper/posting.ts b/src/common/helper/posting.ts
index 5845e10b545..6d1963f7130 100644
--- a/src/common/helper/posting.ts
+++ b/src/common/helper/posting.ts
@@ -2,12 +2,10 @@ import getSlug from "speakingurl";
 
 import { diff_match_patch } from "diff-match-patch";
 
-import { MetaData, CommentOptions, RewardType } from "../api/operations";
+import { BeneficiaryRoute, CommentOptions, MetaData, RewardType } from "../api/operations";
 
 import isElectron from "../util/is-electron";
 
-import { BeneficiaryRoute } from "../api/operations";
-
 const permlinkRnd = () => (Math.random() + 1).toString(16).substring(2);
 
 export const createPermlink = (title: string, random: boolean = false): string => {
@@ -95,6 +93,7 @@ export const makeCommentOptions = (
 ): CommentOptions => {
   beneficiaries?.forEach((b) => delete b.src);
 
+  beneficiaries?.sort();
   const opt: CommentOptions = {
     allow_curation_rewards: true,
     allow_votes: true,
diff --git a/src/common/i18n/locales/ac-ace.json b/src/common/i18n/locales/ac-ace.json
index 5184f2496bc..5e817662701 100644
--- a/src/common/i18n/locales/ac-ace.json
+++ b/src/common/i18n/locales/ac-ace.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ar-SA.json b/src/common/i18n/locales/ar-SA.json
index b79a86c836f..33dabcf5279 100644
--- a/src/common/i18n/locales/ar-SA.json
+++ b/src/common/i18n/locales/ar-SA.json
@@ -48,7 +48,7 @@
     "muted": "مكتوم",
     "trail": "درب",
     "controversial": "مثير للجدل",
-    "rising": "rising",
+    "rising": "صاعد",
     "found": "موجود",
     "feed": "المستجدات",
     "blog": "مدوّنات",
@@ -58,22 +58,22 @@
     "replies": "ردود",
     "done": "تم",
     "apply": "تطبيق",
-    "applying": "Applying...",
+    "applying": "استخدام...",
     "warning": "تحذير",
     "payout": "الدفعة",
     "learn-more": "تعلم المزيد في",
     "faq": "الأسئلة الشائعة",
-    "when": "When",
-    "price": "Price",
+    "when": "متى",
+    "price": "السعر",
     "more-results": "المزيد من النتائج",
     "close": "إغلاق",
-    "loading": "Loading",
-    "stop": "Stop",
-    "settings": "Settings",
-    "confirm": "Confirm",
-    "username": "Username",
-    "past-few-days": "the past few days",
-    "you": "You"
+    "loading": "تحميل",
+    "stop": "إيقاف",
+    "settings": "إعدادات",
+    "confirm": "تأكيد",
+    "username": "اسم المستخدم",
+    "past-few-days": "الأيام القليلة الماضية",
+    "you": "أنت"
   },
   "confirm": {
     "title": "هل أنت متأكد؟",
@@ -81,22 +81,22 @@
     "cancel": "إلغاء"
   },
   "announcements": {
-    "dismiss": "Dismiss",
-    "next": "Next",
-    "later": "Later"
+    "dismiss": "إهمال",
+    "next": "التالي",
+    "later": "لاحقاً"
   },
   "floating-faq": {
-    "toggle-icon-info": "Click to expand",
-    "help": "Help",
-    "welcome": "Welcome to Ecency",
-    "need-help": "Need Help?",
-    "search-placeholder": "Search",
-    "suggestion": "Suggested articles",
-    "contact": "Contact us",
-    "submit": "Submit",
-    "username": "username",
-    "message": "message",
-    "no-results": "No results found"
+    "toggle-icon-info": "انقر للتوسيع",
+    "help": "المساعدة",
+    "welcome": "مرحبا بك في Ecency",
+    "need-help": "تحتاج للمساعدة؟",
+    "search-placeholder": "البحث",
+    "suggestion": "المقالات المقترحة",
+    "contact": "اتصل بنا",
+    "submit": "أرسل",
+    "username": "إسم المستخدم",
+    "message": "رسالة",
+    "no-results": "لم يتم العثور على نتائج"
   },
   "entry-filter": {
     "filter-trending": "الشائع",
@@ -109,8 +109,8 @@
     "filter-feed-friends": "الأصدقاء",
     "filter-feed-subscriptions": "المجتمعات",
     "filter-global": "عام",
-    "filter-community": "My Community",
-    "filter-controversial": "Controversial",
+    "filter-community": "مجتمعي",
+    "filter-controversial": "مثير للجدل",
     "filter-rising": "صاعد",
     "filter-global-part1": "يحتوي هذا المستجد على ",
     "filter-global-part2": " مناقشات على كامل المنصة.",
@@ -118,18 +118,18 @@
     "filter-global-part4": " مناقشات من أشخاص تتابعهم. يمكنك متابعة المزيد من الأشخاص لملء هذه التغذية.",
     "filter-global-discover": "إكتشف أشخاص",
     "filter-global-join-communities": "انضم إلى مجتمعات",
-    "filter-today": "Today",
-    "filter-week": "This week",
-    "filter-month": "This month",
-    "filter-year": "This year",
-    "filter-alltime": "All time",
-    "filter-no-reblog": "Exclude reblog",
-    "filter-with-reblog": "Include reblog"
+    "filter-today": "اليوم",
+    "filter-week": "هذا الأسبوع",
+    "filter-month": "هذا الشهر",
+    "filter-year": "هذه السنة",
+    "filter-alltime": "كل الوقت",
+    "filter-no-reblog": "استبعاد إعادة التدوين",
+    "filter-with-reblog": "تضمين إعادة التدوين"
   },
   "navbar": {
     "discover": "إكتشف",
     "communities": "المجتمعات",
-    "decks": "Decks",
+    "decks": "طوابق",
     "post": "إنشاء منشور",
     "day-theme": "الوضع العادي",
     "night-theme": "الوضع الليلي",
@@ -170,7 +170,7 @@
     "dark": "داكن",
     "switch-to": "تبديل",
     "vote-power": "قوة التصويت:",
-    "boost": "Boost"
+    "boost": "تعزيز"
   },
   "intro": {
     "title": "التطلع إلى العظمة",
@@ -185,7 +185,7 @@
     "login-info-1": "نحن لا نخزن مفاتيحك الخاصة.",
     "login-info-2": "مزيد من المعلومات",
     "error-fields-required": "الرجاء إدخال اسم المستخدم والمفتاح الخاص",
-    "captcha-check-required": "Please verify if you are a human",
+    "captcha-check-required": "يرجى التحقق إذا كنت بشري",
     "error-public-key": "لقد أدخلت مفتاحًا عامًا. مطلوب كلمة المرور/WIF",
     "error-user-fetch": "تعذر جلب بيانات المستخدم",
     "error-user-not-found": "المستخدم غير موجود",
@@ -198,8 +198,8 @@
     "sign-up-text-2": "قم بالتسجيل الآن!"
   },
   "sign-up": {
-    "header": "Rewarding communities",
-    "description": "Value Freespeech, Be in Charge, Achieve Financial freedom!",
+    "header": "مكافأة المجتمعات",
+    "description": "قدّر حرية التعبير، كن مسؤولاً، حقق الحرية المالية!",
     "bottom-description": "يتم إنشاء كل حساب على بلوكتشين و أنت فقط من يمتلك التحكم بذلك الحساب. حساب واحد لإدارة كل شيء على البلوكتشين و Ecency.",
     "learn-more": "تعرف على المزيد من الفوائد في <a href=\"/faq#how-to-join\">الأسئلة الشائعة</a>",
     "username": "اختر اسم مستخدم",
@@ -212,41 +212,41 @@
     "success-2": "اتبع التعليمات لإكمال عملية التسجيل.",
     "login-text-1": "هل لديك حساب؟",
     "login-text-2": "تسجيل الدخول",
-    "free-account": "Free account",
-    "free-account-desc": "Get a full-fledged Hive account, this method has basic checks to make sure botnet doesn't abuse our signup faucet.",
-    "register-free": "Register free",
-    "buy-account": "Buy account",
-    "buy-account-desc": "Get a full-fledged Hive account with no extra checks and few perks such as:",
-    "buy-account-li-1": "Instant creation without extra checks and waiting",
-    "buy-account-li-2": "3x RC compared to normal new accounts",
-    "buy-account-li-3": "300 Points to help you get started",
-    "qr-desc": "Scan with Ecency mobile app to continue",
-    "username-min-length-error": "Length of username should be at least 3 characters",
-    "username-max-length-error": "Length of username should be no more than 16 characters",
-    "username-no-ascii-first-letter-error": "First character should be a Letter",
-    "username-contains-symbols-error": "Should contain Letters, Numbers, Hyphen only",
-    "username-contains-double-hyphens": "Should not contain double Hyphens",
-    "username-exists": "This username already registered. Please, try another one",
-    "referral-invalid": "This referral is invalid. Please, try another one",
-    "referral-min-length-error": "Length of referral should be at least 3 characters",
-    "referral-max-length-error": "Length of referral should be no more than 16 characters",
+    "free-account": "حساب مجاني",
+    "free-account-desc": "احصل على حساب Hive كامل، تحتوي هذه الطريقة على فحوص أساسية للتأكد من أن الروبوتات لا تسئ استخدام صنبور التسجيل الخاص بنا.",
+    "register-free": "تسجيل مجاني",
+    "buy-account": "اشتري حساب",
+    "buy-account-desc": "احصل على حساب Hive كامل، دون فحوص إضافية إكراميات قليلة مثل:",
+    "buy-account-li-1": "إنشاء فوري دون عمليات فحص إضافية وانتظار",
+    "buy-account-li-2": "3 أضعاف رصيد المورد RC مقارنة بالحسابات الجديدة العادية",
+    "buy-account-li-3": "300 نقطة لمساعدتك على البَدْء",
+    "qr-desc": "امسح باستخدام تطبيق Ecency للجوال للمتابعة",
+    "username-min-length-error": "يجب أن يكون اسم المستخدم ٣ حروف على الأقل",
+    "username-max-length-error": "يجب أن لا يزيد طول اسم المستخدم عن ١٦ حرفاً",
+    "username-no-ascii-first-letter-error": "يجب أن يكون الرمز الأول حرفاً",
+    "username-contains-symbols-error": "يجب أن تحتوي على أحرف وأرقام وواصلة فقط",
+    "username-contains-double-hyphens": "يجب ألا تحتوي على واصلات مزدوجة",
+    "username-exists": "هذا البريد الإلكتروني موجود بالفعل. الرجاء إدخال بريد إلكتروني آخر",
+    "referral-invalid": "هذه الإحالة غير صالحة. من فضلك ، جرب واحدة أخرى",
+    "referral-min-length-error": "يجب أن يكون طول الإحالة ٣ حروف على الأقل",
+    "referral-max-length-error": "يجب أن لا يزيد طول الإحالة عن ١٦ حرفاً",
     "email-max-length-error": "يجب ألا يزيد طول البريد الإلكتروني عن 72 حرفًا"
   },
   "onboard": {
-    "title-active-user": "Onboard a friend",
-    "title-visitor": "Ask from a friend",
-    "description-active-user": "You can create account for a friend.",
-    "description-visitor": "You can ask a friend to create an account for you.",
-    "creating": "Create for a friend",
-    "asking": " Ask from a friend",
-    "creating-description": "Pay with hive or account credit",
-    "asking-description": "Copy account link and send to friend.",
-    "username": "Username:",
-    "email": "Email:",
-    "referral": "Referral:",
-    "copy-key": "Make sure you copy or download your keys.",
-    "download-keys": "Download Keys",
-    "create-account-hive": "Pay with HIVE",
+    "title-active-user": "تأهيل صديق",
+    "title-visitor": "أطلب من صديق",
+    "description-active-user": "يمكنك إنشاء حساب لصديق.",
+    "description-visitor": "يمكنك أن تطلب من صديق إنشاء حساب لك.",
+    "creating": "إنشاء لصديق",
+    "asking": " أطلب من صديق",
+    "creating-description": "الدفع باستخدام hive أو رصيد حساب",
+    "asking-description": "نسخ رابط الحساب وإرساله إلى صديق.",
+    "username": "اسم المستخدم:",
+    "email": "البريد الإلكتروني:",
+    "referral": "الإحالة:",
+    "copy-key": "تأكد من نسخ أو تنزيل المفاتيح الخاصة بك.",
+    "download-keys": "تحميل المفاتيح",
+    "create-account-hive": "الدفع من خلال HIVE",
     "create-account-credit": "Pay with Account Credits ({{n}})",
     "confirm-details": "Confirm Details",
     "share": "(You can send code to a friend) Copy code",
@@ -276,7 +276,7 @@
     "owner": "Owner key:",
     "active": "Active key:",
     "posting": "Posting key:",
-    "memo": "Memo key:",
+    "memo": "مفتاح المذكرة:",
     "owner-use": "Change Password, Change Keys, Recover Account",
     "active-use": "Transfer Funds, Power up/down, Voting Witnesses/Proposals",
     "posting-use": "Post, Comment, Vote, Reblog, Follow, Profile updates",
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "أَدخِل",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "التحديث للحصول على الحالة المحدثة",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/az-AZ.json b/src/common/i18n/locales/az-AZ.json
index 3d9e04af483..4adaa23b56b 100644
--- a/src/common/i18n/locales/az-AZ.json
+++ b/src/common/i18n/locales/az-AZ.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/bg-BG.json b/src/common/i18n/locales/bg-BG.json
index 6782988330a..e60729d3438 100644
--- a/src/common/i18n/locales/bg-BG.json
+++ b/src/common/i18n/locales/bg-BG.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/bn-BD.json b/src/common/i18n/locales/bn-BD.json
index 3d736360bce..5985b2b9f9c 100644
--- a/src/common/i18n/locales/bn-BD.json
+++ b/src/common/i18n/locales/bn-BD.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/da-DK.json b/src/common/i18n/locales/da-DK.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/da-DK.json
+++ b/src/common/i18n/locales/da-DK.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/de-DE.json b/src/common/i18n/locales/de-DE.json
index 08e7da00fe0..ab7c090c7ee 100644
--- a/src/common/i18n/locales/de-DE.json
+++ b/src/common/i18n/locales/de-DE.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/el-GR.json b/src/common/i18n/locales/el-GR.json
index 6df3d3c2dc0..62a31e3e2e5 100644
--- a/src/common/i18n/locales/el-GR.json
+++ b/src/common/i18n/locales/el-GR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 3e5e2f4a6dd..c81a045eaa7 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1441,6 +1441,7 @@
   },
   "video-upload": {
     "choose-video": "Select a video",
+    "record-video": "Record a video",
     "choose-thumbnail": "Set a thumbnail(optional)",
     "continue": "Continue",
     "encode": "Send for encoding",
@@ -1451,7 +1452,12 @@
     "preview": "Preview",
     "to-gallery": "Go to gallery",
     "congrats": "Congratulations",
-    "publishing": "Don't refresh this page, wait for few seconds for video to process"
+    "publishing": "Don't refresh this page, wait for few seconds for video to process",
+    "no-record-permission": "You don't have permission to record video",
+    "confirm-and-upload": "Confirm and upload to 3Speak",
+    "uploading": "Uploading..{{n}}/{{total}}",
+    "uploaded": "Uploaded!",
+    "reset": "Reset"
   },
   "video-gallery": {
     "all": "All",
@@ -1472,7 +1478,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/es-ES.json b/src/common/i18n/locales/es-ES.json
index a89e9278979..31b2819e5eb 100644
--- a/src/common/i18n/locales/es-ES.json
+++ b/src/common/i18n/locales/es-ES.json
@@ -1470,7 +1470,8 @@
     "info-size": "Tamaño del archivo:",
     "insert-video": "Insertar",
     "insert-nsfw": "Insertar como NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refrescar para obtener el estado actualizado",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "Contenido NSFW",
diff --git a/src/common/i18n/locales/et-EE.json b/src/common/i18n/locales/et-EE.json
index 67e3a0514b9..cd7abeed895 100644
--- a/src/common/i18n/locales/et-EE.json
+++ b/src/common/i18n/locales/et-EE.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/fa-IR.json b/src/common/i18n/locales/fa-IR.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/fa-IR.json
+++ b/src/common/i18n/locales/fa-IR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/fi-FI.json b/src/common/i18n/locales/fi-FI.json
index 83f6cc410a8..13a398d30bb 100644
--- a/src/common/i18n/locales/fi-FI.json
+++ b/src/common/i18n/locales/fi-FI.json
@@ -58,7 +58,7 @@
     "replies": "vastaukset",
     "done": "Valmis",
     "apply": "Käytä",
-    "applying": "Applying...",
+    "applying": "Asetetaan...",
     "warning": "Varoitus",
     "payout": "Palkkioita",
     "learn-more": "Lue lisää meidän",
@@ -230,7 +230,7 @@
     "referral-invalid": "Tämä suositus on virheellinen. Kokeile toista",
     "referral-min-length-error": "Käyttäjänimen pituuden on oltava vähintään 3 merkkiä",
     "referral-max-length-error": "Käyttäjänimen pituuden on oltava vähemmän kuin 16 merkkiä",
-    "email-max-length-error": "Length of email should be no more than 72 characters"
+    "email-max-length-error": "Sähköpostin pituus saa olla enintään 72 merkkiä"
   },
   "onboard": {
     "title-active-user": "Onboard a friend",
@@ -279,20 +279,20 @@
     "memo": "Muistioavain:",
     "owner-use": "Vaihda Salasana, Vaihda Avaimet, Palauta Tili",
     "active-use": "Varainsiirrot, Tehonnus/Heikennys, Äänestystodistukset/Ehdotukset",
-    "posting-use": "Post, Comment, Vote, Reblog, Follow, Profile updates",
-    "memo-use": "Send/View encrypted messages on transfers",
-    "copy-tooltip": "Copy password",
-    "regenerate-password": "Regenerate password",
-    "copy-password": "Password copied successfully",
-    "copy-info-message": "Copy Link below and SEND to a friend",
-    "success-message": "You successfully created the account ",
-    "sign-title": "Sign transaction with ",
-    "failed-title": "Failed",
-    "failed-subtitle": "Transaction failed",
-    "failed-message": "Failed to create account",
-    "try-again": "Try again",
-    "sign-header-title": "Sign transaction",
-    "sign-sub-title": "Sign your transaction"
+    "posting-use": "Julkaise, Kommentoi, Äänestä, Jaa, Seuraa, Profiilipäivitykset",
+    "memo-use": "Lähetä/Näytä salatut viestit siirroissa",
+    "copy-tooltip": "Kopioi salasana",
+    "regenerate-password": "Luo uusi salasana",
+    "copy-password": "Salasana on tallennettu onnistuneesti",
+    "copy-info-message": "Kopioi linkki alta ja lähetä kaverille",
+    "success-message": "Tilin luominen onnistui ",
+    "sign-title": "Allekirjoita tapahtuma ",
+    "failed-title": "Epäonnistui",
+    "failed-subtitle": "Tapahtuma epäonnistui",
+    "failed-message": "Tunnuksen luonti epäonnistui",
+    "try-again": "Yritä uudelleen",
+    "sign-header-title": "Allekirjoita tapahtuma",
+    "sign-sub-title": "Allekirjoita tapahtumasi"
   },
   "trending-tags": {
     "title": "Aiheet"
@@ -467,12 +467,12 @@
     "auth-required-title": "Valtuutus vaaditaan",
     "auth-required-desc": "Sinulla on oltava valtuus nähdä ilmoituksia",
     "wave": "Aalto",
-    "simple": "Simple",
-    "advanced": "Advanced",
-    "author": "Author",
-    "choose-one": "Choose one",
-    "user": "User",
-    "search-query": "Search query",
+    "simple": "Yksinkertainen",
+    "advanced": "Lisäasetukset",
+    "author": "Julkaisija",
+    "choose-one": "Valitse yksi",
+    "user": "Käyttäjä",
+    "search-query": "Hakulauseke",
     "columns": {
       "view-full-post": "Näytä koko julkaisu",
       "user": "Käyttäjä",
@@ -506,9 +506,9 @@
       "transfers": "Siirrot",
       "delegations": "Valtuutukset",
       "search-query": "Hakulauseke",
-      "enter-search-query": "Configure a search query and explore all posts",
+      "enter-search-query": "Kirjoita hakusana ja selaa kaikkia viestejä",
       "blogs": "Blogit",
-      "feeds": "Friends Feed",
+      "feeds": "Ystävien Syöte",
       "posts": "Julkaisut",
       "comments": "Kommentit",
       "all-history": "Koko historia",
@@ -536,32 +536,32 @@
       "hide-replies": "Piilota vastaukset",
       "filters": "Suodattimet",
       "market-swap-form": "Market swap form",
-      "market": "Market",
+      "market": "Markkinat",
       "swap-form": "Swapping form",
       "msf-description": "Swap your funds quickie with zero latency.",
-      "faq": "Help center",
-      "faq-subtitle": "FAQ",
-      "faq-description": "Find answer to all your questions about Ecency in our help center.",
-      "no-replies": "No replies yet",
-      "add-new-reply": "Add new reply",
-      "no-content": "No content",
-      "infinite-loading": "Loading 🌊...",
-      "end-reached": "You've reached end of 🌊.",
-      "feed-end-reached": "You've reached end of feed.",
-      "topics-subtitle": "The most popular",
-      "replied-to": "replied to",
-      "edit-wave": "Edit",
-      "updated": "Edited {{n}} ago",
-      "balance": "Balance",
-      "whats-new": "What's new",
-      "whats-new-description": "Keep in track the Ecency updates",
-      "updates": "Updates",
-      "release-list": "Release versions",
-      "current": "Current",
-      "infinite-failed": "Oops, fetching failed. Sit tight, we are retrying..."
+      "faq": "Tukikeskus",
+      "faq-subtitle": "UKK",
+      "faq-description": "Etsi vastaus kaikkiin kysymyksiisi Ecencystä meidän tukikeskuksesta.",
+      "no-replies": "Ei vastauksia",
+      "add-new-reply": "Lisää uusi vastaus",
+      "no-content": "Ei kohteita",
+      "infinite-loading": "Ladataan 🌊...",
+      "end-reached": "Olet saapunut loppuun 🌊.",
+      "feed-end-reached": "Olet saapunut syötteen loppuun.",
+      "topics-subtitle": "Suosituin",
+      "replied-to": "vastasi",
+      "edit-wave": "Muokkaa",
+      "updated": "Muokattu {{n}} sitten",
+      "balance": "Saldo",
+      "whats-new": "Uutta",
+      "whats-new-description": "Seuraa Ecencyn päivityksiä",
+      "updates": "Päivitykset",
+      "release-list": "Julkaisuversiot",
+      "current": "Nykyinen",
+      "infinite-failed": "Hups, nouto epäonnistui. Hetki pieni, yritämme uudelleen..."
     },
     "threads-form": {
-      "save": "Save",
+      "save": "Tallenna",
       "publish": "Julkaise!",
       "create-regular-post": "Luo pitkä artikkeli",
       "input-placeholder": "Mitä tapahtuu?",
@@ -641,7 +641,7 @@
     "start-new-one": "Aloita uusi Vaihto",
     "signing": "Kirjataan..",
     "success-swap": "Vaihdettu onnistuneesti!",
-    "calculating-in": "Calculating in",
+    "calculating-in": "Lasketaan",
     "advanced": {
       "history": "Historia",
       "stake": "Tilauskanta",
@@ -1438,44 +1438,45 @@
     "description": "Lyhyt kuvaus"
   },
   "video-upload": {
-    "choose-video": "Select a video",
-    "choose-thumbnail": "Set a thumbnail(optional)",
-    "continue": "Continue",
+    "choose-video": "Valitse video",
+    "choose-thumbnail": "Aseta pikkukuva(valinnainen)",
+    "continue": "Jatka",
     "encode": "Send for encoding",
-    "success": "Video succesfully uploaded",
-    "finished": "Finished",
-    "upload-video": "Upload video",
-    "video-gallery": "Video gallery",
-    "preview": "Preview",
-    "to-gallery": "Go to gallery",
-    "congrats": "Congratulations",
-    "publishing": "Don't refresh this page, wait for few seconds for video to process"
+    "success": "Video ladattu onnistuneesti",
+    "finished": "Valmis",
+    "upload-video": "Lataa video",
+    "video-gallery": "Videogalleria",
+    "preview": "Esikatselu",
+    "to-gallery": "Siirry galleriaan",
+    "congrats": "Onnittelut",
+    "publishing": "Älä päivitä tätä sivua, odota muutama sekunti videon käsittelemiseksi"
   },
   "video-gallery": {
-    "all": "All",
-    "title": "Video gallery",
-    "published": "Published",
+    "all": "Kaikki",
+    "title": "Videogalleria",
+    "published": "Julkaistu",
     "encoding": "Encoding",
     "encoded": "Encoded",
-    "failed": "Failed",
-    "status-encoded": "Ready for posting",
+    "failed": "Epäonnistui",
+    "status-encoded": "Valmis lähettämiseen",
     "status-encoding": "Encoding",
-    "status-published": "Published",
+    "status-published": "Julkaistu",
     "status-failed": "Encoding failed",
-    "status-deleted": "Deleted",
-    "info-created": "Created:",
-    "status": "Status:",
-    "info-views": "Views:",
-    "info-duration": "Duration:",
-    "info-size": "File size:",
-    "insert-video": "Insert",
-    "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "status-deleted": "Poistettu",
+    "info-created": "Luotu:",
+    "status": "Tila:",
+    "info-views": "Katselut:",
+    "info-duration": "Kesto:",
+    "info-size": "Tiedostokoko:",
+    "insert-video": "Lisää",
+    "insert-nsfw": "Lisää NSFW",
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
-    "title": "NSFW contents",
-    "warning": "Please check this if your content is NSFW",
-    "continue": "Continue"
+    "title": "NSFW-sisältö",
+    "warning": "Valitse tämä, jos sisältösi on NSFW",
+    "continue": "Jatka"
   },
   "tag-selector": {
     "placeholder-empty": "Tunnisteet. Ensimmäisenä pääkategoria. Lajiteltava.",
diff --git a/src/common/i18n/locales/fil-PH.json b/src/common/i18n/locales/fil-PH.json
index f18395acc19..54e525caacf 100644
--- a/src/common/i18n/locales/fil-PH.json
+++ b/src/common/i18n/locales/fil-PH.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/fr-FR.json b/src/common/i18n/locales/fr-FR.json
index 6613796e4bb..c1c4a92225c 100644
--- a/src/common/i18n/locales/fr-FR.json
+++ b/src/common/i18n/locales/fr-FR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/he-IL.json b/src/common/i18n/locales/he-IL.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/he-IL.json
+++ b/src/common/i18n/locales/he-IL.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/hi-IN.json b/src/common/i18n/locales/hi-IN.json
index eeab0977219..e112ceb1153 100644
--- a/src/common/i18n/locales/hi-IN.json
+++ b/src/common/i18n/locales/hi-IN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/hr-HR.json b/src/common/i18n/locales/hr-HR.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/hr-HR.json
+++ b/src/common/i18n/locales/hr-HR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/hu-HU.json b/src/common/i18n/locales/hu-HU.json
index 9638f0fb502..bad0eaf79f8 100644
--- a/src/common/i18n/locales/hu-HU.json
+++ b/src/common/i18n/locales/hu-HU.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/id-ID.json b/src/common/i18n/locales/id-ID.json
index 24e582c9002..7bb53d45b24 100644
--- a/src/common/i18n/locales/id-ID.json
+++ b/src/common/i18n/locales/id-ID.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/it-IT.json b/src/common/i18n/locales/it-IT.json
index 37184a0021f..2b26060bc06 100644
--- a/src/common/i18n/locales/it-IT.json
+++ b/src/common/i18n/locales/it-IT.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ja-JP.json b/src/common/i18n/locales/ja-JP.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ja-JP.json
+++ b/src/common/i18n/locales/ja-JP.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ka-GE.json b/src/common/i18n/locales/ka-GE.json
index f4b1d81990d..f6036ad8ffa 100644
--- a/src/common/i18n/locales/ka-GE.json
+++ b/src/common/i18n/locales/ka-GE.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/kk-KZ.json b/src/common/i18n/locales/kk-KZ.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/kk-KZ.json
+++ b/src/common/i18n/locales/kk-KZ.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ko-KR.json b/src/common/i18n/locales/ko-KR.json
index fdefc82983f..caf47822d6e 100644
--- a/src/common/i18n/locales/ko-KR.json
+++ b/src/common/i18n/locales/ko-KR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ku-TR.json b/src/common/i18n/locales/ku-TR.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ku-TR.json
+++ b/src/common/i18n/locales/ku-TR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ky-KG.json b/src/common/i18n/locales/ky-KG.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ky-KG.json
+++ b/src/common/i18n/locales/ky-KG.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/lt-LT.json b/src/common/i18n/locales/lt-LT.json
index 0c39fde67ce..2680d5d4c1c 100644
--- a/src/common/i18n/locales/lt-LT.json
+++ b/src/common/i18n/locales/lt-LT.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/lv-LV.json b/src/common/i18n/locales/lv-LV.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/lv-LV.json
+++ b/src/common/i18n/locales/lv-LV.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ms-MY.json b/src/common/i18n/locales/ms-MY.json
index 9616e01e3f7..7ae237f7ef0 100644
--- a/src/common/i18n/locales/ms-MY.json
+++ b/src/common/i18n/locales/ms-MY.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ne-NP.json b/src/common/i18n/locales/ne-NP.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ne-NP.json
+++ b/src/common/i18n/locales/ne-NP.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/nl-NL.json b/src/common/i18n/locales/nl-NL.json
index f0c7f7bc8f9..b23c785d7a9 100644
--- a/src/common/i18n/locales/nl-NL.json
+++ b/src/common/i18n/locales/nl-NL.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/no-NO.json b/src/common/i18n/locales/no-NO.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/no-NO.json
+++ b/src/common/i18n/locales/no-NO.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/pa-IN.json b/src/common/i18n/locales/pa-IN.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/pa-IN.json
+++ b/src/common/i18n/locales/pa-IN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/pcm-NG.json b/src/common/i18n/locales/pcm-NG.json
index 1e31a4aa9e3..64aae16e217 100644
--- a/src/common/i18n/locales/pcm-NG.json
+++ b/src/common/i18n/locales/pcm-NG.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/pl-PL.json b/src/common/i18n/locales/pl-PL.json
index b16672f9f76..18521e82a49 100644
--- a/src/common/i18n/locales/pl-PL.json
+++ b/src/common/i18n/locales/pl-PL.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/pt-PT.json b/src/common/i18n/locales/pt-PT.json
index 78ff3f50ef4..706ab4e12e8 100644
--- a/src/common/i18n/locales/pt-PT.json
+++ b/src/common/i18n/locales/pt-PT.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ro-RO.json b/src/common/i18n/locales/ro-RO.json
index 1e6528cc65e..a80d99b589d 100644
--- a/src/common/i18n/locales/ro-RO.json
+++ b/src/common/i18n/locales/ro-RO.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ru-RU.json b/src/common/i18n/locales/ru-RU.json
index 33a8bdf0bc4..50564f8abf5 100644
--- a/src/common/i18n/locales/ru-RU.json
+++ b/src/common/i18n/locales/ru-RU.json
@@ -230,7 +230,7 @@
     "referral-invalid": "Этот реферал недействителен. Пожалуйста, попробуйте другого",
     "referral-min-length-error": "Длина имени реферала должна быть не менее трёх символов",
     "referral-max-length-error": "Длина имени реферала должна быть не более 16 символов",
-    "email-max-length-error": "Length of email should be no more than 72 characters"
+    "email-max-length-error": "Длина письма должна составлять не более 72 символов"
   },
   "onboard": {
     "title-active-user": "Панель друга",
@@ -1468,9 +1468,10 @@
     "info-views": "Просмотров:",
     "info-duration": "Длительность:",
     "info-size": "Размер файла:",
-    "insert-video": "Insert",
+    "insert-video": "Вставить",
     "insert-nsfw": "Вставить как NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Обновить для получения обновленной информации о статусе",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW контент",
diff --git a/src/common/i18n/locales/sk-SK.json b/src/common/i18n/locales/sk-SK.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/sk-SK.json
+++ b/src/common/i18n/locales/sk-SK.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/sl-SI.json b/src/common/i18n/locales/sl-SI.json
index 764522afda4..eb16b21c8f0 100644
--- a/src/common/i18n/locales/sl-SI.json
+++ b/src/common/i18n/locales/sl-SI.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/sr-CS.json b/src/common/i18n/locales/sr-CS.json
index 68d34585e2d..6dec7854d52 100644
--- a/src/common/i18n/locales/sr-CS.json
+++ b/src/common/i18n/locales/sr-CS.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/sv-SE.json b/src/common/i18n/locales/sv-SE.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/sv-SE.json
+++ b/src/common/i18n/locales/sv-SE.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ta-IN.json b/src/common/i18n/locales/ta-IN.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ta-IN.json
+++ b/src/common/i18n/locales/ta-IN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/th-TH.json b/src/common/i18n/locales/th-TH.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/th-TH.json
+++ b/src/common/i18n/locales/th-TH.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/tr-TR.json b/src/common/i18n/locales/tr-TR.json
index 8d2997770c1..6bd9dae6e42 100644
--- a/src/common/i18n/locales/tr-TR.json
+++ b/src/common/i18n/locales/tr-TR.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/uk-UA.json b/src/common/i18n/locales/uk-UA.json
index 59360c6b429..497a6b58bd2 100644
--- a/src/common/i18n/locales/uk-UA.json
+++ b/src/common/i18n/locales/uk-UA.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ur-IN.json b/src/common/i18n/locales/ur-IN.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ur-IN.json
+++ b/src/common/i18n/locales/ur-IN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/ur-PK.json b/src/common/i18n/locales/ur-PK.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/ur-PK.json
+++ b/src/common/i18n/locales/ur-PK.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/uz-UZ.json b/src/common/i18n/locales/uz-UZ.json
index 155dfef928b..4bd162a8f38 100644
--- a/src/common/i18n/locales/uz-UZ.json
+++ b/src/common/i18n/locales/uz-UZ.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/vi-VN.json b/src/common/i18n/locales/vi-VN.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/vi-VN.json
+++ b/src/common/i18n/locales/vi-VN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/yo-NG.json b/src/common/i18n/locales/yo-NG.json
index 59cd49a8e70..979bfd9f680 100644
--- a/src/common/i18n/locales/yo-NG.json
+++ b/src/common/i18n/locales/yo-NG.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/zh-CN.json b/src/common/i18n/locales/zh-CN.json
index db058d6ab7d..5f6b032b977 100644
--- a/src/common/i18n/locales/zh-CN.json
+++ b/src/common/i18n/locales/zh-CN.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/i18n/locales/zh-TW.json b/src/common/i18n/locales/zh-TW.json
index e5eb1495e62..7412314c768 100644
--- a/src/common/i18n/locales/zh-TW.json
+++ b/src/common/i18n/locales/zh-TW.json
@@ -1470,7 +1470,8 @@
     "info-size": "File size:",
     "insert-video": "Insert",
     "insert-nsfw": "Insert as NSFW",
-    "refresh": "Refresh to get updated status"
+    "refresh": "Refresh to get updated status",
+    "video-info": "Videos are stored and powered by SPK network, might have some storage and encoding fees."
   },
   "nsfw-content": {
     "title": "NSFW contents",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 87163999531..07c32c55b35 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2238,6 +2238,60 @@ export const uploadSvgV = (
     <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
   </svg>
 );
+
+export const recordVideoSvg = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18.5002 12C18.5002 13.3807 17.381 14.5 16.0002 14.5C14.6195 14.5 13.5002 13.3807 13.5002 12C13.5002 10.6193 14.6195 9.5 16.0002 9.5C17.381 9.5 18.5002 10.6193 18.5002 12Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M10.5 12C10.5 13.3807 9.38071 14.5 8 14.5C6.61929 14.5 5.5 13.3807 5.5 12C5.5 10.6193 6.61929 9.5 8 9.5C9.38071 9.5 10.5 10.6193 10.5 12Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path d="M8 14.5H16" stroke="#1C274C" strokeWidth="1.5" strokeLinecap="round" />
+    <path
+      d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const circleSvg = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <circle r="12" cx="12" cy="12" fill="currentColor" />
+  </svg>
+);
+
+export const rectSvg = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <rect x={6} y={6} fill="currentColor" width={12} height={12} />
+  </svg>
+);
+
+export const switchCameraSvg = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M11 19H4a2 2 0 01-2-2V7a2 2 0 012-2h5" />
+    <path d="M13 5h7a2 2 0 012 2v10a2 2 0 01-2 2h-5" />
+    <circle cx="12" cy="12" r="3" />
+    <path d="M18 22l-3-3 3-3" />
+    <path d="M6 2l3 3-3 3" />
+  </svg>
+);
+
 export const chatSvg = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/common/pages/entry/index-amp.tsx b/src/common/pages/entry/index-amp.tsx
index 8f3f99fe54f..a87c74ef315 100644
--- a/src/common/pages/entry/index-amp.tsx
+++ b/src/common/pages/entry/index-amp.tsx
@@ -138,7 +138,7 @@ const EntryAmpComponent = (props: Props) => {
       setIsComment(!!entry.parent_author);
       setIsOwnEntry(props.activeUser?.username === entry.author);
       setIsMuted(!!entry.stats?.gray && entry.net_rshares >= 0 && entry.author_reputation >= 0);
-      setIsHidden(entry?.net_rshares < -7000000000 && entry?.active_votes.length > 3); // 1000 HP
+      setIsHidden(entry?.net_rshares < -7000000000 && entry?.active_votes?.length > 3); // 1000 HP
       setIsLowReputation(
         !!entry.stats?.gray && entry.net_rshares >= 0 && entry.author_reputation < 0
       );
diff --git a/src/common/pages/entry/index.tsx b/src/common/pages/entry/index.tsx
index 21de1afe3f0..e28f1b95cd5 100644
--- a/src/common/pages/entry/index.tsx
+++ b/src/common/pages/entry/index.tsx
@@ -165,7 +165,7 @@ const EntryComponent = (props: Props) => {
       setIsComment(!!entry.parent_author);
       setIsOwnEntry(props.activeUser?.username === entry.author);
       setIsMuted(!!entry.stats?.gray && entry.net_rshares >= 0 && entry.author_reputation >= 0);
-      setIsHidden(entry?.net_rshares < -7000000000 && entry?.active_votes.length > 3); // 1000 HP
+      setIsHidden(entry?.net_rshares < -7000000000 && entry?.active_votes?.length > 3); // 1000 HP
       setIsLowReputation(
         !!entry.stats?.gray && entry.net_rshares >= 0 && entry.author_reputation < 0
       );
diff --git a/src/common/pages/submit/api/publish.ts b/src/common/pages/submit/api/publish.ts
index 35735fe0d82..9b6169634a5 100644
--- a/src/common/pages/submit/api/publish.ts
+++ b/src/common/pages/submit/api/publish.ts
@@ -77,7 +77,7 @@ export function usePublishApi(history: History, onClear: () => void) {
         c = await bridgeApi.getPostHeader(author, permlink);
       } catch (e) {}
 
-      if (c && c.author && !isThreespeak && speakPermlink === "") {
+      if (c && c.author) {
         // create permlink with random suffix
         permlink = createPermlink(title, true);
       }
@@ -105,6 +105,10 @@ export function usePublishApi(history: History, onClear: () => void) {
         permlink = speakPermlink;
         // update speak video with title, body and tags
         await updateSpeakVideoInfo(activeUser.username, body, videoId, title, tags, isNsfw);
+
+        // set specific metadata for 3speak
+        jsonMeta.app = "3speak/0.3.0";
+        jsonMeta.type = "video";
       }
 
       const options = makeCommentOptions(author, permlink, reward, beneficiaries);
diff --git a/src/common/pages/submit/api/update.ts b/src/common/pages/submit/api/update.ts
index da5d13a1ae5..4ea9a100bab 100644
--- a/src/common/pages/submit/api/update.ts
+++ b/src/common/pages/submit/api/update.ts
@@ -18,14 +18,7 @@ import { EntriesCacheContext } from "../../../core";
 export function useUpdateApi(history: History, onClear: () => void) {
   const { activeUser } = useMappedStore();
 
-  const {
-    videoId,
-    is3Speak: isThreespeak,
-    speakPermlink,
-    speakAuthor,
-    isNsfw,
-    videoMetadata
-  } = useThreeSpeakManager();
+  const { videoMetadata } = useThreeSpeakManager();
 
   const { updateCache } = useContext(EntriesCacheContext);
 
diff --git a/src/common/pages/submit/hooks/body-versioning-manager.tsx b/src/common/pages/submit/hooks/body-versioning-manager.tsx
new file mode 100644
index 00000000000..090577d10e1
--- /dev/null
+++ b/src/common/pages/submit/hooks/body-versioning-manager.tsx
@@ -0,0 +1,115 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import md5 from "js-md5";
+
+const BUFFER_SIZE = 100;
+
+interface QueueItem {
+  value: string;
+  hash: string;
+  metadata: Record<string, unknown>;
+  status: "restored" | "new";
+}
+
+export const BodyContext = createContext<{
+  body: string;
+  activeQueueItem?: QueueItem;
+  setBody: (value: string) => void;
+  updateMetadata: (value: Record<string, unknown>) => void;
+}>({
+  body: "",
+  setBody: () => {},
+  updateMetadata: () => {}
+});
+
+export function useBodyVersioningManager(onVersionChange?: (value: QueueItem) => void) {
+  const context = useContext(BodyContext);
+
+  useEffect(() => {
+    if (context.activeQueueItem?.status === "restored") {
+      onVersionChange?.(context.activeQueueItem);
+    }
+  }, [context.activeQueueItem]);
+
+  return context;
+}
+
+/**
+ * Body versioning manager is a queue of all body changes
+ *
+ * Each queue item could contain additional metadata object
+ * Each body updating causes queue updating but if queue contains the same state then it will be restored
+ *
+ * Use cases:
+ * 1. If user added the video which contains metadata information and has removed it wrongly
+ *    then he will do UNDO operation. In that case We may restore video metadata easily from the queue
+ *
+ * @note Active user changing causes queue clearing due to security reasons
+ * @note Active queue item is the last queue item
+ */
+export function BodyVersioningManager({ children }: PropsWithChildren<unknown>) {
+  const [rawBody, setRawBody] = useState("");
+
+  const [historyQueue, setHistoryQueue] = useState<QueueItem[]>([]);
+  const activeQueueItem = useRef<QueueItem>({
+    value: "",
+    hash: "",
+    metadata: {},
+    status: "new"
+  });
+
+  useEffect(() => {
+    const hash = md5(rawBody);
+    const existingState = historyQueue.find((x) => x.hash === hash);
+
+    const nextItem: QueueItem = {
+      value: rawBody,
+      hash,
+      metadata: activeQueueItem.current.metadata,
+      status: "new"
+    };
+    if (existingState) {
+      nextItem.status = "restored";
+      nextItem.metadata = JSON.parse(JSON.stringify(existingState.metadata));
+    }
+    setHistoryQueue([...historyQueue, nextItem]);
+    activeQueueItem.current = nextItem;
+  }, [rawBody]);
+
+  useEffect(() => {
+    if (historyQueue.length > BUFFER_SIZE) {
+      const temp = [...historyQueue];
+      temp.shift();
+      setHistoryQueue(temp);
+    }
+  }, [historyQueue]);
+
+  const updateMetadata = (metadata: Record<string, unknown>) => {
+    activeQueueItem.current = {
+      ...activeQueueItem.current,
+      metadata: {
+        ...activeQueueItem.current.metadata,
+        ...metadata
+      }
+    };
+  };
+
+  return (
+    <BodyContext.Provider
+      value={{
+        body: rawBody,
+        activeQueueItem: activeQueueItem.current,
+        setBody: setRawBody,
+        updateMetadata
+      }}
+    >
+      {children}
+    </BodyContext.Provider>
+  );
+}
diff --git a/src/common/pages/submit/hooks/index.ts b/src/common/pages/submit/hooks/index.ts
index 169e1b8deda..aec3f531c08 100644
--- a/src/common/pages/submit/hooks/index.ts
+++ b/src/common/pages/submit/hooks/index.ts
@@ -5,3 +5,4 @@ export * from "./community-detector";
 export * from "./entry-detector";
 export * from "./api-draft-detector";
 export * from "./three-speak-manager";
+export * from "./body-versioning-manager";
diff --git a/src/common/pages/submit/hooks/three-speak-manager.tsx b/src/common/pages/submit/hooks/three-speak-manager.tsx
index 44876b54617..c11eb585edf 100644
--- a/src/common/pages/submit/hooks/three-speak-manager.tsx
+++ b/src/common/pages/submit/hooks/three-speak-manager.tsx
@@ -1,7 +1,8 @@
-import React, { createContext, ReactNode, useContext, useState } from "react";
+import React, { createContext, ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import { ThreeSpeakVideo } from "../../../api/threespeak";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { PREFIX } from "../../../util/local-storage";
+import { useBodyVersioningManager } from "./body-versioning-manager";
 
 export interface ThreeSpeakManagerContext {
   clear: () => void;
@@ -19,9 +20,14 @@ export interface ThreeSpeakManagerContext {
   setVideoMetadata: (videoMetadata?: ThreeSpeakVideo) => void;
   isEditing: boolean;
   setIsEditing: (v: boolean) => void;
-}
 
-export interface ThreeSpeakManagerRef extends ThreeSpeakManagerContext {}
+  // getters
+  hasUnpublishedVideo: boolean;
+
+  // funcs
+  has3SpeakVideo: (body: string) => boolean;
+  findAndClearUnpublished3SpeakVideo: (body: string) => void;
+}
 
 export const ThreeSpeakVideoContext = createContext<ThreeSpeakManagerContext>({
   is3Speak: false,
@@ -38,22 +44,106 @@ export const ThreeSpeakVideoContext = createContext<ThreeSpeakManagerContext>({
   setVideoMetadata: () => {},
   clear: () => {},
   isEditing: false,
-  setIsEditing: () => {}
+  setIsEditing: () => {},
+  hasUnpublishedVideo: false,
+  has3SpeakVideo: () => false,
+  findAndClearUnpublished3SpeakVideo: () => {}
 });
 
 export function useThreeSpeakManager() {
   return useContext(ThreeSpeakVideoContext);
 }
 
+const THREE_SPEAK_VIDEO_PATTERN =
+  /\[!\[\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs.*\)\]\(https:\/\/3speak\.tv\/watch\?.*\)\[Source\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs\/(.*)\)/g;
+
 export function ThreeSpeakManager(props: { children: ReactNode }) {
-  const [is3Speak, setIs3Speak] = useLocalStorage(PREFIX + "_sa_3s", false);
-  const [videoId, setVideoId] = useLocalStorage(PREFIX + "_sa_3s_vid", "");
-  const [speakPermlink, setSpeakPermlink] = useLocalStorage(PREFIX + "_sa_3s_p", "");
-  const [speakAuthor, setSpeakAuthor] = useLocalStorage(PREFIX + "_sa_3s_a", "");
-  const [isNsfw, setIsNsfw] = useLocalStorage(PREFIX + "_sa_3s_n", false);
-  const [videoMetadata, setVideoMetadata] = useLocalStorage<ThreeSpeakVideo>(PREFIX + "_sa_3s_vm");
+  const [is3Speak, setIs3Speak, clearIs3Speak] = useLocalStorage(PREFIX + "_sa_3s", false);
+  const [videoId, setVideoId, clearVideoId] = useLocalStorage(PREFIX + "_sa_3s_vid", "");
+  const [speakPermlink, setSpeakPermlink, clearSpeakPermlink] = useLocalStorage(
+    PREFIX + "_sa_3s_p",
+    ""
+  );
+  const [speakAuthor, setSpeakAuthor, clearSpeakAuthor] = useLocalStorage(PREFIX + "_sa_3s_a", "");
+  const [isNsfw, setIsNsfw, clearIsNsfw] = useLocalStorage(PREFIX + "_sa_3s_n", false);
+  const [videoMetadata, setVideoMetadata, clearVideoMetadata] = useLocalStorage<ThreeSpeakVideo>(
+    PREFIX + "_sa_3s_vm"
+  );
   const [isEditing, setIsEditing] = useState(false);
 
+  const hasUnpublishedVideo = useMemo(
+    () => (videoMetadata ? videoMetadata.status !== "published" : false),
+    [videoMetadata]
+  );
+
+  const bodyManager = useBodyVersioningManager(({ metadata }) => {
+    const { videoMetadata } = metadata as {
+      videoMetadata: {
+        videoMetadata: ThreeSpeakVideo;
+        is3Speak: boolean;
+        isNsfw: boolean;
+        videoId: string;
+        speakPermlink: string;
+        speakAuthor: string;
+      };
+    };
+
+    if (videoMetadata) {
+      setVideoMetadata(videoMetadata.videoMetadata);
+      setIs3Speak(videoMetadata.is3Speak);
+      setVideoId(videoMetadata.videoId);
+      setSpeakPermlink(videoMetadata.speakPermlink);
+      setSpeakAuthor(videoMetadata.speakAuthor);
+      setIsNsfw(videoMetadata.isNsfw);
+    }
+  });
+
+  useEffect(() => {
+    bodyManager.updateMetadata({
+      videoMetadata: {
+        is3Speak,
+        videoId,
+        speakPermlink,
+        speakAuthor,
+        isNsfw,
+        videoMetadata
+      }
+    });
+  }, [speakAuthor]);
+
+  const has3SpeakVideo = (body: string) => {
+    const groups = body.matchAll(THREE_SPEAK_VIDEO_PATTERN);
+    let has = false;
+    for (const group of groups) {
+      const match = group[1];
+
+      has = `ipfs://${match}` === videoMetadata?.filename;
+    }
+
+    return has;
+  };
+
+  const findAndClearUnpublished3SpeakVideo = (body: string) => {
+    const groups = body.matchAll(THREE_SPEAK_VIDEO_PATTERN);
+    for (const group of groups) {
+      const match = group[1];
+
+      /// <center>[![](https://ipfs-3speak.b-cdn.net/ipfs/bafkreic3bnsxobtm2va6j3i6v44gc2p2wazi4iuiqqci23tdt7eba5ad5e)](https://3speak.tv/watch?v=demo.com/meohyozpiu)[Source](https://ipfs-3speak.b-cdn.net/ipfs/QmUu28DUQ6wQpH8sFt5pVb3ZDfnvib67BUdtyE8uD4p64j)</center>
+      // Has unpublished video
+      if (`ipfs://${match}` === videoMetadata?.filename && videoMetadata?.status !== "published") {
+        body.replace(
+          new RegExp(
+            `\[!\[\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs\/${videoMetadata?.thumbnail.replace(
+              "ipfs://",
+              ""
+            )}\)\]\(https:\/\/3speak\.tv\/watch\?.*\)\[Source\]\(https:\/\/ipfs-3speak\.b-cdn\.net\/ipfs\/${match}\)`
+          ),
+          ""
+        );
+      }
+    }
+  };
+
   return (
     <ThreeSpeakVideoContext.Provider
       value={{
@@ -71,14 +161,17 @@ export function ThreeSpeakManager(props: { children: ReactNode }) {
         setVideoMetadata,
         isEditing,
         setIsEditing,
+        hasUnpublishedVideo,
+        has3SpeakVideo,
+        findAndClearUnpublished3SpeakVideo,
 
         clear: () => {
-          setIs3Speak(false);
-          setVideoId("");
-          setSpeakPermlink("");
-          setSpeakAuthor("");
-          setIsNsfw(false);
-          setVideoMetadata(undefined);
+          clearIs3Speak();
+          clearIsNsfw();
+          clearVideoId();
+          clearVideoMetadata();
+          clearSpeakPermlink();
+          clearSpeakAuthor();
         }
       }}
     >
diff --git a/src/common/pages/submit/index.tsx b/src/common/pages/submit/index.tsx
index 1bf5bfb6d34..7572b341641 100644
--- a/src/common/pages/submit/index.tsx
+++ b/src/common/pages/submit/index.tsx
@@ -5,9 +5,11 @@ import { MatchType, PostBase, VideoProps } from "./types";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
 import { extractMetaData } from "../../helper/posting";
 import {
+  BodyVersioningManager,
   ThreeSpeakManager,
   useAdvancedManager,
   useApiDraftDetector,
+  useBodyVersioningManager,
   useCommunityDetector,
   useEntryDetector,
   useLocalDraftManager,
@@ -63,13 +65,14 @@ interface MatchProps {
 export function Submit(props: PageProps & MatchProps) {
   const postBodyRef = useRef<HTMLDivElement | null>(null);
   const threeSpeakManager = useThreeSpeakManager();
+  const { body, setBody } = useBodyVersioningManager();
+  const previousBody = usePrevious(body);
 
   const { activeUser } = useMappedStore();
   const previousActiveUser = usePrevious(activeUser);
 
   const [title, setTitle] = useState("");
   const [tags, setTags] = useState<string[]>([]);
-  const [body, setBody] = useState("");
   const [selectionTouched, setSelectionTouched] = useState(false);
   const [thumbnails, setThumbnails] = useState<string[]>([]);
   const [selectedThumbnail, setSelectedThumbnail, removeThumbnail] = useLocalStorage<string>(
@@ -144,7 +147,7 @@ export function Submit(props: PageProps & MatchProps) {
       setTags(
         draft.tags
           .trim()
-          .split(",")
+          .split(/[ ,]+/)
           .filter((t) => !!t)
       );
       setBody(draft.body);
@@ -204,6 +207,9 @@ export function Submit(props: PageProps & MatchProps) {
     if (activeUser?.username !== previousActiveUser?.username && activeUser) {
       // delete active user from beneficiaries list
       setBeneficiaries(beneficiaries.filter((x) => x.account !== activeUser.username));
+
+      // clear not current user videos
+      threeSpeakManager.findAndClearUnpublished3SpeakVideo(body);
     }
   }, [activeUser]);
 
@@ -219,6 +225,13 @@ export function Submit(props: PageProps & MatchProps) {
     updatePreview();
   }, [title, body, tags]);
 
+  useEffect(() => {
+    if (!threeSpeakManager.has3SpeakVideo(body) && !!previousBody) {
+      threeSpeakManager.clear();
+      console.log("clearing 3speak");
+    }
+  }, [body]);
+
   const updatePreview = (): void => {
     if (_updateTimer) {
       clearTimeout(_updateTimer);
@@ -423,9 +436,9 @@ export function Submit(props: PageProps & MatchProps) {
               as="textarea"
               placeholder={_t("submit.body-placeholder")}
               value={body && body.length > 0 ? body : preview.body}
-              onChange={(e: { target: { value: React.SetStateAction<string> } }) =>
-                setBody(e.target.value)
-              }
+              onChange={(e: { target: { value: string } }) => {
+                setBody(e.target.value);
+              }}
               disableRows={true}
               maxrows={100}
               spellCheck={true}
@@ -711,7 +724,7 @@ export function Submit(props: PageProps & MatchProps) {
                     </Form.Group>
                     {editingEntry === null && (
                       <>
-                        {props.global.usePrivate && (
+                        {props.global.usePrivate && !threeSpeakManager.hasUnpublishedVideo && (
                           <Form.Group as={Row}>
                             <Form.Label column={true} sm="3">
                               {_t("submit.schedule")}
@@ -818,9 +831,11 @@ export function Submit(props: PageProps & MatchProps) {
 
 const SubmitWithProviders = (props: PageProps & MatchProps) => {
   return (
-    <ThreeSpeakManager>
-      <Submit {...props} />
-    </ThreeSpeakManager>
+    <BodyVersioningManager>
+      <ThreeSpeakManager>
+        <Submit {...props} />
+      </ThreeSpeakManager>
+    </BodyVersioningManager>
   );
 };
 
diff --git a/src/desktop/app/components/navbar/index.tsx b/src/desktop/app/components/navbar/index.tsx
index d66fd1cedbe..96485cdcc91 100644
--- a/src/desktop/app/components/navbar/index.tsx
+++ b/src/desktop/app/components/navbar/index.tsx
@@ -15,15 +15,14 @@ import { TrendingTags } from "../../../../common/store/trending-tags/types";
 import { Account } from "../../../../common/store/accounts/types";
 import { User } from "../../../../common/store/users/types";
 import { ActiveUser } from "../../../../common/store/active-user/types";
-import { UI, ToggleType } from "../../../../common/store/ui/types";
+import { ToggleType, UI } from "../../../../common/store/ui/types";
 import { NotificationFilter, Notifications } from "../../../../common/store/notifications/types";
 import { DynamicProps } from "../../../../common/store/dynamic-props/types";
 
 import ToolTip from "../../../../common/components/tooltip";
 import Login from "../../../../common/components/login";
-import UserNav from "../../../../common/components/user-nav";
+import { UserNav } from "../../../../common/components/user-nav";
 import DropDown from "../../../../common/components/dropdown";
-import SearchSuggester from "../../../../common/components/search-suggester";
 import Updater from "../updater";
 import SwitchLang from "../../../../common/components/switch-lang";
 
@@ -40,27 +39,25 @@ import routes from "../../../../common/routes";
 import { version } from "../../../package.json";
 
 import {
-  brightnessSvg,
-  pencilOutlineSvg,
   arrowLeftSvg,
   arrowRightSvg,
-  refreshSvg,
-  magnifySvg,
+  brightnessSvg,
   dotsHorizontal,
-  translateSvg
+  magnifySvg,
+  pencilOutlineSvg,
+  refreshSvg
 } from "../../../../common/img/svg";
 import isElectron from "../../../../common/util/is-electron";
 import "./_index.scss";
-
-// why "require" instead "import" ? see: https://github.com/ReactTraining/react-router/issues/6203
-
-const pathToRegexp = require("path-to-regexp");
 import isCommunity from "../../../../common/helper/is-community";
-import { NotifyTypes } from "../../../../common/enums";
 import {
   setNotificationsSettingsItem,
   updateNotificationsSettings
 } from "../../../../common/store/notifications";
+
+// why "require" instead "import" ? see: https://github.com/ReactTraining/react-router/issues/6203
+
+const pathToRegexp = require("path-to-regexp");
 const logo = "./img/logo-circle.svg";
 
 interface AddressBarProps {
diff --git a/src/server/handlers/entry.tsx b/src/server/handlers/entry.tsx
index 69af07e179a..6ebfe00e771 100644
--- a/src/server/handlers/entry.tsx
+++ b/src/server/handlers/entry.tsx
@@ -43,7 +43,7 @@ export default async (req: Request, res: Response) => {
   let entries = {};
 
   if (entry) {
-    if (dmca.some((rx: string) => new RegExp(rx).test(`${entry?.author}/${entry?.permlink}`))) {
+    if (dmca.some((rx: string) => new RegExp(rx).test(`@${entry?.author}/${entry?.permlink}`))) {
       entry.body = "This post is not available due to a copyright/fraudulent claim.";
       entry.title = "";
     }
diff --git a/src/server/services/amp-pages.ts b/src/server/services/amp-pages.ts
index f4c65f258a3..5e7a7faecb6 100644
--- a/src/server/services/amp-pages.ts
+++ b/src/server/services/amp-pages.ts
@@ -29,6 +29,7 @@ export async function getAsAMP(
   try {
     const cache = await redis.get(identifier);
     if (cache && !forceRender) {
+      await client.disconnect();
       return cache;
     }
   } catch (e) {
@@ -63,5 +64,6 @@ export async function getAsAMP(
     console.error(e);
     console.error("Redis is unavailable. AMP caches ignoring");
   }
+  await client.disconnect();
   return ampResult;
 }
diff --git a/yarn.lock b/yarn.lock
index b8cbfb470d5..50a5291d617 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1327,10 +1327,10 @@
     xmldom "^0.5.0"
     xss "^1.0.8"
 
-"@ecency/render-helper@^2.2.25":
-  version "2.2.25"
-  resolved "https://registry.yarnpkg.com/@ecency/render-helper/-/render-helper-2.2.25.tgz#a5244b0cf603a412d5d4d02c6c7ac7c3ea800030"
-  integrity sha512-aWfGKH8toNYXd00aCHS7i1Xwtej17Wind57rf9kJ92ycUP2E6t7mLIBRna4Y7O6HBuXL8BHPZRH+rol37BMUpg==
+"@ecency/render-helper@^2.2.26":
+  version "2.2.26"
+  resolved "https://registry.yarnpkg.com/@ecency/render-helper/-/render-helper-2.2.26.tgz#9bc98d09e5dd35e70c3e0699eb40883fae4ab296"
+  integrity sha512-ahrJ5u2J0HMEJy0wYWDNixvpV70CHnj/uGcUvmipaJ22y6WJ7qUkLZI8aj0CK9DzY9DcP8Lzx1NWT/DLdCuZJw==
   dependencies:
     he "^1.2.0"
     lolight "^1.4.0"
@@ -1344,6 +1344,11 @@
     xmldom "^0.5.0"
     xss "^1.0.9"
 
+"@emoji-mart/data@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
+  integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
+
 "@firebase/analytics@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.8.0.tgz#b5d595082f57d33842b1fd9025d88f83065e87fe"
@@ -2020,6 +2025,11 @@
   resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"
   integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A==
 
+"@types/dom-mediacapture-record@^1.0.16":
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.16.tgz#8a37eaa32c1810519843c6406325bb78618d1daf"
+  integrity sha512-GB4f8Es3aTEUjDT3ojQ8IWUhb6f5tlUoxvVw65ppkImG09QRRys6V6t56uLAynZCD3LisMQDuVObOKnnllDtCQ==
+
 "@types/express-serve-static-core@^4.17.18":
   version "4.17.24"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.24.tgz#ea41f93bf7e0d59cd5a76665068ed6aab6815c07"
@@ -5148,6 +5158,11 @@ emittery@^0.7.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
   integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
 
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"

From b3144d7d1f6d384a4288b18476103dda2cf34436 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 13 Sep 2023 18:34:05 +0500
Subject: [PATCH 065/179] Fix errors

---
 src/common/components/navbar/index.tsx        | 2 +-
 src/common/components/user-nav/_index.scss    | 3 ---
 src/common/components/user-nav/index.spec.tsx | 2 +-
 src/desktop/app/components/navbar/index.tsx   | 2 +-
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index b16c3cb2a93..e778c821fe6 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -9,7 +9,7 @@ import SwitchLang from "../switch-lang";
 import ToolTip from "../tooltip";
 import Search from "../search";
 import Login from "../login";
-import { UserNav } from "../user-nav";
+import UserNav from "../user-nav";
 import UserNotifications from "../notifications";
 import Gallery from "../gallery";
 import Drafts from "../drafts";
diff --git a/src/common/components/user-nav/_index.scss b/src/common/components/user-nav/_index.scss
index 2ef2fed069c..e80d67a2447 100644
--- a/src/common/components/user-nav/_index.scss
+++ b/src/common/components/user-nav/_index.scss
@@ -118,9 +118,6 @@
       background: $dark-two;
     }
 
-    .label {
-    }
-
     .power {
       display: flex;
 
diff --git a/src/common/components/user-nav/index.spec.tsx b/src/common/components/user-nav/index.spec.tsx
index 4c2860423b9..25a861501f1 100644
--- a/src/common/components/user-nav/index.spec.tsx
+++ b/src/common/components/user-nav/index.spec.tsx
@@ -3,7 +3,7 @@ import { StaticRouter } from "react-router-dom";
 
 import { createBrowserHistory, createLocation } from "history";
 
-import { UserNav } from "./index";
+import UserNav from "./index";
 
 import {
   dynamicPropsIntance1,
diff --git a/src/desktop/app/components/navbar/index.tsx b/src/desktop/app/components/navbar/index.tsx
index 96485cdcc91..f7ccdacb252 100644
--- a/src/desktop/app/components/navbar/index.tsx
+++ b/src/desktop/app/components/navbar/index.tsx
@@ -21,7 +21,7 @@ import { DynamicProps } from "../../../../common/store/dynamic-props/types";
 
 import ToolTip from "../../../../common/components/tooltip";
 import Login from "../../../../common/components/login";
-import { UserNav } from "../../../../common/components/user-nav";
+import UserNav from "../../../../common/components/user-nav";
 import DropDown from "../../../../common/components/dropdown";
 import Updater from "../updater";
 import SwitchLang from "../../../../common/components/switch-lang";

From f9802bde8776d8956a2d93da50207e5e8588d8f7 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 13 Sep 2023 18:55:54 +0500
Subject: [PATCH 066/179] Snapshot update

---
 .../__snapshots__/index.spec.tsx.snap         | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/common/components/user-nav/__snapshots__/index.spec.tsx.snap b/src/common/components/user-nav/__snapshots__/index.spec.tsx.snap
index 308801eca8e..ab313809a10 100644
--- a/src/common/components/user-nav/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/user-nav/__snapshots__/index.spec.tsx.snap
@@ -58,6 +58,31 @@ exports[`(1) Default render 1`] = `
       />
     </svg>
   </span>
+  <a
+    href="/chats"
+    onClick={[Function]}
+    title="Chats"
+  >
+    <span
+      className="chats"
+    >
+      <svg
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+        />
+      </svg>
+    </span>
+  </a>
   <div
     className="custom-dropdown float-right"
     onClick={[Function]}
@@ -135,6 +160,31 @@ exports[`(2) Has rewards  1`] = `
       />
     </svg>
   </span>
+  <a
+    href="/chats"
+    onClick={[Function]}
+    title="Chats"
+  >
+    <span
+      className="chats"
+    >
+      <svg
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+        />
+      </svg>
+    </span>
+  </a>
   <div
     className="custom-dropdown float-right"
     onClick={[Function]}
@@ -212,6 +262,31 @@ exports[`(3) usePrivate = false 1`] = `
       />
     </svg>
   </span>
+  <a
+    href="/chats"
+    onClick={[Function]}
+    title="Chats"
+  >
+    <span
+      className="chats"
+    >
+      <svg
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+        />
+      </svg>
+    </span>
+  </a>
   <div
     className="custom-dropdown float-right"
     onClick={[Function]}

From b545c8fe9e849367b71744c6667dac4f0711d202 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 14 Sep 2023 12:11:30 +0500
Subject: [PATCH 067/179] Add Some other states in Context and used in
 components

---
 src/common/app.tsx                            |   2 +-
 .../chats/chat-context-provider.tsx           |  57 ++++++-
 .../components/chats/chat-popup/index.tsx     |  68 +--------
 .../chats/chats-channel-messages/index.scss   |  13 +-
 .../chats/chats-channel-messages/index.tsx    |  58 +++++---
 .../components/chats/join-chat/index.tsx      |  38 ++---
 .../chats/join-community-chat-btn/index.tsx   |  81 ++--------
 .../components/community-cover/index.tsx      |   6 +-
 src/common/helper/message-service.ts          |  20 ---
 src/common/pages/chats/index.tsx              |   2 +-
 src/common/pages/community-functional.tsx     | 140 ++++++------------
 11 files changed, 175 insertions(+), 310 deletions(-)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 94aaa913874..d8e586a8a8d 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -103,7 +103,7 @@ const App = (props: any) => {
       {/*<ReactQueryDevtools initialIsOpen={false} />*/}
       <Tracker />
       <UserActivityRecorder />
-      <ChatContextProvider>
+      <ChatContextProvider {...props}>
         <Switch>
           <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
           <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 87d3e91c869..adc908d3d33 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -3,7 +3,14 @@ import { Keys } from "../../../managers/message-manager-types";
 import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
-import { getPrivateKey, getUserChatPublicKey } from "./utils";
+import {
+  createNoStrAccount,
+  getPrivateKey,
+  getUserChatPublicKey,
+  setProfileMetaData
+} from "./utils";
+import * as ls from "../../util/local-storage";
+import { setNostrkeys } from "../../../managers/message-manager";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -12,6 +19,7 @@ interface Context {
   chatPrivKey: string;
   receiverPubKey: string;
   messageServiceInstance: MessageService | undefined;
+  hasUserJoinedChat: boolean;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
@@ -19,10 +27,12 @@ interface Context {
   setReceiverPubKey: (key: string) => void;
   setMessageServiceInstance: (instance: MessageService | undefined) => void;
   initMessageServiceInstance: (keys: Keys) => void;
+  joinChat: () => void;
 }
 
 interface Props {
   children: JSX.Element | JSX.Element[];
+  resetChat: () => void;
 }
 
 export const ChatContext = React.createContext<Context>({
@@ -32,16 +42,18 @@ export const ChatContext = React.createContext<Context>({
   chatPrivKey: "",
   receiverPubKey: "",
   messageServiceInstance: undefined,
+  hasUserJoinedChat: false,
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
   setChatPrivKey: () => {},
   setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
   setMessageServiceInstance: () => {},
-  initMessageServiceInstance: () => {}
+  initMessageServiceInstance: () => {},
+  joinChat: () => {}
 });
 
-export default function ChatContextProvider({ children }: Props) {
+export default function ChatContextProvider(props: Props) {
   const { activeUser } = useMappedStore();
 
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: " ", priv: "" });
@@ -52,11 +64,30 @@ export default function ChatContextProvider({ children }: Props) {
   const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | undefined>(
     undefined
   );
+  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
+  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
   useEffect(() => {
     getActiveUserKeys();
   }, []);
 
+  useEffect(() => {
+    if (messageServiceInstance) {
+      getActiveUserKeys();
+      setShouldUpdateProfile(false);
+    }
+  }, [messageServiceInstance]);
+
+  useEffect(() => {
+    if (shouldUpdateProfile && messageServiceInstance) {
+      messageServiceInstance.updateProfile({
+        name: activeUser?.username!,
+        about: "",
+        picture: ""
+      });
+    }
+  }, [shouldUpdateProfile, messageServiceInstance]);
+
   useEffect(() => {
     if (showSpinner) {
       setTimeout(() => {
@@ -68,6 +99,7 @@ export default function ChatContextProvider({ children }: Props) {
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
     const privKey = getPrivateKey(activeUser?.username!);
+    setHasUserJoinedChat(!!pubKey);
     setChatPrivKey(privKey);
     const activeUserKeys = {
       pub: pubKey,
@@ -91,6 +123,19 @@ export default function ChatContextProvider({ children }: Props) {
     return newMessageService;
   };
 
+  const joinChat = async () => {
+    const { resetChat } = props;
+    resetChat();
+    const keys = createNoStrAccount();
+    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+    await setProfileMetaData(activeUser, keys.pub);
+    setHasUserJoinedChat(true);
+    setNostrkeys(keys);
+    setChatPrivKey(keys.priv);
+    setShouldUpdateProfile(true);
+    setActiveUserKeys(keys);
+  };
+
   return (
     <ChatContext.Provider
       value={{
@@ -100,16 +145,18 @@ export default function ChatContextProvider({ children }: Props) {
         receiverPubKey,
         chatPrivKey,
         messageServiceInstance,
+        hasUserJoinedChat,
         setRevealPrivKey,
         setShowSpinner,
         setChatPrivKey,
         setActiveUserKeys,
         setReceiverPubKey,
         setMessageServiceInstance,
-        initMessageServiceInstance
+        initMessageServiceInstance,
+        joinChat
       }}
     >
-      {children}
+      {props.children}
     </ChatContext.Provider>
   );
 }
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 0f83e3e06d1..70b532709ed 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -84,14 +84,6 @@ interface Props {
   deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
-export const profileUpdater = (messageServiceInstance: MessageService) => {
-  const detail = {
-    messageServiceInstance
-  };
-  const ev = new CustomEvent("profileUpdater", { detail });
-  window.dispatchEvent(ev);
-};
-
 export default function ChatPopUp(props: Props) {
   const { activeUser, global, chat } = useMappedStore();
 
@@ -100,15 +92,11 @@ export default function ChatPopUp(props: Props) {
     revealPrivKey,
     activeUserKeys,
     showSpinner,
+    hasUserJoinedChat,
     setRevealPrivKey,
     setShowSpinner,
-    setActiveUserKeys
+    joinChat
   } = useContext(ChatContext);
-  // const messageServiceContext = useContext(MessageServiceContext);
-
-  // const { messageServiceInstance } = messageServiceContext;
-
-  // console.log("messageServiceInstance chatpop up", messageServiceInstance);
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -120,7 +108,6 @@ export default function ChatPopUp(props: Props) {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
-  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
@@ -141,7 +128,6 @@ export default function ChatPopUp(props: Props) {
   const [noStrPrivKey, setNoStrPrivKey] = useState("");
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [isTop, setIsTop] = useState(false);
-  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [innerWidth, setInnerWidth] = useState(0);
@@ -151,14 +137,6 @@ export default function ChatPopUp(props: Props) {
     console.log("chat in store", chat);
   }, [chat]);
 
-  useEffect(() => {
-    window.addEventListener("profileUpdater", noStrProfileUpdater);
-
-    return () => {
-      window.removeEventListener("profileUpdater", noStrProfileUpdater);
-    };
-  }, []);
-
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
@@ -178,19 +156,12 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     // deleteChatPublicKey(activeUser);
-    fetchProfileData();
     setShow(!!activeUser?.username && !isChatPage);
     const noStrPrivKey = getPrivateKey(activeUser?.username!);
     setNoStrPrivKey(noStrPrivKey);
     setInnerWidth(window.innerWidth);
   }, []);
 
-  useEffect(() => {
-    if (shouldUpdateProfile && messageServiceInstance) {
-      profileUpdater(messageServiceInstance);
-    }
-  }, [shouldUpdateProfile, messageServiceInstance]);
-
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -227,8 +198,7 @@ export default function ChatPopUp(props: Props) {
 
   useEffect(() => {
     if (messageServiceInstance) {
-      setHasUserJoinedChat(true);
-      setShouldUpdateProfile(false);
+      setIsSpinner(false);
       const noStrPrivKey = getPrivateKey(activeUser?.username!);
       setNoStrPrivKey(noStrPrivKey);
     }
@@ -242,7 +212,7 @@ export default function ChatPopUp(props: Props) {
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
     setCommunities(communities);
-    fetchProfileData();
+    // fetchProfileData();
   }, [chat.channels, chat.leftChannelsList]);
 
   useEffect(() => {
@@ -295,7 +265,6 @@ export default function ChatPopUp(props: Props) {
   }, [removedUsers]);
 
   useEffect(() => {
-    fetchProfileData();
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
@@ -369,16 +338,6 @@ export default function ChatPopUp(props: Props) {
     }
   };
 
-  const noStrProfileUpdater = (e: Event) => {
-    const detail = (e as CustomEvent).detail;
-    console.log("detail", detail.messageServiceInstance);
-    detail.messageServiceInstance.updateProfile({
-      name: activeUser?.username!,
-      about: "",
-      picture: ""
-    });
-  };
-
   const fetchCommunity = async () => {
     const community = await getCommunity(communityName, activeUser?.username);
     setCurrentCommunity(community!);
@@ -438,12 +397,6 @@ export default function ChatPopUp(props: Props) {
     setInProgress(false);
   };
 
-  const fetchProfileData = async () => {
-    const profileData = await getProfileMetaData(activeUser?.username!);
-    const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
-    setHasUserJoinedChat(hasNoStrKey);
-  };
-
   const userClicked = (username: string) => {
     setIsCurrentUser(true);
     setCurrentUser(username);
@@ -484,7 +437,6 @@ export default function ChatPopUp(props: Props) {
   };
 
   const scrollerClicked = () => {
-    console.log("Scroller clicked");
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
       behavior: "auto"
@@ -515,18 +467,8 @@ export default function ChatPopUp(props: Props) {
   };
 
   const handleJoinChat = async () => {
-    const { resetChat } = props;
     setIsSpinner(true);
-    resetChat();
-    const keys = createNoStrAccount();
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    setNoStrPrivKey(keys.priv);
-    await setProfileMetaData(activeUser, keys.pub);
-    setHasUserJoinedChat(true);
-    setNostrkeys(keys);
-    setShouldUpdateProfile(true);
-    setActiveUserKeys(keys);
-    setIsSpinner(false);
+    joinChat();
   };
 
   const chatButtonSpinner = (
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 92ea6c119d7..1d46f9692d1 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -62,6 +62,7 @@
 
           &.gif {
             background: none;
+            padding: 0;
             img {
               max-width: 100%;
             }
@@ -69,6 +70,7 @@
 
           &.chat-image {
             background: none;
+            padding: 0;
             img {
               max-width: 100%;
             }
@@ -79,7 +81,14 @@
           max-width: 70% !important;
           word-wrap: break-word;
           padding: 10px;
-          border-radius: 0px 10px 10px;
+          border-radius: 0px 10px 10px 0px;
+        }
+      }
+      &.same-user-msg {
+        margin-left: 4rem;
+        padding-top: 1.5px;
+        .receiver-message-content {
+          // border-radius: 0;
         }
       }
     }
@@ -157,6 +166,7 @@
         }
         &.gif {
           background: none;
+          padding: 0;
           img {
             max-width: 100%;
           }
@@ -164,6 +174,7 @@
 
         &.chat-image {
           background: none;
+          padding: 0;
           img {
             max-width: 100%;
           }
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index cc8a1070dee..e44bc860c85 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -260,8 +260,6 @@ export default function ChatsChannelMessages(props: Props) {
         }
         break;
       case 3:
-        console.log("Current removed users", currentChannel?.removedUserIds);
-        console.log("removedUserId", removedUserId);
         const newUpdatedRemovedUsers =
           currentChannel &&
           currentChannel?.removedUserIds!.filter((item) => item !== removedUserId);
@@ -324,6 +322,16 @@ export default function ChatsChannelMessages(props: Props) {
     return <></>;
   };
 
+  const checkContiguousMessage = (msg: PublicMessage, i: number) => {
+    const prevMsg = publicMessages[i - 1];
+    const msgAuthor = msg.creator;
+    const prevMsgAuthor = prevMsg ? prevMsg.creator : null;
+    if (msgAuthor === prevMsgAuthor) {
+      return true;
+    }
+    return false;
+  };
+
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -331,6 +339,9 @@ export default function ChatsChannelMessages(props: Props) {
           activeUserKeys &&
           publicMessages.map((pMsg, i) => {
             const dayAndMonth = getFormattedDateAndDay(pMsg, i);
+
+            const isSameUserMessage = checkContiguousMessage(pMsg, i);
+
             let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
 
             renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
@@ -436,26 +447,31 @@ export default function ChatsChannelMessages(props: Props) {
                     onMouseEnter={() => setHoveredMessageId(pMsg.id)}
                     onMouseLeave={() => setHoveredMessageId("")}
                   >
-                    <div className="community-user-img">
-                      <OverlayTrigger
-                        trigger="click"
-                        placement="right"
-                        show={clickedMessage === pMsg.id}
-                        overlay={popover}
-                        delay={1000}
-                        onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
-                      >
-                        <span>
-                          <UserAvatar username={name!} size="medium" />
-                        </span>
-                      </OverlayTrigger>
-                    </div>
+                    {!isSameUserMessage && (
+                      <div className="community-user-img">
+                        <OverlayTrigger
+                          trigger="click"
+                          placement="right"
+                          show={clickedMessage === pMsg.id}
+                          overlay={popover}
+                          delay={1000}
+                          onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
+                        >
+                          <span>
+                            <UserAvatar username={name!} size="medium" />
+                          </span>
+                        </OverlayTrigger>
+                      </div>
+                    )}
+
+                    <div className={`user-info ${isSameUserMessage ? "same-user-msg" : ""}`}>
+                      {!isSameUserMessage && (
+                        <p className="user-msg-time">
+                          <span className="username-community">{name}</span>
+                          {formatMessageTime(pMsg.created)}
+                        </p>
+                      )}
 
-                    <div className="user-info">
-                      <p className="user-msg-time">
-                        <span className="username-community">{name}</span>
-                        {formatMessageTime(pMsg.created)}
-                      </p>
                       <div className="receiver-messag">
                         <div
                           className={`receiver-message-content ${isGif ? "gif" : ""} ${
diff --git a/src/common/components/chats/join-chat/index.tsx b/src/common/components/chats/join-chat/index.tsx
index 84e8e047436..b79cbfd204a 100644
--- a/src/common/components/chats/join-chat/index.tsx
+++ b/src/common/components/chats/join-chat/index.tsx
@@ -1,39 +1,21 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button, Spinner } from "react-bootstrap";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
-import { createNoStrAccount, setProfileMetaData } from "../utils";
 
-import * as ls from "../../../util/local-storage";
-import { setNostrkeys } from "../../../../managers/message-manager";
-
-interface Props {
-  resetChat: () => void;
-}
-
-export default function JoinChat(props: Props) {
-  const { messageServiceInstance, setChatPrivKey, setActiveUserKeys } = useContext(ChatContext);
-
-  const { activeUser } = useMappedStore();
+export default function JoinChat() {
+  const { messageServiceInstance, joinChat } = useContext(ChatContext);
 
   const [showSpinner, setShowSpinner] = useState(false);
 
+  useEffect(() => {
+    if (messageServiceInstance) {
+      setShowSpinner(false);
+    }
+  }, [messageServiceInstance]);
+
   const handleJoinChat = async () => {
-    const { resetChat } = props;
     setShowSpinner(true);
-    resetChat();
-    const keys = createNoStrAccount();
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    setChatPrivKey(keys.priv);
-    await setProfileMetaData(activeUser, keys.pub);
-    setNostrkeys(keys);
-    messageServiceInstance?.updateProfile({
-      name: activeUser?.username!,
-      about: "",
-      picture: ""
-    });
-    setActiveUserKeys(keys);
-    setShowSpinner(false);
+    joinChat();
   };
 
   return (
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index a9c1bc17a2e..109791f3800 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -3,76 +3,48 @@ import { Button, Spinner } from "react-bootstrap";
 import { History } from "history";
 
 import { Community, ROLES } from "../../../store/communities/types";
-import { ActiveUser } from "../../../store/active-user/types";
 
 import { _t } from "../../../i18n";
 
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { Channel, communityModerator } from "../../../../managers/message-manager-types";
-import * as ls from "../../../util/local-storage";
-import { setNostrkeys } from "../../../../managers/message-manager";
 import { ChatContext } from "../chat-context-provider";
-import { profileUpdater } from "../chat-popup";
 import { NOSTRKEY } from "../chat-popup/chat-constants";
-import { NostrKeysType } from "../types";
-import {
-  createNoStrAccount,
-  getProfileMetaData,
-  setChannelMetaData,
-  setProfileMetaData
-} from "../utils";
+import { getProfileMetaData, setChannelMetaData } from "../utils";
 
 interface Props {
   history: History;
   community: Community;
-  activeUser: ActiveUser | null;
-  resetChat: () => void;
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
-  const { messageServiceInstance, setShowSpinner } = useContext(ChatContext);
-  const { chat } = useMappedStore();
+  const { messageServiceInstance, activeUserKeys, hasUserJoinedChat, joinChat } =
+    useContext(ChatContext);
+  const { chat, activeUser } = useMappedStore();
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
   const [isChatEnabled, setIsChatEnabled] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel>();
-  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [loadCommunity, setLoadCommunity] = useState(false);
   const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
-  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
   useEffect(() => {
     fetchCommunityProfile();
-    fetchUserProfileData();
   }, [chat.channels, currentChannel, chat.leftChannelsList]);
 
   useEffect(() => {
     fetchCommunityProfile();
-  }, [props.activeUser]);
+  }, [activeUser]);
 
   useEffect(() => {
-    if (activeUserKeys) {
+    if (activeUserKeys && activeUser?.username === props.community.name) {
       getCommunityRoles();
     }
   }, [activeUserKeys]);
 
-  useEffect(() => {
-    if (shouldUpdateProfile && messageServiceInstance) {
-      profileUpdater(messageServiceInstance);
-    }
-  }, [shouldUpdateProfile, messageServiceInstance]);
-
-  useEffect(() => {
-    if (messageServiceInstance && shouldUpdateProfile) {
-      setShouldUpdateProfile(false);
-    }
-  }, [messageServiceInstance]);
-
   useEffect(() => {
     if (messageServiceInstance) {
-      fetchUserProfileData();
       if (loadCommunity) {
         messageServiceInstance?.loadChannel(currentChannel?.id!);
       }
@@ -93,15 +65,6 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCurrentChannel();
   }, [isCommunityChatJoined, props.community, chat.channels, chat.leftChannelsList]);
 
-  const fetchUserProfileData = async () => {
-    const profileData = await getProfileMetaData(props.activeUser?.username!);
-    const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
-    if (hasNoStrKey) {
-      setActiveUserKeys(profileData.nsKey);
-    }
-    setHasUserJoinedChat(hasNoStrKey);
-  };
-
   const fetchCommunityProfile = async () => {
     const communityProfile = await getProfileMetaData(props.community?.name);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty("channel");
@@ -127,7 +90,7 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const getCommunityRoles = async () => {
     let communityTeam: communityModerator[] = [];
-    const { community, activeUser } = props;
+    const { community } = props;
     const ownerData = await getProfileMetaData(community.name);
     const ownerRole = {
       name: activeUser!.username,
@@ -190,10 +153,9 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const joinCommunityChat = () => {
-    console.log("Join community chat", messageServiceInstance);
     if (!hasUserJoinedChat) {
-      setShowSpinner(true);
-      handleJoinChat();
+      setInProgress(true);
+      joinChat();
       setLoadCommunity(true);
       setIsCommunityChatJoined(true);
       return;
@@ -203,14 +165,13 @@ export default function JoinCommunityChatBtn(props: Props) {
         chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
     }
-    setIsCommunityChatJoined(true);
     messageServiceInstance?.loadChannel(currentChannel?.id!);
     setIsCommunityChatJoined(true);
   };
 
   const startCommunityChat = () => {
     if (!hasUserJoinedChat) {
-      handleJoinChat();
+      joinChat();
       setInitiateCommunityChat(true);
       setIsCommunityChatJoined(true);
       return;
@@ -229,33 +190,13 @@ export default function JoinCommunityChatBtn(props: Props) {
     return {};
   };
 
-  const handleJoinChat = async () => {
-    const { resetChat, activeUser } = props;
-    setInProgress(true);
-    const keys = createNoStrAccount();
-    setActiveUserKeys(keys);
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    await setProfileMetaData(props.activeUser, keys.pub);
-    setHasUserJoinedChat(true);
-    setNostrkeys(keys);
-    messageServiceInstance?.updateProfile({
-      name: props.activeUser?.username!,
-      about: "",
-      picture: ""
-    });
-    setInProgress(false);
-    fetchCommunityProfile();
-    resetChat();
-    setShouldUpdateProfile(true);
-  };
-
   const chatButtonSpinner = (
     <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
   );
 
   return (
     <>
-      {props.community.name === props.activeUser?.username ? (
+      {props.community.name === activeUser?.username ? (
         isCommunityChatJoined ? (
           <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
         ) : !isChatEnabled ? (
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 7d973086661..daa411dd7cf 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -139,7 +139,6 @@ interface Props {
   toggleUIProp: (what: ToggleType) => void;
   updateSubscriptions: (list: Subscription[]) => void;
   addAccount: (data: Account) => void;
-  resetChat: () => void;
 }
 
 export class CommunityCover extends Component<Props> {
@@ -206,7 +205,7 @@ export class CommunityCover extends Component<Props> {
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
 
-          <JoinCommunityChatBtn {...this.props} />
+          <JoinCommunityChatBtn community={this.props.community} history={this.props.history} />
         </div>
         {canUpdateCoverImage && (
           <EditCoverImage
@@ -235,8 +234,7 @@ export default (p: Props) => {
     deleteUser: p.deleteUser,
     toggleUIProp: p.toggleUIProp,
     updateSubscriptions: p.updateSubscriptions,
-    addAccount: p.addAccount,
-    resetChat: p.resetChat
+    addAccount: p.addAccount
   };
 
   return <CommunityCover {...props} />;
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 2c54508493d..2867f49274a 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -92,7 +92,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   private async init() {
-    console.log("Init run of message service");
     this.eventQueue = [];
     this.eventQueueFlag = true;
     this.eventQueueBuffer = [];
@@ -574,7 +573,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
         sig: ""
       })
         .then((event) => {
-          console.log("event failed", event);
           if (!event) {
             reject("Couldn't sign event!");
             return;
@@ -805,7 +803,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public close = () => {
-    console.log("Close run");
     this.pool.close(this.readRelays);
     this.removeAllListeners();
   };
@@ -842,20 +839,3 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
 }
 
 export default MessageService;
-
-// export const initMessageService = (keys: Keys): MessageService | undefined => {
-//   if (window.messageService) {
-//     window.messageService.close();
-//     window.messageService = undefined;
-//   }
-
-//   // const { messageServiceInstance, setMessageServiceInstance } = useMessageServiceContext();
-//   // console.log("I have to check this", messageServiceInstance, setMessageServiceInstance);
-
-//   if (keys) {
-//     window.messageService = new MessageService(keys.priv, keys.pub);
-//   }
-//   console.log("raven instance created", window.messageService);
-
-//   return window.messageService;
-// };
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 85b684fc1d6..44c3f9fc9b9 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -100,7 +100,7 @@ export const Chats = (props: Props) => {
               )
             ) : (
               <div className="d-flex justify-content-center align-items-center full-page">
-                <JoinChat {...props} />
+                <JoinChat />
               </div>
             )}
           </>
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 4e5fa2bc9d2..a0d13c87023 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -6,13 +6,8 @@ import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
 import { Channel } from "../../managers/message-manager-types";
 import { usePrevious } from "../util/use-previous";
-import * as ls from "../util/local-storage";
-import {
-  createNoStrAccount,
-  getJoinedCommunities,
-  getProfileMetaData,
-  setProfileMetaData
-} from "../components/chats/utils";
+
+import { getJoinedCommunities } from "../components/chats/utils";
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -20,7 +15,6 @@ import ScrollToTop from "../components/scroll-to-top";
 import Theme from "../components/theme";
 import Feedback from "../components/feedback";
 import defaults from "../constants/defaults.json";
-import { NOSTRKEY } from "../components/chats/chat-popup/chat-constants";
 import CommunitySubscribers from "../components/community-subscribers";
 import CommunityActivities from "../components/community-activities";
 import LinearProgress from "../components/linear-progress";
@@ -46,10 +40,8 @@ import "./community.scss";
 import { Button, Modal } from "react-bootstrap";
 import LoginRequired from "../components/login-required";
 import { useMappedStore } from "../store/use-mapped-store";
-import { setNostrkeys } from "../../managers/message-manager";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
-import { profileUpdater } from "../components/chats/chat-popup";
 import { ChatContext } from "../components/chats/chat-context-provider";
 
 interface MatchParams {
@@ -79,35 +71,18 @@ export const CommunityPage = (props: Props) => {
   const [searchDataLoading, setSearchDataLoading] = useState(getSearchParam().length > 0);
   const [searchData, setSearchData] = useState<SearchResult[]>([]);
   const [isJoinCommunity, setIsJoinCommunity] = useState(false);
-  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(true);
   const [inProgress, setInProgress] = useState(false);
   const [channelId, setChannelId] = useState("");
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [isCommunityAlreadyJoined, setIsCommunityAlreadyJoined] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
+  const [loadCommunity, setLoadCommunity] = useState(false);
 
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
   const chatContext = useContext(ChatContext);
-  const { messageServiceInstance } = chatContext;
-
-  useEffect(() => {
-    fetchUserProfileData();
-  }, [props.activeUser]);
-
-  useEffect(() => {
-    if (shouldUpdateProfile && messageServiceInstance) {
-      profileUpdater(messageServiceInstance);
-    }
-  }, [shouldUpdateProfile, messageServiceInstance]);
-
-  useEffect(() => {
-    if (messageServiceInstance && shouldUpdateProfile) {
-      setShouldUpdateProfile(false);
-    }
-  }, [messageServiceInstance]);
+  const { messageServiceInstance, hasUserJoinedChat, joinChat } = chatContext;
 
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
@@ -119,6 +94,14 @@ export const CommunityPage = (props: Props) => {
     setIsCommunityAlreadyJoined(isAlreadyExists);
   }, [communities]);
 
+  useEffect(() => {
+    if (messageServiceInstance && loadCommunity) {
+      messageServiceInstance?.loadChannel(channelId);
+      setInProgress(false);
+      setIsJoinCommunity(false);
+    }
+  }, [loadCommunity, messageServiceInstance]);
+
   useEffect(() => {
     setIsLoading(true);
 
@@ -227,14 +210,6 @@ export const CommunityPage = (props: Props) => {
     delayedSearch(value);
   };
 
-  const fetchUserProfileData = async () => {
-    if (props.activeUser) {
-      const profileData = await getProfileMetaData(props.activeUser?.username!);
-      const hasNoStrKey = profileData && profileData.hasOwnProperty(NOSTRKEY);
-      setHasUserJoinedChat(hasNoStrKey);
-    }
-  };
-
   const getMetaProps = () => {
     const { filter } = props.match.params;
     const ncount = props.notifications.unread > 0 ? `(${props.notifications.unread}) ` : "";
@@ -257,40 +232,50 @@ export const CommunityPage = (props: Props) => {
     <NavBar {...props} />
   );
 
-  const handleJoinChat = async () => {
-    setInProgress(true);
-    const keys = createNoStrAccount();
-    ls.set(`${props.activeUser?.username}_nsPrivKey`, keys.priv);
-    setNostrkeys(keys);
-    await setProfileMetaData(props.activeUser, keys.pub);
-    setHasUserJoinedChat(true);
-    setInProgress(false);
-    console.log("State has been changed");
-    setShouldUpdateProfile(true);
-  };
-
   const joinCommunityChat = () => {
-    const communityIds = new Set(communities.map((community) => community.id));
-    if (!communityIds.has(channelId)) {
-      const messageService = messageServiceInstance;
-      if (messageService) {
-        const updatedLeftChannelsList = chat.leftChannelsList.filter((x) => x !== channelId);
-        messageService.updateLeftChannelList(updatedLeftChannelsList);
-        messageService.loadChannel(channelId);
-      }
+    if (!hasUserJoinedChat) {
+      setInProgress(true);
+      joinChat();
+      setLoadCommunity(true);
+      return;
     }
-
+    if (chat.leftChannelsList.includes(channelId)) {
+      messageServiceInstance?.updateLeftChannelList(
+        chat.leftChannelsList.filter((x) => x !== channelId)
+      );
+    }
+    messageServiceInstance?.loadChannel(channelId);
     setIsJoinCommunity(false);
   };
 
   const joinCommunityModal = () => {
-    if (hasUserJoinedChat && !isCommunityAlreadyJoined) {
+    if (isCommunityAlreadyJoined) {
+      return (
+        <>
+          <div className="join-chat-header border-bottom">
+            <div className="join-chat-titles">
+              <h4 className="join-chat-main-title"> You have already joined this community</h4>
+            </div>
+          </div>
+          <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "right" }}>
+            <Button
+              variant="outline-primary"
+              className="join-btn"
+              onClick={() => setIsJoinCommunity(false)}
+            >
+              Ok
+            </Button>
+          </p>
+        </>
+      );
+    } else {
       return (
         <>
           <div className="join-community-dialog-header border-bottom">
             <div className="join-community-dialog-titles">
               <h2 className="join-community-main-title">Confirmaton</h2>
             </div>
+            {inProgress && <LinearProgress />}
           </div>
           <div
             className="join-community-dialog-body"
@@ -315,43 +300,6 @@ export const CommunityPage = (props: Props) => {
           </p>
         </>
       );
-    } else {
-      if (isCommunityAlreadyJoined) {
-        return (
-          <>
-            <div className="join-chat-header border-bottom">
-              <div className="join-chat-titles">
-                <h4 className="join-chat-main-title"> You have already joined this community</h4>
-              </div>
-            </div>
-            <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "right" }}>
-              <Button
-                variant="outline-primary"
-                className="join-btn"
-                onClick={() => setIsJoinCommunity(false)}
-              >
-                Ok
-              </Button>
-            </p>
-          </>
-        );
-      } else {
-        return (
-          <>
-            <div className="join-chat-header border-bottom">
-              <div className="join-chat-titles">
-                <h4 className="join-chat-main-title"> Please Join the Chat to Continue</h4>
-              </div>
-            </div>
-            {inProgress && <LinearProgress />}
-            <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "center" }}>
-              <Button className="join-btn" onClick={handleJoinChat}>
-                Join Chat
-              </Button>
-            </p>
-          </>
-        );
-      }
     }
   };
 

From 972baa3ed137a673f789220c315e4342f6b8a084 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 14 Sep 2023 12:53:44 +0500
Subject: [PATCH 068/179] Add resend message functionality for DMs if any
 message failed to sent

---
 .../components/chats/chat-popup/index.tsx     |   1 +
 .../chats/chats-channel-messages/index.tsx    |  38 +--
 .../chats/chats-direct-messages/index.tsx     | 227 ++++++++++--------
 .../chats/chats-messages-view/index.tsx       |  10 +-
 4 files changed, 136 insertions(+), 140 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 70b532709ed..bb6ed52ddd1 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -730,6 +730,7 @@ export default function ChatPopUp(props: Props) {
                           directMessages={directMessagesList}
                           currentUser={currentUser}
                           isScrollToBottom={false}
+                          deleteDirectMessage={props.deleteDirectMessage}
                         />
                       ) : (
                         <ChatsChannelMessages
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index e44bc860c85..a8d6ad09150 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -91,11 +91,6 @@ export default function ChatsChannelMessages(props: Props) {
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
-  // useEffect(() => {
-  //   scrollToBottom();
-  //   console.log("Heloooooooo");
-  // }, [publicMessages]);
-
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -153,22 +148,8 @@ export default function ChatsChannelMessages(props: Props) {
   const sendDM = (name: string, pubkey: string) => {
     if (dmMessage) {
       messageServiceInstance?.sendDirectMessage(pubkey, dmMessage);
-
-      // setIsCurrentUser(true);
-      // setCurrentUser(name);
-      // setIsCommunity(false);
-      // setCommunityName("");
       setClickedMessage("");
       setDmMessage("");
-      // console.log("Message is send to", name);
-      // if (
-      //   receiverPubKey &&
-      //   !props.chat.directContacts.some((contact) => contact.name === currentUser) &&
-      //   isCurrentUser
-      // ) {
-      //   messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
-      // }
-
       if (from && from === CHATPAGE) {
         history?.push(`/chats/@${name}`);
       }
@@ -181,7 +162,6 @@ export default function ChatsChannelMessages(props: Props) {
 
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
-    // .filter((x) => x.parentNode?.nodeName !== "A");
     zoom = mediumZoom(elements);
     setBackground();
   };
@@ -264,7 +244,6 @@ export default function ChatsChannelMessages(props: Props) {
           currentChannel &&
           currentChannel?.removedUserIds!.filter((item) => item !== removedUserId);
 
-        console.log("newUpdatedRemovedUsers", newUpdatedRemovedUsers);
         updatedMetaData.removedUserIds = newUpdatedRemovedUsers;
         break;
       case 4:
@@ -286,21 +265,6 @@ export default function ChatsChannelMessages(props: Props) {
       messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
       currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
       setStep(0);
-      // if (operationType === HIDEMESSAGE) {
-      //   setStep(0);
-      //   setKeyDialog(false);
-      //   fetchCommunityMessages(
-      //     props.chat.publicMessages,
-      //     currentChannel!,
-      //     currentChannel?.hiddenMessageIds
-      //   );
-      //   setHiddenMsgId("");
-      // }
-      // if (operationType === BLOCKUSER || operationType === UNBLOCKUSER) {
-      //   setStep(0);
-      //   setKeyDialog(false);
-      //   setRemovedUserID("");
-      // }
     } catch (err) {
       error(_t("chat.error-updating-community"));
     }
@@ -541,12 +505,14 @@ export default function ChatsChannelMessages(props: Props) {
                           </span>
                         </Tooltip>
                       )}
+
                       <div
                         className={`sender-message-content ${isGif ? "gif" : ""} ${
                           isImage ? "chat-image" : ""
                         }`}
                         dangerouslySetInnerHTML={{ __html: renderedPreview }}
                       />
+
                       {pMsg.sent === 0 && (
                         <span style={{ margin: "10px 0 0 5px" }}>
                           <Spinner animation="border" variant="primary" size="sm" />
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 1337e1c47c6..4e35a767d0b 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -1,28 +1,26 @@
-import React, { useContext, useEffect, useRef } from "react";
-import { DirectMessage } from "../../../../managers/message-manager-types";
+import React, { useContext, useEffect, useState } from "react";
+import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
-import { Global, Theme } from "../../../store/global/types";
-import {
-  formatMessageTime,
-  formatMessageDate,
-  isMessageGif,
-  isMessageImage,
-  getUserChatPublicKey
-} from "../utils";
-import { renderPostBody } from "@ecency/render-helper";
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import { formatMessageTime, formatMessageDate, isMessageGif, isMessageImage } from "../utils";
+
+import { Theme } from "../../../store/global/types";
+import { DirectMessage } from "../../../../managers/message-manager-types";
+
+import { useMappedStore } from "../../../store/use-mapped-store";
+
 import UserAvatar from "../../user-avatar";
 import Tooltip from "../../tooltip";
+import { ChatContext } from "../chat-context-provider";
+
 import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
-import { Spinner } from "react-bootstrap";
 
-import "./index.scss";
-import { ActiveUser } from "../../../store/active-user/types";
-import usePrevious from "react-use/lib/usePrevious";
-import { NostrKeysType } from "../types";
+import { renderPostBody } from "@ecency/render-helper";
 import { _t } from "../../../i18n";
-import { ChatContext } from "../chat-context-provider";
+
+import "./index.scss";
+import ChatsConfirmationModal from "../chats-confirmation-modal";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -31,6 +29,7 @@ interface Props {
   isScrolled?: boolean;
   receiverPubKey: string;
   scrollToBottom?: () => void;
+  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -41,15 +40,18 @@ export default function ChatsDirectMessages(props: Props) {
     isScrolled,
     receiverPubKey,
     isScrollToBottom,
-    scrollToBottom
+    scrollToBottom,
+    deleteDirectMessage
   } = props;
 
   const { chat, global, activeUser } = useMappedStore();
-  const { activeUserKeys } = useContext(ChatContext);
+  const { activeUserKeys, messageServiceInstance } = useContext(ChatContext);
 
   console.log("directMessages", directMessages);
 
   let prevGlobal = usePrevious(global);
+  const [step, setStep] = useState(0);
+  const [resendMessage, setResendMessage] = useState<DirectMessage>();
 
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
@@ -97,95 +99,120 @@ export default function ChatsDirectMessages(props: Props) {
     return <></>;
   };
 
+  const handleConfirm = () => {
+    switch (step) {
+      case 1:
+        if (resendMessage) {
+          deleteDirectMessage(receiverPubKey, resendMessage?.id);
+          messageServiceInstance?.sendDirectMessage(receiverPubKey!, resendMessage.content);
+        }
+        break;
+      default:
+        break;
+    }
+    setStep(0);
+  };
+
   return (
-    <div className="direct-messages">
-      {receiverPubKey ? (
-        <>
-          {directMessages &&
-            directMessages.map((msg, i) => {
-              const dayAndMonth = getFormattedDateAndDay(msg, i);
-              let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
-
-              renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-              renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-              const isGif = isMessageGif(msg.content);
-
-              const isImage = isMessageImage(msg.content);
-
-              return (
-                <React.Fragment key={msg.id}>
-                  {dayAndMonth}
-                  {msg.creator !== activeUserKeys?.pub ? (
-                    <div key={msg.id} className="receiver">
-                      <div className="user-img">
-                        <Link to={`/@${currentUser}`}>
-                          <span>
-                            <UserAvatar username={currentUser} size="medium" />
-                          </span>
-                        </Link>
+    <>
+      <div className="direct-messages">
+        {receiverPubKey ? (
+          <>
+            {directMessages &&
+              directMessages.map((msg, i) => {
+                const dayAndMonth = getFormattedDateAndDay(msg, i);
+                let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
+
+                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+                const isGif = isMessageGif(msg.content);
+
+                const isImage = isMessageImage(msg.content);
+
+                return (
+                  <React.Fragment key={msg.id}>
+                    {dayAndMonth}
+                    {msg.creator !== activeUserKeys?.pub ? (
+                      <div key={msg.id} className="receiver">
+                        <div className="user-img">
+                          <Link to={`/@${currentUser}`}>
+                            <span>
+                              <UserAvatar username={currentUser} size="medium" />
+                            </span>
+                          </Link>
+                        </div>
+                        <div className="user-info">
+                          <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
+
+                          <div className="receiver-messag">
+                            <div
+                              className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                                isImage ? "chat-image" : ""
+                              }`}
+                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                            />
+                          </div>
+                        </div>
                       </div>
-                      <div className="user-info">
-                        <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
-
-                        <div className="receiver-messag">
+                    ) : (
+                      <div key={msg.id} className="sender">
+                        <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
+                        <div
+                          className={`sender-message ${
+                            msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
+                          }`}
+                        >
+                          {msg.sent === 2 && (
+                            <Tooltip content={"Resend"}>
+                              <span
+                                className="resend-svg"
+                                onClick={() => {
+                                  setStep(1);
+                                  setResendMessage(msg);
+                                }}
+                              >
+                                {resendMessageSvg}
+                              </span>
+                            </Tooltip>
+                          )}
                           <div
-                            className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                            className={`sender-message-content ${isGif ? "gif" : ""} ${
                               isImage ? "chat-image" : ""
                             }`}
                             dangerouslySetInnerHTML={{ __html: renderedPreview }}
                           />
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div key={msg.id} className="sender">
-                      <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
-                      <div
-                        className={`sender-message ${
-                          msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                        }`}
-                      >
-                        {msg.sent === 2 && (
-                          <Tooltip content={"Resend"}>
-                            <span
-                              className="resend-svg"
-                              onClick={() => {
-                                // setKeyDialog(true);
-                                // setStep(11);
-                                // setResendMessage(msg);
-                              }}
-                            >
-                              {resendMessageSvg}
+                          {msg.sent === 0 && (
+                            <span style={{ margin: "10px 0 0 5px" }}>
+                              <Spinner animation="border" variant="primary" size="sm" />
                             </span>
-                          </Tooltip>
-                        )}
-                        <div
-                          className={`sender-message-content ${isGif ? "gif" : ""} ${
-                            isImage ? "chat-image" : ""
-                          }`}
-                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                        />
-                        {msg.sent === 0 && (
-                          <span style={{ margin: "10px 0 0 5px" }}>
-                            <Spinner animation="border" variant="primary" size="sm" />
-                          </span>
-                        )}
-                        {msg.sent === 2 && (
-                          <Tooltip content={"Failed"}>
-                            <span className="failed-svg">{failedMessageSvg}</span>
-                          </Tooltip>
-                        )}
+                          )}
+                          {msg.sent === 2 && (
+                            <Tooltip content={"Failed"}>
+                              <span className="failed-svg">{failedMessageSvg}</span>
+                            </Tooltip>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  )}
-                </React.Fragment>
-              );
-            })}
-        </>
-      ) : (
-        <p className="not-joined">{_t("chat.not-joined")}</p>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+          </>
+        ) : (
+          <p className="not-joined">{_t("chat.not-joined")}</p>
+        )}
+      </div>
+      {step !== 0 && (
+        <ChatsConfirmationModal
+          actionType={"Confirmation"}
+          content={"Are you sure?"}
+          onClose={() => {
+            setStep(0);
+          }}
+          onConfirm={handleConfirm}
+        />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index 06d3c4cd816..dcced664dc5 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -37,7 +37,7 @@ const EmojiPickerStyle: EmojiPickerStyleProps = {
 interface Props {
   username: string;
   users: User[];
-  history: History | null;
+  history: History;
   ui: UI;
   currentChannel: Channel;
   inProgress: boolean;
@@ -48,6 +48,7 @@ interface Props {
   currentChannelSetter: (channel: Channel) => void;
   setInProgress: (d: boolean) => void;
   deletePublicMessage: (channelId: string, msgId: string) => void;
+  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 export default function ChatsMessagesView(props: Props) {
@@ -55,9 +56,11 @@ export default function ChatsMessagesView(props: Props) {
     username,
     currentChannel,
     inProgress,
+    history,
     currentChannelSetter,
     setInProgress,
-    deletePublicMessage
+    deletePublicMessage,
+    deleteDirectMessage
   } = props;
 
   const { messageServiceInstance, receiverPubKey } = useContext(ChatContext);
@@ -226,7 +229,6 @@ export default function ChatsMessagesView(props: Props) {
               {...props}
               publicMessages={publicMessages}
               currentChannel={currentChannel!}
-              activeUserKeys={activeUserKeys!}
               isScrollToBottom={isScrollToBottom}
               from={CHATPAGE}
               isScrolled={isScrolled}
@@ -240,11 +242,11 @@ export default function ChatsMessagesView(props: Props) {
           <ChatsDirectMessages
             {...props}
             directMessages={directMessages && directMessages}
-            activeUserKeys={activeUserKeys!}
             currentUser={directUser!}
             isScrolled={isScrolled}
             receiverPubKey={receiverPubKey}
             isScrollToBottom={isScrollToBottom}
+            deleteDirectMessage={deleteDirectMessage}
             scrollToBottom={scrollToBottom}
           />
         )}

From d4460a45541e296d06b7ee15c5aca6b143b96851 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 14 Sep 2023 16:37:09 +0500
Subject: [PATCH 069/179] Change position of message time in community chat

---
 .../chats/chats-channel-messages/index.scss   | 133 +++++++++++++-----
 .../chats/chats-channel-messages/index.tsx    |  26 ++--
 2 files changed, 118 insertions(+), 41 deletions(-)

diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 1d46f9692d1..6b972ed9fad 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -52,7 +52,12 @@
       }
       .receiver-messag {
         display: flex;
-        .receiver-message-content {
+
+        .receiver-message-wrapper {
+          box-sizing: content-box;
+          border-radius: 0 10px 10px 10px;
+          max-width: 70% !important;
+          word-wrap: break-word;
           @include themify(day) {
             background: #e4e6eb;
           }
@@ -60,6 +65,27 @@
             background: #cee2ff;
           }
 
+          .receiver-message-content {
+            color: #050505;
+            display: inline-block;
+            padding: 10px;
+            border-radius: 0px 10px 10px 0px;
+          }
+
+          .receiver-msg-time {
+            @include themify(day) {
+              color: rgb(138, 141, 145);
+            }
+            @include themify(night) {
+              color: $charcoal-grey;
+            }
+
+            font-size: 10px;
+            display: flex;
+            justify-content: flex-end;
+            margin: -5px 7px 3px 45px;
+          }
+
           &.gif {
             background: none;
             padding: 0;
@@ -75,39 +101,43 @@
               max-width: 100%;
             }
           }
-          color: #050505;
-          // max-width: 290px;
-          display: inline-block;
-          max-width: 70% !important;
-          word-wrap: break-word;
-          padding: 10px;
-          border-radius: 0px 10px 10px 0px;
+
+          &.gif,
+          &.chat-image {
+            .receiver-message-wrapper {
+              background: none;
+            }
+            .receiver-message-content {
+              padding: 0;
+              img {
+                padding-bottom: 10px;
+              }
+            }
+            .receiver-msg-time {
+              @include themify(day) {
+                color: rgb(138, 141, 145);
+              }
+              @include themify(night) {
+                color: $white-three;
+              }
+            }
+          }
         }
       }
       &.same-user-msg {
         margin-left: 4rem;
         padding-top: 1.5px;
-        .receiver-message-content {
-          // border-radius: 0;
+        .receiver-message-wrapper {
+          border-radius: 0 10px 10px 0;
         }
       }
     }
   }
 
   .sender {
-    margin-bottom: 0.17rem;
-    .sender-message-time {
-      color: rgb(138, 141, 145);
-      display: flex;
-      font-weight: 400;
-      justify-content: flex-end;
-      font-size: 12px;
-      margin: 0;
-      margin-right: 18px;
-      margin-bottom: 2px;
-    }
+    margin: 1px;
+
     .sender-message {
-      // max-width: 320px;
       margin-left: auto;
 
       display: flex;
@@ -143,19 +173,12 @@
         margin-right: 7px;
       }
 
-      .sender-message-content {
-        border-radius: 10px 10px 0px;
+      .sender-message-wrapper {
+        box-sizing: content-box;
+        border-radius: 10px 10px 0 10px;
         max-width: 70%;
         word-wrap: break-word;
-        margin-bottom: 0;
-        color: $charcoal-grey;
-        font-size: 16px;
-        font-weight: 400;
-        padding: 8px 12px 8px 12px;
-        a {
-          text-decoration: underline;
-          color: white;
-        }
+
         @include themify(day) {
           background-color: rgb(0, 132, 255);
           color: $white;
@@ -164,8 +187,10 @@
           background-color: $charcoal-grey;
           color: $white;
         }
+
         &.gif {
           background: none;
+
           padding: 0;
           img {
             max-width: 100%;
@@ -179,6 +204,48 @@
             max-width: 100%;
           }
         }
+
+        &.gif,
+        &.chat-image {
+          .sender-message-time {
+            color: rgb(138, 141, 145);
+          }
+          .sender-message-content {
+            padding: 10px 0 0 5px;
+            img {
+              padding-bottom: 10px;
+            }
+          }
+        }
+
+        .sender-message-content {
+          margin-bottom: 0;
+          color: $charcoal-grey;
+          font-size: 16px;
+          font-weight: 400;
+          padding: 8px 8px 8px 12px;
+          a {
+            text-decoration: underline;
+            color: white;
+          }
+          @include themify(day) {
+            color: $white;
+          }
+          @include themify(night) {
+            color: $white;
+          }
+        }
+
+        .sender-message-time {
+          color: $white;
+          margin-bottom: 3px;
+          font-size: 10px;
+          display: flex;
+          justify-content: flex-end;
+          margin-right: 7px;
+          margin-left: 45px;
+          margin-top: -5px;
+        }
       }
     }
   }
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index a8d6ad09150..64adadcaa7c 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -432,17 +432,23 @@ export default function ChatsChannelMessages(props: Props) {
                       {!isSameUserMessage && (
                         <p className="user-msg-time">
                           <span className="username-community">{name}</span>
-                          {formatMessageTime(pMsg.created)}
+                          {/* {formatMessageTime(pMsg.created)} */}
                         </p>
                       )}
 
                       <div className="receiver-messag">
                         <div
-                          className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                          className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
                             isImage ? "chat-image" : ""
                           }`}
-                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                        />
+                        >
+                          <div
+                            className="receiver-message-content"
+                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                          />
+                          <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
+                        </div>
+
                         {hoveredMessageId === pMsg.id &&
                           privilegedUsers.includes(activeUser?.username!) && (
                             <Tooltip content={"Hide Message"}>
@@ -470,7 +476,6 @@ export default function ChatsChannelMessages(props: Props) {
                     onMouseEnter={() => setHoveredMessageId(pMsg.id)}
                     onMouseLeave={() => setHoveredMessageId("")}
                   >
-                    <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
                     <div
                       className={`sender-message ${
                         pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
@@ -507,11 +512,16 @@ export default function ChatsChannelMessages(props: Props) {
                       )}
 
                       <div
-                        className={`sender-message-content ${isGif ? "gif" : ""} ${
+                        className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
                           isImage ? "chat-image" : ""
                         }`}
-                        dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                      />
+                      >
+                        <div
+                          className="sender-message-content"
+                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                        />
+                        <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
+                      </div>
 
                       {pMsg.sent === 0 && (
                         <span style={{ margin: "10px 0 0 5px" }}>

From 48615c1fde49c8d9b47e065d84570d7c70324d96 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Thu, 14 Sep 2023 19:28:23 +0500
Subject: [PATCH 070/179] Used store reducers from hook

---
 src/common/app.tsx                            |  2 +-
 .../chats/chat-context-provider.tsx           |  4 +-
 .../components/chats/chat-popup/index.tsx     | 17 +----
 .../chats/chats-channel-messages/index.tsx    |  6 +-
 .../chats/chats-confirmation-modal/index.scss | 13 ++++
 .../chats/chats-confirmation-modal/index.tsx  | 23 ++++--
 .../chats/chats-direct-messages/index.tsx     |  6 +-
 .../chats/chats-messages-view/index.tsx       |  4 +-
 .../components/chats/import-chats/index.tsx   | 30 +++-----
 src/managers/message-manager.tsx              | 73 +++++++++----------
 10 files changed, 83 insertions(+), 95 deletions(-)
 create mode 100644 src/common/components/chats/chats-confirmation-modal/index.scss

diff --git a/src/common/app.tsx b/src/common/app.tsx
index d8e586a8a8d..222ccdbe6f8 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -197,7 +197,7 @@ const App = (props: any) => {
         <Announcement activeUser={props.activeUser} />
         <FloatingFAQ />
 
-        <MessageManager {...props} />
+        <MessageManager />
         <ChatPopUp {...props} />
       </ChatContextProvider>
     </EntriesCacheManager>
diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index adc908d3d33..f1dfe0cc390 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -92,7 +92,7 @@ export default function ChatContextProvider(props: Props) {
     if (showSpinner) {
       setTimeout(() => {
         setShowSpinner(false);
-      }, 7000);
+      }, 6000);
     }
   }, [showSpinner]);
 
@@ -105,7 +105,6 @@ export default function ChatContextProvider(props: Props) {
       pub: pubKey,
       priv: privKey
     };
-    setShowSpinner(false);
     setActiveUserKeys(activeUserKeys);
   };
 
@@ -124,6 +123,7 @@ export default function ChatContextProvider(props: Props) {
   };
 
   const joinChat = async () => {
+    console.log("Join chat run in context");
     const { resetChat } = props;
     resetChat();
     const keys = createNoStrAccount();
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index bb6ed52ddd1..a37edb198a8 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -75,17 +75,14 @@ import MessageService from "../../../helper/message-service";
 
 interface Props {
   history: History;
-  resetChat: () => void;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
-  deletePublicMessage: (channelId: string, msgId: string) => void;
-  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 export default function ChatPopUp(props: Props) {
-  const { activeUser, global, chat } = useMappedStore();
+  const { activeUser, global, chat, resetChat } = useMappedStore();
 
   const {
     messageServiceInstance,
@@ -133,10 +130,6 @@ export default function ChatPopUp(props: Props) {
   const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
 
-  useEffect(() => {
-    console.log("chat in store", chat);
-  }, [chat]);
-
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
@@ -202,17 +195,11 @@ export default function ChatPopUp(props: Props) {
       const noStrPrivKey = getPrivateKey(activeUser?.username!);
       setNoStrPrivKey(noStrPrivKey);
     }
-    setTimeout(() => {
-      if (chat.channels.length === 0 && chat.directContacts.length === 0) {
-        setShowSpinner(false);
-      }
-    }, 5000);
   }, [typeof window !== "undefined" && messageServiceInstance]);
 
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
     setCommunities(communities);
-    // fetchProfileData();
   }, [chat.channels, chat.leftChannelsList]);
 
   useEffect(() => {
@@ -448,7 +435,6 @@ export default function ChatPopUp(props: Props) {
   };
 
   const handleRefreshSvgClick = () => {
-    const { resetChat } = props;
     resetChat();
     handleBackArrowSvg();
     if (getPrivateKey(activeUser?.username!)) {
@@ -730,7 +716,6 @@ export default function ChatPopUp(props: Props) {
                           directMessages={directMessagesList}
                           currentUser={currentUser}
                           isScrollToBottom={false}
-                          deleteDirectMessage={props.deleteDirectMessage}
                         />
                       ) : (
                         <ChatsChannelMessages
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 64adadcaa7c..bd569406446 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -55,7 +55,6 @@ interface Props {
   toggleUIProp: (what: ToggleType) => void;
   scrollToBottom?: () => void;
   currentChannelSetter: (channel: Channel) => void;
-  deletePublicMessage: (channelId: string, msgId: string) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -69,10 +68,9 @@ export default function ChatsChannelMessages(props: Props) {
     isScrolled,
     isActveUserRemoved,
     scrollToBottom,
-    currentChannelSetter,
-    deletePublicMessage
+    currentChannelSetter
   } = props;
-  const { chat, global, activeUser, ui, users } = useMappedStore();
+  const { chat, global, activeUser, ui, users, deletePublicMessage } = useMappedStore();
 
   const { messageServiceInstance, activeUserKeys } = useContext(ChatContext);
 
diff --git a/src/common/components/chats/chats-confirmation-modal/index.scss b/src/common/components/chats/chats-confirmation-modal/index.scss
new file mode 100644
index 00000000000..cf1333fb494
--- /dev/null
+++ b/src/common/components/chats/chats-confirmation-modal/index.scss
@@ -0,0 +1,13 @@
+@import "../../../../style/vars_mixins";
+
+.join-community-dialog-body {
+  font-size: 18px;
+  margin-top: 12px;
+}
+.join-community-confirm-buttons {
+  text-align: right;
+  margin-top: 2rem;
+  .close-btn {
+    margin-right: 20px;
+  }
+}
diff --git a/src/common/components/chats/chats-confirmation-modal/index.tsx b/src/common/components/chats/chats-confirmation-modal/index.tsx
index 1049e60aa12..04d440a7ac2 100644
--- a/src/common/components/chats/chats-confirmation-modal/index.tsx
+++ b/src/common/components/chats/chats-confirmation-modal/index.tsx
@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button, Modal } from "react-bootstrap";
 import { _t } from "../../../i18n";
+import LinearProgress from "../../linear-progress";
+import { ChatContext } from "../chat-context-provider";
+
+import "./index.scss";
 
 interface Props {
   actionType: string;
@@ -10,6 +14,14 @@ interface Props {
 }
 const ChatsConfirmationModal = (props: Props) => {
   const { onClose, onConfirm, content, actionType } = props;
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const [inProgress, setInProgress] = useState(false);
+
+  useEffect(() => {
+    if (hasUserJoinedChat && inProgress) {
+      setInProgress(false);
+    }
+  }, [hasUserJoinedChat]);
   const confirmationModalContent = (
     <>
       <div className="join-community-dialog-header border-bottom">
@@ -17,14 +29,12 @@ const ChatsConfirmationModal = (props: Props) => {
           <h2 className="join-community-main-title">{actionType}</h2>
         </div>
       </div>
-      <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
-        {content}
-      </div>
-      <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+      {inProgress && <LinearProgress />}
+      <div className="join-community-dialog-body">{content}</div>
+      <p className="join-community-confirm-buttons">
         <Button
           variant="outline-primary"
           className="close-btn"
-          style={{ marginRight: "20px" }}
           onClick={() => {
             onClose();
           }}
@@ -35,6 +45,7 @@ const ChatsConfirmationModal = (props: Props) => {
           variant="outline-primary"
           className="confirm-btn"
           onClick={() => {
+            setInProgress(true);
             onConfirm();
           }}
         >
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 4e35a767d0b..04c13d72c5d 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -29,7 +29,6 @@ interface Props {
   isScrolled?: boolean;
   receiverPubKey: string;
   scrollToBottom?: () => void;
-  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -40,11 +39,10 @@ export default function ChatsDirectMessages(props: Props) {
     isScrolled,
     receiverPubKey,
     isScrollToBottom,
-    scrollToBottom,
-    deleteDirectMessage
+    scrollToBottom
   } = props;
 
-  const { chat, global, activeUser } = useMappedStore();
+  const { chat, global, activeUser, deleteDirectMessage } = useMappedStore();
   const { activeUserKeys, messageServiceInstance } = useContext(ChatContext);
 
   console.log("directMessages", directMessages);
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index dcced664dc5..0338c86a1aa 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -233,7 +233,7 @@ export default function ChatsMessagesView(props: Props) {
               from={CHATPAGE}
               isScrolled={isScrolled}
               isActveUserRemoved={isActveUserRemoved}
-              deletePublicMessage={deletePublicMessage}
+              // deletePublicMessage={deletePublicMessage}
               scrollToBottom={scrollToBottom}
               currentChannelSetter={currentChannelSetter}
             />
@@ -246,7 +246,7 @@ export default function ChatsMessagesView(props: Props) {
             isScrolled={isScrolled}
             receiverPubKey={receiverPubKey}
             isScrollToBottom={isScrollToBottom}
-            deleteDirectMessage={deleteDirectMessage}
+            // deleteDirectMessage={deleteDirectMessage}
             scrollToBottom={scrollToBottom}
           />
         )}
diff --git a/src/common/components/chats/import-chats/index.tsx b/src/common/components/chats/import-chats/index.tsx
index 23a5d0d7327..4ecf4688505 100644
--- a/src/common/components/chats/import-chats/index.tsx
+++ b/src/common/components/chats/import-chats/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import { getPublicKey } from "../../../../lib/nostr-tools/keys";
 import { _t } from "../../../i18n";
@@ -23,15 +23,12 @@ export default function ImportChats() {
   const [privKey, setPrivKey] = useState("");
   const [step, setStep] = useState(0);
 
-  const { activeUserKeys, messageServiceInstance, setActiveUserKeys, setChatPrivKey } =
-    useContext(ChatContext);
+  const { activeUserKeys, hasUserJoinedChat, setChatPrivKey, joinChat } = useContext(ChatContext);
 
   const handleImportChatSubmit = () => {
     try {
       setInProgress(true);
       const pubKey = getPublicKey(privKey);
-      console.log("Public key", pubKey);
-      console.log("Active user key", activeUserKeys?.pub);
       if (pubKey === activeUserKeys?.pub) {
         setChatPrivKey(privKey);
         ls.set(`${activeUser?.username}_nsPrivKey`, privKey);
@@ -54,20 +51,11 @@ export default function ImportChats() {
     }
   };
 
-  const handleCreateAccount = async () => {
-    console.log("Confrim run");
-    const keys = createNoStrAccount();
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    setChatPrivKey(keys.priv);
-    await setProfileMetaData(activeUser, keys.pub);
-    setNostrkeys(keys);
-    messageServiceInstance?.updateProfile({
-      name: activeUser?.username!,
-      about: "",
-      picture: ""
-    });
-    setActiveUserKeys(keys);
-  };
+  useEffect(() => {
+    if (hasUserJoinedChat) {
+      setStep(0);
+    }
+  }, [hasUserJoinedChat]);
 
   return (
     <>
@@ -126,7 +114,9 @@ export default function ImportChats() {
           onClose={() => {
             setStep(0);
           }}
-          onConfirm={handleCreateAccount}
+          onConfirm={() => {
+            joinChat();
+          }}
         />
       )}
     </>
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 820cfdc7b48..3ce46e0e1a7 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -29,28 +29,23 @@ export const setNostrkeys = (keys: NostrKeysType) => {
   window.dispatchEvent(ev);
 };
 
-interface Props {
-  addDirectContacts: (data?: DirectContactsType[]) => void;
-  addDirectMessages: (peer: string, data?: DirectMessage) => void;
-  addPublicMessage: (channelId: string, data?: PublicMessage) => void;
-  addChannels: (data: Channel[]) => void;
-  addProfile: (data: Profile[]) => void;
-  addleftChannels: (data: string[]) => void;
-  UpdateChannels: (data: ChannelUpdate[]) => void;
-  replacePublicMessage: (channelId: string, data?: PublicMessage) => void;
-  verifyPublicMessageSending: (channelId: string, data?: PublicMessage) => void;
-  replaceDirectMessage: (peer: string, data: DirectMessage) => void;
-  verifyDirectMessageSending: (peer: string, data: DirectMessage) => void;
-  addPreviousPublicMessages: (channelId: string, data: MessagesObject) => void;
-}
-
-const MessageManager = (props: Props) => {
-  const { activeUser, chat } = useMappedStore();
-
-  // const messageServiceContext = useContext(MessageServiceContext);
-  // const { setMessageServiceInstance } = messageServiceContext;
-
-  // console.log("messageServiceContext", messageServiceContext);
+const MessageManager = () => {
+  const {
+    activeUser,
+    chat,
+    addDirectMessages,
+    addDirectContacts,
+    addPublicMessage,
+    addChannels,
+    addProfile,
+    addleftChannels,
+    UpdateChannels,
+    replacePublicMessage,
+    verifyPublicMessageSending,
+    replaceDirectMessage,
+    verifyDirectMessageSending,
+    addPreviousPublicMessages
+  } = useMappedStore();
 
   const [messageServiceReady, setMessageServiceReady] = useState(false);
   const [since, setSince] = useState(0);
@@ -86,7 +81,6 @@ const MessageManager = (props: Props) => {
   useEffect(() => {
     if (!messageServiceInstance && keys?.priv) {
       const messageService = initMessageServiceInstance(keys);
-      console.log("I run from that", messageService);
       setMessageServiceInstance(messageService!);
       setMessageService(messageService!);
     }
@@ -101,7 +95,6 @@ const MessageManager = (props: Props) => {
   const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeysType;
     const messageService = initMessageServiceInstance(detail);
-    console.log("I am here messageServiceInstance", messageService);
     setMessageServiceInstance(messageService!);
     setMessageService(messageService!);
   };
@@ -152,7 +145,7 @@ const MessageManager = (props: Props) => {
 
   // Profile update handler
   const handleProfileUpdate = (data: Profile[]) => {
-    props.addProfile(data);
+    addProfile(data);
   };
 
   useEffect(() => {
@@ -175,7 +168,7 @@ const MessageManager = (props: Props) => {
       }
     });
     if (result.length !== 0) {
-      props.addDirectContacts(result);
+      addDirectContacts(result);
     }
   };
 
@@ -193,7 +186,7 @@ const MessageManager = (props: Props) => {
     data.map((m) => {
       const { peer, id } = m;
       setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-      props.addDirectMessages(peer, m);
+      addDirectMessages(peer, m);
       checkDirectMessageSending(peer, m);
     });
   };
@@ -218,7 +211,7 @@ const MessageManager = (props: Props) => {
 
   const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
     setTimeout(() => {
-      props.verifyDirectMessageSending(peer, data);
+      verifyDirectMessageSending(peer, data);
     }, 20000);
   };
 
@@ -231,9 +224,9 @@ const MessageManager = (props: Props) => {
           setReplacedDirectMessagesBuffer((prevBuffer) =>
             prevBuffer.filter((messageId) => messageId !== id)
           );
-          props.replaceDirectMessage(peer, message);
+          replaceDirectMessage(peer, message);
         } else {
-          props.addDirectMessages(peer, message);
+          addDirectMessages(peer, message);
         }
       });
     } else {
@@ -247,7 +240,7 @@ const MessageManager = (props: Props) => {
       const { peer } = obj;
       const matchingStateItem = chat.directMessages.find((stateItem) => stateItem.peer === peer);
       if (matchingStateItem) {
-        props.addDirectMessages(peer, obj);
+        addDirectMessages(peer, obj);
         setDirectMessageBuffer((prevMessageBuffer) =>
           prevMessageBuffer.filter((message) => message.id !== obj.id)
         );
@@ -279,7 +272,7 @@ const MessageManager = (props: Props) => {
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
     console.log("handle channel creation run");
-    props.addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
+    addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
   };
 
   useEffect(() => {
@@ -293,7 +286,7 @@ const MessageManager = (props: Props) => {
 
   // Channel update handler
   const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    props.UpdateChannels(data);
+    UpdateChannels(data);
   };
 
   useEffect(() => {
@@ -307,7 +300,7 @@ const MessageManager = (props: Props) => {
 
   const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
     setTimeout(() => {
-      props.verifyPublicMessageSending(channelId, data);
+      verifyPublicMessageSending(channelId, data);
     }, 20000);
   };
 
@@ -317,7 +310,7 @@ const MessageManager = (props: Props) => {
     data.map((m) => {
       const { id, root } = m;
       setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-      props.addPublicMessage(root, m);
+      addPublicMessage(root, m);
       checkPublicMessageSending(root, m);
     });
   };
@@ -349,9 +342,9 @@ const MessageManager = (props: Props) => {
           setReplacedPublicMessagesBuffer((prevBuffer) =>
             prevBuffer.filter((messageId) => messageId !== id)
           );
-          props.replacePublicMessage(root, message);
+          replacePublicMessage(root, message);
         } else {
-          props.addPublicMessage(root, message);
+          addPublicMessage(root, message);
         }
       });
     } else {
@@ -399,7 +392,7 @@ const MessageManager = (props: Props) => {
         (stateItem) => stateItem.channelId === root
       );
       if (matchingStateItem) {
-        props.addPublicMessage(root, obj);
+        addPublicMessage(root, obj);
         setPublicMessageBuffer((prevMessageBuffer) =>
           prevMessageBuffer.filter((message) => message.id !== obj.id)
         );
@@ -415,7 +408,7 @@ const MessageManager = (props: Props) => {
       return result;
     }, {});
 
-    props.addPreviousPublicMessages(channelId, messagesObject);
+    addPreviousPublicMessages(channelId, messagesObject);
   };
 
   useEffect(() => {
@@ -435,7 +428,7 @@ const MessageManager = (props: Props) => {
 
   // Left channel handler
   const handleLeftChannelList = (data: string[]) => {
-    props.addleftChannels(data);
+    addleftChannels(data);
   };
 
   useEffect(() => {

From 2d6f84c9249ad32a63c8ae6fcbe4cadcb67adf1f Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 15 Sep 2023 15:22:41 +0500
Subject: [PATCH 071/179] Fix lint errors and other comments

---
 .../chats/chat-context-provider.tsx           |  19 +-
 .../components/chats/chat-popup/index.tsx     |  17 +-
 .../chats/chats-messages-box/index.tsx        |  17 +-
 .../chats/chats-messages-header/index.tsx     |   2 +-
 .../chats/chats-messages-view/index.tsx       |  17 +-
 .../components/chats/chats-sidebar/indes.tsx  |   5 +-
 src/common/components/chats/types/index.ts    |   1 -
 .../chats/utils/get-user-chat-public-key.ts   |  25 +-
 src/common/components/navbar/index.tsx        |   2 +-
 src/common/components/user-nav/index.spec.tsx |   2 +-
 src/common/components/user-nav/index.tsx      | 448 +++++-------------
 src/common/pages/chats/index.tsx              |   2 +-
 src/common/store/chat/index.ts                |   1 +
 src/desktop/app/components/navbar/index.tsx   |   2 +-
 src/managers/message-manager.tsx              |  36 +-
 15 files changed, 217 insertions(+), 379 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index f1dfe0cc390..bfba6377d45 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -26,7 +26,7 @@ interface Context {
   setActiveUserKeys: (keys: NostrKeysType) => void;
   setReceiverPubKey: (key: string) => void;
   setMessageServiceInstance: (instance: MessageService | undefined) => void;
-  initMessageServiceInstance: (keys: Keys) => void;
+  initMessageServiceInstance: (keys: Keys) => MessageService | undefined;
   joinChat: () => void;
 }
 
@@ -49,7 +49,7 @@ export const ChatContext = React.createContext<Context>({
   setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
   setMessageServiceInstance: () => {},
-  initMessageServiceInstance: () => {},
+  initMessageServiceInstance: () => (({} as MessageService) || undefined),
   joinChat: () => {}
 });
 
@@ -108,6 +108,20 @@ export default function ChatContextProvider(props: Props) {
     setActiveUserKeys(activeUserKeys);
   };
 
+  // const initMessageServiceInstance = (keys: Keys) => {
+  //   if (messageServiceInstance) {
+  //     messageServiceInstance.close();
+  //     setMessageServiceInstance(undefined);
+  //   }
+
+  //   let newMessageService: MessageService | undefined = undefined;
+  //   if (keys) {
+  //     newMessageService = new MessageService(keys.priv, keys.pub);
+  //     setMessageServiceInstance(newMessageService);
+  //   }
+  //   return newMessageService;
+  // };
+
   const initMessageServiceInstance = (keys: Keys) => {
     if (messageServiceInstance) {
       messageServiceInstance.close();
@@ -119,6 +133,7 @@ export default function ChatContextProvider(props: Props) {
       newMessageService = new MessageService(keys.priv, keys.pub);
       setMessageServiceInstance(newMessageService);
     }
+    console.log("newMessageService", newMessageService);
     return newMessageService;
   };
 
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index a37edb198a8..54288038a1c 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -66,6 +66,7 @@ import {
   getJoinedCommunities,
   getPrivateKey,
   getProfileMetaData,
+  getUserChatPublicKey,
   setProfileMetaData
 } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -370,16 +371,20 @@ export default function ChatPopUp(props: Props) {
   };
 
   const fetchCurrentUserData = async () => {
-    const response = await getAccountFull(currentUser);
-    const { posting_json_metadata } = response;
-    const profile = JSON.parse(posting_json_metadata!).profile;
-    const { nsKey } = profile || {};
+    console.log("Fetch profile run");
+    // const response = await getAccountFull(currentUser);
+    // const { posting_json_metadata } = response;
+    // const profile = JSON.parse(posting_json_metadata!).profile;
+    // const { nsKey } = profile || {};
+    const nsKey = await getUserChatPublicKey(currentUser);
+    console.log("nsKey", nsKey);
     if (nsKey) {
       setReceiverPubKey(nsKey);
     } else {
       setReceiverPubKey("");
     }
 
+    console.log("Hello reached");
     setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
@@ -432,9 +437,11 @@ export default function ChatPopUp(props: Props) {
 
   const handleMessageSvgClick = () => {
     setShowSearchUser(!showSearchUser);
+    setExpanded(true);
   };
 
   const handleRefreshSvgClick = () => {
+    setExpanded(true);
     resetChat();
     handleBackArrowSvg();
     if (getPrivateKey(activeUser?.username!)) {
@@ -650,7 +657,7 @@ export default function ChatPopUp(props: Props) {
                 </div>
               )}{" "}
               {!isCommunity && !isCurrentUser && noStrPrivKey && (
-                <div className="simple-menu">
+                <div className="simple-menu" onClick={() => setExpanded(true)}>
                   <ChatsDropdownMenu
                     history={props.history}
                     onManageChatKey={() => {
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 071f732c2ae..4fd33f2f380 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
 import { Account } from "../../../store/accounts/types";
@@ -7,13 +7,12 @@ import { User } from "../../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
 
-import "./index.scss";
 import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
 import LinearProgress from "../../linear-progress";
-import { NostrKeysType } from "../types";
 import { formattedUserName } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
+
+import "./index.scss";
 
 interface MatchParams {
   filter: string;
@@ -26,22 +25,19 @@ interface MatchParams {
 interface Props {
   match: match<MatchParams>;
   users: User[];
-  history: History | null;
+  history: History;
   ui: UI;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
-  deletePublicMessage: (channelId: string, msgId: string) => void;
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const chatContext = useContext(ChatContext);
-  const { activeUserKeys } = chatContext;
-  const { activeUser, chat } = useMappedStore();
+  const { chat } = useMappedStore();
 
   const { channels, updatedChannel } = chat;
-  const { match, deletePublicMessage } = props;
+  const { match } = props;
   const username = match.params.username;
 
   const [maxHeight, setMaxHeight] = useState(0);
@@ -109,7 +105,6 @@ export default function ChatsMessagesBox(props: Props) {
               inProgress={inProgress}
               currentChannelSetter={setCurrentChannel}
               setInProgress={setInProgress}
-              deletePublicMessage={deletePublicMessage}
             />
           </>
         )}
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
index 8a6340aabcc..f065123bbe3 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -13,7 +13,7 @@ import { formattedUserName } from "../utils";
 
 interface Props {
   username: string;
-  history: History | null;
+  history: History;
   currentChannel: Channel;
   currentChannelSetter: (channe: Channel) => void;
 }
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index 0338c86a1aa..c05eab003c3 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -47,26 +47,13 @@ interface Props {
   toggleUIProp: (what: ToggleType) => void;
   currentChannelSetter: (channel: Channel) => void;
   setInProgress: (d: boolean) => void;
-  deletePublicMessage: (channelId: string, msgId: string) => void;
-  deleteDirectMessage: (peer: string, msgId: string) => void;
 }
 
 export default function ChatsMessagesView(props: Props) {
-  const {
-    username,
-    currentChannel,
-    inProgress,
-    history,
-    currentChannelSetter,
-    setInProgress,
-    deletePublicMessage,
-    deleteDirectMessage
-  } = props;
+  const { username, currentChannel, inProgress, currentChannelSetter, setInProgress } = props;
 
   const { messageServiceInstance, receiverPubKey } = useContext(ChatContext);
 
-  // console.log("Receiver pubkey in Message view component", receiverPubKey, setReceiverPubKey);
-
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
   const { chat, activeUser } = useMappedStore();
@@ -233,7 +220,6 @@ export default function ChatsMessagesView(props: Props) {
               from={CHATPAGE}
               isScrolled={isScrolled}
               isActveUserRemoved={isActveUserRemoved}
-              // deletePublicMessage={deletePublicMessage}
               scrollToBottom={scrollToBottom}
               currentChannelSetter={currentChannelSetter}
             />
@@ -246,7 +232,6 @@ export default function ChatsMessagesView(props: Props) {
             isScrolled={isScrolled}
             receiverPubKey={receiverPubKey}
             isScrollToBottom={isScrollToBottom}
-            // deleteDirectMessage={deleteDirectMessage}
             scrollToBottom={scrollToBottom}
           />
         )}
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 11ea4684aea..e0c0d92d704 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -198,7 +198,10 @@ export default function ChatsSideBar(props: Props) {
             {userList.map((user) => (
               <Link
                 to={`/chats/@${user.account}`}
-                onClick={() => setSearchText("")}
+                onClick={() => {
+                  setSearchText("");
+                  setSearchInProgress(false);
+                }}
                 key={user.account}
               >
                 <div
diff --git a/src/common/components/chats/types/index.ts b/src/common/components/chats/types/index.ts
index 61514842ced..44983652000 100644
--- a/src/common/components/chats/types/index.ts
+++ b/src/common/components/chats/types/index.ts
@@ -1,2 +1 @@
 export * from "./chat-types";
-export * from "./message-service-types";
diff --git a/src/common/components/chats/utils/get-user-chat-public-key.ts b/src/common/components/chats/utils/get-user-chat-public-key.ts
index 8352b301047..2a05b7f3dcc 100644
--- a/src/common/components/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/components/chats/utils/get-user-chat-public-key.ts
@@ -1,10 +1,25 @@
 import { getAccountFull } from "../../../api/hive";
 
+// export const getUserChatPublicKey = async (username: string) => {
+//   const response = await getAccountFull(username);
+//   console.log("response", response);
+//   const { posting_json_metadata } = response;
+//   const profile = JSON.parse(posting_json_metadata!).profile;
+//   console.log("profile", profile);
+//   const { nsKey } = profile || {};
+//   console.log("nsKey", nsKey);
+//   return nsKey;
+// };
+
 export const getUserChatPublicKey = async (username: string) => {
   const response = await getAccountFull(username);
-  const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
-  const { nsKey } = profile || {};
-  // console.log("nsKey", nsKey);
-  return nsKey;
+  if (response && response.posting_json_metadata) {
+    const { posting_json_metadata } = response;
+    const profile = JSON.parse(posting_json_metadata).profile;
+    if (profile) {
+      const { nsKey } = profile || {};
+      return nsKey;
+    }
+  }
+  return null;
 };
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index e778c821fe6..7b7a83c0e98 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -9,7 +9,6 @@ import SwitchLang from "../switch-lang";
 import ToolTip from "../tooltip";
 import Search from "../search";
 import Login from "../login";
-import UserNav from "../user-nav";
 import UserNotifications from "../notifications";
 import Gallery from "../gallery";
 import Drafts from "../drafts";
@@ -48,6 +47,7 @@ import { useLocation } from "react-router";
 import usePrevious from "react-use/lib/usePrevious";
 import { Theme } from "../../store/global/types";
 import "./_index.scss";
+import { UserNav } from "../user-nav";
 
 const GLOBAL_FILTERS = [
   "engine",
diff --git a/src/common/components/user-nav/index.spec.tsx b/src/common/components/user-nav/index.spec.tsx
index 25a861501f1..4c2860423b9 100644
--- a/src/common/components/user-nav/index.spec.tsx
+++ b/src/common/components/user-nav/index.spec.tsx
@@ -3,7 +3,7 @@ import { StaticRouter } from "react-router-dom";
 
 import { createBrowserHistory, createLocation } from "history";
 
-import UserNav from "./index";
+import { UserNav } from "./index";
 
 import {
   dynamicPropsIntance1,
diff --git a/src/common/components/user-nav/index.tsx b/src/common/components/user-nav/index.tsx
index 0683ee7d1a8..20473f3ee83 100644
--- a/src/common/components/user-nav/index.tsx
+++ b/src/common/components/user-nav/index.tsx
@@ -1,193 +1,92 @@
-import React, { Component } from "react";
-import { History, Location } from "history";
+import React, { useState } from "react";
+import { _t } from "../../i18n";
 import { Link } from "react-router-dom";
-
-import { Global } from "../../store/global/types";
-import { User } from "../../store/users/types";
-import { Account } from "../../store/accounts/types";
-import { ActiveUser } from "../../store/active-user/types";
-import { ToggleType, UI } from "../../store/ui/types";
-import { NotificationFilter, Notifications } from "../../store/notifications/types";
-import { DynamicProps } from "../../store/dynamic-props/types";
-
+import { useMappedStore } from "../../store/use-mapped-store";
+import { useLocation } from "react-router";
+import "./_index.scss";
+import { bellOffSvg, bellSvg, chevronUpSvg, messangerSvg, rocketSvg } from "../../img/svg";
+import { downVotingPower, votingPower } from "../../api/hive";
+import { WalletBadge } from "./wallet-badge";
 import ToolTip from "../tooltip";
-import UserAvatar from "../user-avatar";
 import DropDown from "../dropdown";
 import UserNotifications from "../notifications";
+import { PurchaseQrDialog } from "../purchase-qr";
+import { History } from "history";
+import UserAvatar from "../user-avatar";
 import Gallery from "../gallery";
 import Drafts from "../drafts";
 import Bookmarks from "../bookmarks";
 import Schedules from "../schedules";
 import Fragments from "../fragments";
 
-import { _t } from "../../i18n";
-
-import HiveWallet from "../../helper/hive-wallet";
-
-import {
-  creditCardSvg,
-  gifCardSvg,
-  bellSvg,
-  bellOffSvg,
-  chevronUpSvg,
-  rocketSvg,
-  messangerSvg
-} from "../../img/svg";
-
-import { votingPower, downVotingPower } from "../../api/hive";
-import {
-  updateNotificationsSettings,
-  setNotificationsSettingsItem
-} from "../../store/notifications";
-import { PurchaseQrDialog } from "../purchase-qr";
-import { useMappedStore } from "../../store/use-mapped-store";
-import { useLocation } from "react-router";
-import "./_index.scss";
-
-export class WalletBadge extends Component<{
-  activeUser: ActiveUser;
-  dynamicProps: DynamicProps;
-  icon?: JSX.Element;
-}> {
-  render() {
-    const { activeUser, dynamicProps } = this.props;
-
-    let hasUnclaimedRewards = false;
-    const { data: account } = activeUser;
-
-    if (account.__loaded) {
-      hasUnclaimedRewards = new HiveWallet(account, dynamicProps).hasUnclaimedRewards;
-    }
-
-    return (
-      <>
-        <ToolTip
-          content={
-            hasUnclaimedRewards ? _t("user-nav.unclaimed-reward-notice") : _t("user-nav.wallet")
-          }
-        >
-          <Link to={`/@${activeUser.username}/wallet`} className="user-wallet">
-            {hasUnclaimedRewards && <span className="reward-badge" />}
-            {this.props.icon ?? creditCardSvg}
-          </Link>
-        </ToolTip>
-      </>
-    );
-  }
-}
-
-class PointsBadge extends Component<{ activeUser: ActiveUser }> {
-  render() {
-    const { activeUser } = this.props;
-
-    let hasUnclaimedPoints = activeUser.points.uPoints !== "0.000";
-
-    return (
-      <>
-        <ToolTip
-          content={
-            hasUnclaimedPoints ? _t("user-nav.unclaimed-points-notice") : _t("user-nav.points")
-          }
-        >
-          <Link to={`/@${activeUser.username}/points`} className="user-points">
-            {hasUnclaimedPoints && <span className="reward-badge" />}
-            {gifCardSvg}
-          </Link>
-        </ToolTip>
-      </>
-    );
-  }
-}
+export * from "./wallet-badge";
 
 interface Props {
-  global: Global;
-  dynamicProps: DynamicProps;
   history: History;
-  location: Location;
-  users: User[];
-  ui: UI;
-  activeUser: ActiveUser;
-  notifications: Notifications;
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  addAccount: (data: Account) => void;
-  fetchNotifications: (since: string | null) => void;
-  fetchUnreadNotificationCount: () => void;
-  setNotificationsFilter: (filter: NotificationFilter | null) => void;
-  markNotifications: (id: string | null) => void;
-  toggleUIProp: (what: ToggleType) => void;
-  muteNotifications: () => void;
-  unMuteNotifications: () => void;
-  updateNotificationsSettings: typeof updateNotificationsSettings;
-  setNotificationsSettingsItem: typeof setNotificationsSettingsItem;
-}
-
-interface State {
-  gallery: boolean;
-  drafts: boolean;
-  bookmarks: boolean;
-  schedules: boolean;
-  fragments: boolean;
-  showPurchaseDialog: boolean;
+  icon?: JSX.Element;
 }
 
-class UserNav extends Component<Props, State> {
-  state: State = {
-    gallery: false,
-    drafts: false,
-    bookmarks: false,
-    schedules: false,
-    fragments: false,
-    showPurchaseDialog: false
-  };
-
-  toggleLogin = () => {
-    const { toggleUIProp } = this.props;
-    toggleUIProp("login");
-  };
-
-  toggleDrafts = () => {
-    const { drafts } = this.state;
-    this.setState({ drafts: !drafts });
-  };
-
-  toggleGallery = () => {
-    const { gallery } = this.state;
-    this.setState({ gallery: !gallery });
-  };
-
-  toggleBookmarks = () => {
-    const { bookmarks } = this.state;
-    this.setState({ bookmarks: !bookmarks });
-  };
-
-  toggleSchedules = () => {
-    const { schedules } = this.state;
-    this.setState({ schedules: !schedules });
-  };
-
-  toggleFragments = () => {
-    const { fragments } = this.state;
-    this.setState({ fragments: !fragments });
-  };
-
-  toggleNotifications = () => {
-    const { toggleUIProp } = this.props;
-    toggleUIProp("notifications");
-  };
-
-  goToSettings = () => {
-    const { activeUser, history } = this.props;
-    history.push(`/@${activeUser.username}/settings`);
-  };
-
-  render() {
-    const { gallery, drafts, bookmarks, schedules, fragments } = this.state;
-    const { activeUser, ui, notifications, global, dynamicProps } = this.props;
-    const { unread } = notifications;
+export const UserNav = ({ history, icon }: Props) => {
+  const location = useLocation();
+  const { global, ui, activeUser, notifications, setActiveUser, toggleUIProp } = useMappedStore();
+
+  const [gallery, setGallery] = useState(false);
+  const [drafts, setDrafts] = useState(false);
+  const [bookmarks, setBookmarks] = useState(false);
+  const [schedules, setSchedules] = useState(false);
+  const [fragments, setFragments] = useState(false);
+  const [showPurchaseDialog, setShowPurchaseDialog] = useState(false);
+
+  const dropDownItems = [
+    {
+      label: _t("user-nav.profile"),
+      href: `/@${activeUser?.username}`
+    },
+    ...(global.usePrivate
+      ? [
+          {
+            label: _t("user-nav.drafts"),
+            onClick: () => setDrafts(!drafts)
+          },
+          {
+            label: _t("user-nav.gallery"),
+            onClick: () => setGallery(!gallery)
+          },
+          {
+            label: _t("user-nav.bookmarks"),
+            onClick: () => setBookmarks(!bookmarks)
+          },
+          {
+            label: _t("user-nav.schedules"),
+            onClick: () => setSchedules(!schedules)
+          },
+          {
+            label: _t("user-nav.fragments"),
+            onClick: () => setFragments(!fragments)
+          }
+        ]
+      : []),
+    {
+      label: _t("user-nav.settings"),
+      onClick: () => history.push(`/@${activeUser?.username}/settings`)
+    },
+    {
+      label: _t("g.login-as"),
+      onClick: () => toggleUIProp("login")
+    },
+    {
+      label: _t("user-nav.logout"),
+      onClick: () => {
+        setActiveUser(null);
+      }
+    }
+  ];
 
-    const preDropDownElem = activeUser.data.__loaded ? (
+  const dropDownConfig = {
+    history: history,
+    label: <UserAvatar username={activeUser?.username ?? ""} size="medium" />,
+    items: dropDownItems,
+    preElem: activeUser?.data.__loaded ? (
       <div className="drop-down-menu-power">
         <div className="label">{_t("user-nav.vote-power")}</div>
         <div className="power">
@@ -203,160 +102,55 @@ class UserNav extends Component<Props, State> {
           </div>
         </div>
       </div>
-    ) : undefined;
-
-    const dropDownItems = [
-      {
-        label: _t("user-nav.profile"),
-        href: `/@${activeUser.username}`
-      },
-      ...(global.usePrivate
-        ? [
-            {
-              label: _t("user-nav.drafts"),
-              onClick: this.toggleDrafts
-            },
-            {
-              label: _t("user-nav.gallery"),
-              onClick: this.toggleGallery
-            },
-            {
-              label: _t("user-nav.bookmarks"),
-              onClick: this.toggleBookmarks
-            },
-            {
-              label: _t("user-nav.schedules"),
-              onClick: this.toggleSchedules
-            },
-            {
-              label: _t("user-nav.fragments"),
-              onClick: this.toggleFragments
-            }
-          ]
-        : []),
-      {
-        label: _t("user-nav.settings"),
-        onClick: this.goToSettings
-      },
-      {
-        label: _t("g.login-as"),
-        onClick: this.toggleLogin
-      },
-      {
-        label: _t("user-nav.logout"),
-        onClick: () => {
-          const { setActiveUser } = this.props;
-          setActiveUser(null);
-        }
-      }
-    ];
-
-    const dropDownConfig = {
-      history: this.props.history,
-      label: <UserAvatar username={activeUser.username} size="medium" />,
-      items: dropDownItems,
-      preElem: preDropDownElem
-    };
-
-    return (
-      <>
-        <div className="user-nav">
-          {global.usePrivate && (
-            <div
-              onClick={() => this.setState({ showPurchaseDialog: true })}
-              className="user-points cursor-pointer"
-            >
-              {rocketSvg}
-            </div>
-          )}
-          <WalletBadge activeUser={activeUser} dynamicProps={dynamicProps} />
-
-          {global.usePrivate && (
-            <>
-              <ToolTip content={_t("user-nav.notifications")}>
-                <span className="notifications" onClick={this.toggleNotifications}>
-                  {unread > 0 && (
-                    <span className="notifications-badge notranslate">
-                      {unread.toString().length < 3 ? unread : "..."}
-                    </span>
-                  )}
-                  {global.notifications ? bellSvg : bellOffSvg}
-                </span>
-              </ToolTip>
-              <ToolTip content={_t("user-nav.chats")}>
-                <Link to={`/chats`}>
-                  <span className="chats">{messangerSvg}</span>
-                </Link>
-              </ToolTip>
-            </>
-          )}
-
-          <DropDown {...dropDownConfig} float="right" header={`@${activeUser.username}`} />
-        </div>
-        {ui.notifications && <UserNotifications {...this.props} />}
-        {gallery && <Gallery {...this.props} onHide={this.toggleGallery} />}
-        {drafts && <Drafts {...this.props} onHide={this.toggleDrafts} />}
-        {bookmarks && <Bookmarks {...this.props} onHide={this.toggleBookmarks} />}
-        {schedules && <Schedules {...this.props} onHide={this.toggleSchedules} />}
-        {fragments && <Fragments {...this.props} onHide={this.toggleFragments} />}
-        <PurchaseQrDialog
-          show={this.state.showPurchaseDialog}
-          setShow={(v) => this.setState({ showPurchaseDialog: v })}
-          activeUser={activeUser}
-          location={this.props.location}
-        />
-      </>
-    );
-  }
-}
-
-export default ({ history }: Pick<Props, "history">) => {
-  const {
-    global,
-    dynamicProps,
-    users,
-    ui,
-    activeUser,
-    notifications,
-    setActiveUser,
-    updateActiveUser,
-    deleteUser,
-    addAccount,
-    fetchNotifications,
-    fetchUnreadNotificationCount,
-    setNotificationsFilter,
-    markNotifications,
-    toggleUIProp,
-    muteNotifications,
-    unMuteNotifications,
-    updateNotificationsSettings,
-    setNotificationsSettingsItem
-  } = useMappedStore();
-  const location = useLocation();
+    ) : undefined
+  };
 
   return (
-    <UserNav
-      global={global}
-      dynamicProps={dynamicProps}
-      history={history}
-      location={location}
-      users={users}
-      ui={ui}
-      activeUser={activeUser!!}
-      notifications={notifications}
-      setActiveUser={setActiveUser}
-      updateActiveUser={updateActiveUser}
-      deleteUser={deleteUser}
-      addAccount={addAccount}
-      fetchNotifications={fetchNotifications}
-      fetchUnreadNotificationCount={fetchUnreadNotificationCount}
-      setNotificationsFilter={setNotificationsFilter}
-      markNotifications={markNotifications}
-      toggleUIProp={toggleUIProp}
-      muteNotifications={muteNotifications}
-      unMuteNotifications={unMuteNotifications}
-      updateNotificationsSettings={updateNotificationsSettings}
-      setNotificationsSettingsItem={setNotificationsSettingsItem}
-    />
+    <>
+      <div className="user-nav">
+        {global.usePrivate && (
+          <div onClick={() => setShowPurchaseDialog(true)} className="user-points cursor-pointer">
+            {rocketSvg}
+          </div>
+        )}
+        <WalletBadge icon={icon} />
+
+        {global.usePrivate ? (
+          <>
+            <ToolTip content={_t("user-nav.notifications")}>
+              <span className="notifications" onClick={() => toggleUIProp("notifications")}>
+                {notifications.unread > 0 && (
+                  <span className="notifications-badge notranslate">
+                    {notifications.unread.toString().length < 3 ? notifications.unread : "..."}
+                  </span>
+                )}
+                {global.notifications ? bellSvg : bellOffSvg}
+              </span>
+            </ToolTip>
+            <ToolTip content={_t("user-nav.chats")}>
+              <Link to={`/chats`}>
+                <span className="chats">{messangerSvg}</span>
+              </Link>
+            </ToolTip>
+          </>
+        ) : (
+          <></>
+        )}
+
+        <DropDown {...dropDownConfig} float="right" header={`@${activeUser?.username}`} />
+      </div>
+      {ui.notifications && <UserNotifications history={history} />}
+      {gallery && <Gallery onHide={() => setGallery(false)} />}
+      {drafts && <Drafts history={history} onHide={() => setDrafts(false)} />}
+      {bookmarks && <Bookmarks history={history} onHide={() => setBookmarks(false)} />}
+      {schedules && <Schedules history={history} onHide={() => setSchedules(false)} />}
+      {fragments && <Fragments onHide={() => setFragments(false)} />}
+      <PurchaseQrDialog
+        show={showPurchaseDialog}
+        setShow={setShowPurchaseDialog}
+        activeUser={activeUser}
+        location={location}
+      />
+    </>
   );
 };
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 44c3f9fc9b9..1354d39ca68 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -88,7 +88,7 @@ export const Chats = (props: Props) => {
                     </div>
                   ) : (
                     // Handle the case when the user hasn't joined any community here
-                    <ChatsMessagesBox {...props} deletePublicMessage={props.deletePublicMessage} />
+                    <ChatsMessagesBox {...props} />
                   )}
                 </>
               ) : (
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 6bbcb79a15c..04d16e296d5 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -327,6 +327,7 @@ export const replaceDirectMessage = (peer: string, data: DirectMessage) => (disp
 
 export const verifyDirectMessageSending =
   (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
+    console.log("verifyDirectMessageSending called");
     dispatch(verifyDirectMessageSendingAct(peer, data));
   };
 
diff --git a/src/desktop/app/components/navbar/index.tsx b/src/desktop/app/components/navbar/index.tsx
index f7ccdacb252..96485cdcc91 100644
--- a/src/desktop/app/components/navbar/index.tsx
+++ b/src/desktop/app/components/navbar/index.tsx
@@ -21,7 +21,7 @@ import { DynamicProps } from "../../../../common/store/dynamic-props/types";
 
 import ToolTip from "../../../../common/components/tooltip";
 import Login from "../../../../common/components/login";
-import UserNav from "../../../../common/components/user-nav";
+import { UserNav } from "../../../../common/components/user-nav";
 import DropDown from "../../../../common/components/dropdown";
 import Updater from "../updater";
 import SwitchLang from "../../../../common/components/switch-lang";
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 3ce46e0e1a7..0f4672a5ae7 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -19,6 +19,7 @@ import { getProfileMetaData, getPrivateKey } from "../common/components/chats/ut
 
 import { useMappedStore } from "../common/store/use-mapped-store";
 import { ChatContext } from "../common/components/chats/chat-context-provider";
+import { useTimeoutFn } from "react-use";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -81,11 +82,21 @@ const MessageManager = () => {
   useEffect(() => {
     if (!messageServiceInstance && keys?.priv) {
       const messageService = initMessageServiceInstance(keys);
-      setMessageServiceInstance(messageService!);
+      console.log("messageService", messageService!!);
+      setMessageServiceInstance(messageService);
       setMessageService(messageService!);
     }
   }, [keys]);
 
+  // useEffect(() => {
+  //   if (messageServiceInstance === undefined && keys?.priv) {
+  //     const messageService = initMessageServiceInstance(keys);
+  //     if (messageService) {
+  //       setMessageService(messageService);
+  //     }
+  //   }
+  // }, [keys]);
+
   useEffect(() => {
     if (activeUser) {
       getNostrKeys(activeUser);
@@ -95,7 +106,8 @@ const MessageManager = () => {
   const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeysType;
     const messageService = initMessageServiceInstance(detail);
-    setMessageServiceInstance(messageService!);
+    console.log("messageService", messageService!!);
+    setMessageServiceInstance(messageService);
     setMessageService(messageService!);
   };
 
@@ -187,7 +199,18 @@ const MessageManager = () => {
       const { peer, id } = m;
       setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
       addDirectMessages(peer, m);
-      checkDirectMessageSending(peer, m);
+      const startTimeout = () => {
+        console.log("Start time out called");
+        useTimeoutFn(() => {
+          console.log("Inner called");
+          checkDirectMessageSending(peer, m);
+        }, 2000);
+      };
+
+      // Start the timeout
+      startTimeout();
+      // const [startTimeout] = useTimeoutFn(checkDirectMessageSending(peer, m), 20000);
+      // checkDirectMessageSending(peer, m);
     });
   };
 
@@ -210,9 +233,10 @@ const MessageManager = () => {
   }, [messageService, chat.directMessages]);
 
   const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
-    setTimeout(() => {
-      verifyDirectMessageSending(peer, data);
-    }, 20000);
+    // setTimeout(() => {
+    console.log("checkDirectMessageSending called");
+    verifyDirectMessageSending(peer, data);
+    // }, 20000);
   };
 
   // // Direct message handler after sent

From 144bbbdbe35ef4e9cafcb0dc8dbfd8263bef4d93 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Sat, 16 Sep 2023 15:40:13 +0500
Subject: [PATCH 072/179] Show Info message to user if any community chat is
 not enabled yet by the community owner

---
 .../chats/chat-context-provider.tsx           | 34 +++++--------------
 .../components/chats/chat-input/index.tsx     | 25 +++++++++++++-
 .../chats/chat-popup/chat-constants.ts        |  1 +
 .../components/chats/chat-popup/index.tsx     |  4 +++
 .../chats/chats-messages-box/index.tsx        | 29 ++++++++++++++--
 .../chats/chats-messages-view/index.tsx       |  2 ++
 .../chats/join-community-chat-btn/index.tsx   |  4 +--
 7 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index bfba6377d45..92fb0315ed3 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -18,15 +18,15 @@ interface Context {
   revealPrivKey: boolean;
   chatPrivKey: string;
   receiverPubKey: string;
-  messageServiceInstance: MessageService | undefined;
+  messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
   setActiveUserKeys: (keys: NostrKeysType) => void;
   setReceiverPubKey: (key: string) => void;
-  setMessageServiceInstance: (instance: MessageService | undefined) => void;
-  initMessageServiceInstance: (keys: Keys) => MessageService | undefined;
+  setMessageServiceInstance: (instance: MessageService | null) => void;
+  initMessageServiceInstance: (keys: Keys) => MessageService | null;
   joinChat: () => void;
 }
 
@@ -41,7 +41,7 @@ export const ChatContext = React.createContext<Context>({
   revealPrivKey: false,
   chatPrivKey: "",
   receiverPubKey: "",
-  messageServiceInstance: undefined,
+  messageServiceInstance: null,
   hasUserJoinedChat: false,
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
@@ -49,7 +49,7 @@ export const ChatContext = React.createContext<Context>({
   setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
   setMessageServiceInstance: () => {},
-  initMessageServiceInstance: () => (({} as MessageService) || undefined),
+  initMessageServiceInstance: () => (({} as MessageService) || null),
   joinChat: () => {}
 });
 
@@ -61,9 +61,7 @@ export default function ChatContextProvider(props: Props) {
   const [chatPrivKey, setChatPrivKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | undefined>(
-    undefined
-  );
+  const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | null>(null);
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
@@ -92,7 +90,7 @@ export default function ChatContextProvider(props: Props) {
     if (showSpinner) {
       setTimeout(() => {
         setShowSpinner(false);
-      }, 6000);
+      }, 3000);
     }
   }, [showSpinner]);
 
@@ -108,27 +106,13 @@ export default function ChatContextProvider(props: Props) {
     setActiveUserKeys(activeUserKeys);
   };
 
-  // const initMessageServiceInstance = (keys: Keys) => {
-  //   if (messageServiceInstance) {
-  //     messageServiceInstance.close();
-  //     setMessageServiceInstance(undefined);
-  //   }
-
-  //   let newMessageService: MessageService | undefined = undefined;
-  //   if (keys) {
-  //     newMessageService = new MessageService(keys.priv, keys.pub);
-  //     setMessageServiceInstance(newMessageService);
-  //   }
-  //   return newMessageService;
-  // };
-
   const initMessageServiceInstance = (keys: Keys) => {
     if (messageServiceInstance) {
       messageServiceInstance.close();
-      setMessageServiceInstance(undefined);
+      setMessageServiceInstance(null);
     }
 
-    let newMessageService: MessageService | undefined = undefined;
+    let newMessageService: MessageService | null = null;
     if (keys) {
       newMessageService = new MessageService(keys.priv, keys.pub);
       setMessageServiceInstance(newMessageService);
diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index eca1dd740e9..c58061737e9 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -7,6 +7,7 @@ import { EmojiPickerStyleProps } from "../types";
 
 import ClickAwayListener from "../../clickaway-listener";
 import EmojiPicker from "../../emoji-picker/index-old";
+// import { EmojiPicker } from "../../emoji-picker";
 import GifPicker from "../../gif-picker";
 import { error } from "../../feedback";
 import Tooltip from "../../tooltip";
@@ -49,9 +50,9 @@ export default function ChatInput(props: Props) {
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
+  // const [isMounted, setIsMounted] = useState(false);
 
   const { messageServiceInstance, chatPrivKey } = useContext(ChatContext);
-  // console.log("yaha check kar ka dekho", messageServiceInstance, chatPrivKey);
 
   const {
     isCommunity,
@@ -65,6 +66,15 @@ export default function ChatInput(props: Props) {
     receiverPubKey
   } = props;
 
+  // useEffect(() => {
+  //   setIsMounted(true);
+  //   setShowEmojiPicker(true);
+  //   return () => {
+  //     setShowEmojiPicker(false);
+  //     setIsMounted(false);
+  //   };
+  // }, []);
+
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
@@ -210,6 +220,19 @@ export default function ChatInput(props: Props) {
           </div>
         </ClickAwayListener>
 
+        {/* <div className="chatbox-emoji-picker" id="chatbox-emoji-picker" role="none">
+          <div className="chatbox-emoji">
+            <Tooltip content={_t("editor-toolbar.emoji")}>
+              <div className="emoji-icon">{emoticonHappyOutlineSvg}</div>
+            </Tooltip>
+            {showEmojiPicker && isMounted && (
+              <EmojiPicker
+                anchor={document.querySelector("#chatbox-emoji-picker")!!}
+                onSelect={(e) => handleEmojiSelection(e)}
+              />
+            )}
+          </div>
+        </div> */}
         {message.length === 0 && (
           <React.Fragment>
             <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
diff --git a/src/common/components/chats/chat-popup/chat-constants.ts b/src/common/components/chats/chat-popup/chat-constants.ts
index 5401fcde0b6..66d53a8a3ca 100644
--- a/src/common/components/chats/chat-popup/chat-constants.ts
+++ b/src/common/components/chats/chat-popup/chat-constants.ts
@@ -43,3 +43,4 @@ export const RESENDMESSAGE = "resendMessage";
 export const CHAT = "chat";
 export const COMMUNITY = "community";
 export const CHATPAGE = "chatPage";
+export const CHANNEL = "channel";
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 54288038a1c..450fe4070a5 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -131,6 +131,10 @@ export default function ChatPopUp(props: Props) {
   const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
 
+  useEffect(() => {
+    console.log("chat in store", chat);
+  }, [chat]);
+
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 4fd33f2f380..64bd8289896 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -9,10 +9,11 @@ import ChatsMessagesView from "../chats-messages-view";
 
 import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
 import LinearProgress from "../../linear-progress";
-import { formattedUserName } from "../utils";
+import { formattedUserName, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 
 import "./index.scss";
+import { CHANNEL } from "../chat-popup/chat-constants";
 
 interface MatchParams {
   filter: string;
@@ -43,13 +44,25 @@ export default function ChatsMessagesBox(props: Props) {
   const [maxHeight, setMaxHeight] = useState(0);
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [inProgress, setInProgress] = useState(false);
+  const [isCommunityChatEnabled, setIsCommunityChatEnabled] = useState(false);
 
   useEffect(() => {
     setMaxHeight(window.innerHeight - 68);
   }, [typeof window !== "undefined"]);
 
   useEffect(() => {
-    console.log("state has been updated", currentChannel);
+    if (username && !username.startsWith("@")) {
+      const isCommunity = chat.channels.some((channel) => channel.communityName === username);
+      if (!isCommunity) {
+        getCommunityProfile();
+      } else {
+        setIsCommunityChatEnabled(true);
+      }
+    }
+  }, [username]);
+
+  useEffect(() => {
+    console.log("Observe here currentChannel", currentChannel);
   }, [currentChannel]);
 
   useEffect(() => {
@@ -82,6 +95,12 @@ export default function ChatsMessagesBox(props: Props) {
     }
   };
 
+  const getCommunityProfile = async () => {
+    const communityProfile = await getProfileMetaData(username);
+    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
+    setIsCommunityChatEnabled(haschannelMetaData);
+  };
+
   return (
     <>
       <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
@@ -89,7 +108,7 @@ export default function ChatsMessagesBox(props: Props) {
           <div className="no-chat-select d-flex justify-content-center align-items-center">
             <p className="start-chat text-center">Select a chat or start a new conversation</p>
           </div>
-        ) : (
+        ) : isCommunityChatEnabled ? (
           <>
             <ChatsMessagesHeader
               username={username}
@@ -107,6 +126,10 @@ export default function ChatsMessagesBox(props: Props) {
               setInProgress={setInProgress}
             />
           </>
+        ) : (
+          <p className="no-chat-select d-flex justify-content-center align-items-center">
+            Community chat not started yet
+          </p>
         )}
       </div>
     </>
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index c05eab003c3..a4edbce6b78 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -69,6 +69,8 @@ export default function ChatsMessagesView(props: Props) {
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
+  console.log("Current channel in messages view", props.currentChannel);
+
   useEffect(() => {
     getActiveUserKeys();
     isDirectUserOrCommunity();
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index 109791f3800..2c6f41893f4 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -9,7 +9,7 @@ import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import { ChatContext } from "../chat-context-provider";
-import { NOSTRKEY } from "../chat-popup/chat-constants";
+import { CHANNEL, NOSTRKEY } from "../chat-popup/chat-constants";
 import { getProfileMetaData, setChannelMetaData } from "../utils";
 
 interface Props {
@@ -67,7 +67,7 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const fetchCommunityProfile = async () => {
     const communityProfile = await getProfileMetaData(props.community?.name);
-    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty("channel");
+    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
     setIsChatEnabled(haschannelMetaData);
 
     if (!currentChannel) {

From cffd829afab2905f4238adff7dfcafc3fa27d5e2 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Sat, 16 Sep 2023 16:21:34 +0500
Subject: [PATCH 073/179] Minor fixes

---
 src/common/app.tsx                            |  6 +--
 .../chats/chat-context-provider.tsx           | 37 +++++++++----------
 .../components/chats/chat-popup/index.tsx     |  4 +-
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 222ccdbe6f8..4639441efb2 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -29,8 +29,8 @@ import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
-import ChatContextProvider from "./components/chats/chat-context-provider";
-import ChatPopUp from "./components/chats/chat-popup";
+import { ChatContextProvider } from "./components/chats/chat-context-provider";
+import { ChatPopUp } from "./components/chats/chat-popup";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -103,7 +103,7 @@ const App = (props: any) => {
       {/*<ReactQueryDevtools initialIsOpen={false} />*/}
       <Tracker />
       <UserActivityRecorder />
-      <ChatContextProvider {...props}>
+      <ChatContextProvider>
         <Switch>
           <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
           <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 92fb0315ed3..7770e1839de 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Keys } from "../../../managers/message-manager-types";
+import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
@@ -11,6 +12,7 @@ import {
 } from "./utils";
 import * as ls from "../../util/local-storage";
 import { setNostrkeys } from "../../../managers/message-manager";
+import { useMount } from "react-use";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -32,7 +34,6 @@ interface Context {
 
 interface Props {
   children: JSX.Element | JSX.Element[];
-  resetChat: () => void;
 }
 
 export const ChatContext = React.createContext<Context>({
@@ -53,8 +54,8 @@ export const ChatContext = React.createContext<Context>({
   joinChat: () => {}
 });
 
-export default function ChatContextProvider(props: Props) {
-  const { activeUser } = useMappedStore();
+export const ChatContextProvider = (props: Props) => {
+  const { activeUser, resetChat } = useMappedStore();
 
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: " ", priv: "" });
   const [showSpinner, setShowSpinner] = useState(true);
@@ -65,9 +66,9 @@ export default function ChatContextProvider(props: Props) {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
 
-  useEffect(() => {
+  useMount(() => {
     getActiveUserKeys();
-  }, []);
+  });
 
   useEffect(() => {
     if (messageServiceInstance) {
@@ -86,24 +87,22 @@ export default function ChatContextProvider(props: Props) {
     }
   }, [shouldUpdateProfile, messageServiceInstance]);
 
-  useEffect(() => {
-    if (showSpinner) {
-      setTimeout(() => {
-        setShowSpinner(false);
-      }, 3000);
-    }
-  }, [showSpinner]);
+  // useEffect(() => {
+  //   if (showSpinner) {
+  //     setTimeout(() => {
+  //       setShowSpinner(false);
+  //     }, 3000);
+  //   }
+  // }, [showSpinner]);
+
+  useDebounce(() => setShowSpinner(false), 6000, [showSpinner]);
 
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
     const privKey = getPrivateKey(activeUser?.username!);
     setHasUserJoinedChat(!!pubKey);
     setChatPrivKey(privKey);
-    const activeUserKeys = {
-      pub: pubKey,
-      priv: privKey
-    };
-    setActiveUserKeys(activeUserKeys);
+    setActiveUserKeys({ pub: pubKey, priv: privKey });
   };
 
   const initMessageServiceInstance = (keys: Keys) => {
@@ -122,8 +121,6 @@ export default function ChatContextProvider(props: Props) {
   };
 
   const joinChat = async () => {
-    console.log("Join chat run in context");
-    const { resetChat } = props;
     resetChat();
     const keys = createNoStrAccount();
     ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
@@ -158,4 +155,4 @@ export default function ChatContextProvider(props: Props) {
       {props.children}
     </ChatContext.Provider>
   );
-}
+};
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 450fe4070a5..3a30701cdc8 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -82,7 +82,7 @@ interface Props {
   toggleUIProp: (what: ToggleType) => void;
 }
 
-export default function ChatPopUp(props: Props) {
+export const ChatPopUp = (props: Props) => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
 
   const {
@@ -943,4 +943,4 @@ export default function ChatPopUp(props: Props) {
       )}
     </>
   );
-}
+};

From b65d66045cce4cf021faf3a857763a29c81d7b43 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Sat, 16 Sep 2023 19:10:46 +0500
Subject: [PATCH 074/179] Add option to user to  join any community from chat
 extended page

---
 .../chats/chat-context-provider.tsx           |   2 +-
 .../chats/chats-messages-box/index.scss       |   7 +
 .../chats/chats-messages-box/index.tsx        | 124 ++++++++++++------
 .../components/chats/chats-sidebar/indes.tsx  |  13 +-
 .../components/chats/chats-sidebar/index.scss |   2 +-
 5 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 7770e1839de..51dc7751c3a 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -95,7 +95,7 @@ export const ChatContextProvider = (props: Props) => {
   //   }
   // }, [showSpinner]);
 
-  useDebounce(() => setShowSpinner(false), 6000, [showSpinner]);
+  useDebounce(() => setShowSpinner(false), 3000, [showSpinner]);
 
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
diff --git a/src/common/components/chats/chats-messages-box/index.scss b/src/common/components/chats/chats-messages-box/index.scss
index fcf93fe9ca6..73d644d8d86 100644
--- a/src/common/components/chats/chats-messages-box/index.scss
+++ b/src/common/components/chats/chats-messages-box/index.scss
@@ -20,6 +20,9 @@
     height: calc(100vh - 70px);
     font-size: 22px;
     font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .start-chat {
       @include themify(day) {
@@ -29,5 +32,9 @@
         color: $white;
       }
     }
+    .info-message {
+      font-size: 16px;
+      // font-weight: 100;
+    }
   }
 }
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 64bd8289896..789b4f0cf58 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
 import { Account } from "../../../store/accounts/types";
@@ -14,6 +14,8 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 
 import "./index.scss";
 import { CHANNEL } from "../chat-popup/chat-constants";
+import { Button } from "react-bootstrap";
+import { ChatContext } from "../chat-context-provider";
 
 interface MatchParams {
   filter: string;
@@ -37,6 +39,8 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
 
+  const { messageServiceInstance } = useContext(ChatContext);
+
   const { channels, updatedChannel } = chat;
   const { match } = props;
   const username = match.params.username;
@@ -45,26 +49,46 @@ export default function ChatsMessagesBox(props: Props) {
   const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatEnabled, setIsCommunityChatEnabled] = useState(false);
+  const [isCommunityJoined, setIsCommunityChatJoined] = useState(false);
+  const [currentCommunity, setCurrentCommunity] = useState<Channel>();
+  const [hasLeftCommunity, setHasLeftCommunity] = useState(false);
 
   useEffect(() => {
     setMaxHeight(window.innerHeight - 68);
   }, [typeof window !== "undefined"]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setMaxHeight(window.innerHeight - 68);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (currentCommunity && chat.leftChannelsList.includes(currentCommunity.id)) {
+      setHasLeftCommunity(true);
+    }
+  }, [currentCommunity]);
+
   useEffect(() => {
     if (username && !username.startsWith("@")) {
+      getCommunityProfile();
       const isCommunity = chat.channels.some((channel) => channel.communityName === username);
       if (!isCommunity) {
-        getCommunityProfile();
+        setIsCommunityChatJoined(false);
       } else {
         setIsCommunityChatEnabled(true);
       }
+    } else {
+      setIsCommunityChatJoined(false);
+      setIsCommunityChatEnabled(true);
     }
   }, [username]);
 
-  useEffect(() => {
-    console.log("Observe here currentChannel", currentChannel);
-  }, [currentChannel]);
-
   useEffect(() => {
     fetchCurrentChannel(formattedUserName(username));
   }, [updatedChannel, username, channels]);
@@ -97,41 +121,67 @@ export default function ChatsMessagesBox(props: Props) {
 
   const getCommunityProfile = async () => {
     const communityProfile = await getProfileMetaData(username);
+    setCurrentCommunity(communityProfile.channel);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
     setIsCommunityChatEnabled(haschannelMetaData);
   };
 
+  const handleJoinCommunity = () => {
+    if (currentCommunity) {
+      if (hasLeftCommunity) {
+        messageServiceInstance?.updateLeftChannelList(
+          chat.leftChannelsList.filter((x) => x !== currentCommunity?.id)
+        );
+      }
+      messageServiceInstance?.loadChannel(currentCommunity?.id);
+      setIsCommunityChatJoined(true);
+    }
+  };
+
   return (
-    <>
-      <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
-        {match.url == "/chats" ? (
-          <div className="no-chat-select d-flex justify-content-center align-items-center">
-            <p className="start-chat text-center">Select a chat or start a new conversation</p>
-          </div>
-        ) : isCommunityChatEnabled ? (
-          <>
-            <ChatsMessagesHeader
-              username={username}
-              {...props}
-              currentChannel={currentChannel!}
-              currentChannelSetter={setCurrentChannel}
-            />
-            {inProgress && <LinearProgress />}
-            <ChatsMessagesView
-              {...props}
-              username={username}
-              currentChannel={currentChannel!}
-              inProgress={inProgress}
-              currentChannelSetter={setCurrentChannel}
-              setInProgress={setInProgress}
-            />
-          </>
-        ) : (
-          <p className="no-chat-select d-flex justify-content-center align-items-center">
-            Community chat not started yet
-          </p>
-        )}
-      </div>
-    </>
+    <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
+      {match.url === "/chats" ? (
+        <div className="no-chat-select">
+          <p className="start-chat text-center">Select a chat or start a new conversation</p>
+        </div>
+      ) : (
+        <>
+          {username.startsWith("@") || (isCommunityChatEnabled && isCommunityJoined) ? (
+            <>
+              <ChatsMessagesHeader
+                username={username}
+                {...props}
+                currentChannel={currentChannel!}
+                currentChannelSetter={setCurrentChannel}
+              />
+              {inProgress && <LinearProgress />}
+              <ChatsMessagesView
+                {...props}
+                username={username}
+                currentChannel={currentChannel!}
+                inProgress={inProgress}
+                currentChannelSetter={setCurrentChannel}
+                setInProgress={setInProgress}
+              />
+            </>
+          ) : isCommunityChatEnabled && !isCommunityJoined ? (
+            <div className="no-chat-select">
+              <div className="text-center">
+                <p className="info-message">
+                  {hasLeftCommunity
+                    ? "You have left this community chat. Rejoin the chat now!"
+                    : " You are not part of this community. Join the community chat now!"}
+                </p>
+                <Button onClick={handleJoinCommunity}>
+                  {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <p className="no-chat-select">Community chat not started yet</p>
+          )}
+        </>
+      )}
+    </div>
   );
 }
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index e0c0d92d704..97d1e94c769 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -11,17 +11,14 @@ import accountReputation from "../../../helper/account-reputation";
 import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
 import { _t } from "../../../i18n";
 import { arrowBackSvg, syncSvg } from "../../../img/svg";
-import { Chat, DirectContactsType } from "../../../store/chat/types";
 import ChatsScroller from "../chats-scroller";
 import LinearProgress from "../../linear-progress";
 import Tooltip from "../../tooltip";
 import UserAvatar from "../../user-avatar";
 
 import "./index.scss";
-import DropDown, { MenuItem } from "../../dropdown";
-import { CHAT, DropDownStyle } from "../chat-popup/chat-constants";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
-import { AccountWithReputation, NostrKeysType } from "../types";
+import { AccountWithReputation } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
@@ -63,8 +60,6 @@ export default function ChatsSideBar(props: Props) {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [communities, setCommunities] = useState<Channel[]>([]);
 
-  console.log("setInProgress in chats sidebar", setShowSpinner);
-
   useDebounce(
     async () => {
       if (searchText.length !== 0) {
@@ -79,7 +74,7 @@ export default function ChatsSideBar(props: Props) {
   );
 
   useEffect(() => {
-    if (username !== undefined) {
+    if (username) {
       if (username.startsWith("@")) {
         getReceiverPubKey(formattedUserName(username));
       }
@@ -89,12 +84,10 @@ export default function ChatsSideBar(props: Props) {
   useEffect(() => {
     const communities = getJoinedCommunities(channels, leftChannelsList);
     setCommunities(communities);
-    // fetchProfileData();
   }, [channels, leftChannelsList]);
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
-    console.log("element.scrollTop", element.scrollTop);
     if (element.scrollTop > 2) {
       setShowDivider(true);
     } else {
@@ -120,13 +113,11 @@ export default function ChatsSideBar(props: Props) {
   };
 
   const getReceiverPubKey = async (username: string) => {
-    console.log("Username ha yar", username);
     const peer = directContacts.find((x) => x.name === username)?.pubkey ?? "";
     if (peer) {
       setReceiverPubKey(peer);
     } else {
       const pubkey = await getUserChatPublicKey(username);
-      console.log("Pubkey", pubkey);
       if (pubkey === undefined) {
         setReceiverPubKey("");
       } else {
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index 9eeda140b33..4b5140bd4cd 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -218,7 +218,7 @@
   }
 
   .chats-list {
-    height: calc(100vh - 220px);
+    // height: calc(100vh - 220px);
     overflow: auto;
     a {
       color: inherit;

From 62d9c796e62c7957d49155fdeb05a6669995c495 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Sat, 16 Sep 2023 19:41:48 +0500
Subject: [PATCH 075/179] Fix in message-box

---
 src/common/components/chats/chats-messages-box/index.tsx | 1 +
 src/common/components/chats/chats-sidebar/index.scss     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 789b4f0cf58..d6dc21bb79d 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -81,6 +81,7 @@ export default function ChatsMessagesBox(props: Props) {
       if (!isCommunity) {
         setIsCommunityChatJoined(false);
       } else {
+        setIsCommunityChatJoined(true);
         setIsCommunityChatEnabled(true);
       }
     } else {
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index 4b5140bd4cd..9eeda140b33 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -218,7 +218,7 @@
   }
 
   .chats-list {
-    // height: calc(100vh - 220px);
+    height: calc(100vh - 220px);
     overflow: auto;
     a {
       color: inherit;

From 83cd4b95b64043fb82dcdf053a82615a8bfac90c Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 18 Sep 2023 19:30:31 +0500
Subject: [PATCH 076/179] WIP

---
 .../chats/chat-context-provider.tsx           | 27 +++--
 .../components/chats/chat-popup/index.tsx     | 10 +-
 .../chats/chats-channel-messages/index.scss   | 99 ++++++++++---------
 .../chats/chats-channel-messages/index.tsx    | 75 ++++++++------
 .../chats-community-dropdown-menu/index.tsx   |  9 +-
 .../chats/chats-direct-messages/index.scss    | 15 ++-
 .../chats/chats-direct-messages/index.tsx     | 87 +++++++++++-----
 .../chats/chats-messages-box/index.tsx        | 52 ++++++----
 .../chats/chats-messages-header/index.scss    | 14 +++
 .../chats/chats-messages-header/index.tsx     | 26 ++---
 .../chats/chats-messages-view/index.tsx       |  6 +-
 .../chats/chats-side-profile/index.scss       |  8 ++
 .../chats/chats-side-profile/index.tsx        | 23 +++++
 .../components/chats/chats-sidebar/indes.tsx  | 16 +--
 .../chats/utils/check-contiguous-message.ts   | 16 +++
 src/common/components/chats/utils/index.ts    |  1 +
 src/common/pages/chats/index.tsx              | 19 +++-
 src/managers/message-manager.tsx              | 26 ++---
 18 files changed, 337 insertions(+), 192 deletions(-)
 create mode 100644 src/common/components/chats/chats-side-profile/index.scss
 create mode 100644 src/common/components/chats/chats-side-profile/index.tsx
 create mode 100644 src/common/components/chats/utils/check-contiguous-message.ts

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 51dc7751c3a..9b66d5a375f 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Keys } from "../../../managers/message-manager-types";
+import { Channel, Keys } from "../../../managers/message-manager-types";
 import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
@@ -22,6 +22,8 @@ interface Context {
   receiverPubKey: string;
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
+  currentChannel: Channel | null;
+  setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
@@ -44,6 +46,8 @@ export const ChatContext = React.createContext<Context>({
   receiverPubKey: "",
   messageServiceInstance: null,
   hasUserJoinedChat: false,
+  currentChannel: null,
+  setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
   setChatPrivKey: () => {},
@@ -65,6 +69,11 @@ export const ChatContextProvider = (props: Props) => {
   const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | null>(null);
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
+  const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
+
+  useEffect(() => {
+    console.log("currentChannel", currentChannel);
+  }, [currentChannel]);
 
   useMount(() => {
     getActiveUserKeys();
@@ -87,13 +96,13 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [shouldUpdateProfile, messageServiceInstance]);
 
-  // useEffect(() => {
-  //   if (showSpinner) {
-  //     setTimeout(() => {
-  //       setShowSpinner(false);
-  //     }, 3000);
-  //   }
-  // }, [showSpinner]);
+  useEffect(() => {
+    if (showSpinner) {
+      setTimeout(() => {
+        setShowSpinner(false);
+      }, 3000);
+    }
+  }, [showSpinner]);
 
   useDebounce(() => setShowSpinner(false), 3000, [showSpinner]);
 
@@ -142,6 +151,8 @@ export const ChatContextProvider = (props: Props) => {
         chatPrivKey,
         messageServiceInstance,
         hasUserJoinedChat,
+        currentChannel,
+        setCurrentChannel,
         setRevealPrivKey,
         setShowSpinner,
         setChatPrivKey,
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 3a30701cdc8..d584c598081 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -91,6 +91,8 @@ export const ChatPopUp = (props: Props) => {
     activeUserKeys,
     showSpinner,
     hasUserJoinedChat,
+    currentChannel,
+    setCurrentChannel,
     setRevealPrivKey,
     setShowSpinner,
     joinChat
@@ -115,7 +117,6 @@ export const ChatPopUp = (props: Props) => {
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
-  const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [clickedMessage, setClickedMessage] = useState("");
   const [keyDialog, setKeyDialog] = useState(false);
@@ -652,12 +653,7 @@ export const ChatPopUp = (props: Props) => {
               )}
               {isCommunity && (
                 <div className="community-menu">
-                  <ChatsCommunityDropdownMenu
-                    history={props.history}
-                    username={communityName}
-                    currentChannel={currentChannel!}
-                    currentChannelSetter={setCurrentChannel}
-                  />
+                  <ChatsCommunityDropdownMenu history={props.history} username={communityName} />
                 </div>
               )}{" "}
               {!isCommunity && !isCurrentUser && noStrPrivKey && (
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 6b972ed9fad..077c36ca6ba 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -8,22 +8,6 @@
       font-size: 14px;
     }
   }
-  .profile-box {
-    padding: 15px;
-    .profile-box-content {
-      .user-avatar.large {
-        margin-bottom: 20px;
-      }
-      .profile-name {
-        margin-bottom: 10px;
-        font-size: 18px;
-        font-weight: 800;
-      }
-      .profile-box-buttons {
-        padding: 0 5px;
-      }
-    }
-  }
 
   .receiver {
     display: flex;
@@ -72,19 +56,19 @@
             border-radius: 0px 10px 10px 0px;
           }
 
-          .receiver-msg-time {
-            @include themify(day) {
-              color: rgb(138, 141, 145);
-            }
-            @include themify(night) {
-              color: $charcoal-grey;
-            }
+          // .receiver-msg-time {
+          //   @include themify(day) {
+          //     color: rgb(138, 141, 145);
+          //   }
+          //   @include themify(night) {
+          //     color: $charcoal-grey;
+          //   }
 
-            font-size: 10px;
-            display: flex;
-            justify-content: flex-end;
-            margin: -5px 7px 3px 45px;
-          }
+          //   font-size: 10px;
+          //   display: flex;
+          //   justify-content: flex-end;
+          //   margin: -5px 7px 3px 45px;
+          // }
 
           &.gif {
             background: none;
@@ -113,14 +97,14 @@
                 padding-bottom: 10px;
               }
             }
-            .receiver-msg-time {
-              @include themify(day) {
-                color: rgb(138, 141, 145);
-              }
-              @include themify(night) {
-                color: $white-three;
-              }
-            }
+            // .receiver-msg-time {
+            //   @include themify(day) {
+            //     color: rgb(138, 141, 145);
+            //   }
+            //   @include themify(night) {
+            //     color: $white-three;
+            //   }
+            // }
           }
         }
       }
@@ -207,9 +191,9 @@
 
         &.gif,
         &.chat-image {
-          .sender-message-time {
-            color: rgb(138, 141, 145);
-          }
+          // .sender-message-time {
+          //   color: rgb(138, 141, 145);
+          // }
           .sender-message-content {
             padding: 10px 0 0 5px;
             img {
@@ -236,16 +220,16 @@
           }
         }
 
-        .sender-message-time {
-          color: $white;
-          margin-bottom: 3px;
-          font-size: 10px;
-          display: flex;
-          justify-content: flex-end;
-          margin-right: 7px;
-          margin-left: 45px;
-          margin-top: -5px;
-        }
+        // .sender-message-time {
+        //   color: $white;
+        //   margin-bottom: 3px;
+        //   font-size: 10px;
+        //   display: flex;
+        //   justify-content: flex-end;
+        //   margin-right: 7px;
+        //   margin-left: 45px;
+        //   margin-top: -5px;
+        // }
       }
     }
   }
@@ -266,3 +250,20 @@
     }
   }
 }
+
+.profile-box {
+  padding: 15px;
+  .profile-box-content {
+    .user-avatar.large {
+      margin-bottom: 20px;
+    }
+    .profile-name {
+      margin: 5px 0 10px 0;
+      font-size: 18px;
+      font-weight: 800;
+    }
+    .profile-box-buttons {
+      padding: 0 5px;
+    }
+  }
+}
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index bd569406446..7c37e6f221f 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -37,7 +37,13 @@ import { error } from "../../feedback";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Theme } from "../../../store/global/types";
 import { NostrKeysType } from "../types";
-import { formatMessageTime, isMessageGif, isMessageImage, formatMessageDate } from "../utils";
+import {
+  formatMessageTime,
+  isMessageGif,
+  isMessageImage,
+  formatMessageDate,
+  checkContiguousMessage
+} from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
 interface Props {
@@ -284,16 +290,6 @@ export default function ChatsChannelMessages(props: Props) {
     return <></>;
   };
 
-  const checkContiguousMessage = (msg: PublicMessage, i: number) => {
-    const prevMsg = publicMessages[i - 1];
-    const msgAuthor = msg.creator;
-    const prevMsgAuthor = prevMsg ? prevMsg.creator : null;
-    if (msgAuthor === prevMsgAuthor) {
-      return true;
-    }
-    return false;
-  };
-
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -302,7 +298,7 @@ export default function ChatsChannelMessages(props: Props) {
           publicMessages.map((pMsg, i) => {
             const dayAndMonth = getFormattedDateAndDay(pMsg, i);
 
-            const isSameUserMessage = checkContiguousMessage(pMsg, i);
+            const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
 
             let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
 
@@ -435,18 +431,27 @@ export default function ChatsChannelMessages(props: Props) {
                       )}
 
                       <div className="receiver-messag">
-                        <div
-                          className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
-                            isImage ? "chat-image" : ""
-                          }`}
+                        <Tooltip
+                          content={
+                            formatMessageDate(pMsg.created).split(",")[1] +
+                            " " +
+                            formatMessageTime(pMsg.created)
+                          }
                         >
                           <div
-                            className="receiver-message-content"
-                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                          />
-                          <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
-                        </div>
-
+                            className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
+                              isImage ? "chat-image" : ""
+                            }`}
+                          >
+                            <div
+                              className={`receiver-message-content  ${isGif ? "gif" : ""} ${
+                                isImage ? "chat-image" : ""
+                              }`}
+                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                            />
+                            {/* <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p> */}
+                          </div>
+                        </Tooltip>
                         {hoveredMessageId === pMsg.id &&
                           privilegedUsers.includes(activeUser?.username!) && (
                             <Tooltip content={"Hide Message"}>
@@ -509,17 +514,25 @@ export default function ChatsChannelMessages(props: Props) {
                         </Tooltip>
                       )}
 
-                      <div
-                        className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
-                          isImage ? "chat-image" : ""
-                        }`}
+                      <Tooltip
+                        content={
+                          formatMessageDate(pMsg.created).split(",")[1] +
+                          " " +
+                          formatMessageTime(pMsg.created)
+                        }
                       >
                         <div
-                          className="sender-message-content"
-                          dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                        />
-                        <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
-                      </div>
+                          className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
+                            isImage ? "chat-image" : ""
+                          }`}
+                        >
+                          <div
+                            className="sender-message-content"
+                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                          />
+                          {/* <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p> */}
+                        </div>
+                      </Tooltip>
 
                       {pMsg.sent === 0 && (
                         <span style={{ margin: "10px 0 0 5px" }}>
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index ee9be8fb671..e41fbc79d05 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -31,15 +31,14 @@ interface Props {
   history: History;
   from?: string;
   username: string;
-  currentChannel: Channel;
-  currentChannelSetter: (channe: Channel) => void;
 }
 
 const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
 const ChatsCommunityDropdownMenu = (props: Props) => {
   const { activeUser, chat } = useMappedStore();
-  const { history, currentChannelSetter, from, currentChannel } = props;
+  const { currentChannel, setCurrentChannel } = useContext(ChatContext);
+  const { history, from } = props;
   const [step, setStep] = useState(0);
   const [keyDialog, setKeyDialog] = useState(false);
   const [inProgress, setInProgress] = useState(false);
@@ -115,7 +114,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
       newUpdatedModerator.role = selectedRole;
       newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
-      currentChannelSetter(newUpdatedChannel);
+      setCurrentChannel(newUpdatedChannel);
       messageServiceInstance?.updateChannel(currentChannel, newUpdatedChannel);
       success("Roles updated succesfully");
     }
@@ -485,7 +484,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     }
     try {
       messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
-      currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
+      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
 
       if (operationType === UNBLOCKUSER) {
         setStep(5);
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
index 1a682e4a2e2..a75f1a15306 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -11,16 +11,16 @@
   .receiver {
     display: flex;
     .user-img {
-      padding: 18px 8px 8px 16px;
+      padding: 8px 8px 8px 16px;
     }
     .community-user-img {
-      padding: 8px 8px 8px 16px;
+      padding: 8px 8px 0px 16px;
       .user-avatar.medium {
         cursor: pointer;
       }
     }
     .user-info {
-      padding-top: 8px;
+      padding-top: 20px;
       width: 100%;
       .user-msg-time {
         margin: 0;
@@ -65,11 +65,18 @@
           border-radius: 0px 10px 10px;
         }
       }
+      &.same-user {
+        padding-top: 1.5px;
+        margin-left: 4rem;
+        .receiver-message-content {
+          border-radius: 0px 10px 10px 10px;
+        }
+      }
     }
   }
 
   .sender {
-    margin-bottom: 0.17rem;
+    margin-bottom: 1.5px;
     .sender-message-time {
       color: rgb(138, 141, 145);
       display: flex;
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 04c13d72c5d..af1d4c29f73 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -3,7 +3,13 @@ import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
 import { Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import { formatMessageTime, formatMessageDate, isMessageGif, isMessageImage } from "../utils";
+import {
+  formatMessageTime,
+  formatMessageDate,
+  isMessageGif,
+  isMessageImage,
+  checkContiguousMessage
+} from "../utils";
 
 import { Theme } from "../../../store/global/types";
 import { DirectMessage } from "../../../../managers/message-manager-types";
@@ -97,6 +103,16 @@ export default function ChatsDirectMessages(props: Props) {
     return <></>;
   };
 
+  // const getFormattedDate = (msg: DirectMessage, i: number) => {
+  //   const prevMsg = directMessages[i - 1];
+  //   const msgDate = formatMessageDate(msg.created);
+  //   const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+  //   if (msgDate !== prevMsgDate) {
+  //     return true;
+  //   }
+  //   return false;
+  // };
+
   const handleConfirm = () => {
     switch (step) {
       case 1:
@@ -128,34 +144,51 @@ export default function ChatsDirectMessages(props: Props) {
 
                 const isImage = isMessageImage(msg.content);
 
+                const isSameUser = checkContiguousMessage(msg, i, directMessages);
+
+                // const date = getFormattedDate(msg, i);
+
+                // console.log('date', date, msg)
+
                 return (
                   <React.Fragment key={msg.id}>
                     {dayAndMonth}
                     {msg.creator !== activeUserKeys?.pub ? (
                       <div key={msg.id} className="receiver">
-                        <div className="user-img">
-                          <Link to={`/@${currentUser}`}>
-                            <span>
-                              <UserAvatar username={currentUser} size="medium" />
-                            </span>
-                          </Link>
-                        </div>
-                        <div className="user-info">
-                          <p className="user-msg-time">{formatMessageTime(msg.created)}</p>
+                        {!isSameUser && (
+                          <div className="user-img">
+                            <Link to={`/@${currentUser}`}>
+                              <span>
+                                <UserAvatar username={currentUser} size="medium" />
+                              </span>
+                            </Link>
+                          </div>
+                        )}
+
+                        <div className={`user-info ${isSameUser ? "same-user" : ""}`}>
+                          {/* <p className="user-msg-time">{formatMessageTime(msg.created)}</p> */}
 
                           <div className="receiver-messag">
-                            <div
-                              className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                                isImage ? "chat-image" : ""
-                              }`}
-                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                            />
+                            <Tooltip
+                              content={
+                                formatMessageDate(msg.created).split(",")[1] +
+                                " " +
+                                formatMessageTime(msg.created)
+                              }
+                            >
+                              <div
+                                className={`receiver-message-content ${isGif ? "gif" : ""} ${
+                                  isImage ? "chat-image" : ""
+                                }`}
+                                dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                              />
+                            </Tooltip>
                           </div>
                         </div>
                       </div>
                     ) : (
                       <div key={msg.id} className="sender">
-                        <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
+                        {/* <p className="sender-message-time">{formatMessageTime(msg.created)}</p> */}
                         <div
                           className={`sender-message ${
                             msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
@@ -174,12 +207,20 @@ export default function ChatsDirectMessages(props: Props) {
                               </span>
                             </Tooltip>
                           )}
-                          <div
-                            className={`sender-message-content ${isGif ? "gif" : ""} ${
-                              isImage ? "chat-image" : ""
-                            }`}
-                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                          />
+                          <Tooltip
+                            content={
+                              formatMessageDate(msg.created).split(",")[1] +
+                              " " +
+                              formatMessageTime(msg.created)
+                            }
+                          >
+                            <div
+                              className={`sender-message-content ${isGif ? "gif" : ""} ${
+                                isImage ? "chat-image" : ""
+                              }`}
+                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                            />
+                          </Tooltip>
                           {msg.sent === 0 && (
                             <span style={{ margin: "10px 0 0 5px" }}>
                               <Spinner animation="border" variant="primary" size="sm" />
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index d6dc21bb79d..6bda5f2d967 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -9,13 +9,14 @@ import ChatsMessagesView from "../chats-messages-view";
 
 import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
 import LinearProgress from "../../linear-progress";
-import { formattedUserName, getProfileMetaData } from "../utils";
+import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 
 import "./index.scss";
 import { CHANNEL } from "../chat-popup/chat-constants";
 import { Button } from "react-bootstrap";
 import { ChatContext } from "../chat-context-provider";
+import { getCommunities } from "../../../api/bridge";
 
 interface MatchParams {
   filter: string;
@@ -39,14 +40,13 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
 
-  const { messageServiceInstance } = useContext(ChatContext);
+  const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
 
   const { channels, updatedChannel } = chat;
   const { match } = props;
   const username = match.params.username;
 
   const [maxHeight, setMaxHeight] = useState(0);
-  const [currentChannel, setCurrentChannel] = useState<Channel>();
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatEnabled, setIsCommunityChatEnabled] = useState(false);
   const [isCommunityJoined, setIsCommunityChatJoined] = useState(false);
@@ -58,6 +58,7 @@ export default function ChatsMessagesBox(props: Props) {
   }, [typeof window !== "undefined"]);
 
   useEffect(() => {
+    checkUserCommunityMembership();
     const handleResize = () => {
       setMaxHeight(window.innerHeight - 68);
     };
@@ -76,22 +77,42 @@ export default function ChatsMessagesBox(props: Props) {
 
   useEffect(() => {
     if (username && !username.startsWith("@")) {
-      getCommunityProfile();
-      const isCommunity = chat.channels.some((channel) => channel.communityName === username);
-      if (!isCommunity) {
-        setIsCommunityChatJoined(false);
-      } else {
-        setIsCommunityChatJoined(true);
-        setIsCommunityChatEnabled(true);
-      }
+      checkUserCommunityMembership();
     } else {
       setIsCommunityChatJoined(false);
       setIsCommunityChatEnabled(true);
     }
   }, [username]);
 
+  useEffect(() => {
+    console.log(
+      "isCommunityChatEnabled",
+      isCommunityChatEnabled,
+      "isCommunityJoined",
+      isCommunityJoined,
+      "hasLeftCommunity",
+      hasLeftCommunity
+    );
+  }, [isCommunityChatEnabled, isCommunityJoined, hasLeftCommunity]);
+
+  const checkUserCommunityMembership = () => {
+    getCommunityProfile();
+    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
+    const isCommunity = chat.channels.some((channel) => channel.communityName === username);
+    if (isCommunity) {
+      setIsCommunityChatEnabled(true);
+      const isJoined = communities.some((channel) => channel.communityName === username);
+      if (isJoined) {
+        setIsCommunityChatJoined(true);
+      }
+    } else {
+      setIsCommunityChatJoined(false);
+    }
+  };
+
   useEffect(() => {
     fetchCurrentChannel(formattedUserName(username));
+    checkUserCommunityMembership();
   }, [updatedChannel, username, channels]);
 
   const fetchCurrentChannel = (communityName: string) => {
@@ -122,7 +143,7 @@ export default function ChatsMessagesBox(props: Props) {
 
   const getCommunityProfile = async () => {
     const communityProfile = await getProfileMetaData(username);
-    setCurrentCommunity(communityProfile.channel);
+    setCurrentCommunity(communityProfile?.channel);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
     setIsCommunityChatEnabled(haschannelMetaData);
   };
@@ -149,12 +170,7 @@ export default function ChatsMessagesBox(props: Props) {
         <>
           {username.startsWith("@") || (isCommunityChatEnabled && isCommunityJoined) ? (
             <>
-              <ChatsMessagesHeader
-                username={username}
-                {...props}
-                currentChannel={currentChannel!}
-                currentChannelSetter={setCurrentChannel}
-              />
+              <ChatsMessagesHeader username={username} history={props.history} />
               {inProgress && <LinearProgress />}
               <ChatsMessagesView
                 {...props}
diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
index 3bc216a772e..80b5d265208 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -11,6 +11,20 @@
     border-bottom: 1px solid $charcoal-grey;
   }
 
+  a {
+    @include themify(day) {
+      color: $light-black;
+    }
+
+    @include themify(night) {
+      color: $white-two;
+    }
+  }
+
+  a::after {
+    display: none;
+  }
+
   .header-content {
     .user-info {
       display: inline-flex;
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
index f065123bbe3..9e7b8b99165 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -10,16 +10,15 @@ import { Channel } from "../../../../managers/message-manager-types";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
+import Link from "../../alink";
 
 interface Props {
   username: string;
   history: History;
-  currentChannel: Channel;
-  currentChannelSetter: (channe: Channel) => void;
 }
 
 export default function ChatsMessagesHeader(props: Props) {
-  const { username, currentChannel, currentChannelSetter } = props;
+  const { username } = props;
   const { chat } = useMappedStore();
 
   const isChannel = (username: string) => {
@@ -43,18 +42,19 @@ export default function ChatsMessagesHeader(props: Props) {
   return (
     <div className="chats-messages-header">
       <div className="d-flex justify-content-between header-content">
-        <div className="user-info">
-          <UserAvatar username={formattedUserName(username)} size="medium" />
-          <p className="username">{formattedName(username, chat)}</p>
-        </div>
+        <Link
+          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+          target="_blank"
+          style={{ textDecoration: "none" }}
+        >
+          <div className="user-info">
+            <UserAvatar username={formattedUserName(username)} size="medium" />
+            <p className="username">{formattedName(username, chat)}</p>
+          </div>
+        </Link>
         {isChannel(username) && (
           <div className="community-menu">
-            <ChatsCommunityDropdownMenu
-              from={CHATPAGE}
-              {...props}
-              currentChannel={currentChannel!}
-              currentChannelSetter={currentChannelSetter}
-            />
+            <ChatsCommunityDropdownMenu from={CHATPAGE} {...props} />
           </div>
         )}
       </div>
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index a4edbce6b78..ae38a3fa13c 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -69,8 +69,6 @@ export default function ChatsMessagesView(props: Props) {
   const [removedUsers, setRemovedUsers] = useState<string[]>([]);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
-  console.log("Current channel in messages view", props.currentChannel);
-
   useEffect(() => {
     getActiveUserKeys();
     isDirectUserOrCommunity();
@@ -94,6 +92,7 @@ export default function ChatsMessagesView(props: Props) {
   }, [directUser, communityName, currentChannel, chat.directMessages]);
 
   useEffect(() => {
+    setIsScrollToBottom(false);
     setDirectUser("");
     setCommunityName("");
     isDirectUserOrCommunity();
@@ -166,7 +165,8 @@ export default function ChatsMessagesView(props: Props) {
     const user = chat.directContacts.find((item) => item.name === directUser);
     console.log("user", user?.pubkey);
     const messages = user && fetchDirectMessages(user?.pubkey, chat.directMessages);
-    setDirectMessages(messages!);
+    const directMessages = messages?.sort((a, b) => a.created - b.created);
+    setDirectMessages(directMessages!);
     console.log("Messages", messages);
   };
 
diff --git a/src/common/components/chats/chats-side-profile/index.scss b/src/common/components/chats/chats-side-profile/index.scss
new file mode 100644
index 00000000000..fd2db536fd3
--- /dev/null
+++ b/src/common/components/chats/chats-side-profile/index.scss
@@ -0,0 +1,8 @@
+@import "../../../../style/vars_mixins";
+
+.profile-side-bar {
+  // width: 40vw;
+  .side-profile {
+    padding: 20px;
+  }
+}
diff --git a/src/common/components/chats/chats-side-profile/index.tsx b/src/common/components/chats/chats-side-profile/index.tsx
new file mode 100644
index 00000000000..6eb1ac38f42
--- /dev/null
+++ b/src/common/components/chats/chats-side-profile/index.tsx
@@ -0,0 +1,23 @@
+import React, { useContext, useEffect, useState } from "react";
+import UserAvatar from "../../user-avatar";
+import { ChatContext } from "../chat-context-provider";
+import { formattedUserName } from "../utils";
+
+import "./index.scss";
+
+interface Props {
+  username: string;
+}
+export const ChatsSideProfile = (props: Props) => {
+  const { currentChannel } = useContext(ChatContext);
+  const { username } = props;
+  console.log("Current channel in chats side profile", currentChannel);
+  console.log("Username in profile sidebar", props.username);
+  return (
+    <div className="profile-side-bar">
+      <p className="side-profile">
+        <UserAvatar username={formattedUserName(username)} size="large" />
+      </p>
+    </div>
+  );
+};
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 97d1e94c769..7cfb4d8c3d9 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -22,24 +22,15 @@ import { AccountWithReputation } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
-
-interface MatchParams {
-  filter: string;
-  name: string;
-  path: string;
-  url: string;
-  username: string;
-}
 interface Props {
-  match: match<MatchParams>;
+  username: string;
   history: History;
-  resetChat: () => void;
 }
 export default function ChatsSideBar(props: Props) {
-  const { chat } = useMappedStore();
+  const { username } = props;
+  const { chat, resetChat } = useMappedStore();
   const chatContext = useContext(ChatContext);
   const { channels, directContacts, leftChannelsList } = chat;
-  const { match, resetChat } = props;
 
   const {
     activeUserKeys,
@@ -51,7 +42,6 @@ export default function ChatsSideBar(props: Props) {
   } = chatContext;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
-  const username = match.params.username;
 
   const [showDivider, setShowDivider] = useState(false);
   const [searchText, setSearchText] = useState("");
diff --git a/src/common/components/chats/utils/check-contiguous-message.ts b/src/common/components/chats/utils/check-contiguous-message.ts
new file mode 100644
index 00000000000..75c0fc9223d
--- /dev/null
+++ b/src/common/components/chats/utils/check-contiguous-message.ts
@@ -0,0 +1,16 @@
+import { DirectMessage } from "./../../../../managers/message-manager-types";
+import { PublicMessage } from "../../../../managers/message-manager-types";
+
+export const checkContiguousMessage = (
+  msg: PublicMessage | DirectMessage,
+  i: number,
+  publicMessages: PublicMessage[] | DirectMessage[]
+) => {
+  const prevMsg = publicMessages[i - 1];
+  const msgAuthor = msg.creator;
+  const prevMsgAuthor = prevMsg ? prevMsg.creator : null;
+  if (msgAuthor === prevMsgAuthor) {
+    return true;
+  }
+  return false;
+};
diff --git a/src/common/components/chats/utils/index.ts b/src/common/components/chats/utils/index.ts
index d1b52969366..6ec55dfc912 100644
--- a/src/common/components/chats/utils/index.ts
+++ b/src/common/components/chats/utils/index.ts
@@ -15,3 +15,4 @@ export * from "./get-chat-private-key";
 export * from "./get-joined-communities";
 export * from "./copy-to-clipboard";
 export * from "./use-fetch-direct-messages";
+export * from "./check-contiguous-message";
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 1354d39ca68..a8152d31759 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -14,6 +14,7 @@ import { useMappedStore } from "../../store/use-mapped-store";
 import { ChatContext } from "../../components/chats/chat-context-provider";
 import ImportChats from "../../components/chats/import-chats";
 import JoinChat from "../../components/chats/join-chat";
+import { ChatsSideProfile } from "../../components/chats/chats-side-profile";
 
 import "./index.scss";
 
@@ -31,10 +32,12 @@ interface Props extends PageProps {
 
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
+  const { match, history } = props;
   const [marginTop, setMarginTop] = useState(0);
 
-  const chatContext = useContext(ChatContext);
-  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } = chatContext;
+  const username = match.params.username;
+
+  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } = useContext(ChatContext);
 
   console.log("inProgress in chats page", showSpinner);
 
@@ -81,14 +84,20 @@ export const Chats = (props: Props) => {
             {activeUserKeys?.pub ? (
               chatPrivKey ? (
                 <>
-                  <ChatsSideBar {...props} />
+                  <ChatsSideBar history={history} username={username} />
                   {revealPrivKey ? (
                     <div className="chats-messages-box">
                       <ManageChatKey />
                     </div>
                   ) : (
-                    // Handle the case when the user hasn't joined any community here
-                    <ChatsMessagesBox {...props} />
+                    <>
+                      <ChatsMessagesBox {...props} />
+                      {match.url !== "/chats" && (
+                        <div className="d-none d-lg-block">
+                          <ChatsSideProfile username={username} />
+                        </div>
+                      )}
+                    </>
                   )}
                 </>
               ) : (
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 0f4672a5ae7..9f3d23eb23a 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -199,18 +199,18 @@ const MessageManager = () => {
       const { peer, id } = m;
       setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
       addDirectMessages(peer, m);
-      const startTimeout = () => {
-        console.log("Start time out called");
-        useTimeoutFn(() => {
-          console.log("Inner called");
-          checkDirectMessageSending(peer, m);
-        }, 2000);
-      };
+      // const startTimeout = () => {
+      //   console.log("Start time out called");
+      //   useTimeoutFn(() => {
+      //     console.log("Inner called");
+      //     checkDirectMessageSending(peer, m);
+      //   }, 2000);
+      // };
 
       // Start the timeout
-      startTimeout();
+      // startTimeout();
       // const [startTimeout] = useTimeoutFn(checkDirectMessageSending(peer, m), 20000);
-      // checkDirectMessageSending(peer, m);
+      checkDirectMessageSending(peer, m);
     });
   };
 
@@ -233,10 +233,10 @@ const MessageManager = () => {
   }, [messageService, chat.directMessages]);
 
   const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
-    // setTimeout(() => {
-    console.log("checkDirectMessageSending called");
-    verifyDirectMessageSending(peer, data);
-    // }, 20000);
+    setTimeout(() => {
+      console.log("checkDirectMessageSending called");
+      verifyDirectMessageSending(peer, data);
+    }, 20000);
   };
 
   // // Direct message handler after sent

From 64a02423a50f62f634e3540c683dc3b91f0087a5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 19 Sep 2023 18:15:56 +0500
Subject: [PATCH 077/179] Show time uner message and show hide-svg on click
 when screen size is less than medium breakpoint

---
 .../chats/chat-popup/chat-constants.ts        |  2 +
 .../chats/chats-channel-messages/index.scss   | 80 ++++++++++---------
 .../chats/chats-channel-messages/index.tsx    | 78 +++++++++++++-----
 .../chats/chats-direct-messages/index.scss    |  9 ++-
 .../chats/chats-direct-messages/index.tsx     |  4 +-
 .../chats/chats-messages-box/index.scss       |  2 +-
 .../chats/chats-messages-header/index.scss    |  2 +-
 .../chats/chats-side-profile/index.scss       |  2 +-
 .../chats/chats-side-profile/index.tsx        |  2 +-
 .../components/chats/chats-sidebar/index.scss | 46 +++++++++++
 src/common/pages/chats/index.tsx              |  6 +-
 11 files changed, 164 insertions(+), 69 deletions(-)

diff --git a/src/common/components/chats/chat-popup/chat-constants.ts b/src/common/components/chats/chat-popup/chat-constants.ts
index 66d53a8a3ca..76338f7b27c 100644
--- a/src/common/components/chats/chat-popup/chat-constants.ts
+++ b/src/common/components/chats/chat-popup/chat-constants.ts
@@ -28,6 +28,8 @@ export const GifImagesStyle = {
 };
 
 export const CHAT_FILE_CONTENT_TYPES = ["jpg", "jpeg", "gif", "png"];
+export const PRIVILEGEDROLES = ["owner", "admin", "mod"];
+export const COMMUNITYADMINROLES = ["owner", "admin"];
 
 export const NOSTRKEY = "nsKey";
 export const UPLOADING = "Uploading";
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 077c36ca6ba..40532ce80eb 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -34,7 +34,7 @@
           margin-right: 8px;
         }
       }
-      .receiver-messag {
+      .receiver-message {
         display: flex;
 
         .receiver-message-wrapper {
@@ -50,25 +50,26 @@
           }
 
           .receiver-message-content {
+            max-width: 100%;
             color: #050505;
             display: inline-block;
             padding: 10px;
             border-radius: 0px 10px 10px 0px;
           }
 
-          // .receiver-msg-time {
-          //   @include themify(day) {
-          //     color: rgb(138, 141, 145);
-          //   }
-          //   @include themify(night) {
-          //     color: $charcoal-grey;
-          //   }
+          .receiver-msg-time {
+            @include themify(day) {
+              color: rgb(138, 141, 145);
+            }
+            @include themify(night) {
+              color: $charcoal-grey;
+            }
 
-          //   font-size: 10px;
-          //   display: flex;
-          //   justify-content: flex-end;
-          //   margin: -5px 7px 3px 45px;
-          // }
+            font-size: 10px;
+            display: flex;
+            justify-content: flex-end;
+            margin: -5px 7px 3px 45px;
+          }
 
           &.gif {
             background: none;
@@ -97,22 +98,22 @@
                 padding-bottom: 10px;
               }
             }
-            // .receiver-msg-time {
-            //   @include themify(day) {
-            //     color: rgb(138, 141, 145);
-            //   }
-            //   @include themify(night) {
-            //     color: $white-three;
-            //   }
-            // }
+            .receiver-msg-time {
+              @include themify(day) {
+                color: rgb(138, 141, 145);
+              }
+              @include themify(night) {
+                color: $white-three;
+              }
+            }
           }
         }
       }
       &.same-user-msg {
         margin-left: 4rem;
-        padding-top: 1.5px;
+        padding-top: 1px;
         .receiver-message-wrapper {
-          border-radius: 0 10px 10px 0;
+          border-radius: 10px;
         }
       }
     }
@@ -159,7 +160,7 @@
 
       .sender-message-wrapper {
         box-sizing: content-box;
-        border-radius: 10px 10px 0 10px;
+        border-radius: 10px 0px 10px 10px;
         max-width: 70%;
         word-wrap: break-word;
 
@@ -191,9 +192,9 @@
 
         &.gif,
         &.chat-image {
-          // .sender-message-time {
-          //   color: rgb(138, 141, 145);
-          // }
+          .sender-message-time {
+            color: rgb(138, 141, 145);
+          }
           .sender-message-content {
             padding: 10px 0 0 5px;
             img {
@@ -203,6 +204,7 @@
         }
 
         .sender-message-content {
+          max-width: 100%;
           margin-bottom: 0;
           color: $charcoal-grey;
           font-size: 16px;
@@ -220,16 +222,20 @@
           }
         }
 
-        // .sender-message-time {
-        //   color: $white;
-        //   margin-bottom: 3px;
-        //   font-size: 10px;
-        //   display: flex;
-        //   justify-content: flex-end;
-        //   margin-right: 7px;
-        //   margin-left: 45px;
-        //   margin-top: -5px;
-        // }
+        .sender-message-time {
+          color: $white;
+          margin-bottom: 3px;
+          font-size: 10px;
+          display: flex;
+          justify-content: flex-end;
+          margin-right: 7px;
+          margin-left: 45px;
+          margin-top: -5px;
+        }
+
+        &.same-user-message {
+          border-radius: 10px;
+        }
       }
     }
   }
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 7c37e6f221f..fbc273861af 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -3,7 +3,6 @@ import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
   communityModerator,
-  DirectMessage,
   Profile,
   PublicMessage
 } from "../../../../managers/message-manager-types";
@@ -22,21 +21,15 @@ import {
 import UserAvatar from "../../user-avatar";
 import FollowControls from "../../follow-controls";
 import { Account } from "../../../store/accounts/types";
-import { ToggleType, UI } from "../../../store/ui/types";
-import { Global } from "../../../store/global/types";
+import { ToggleType } from "../../../store/ui/types";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
 import Tooltip from "../../tooltip";
 import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../img/svg";
-
-import "./index.scss";
-import { User } from "../../../store/users/types";
-import { ActiveUser } from "../../../store/active-user/types";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { error } from "../../feedback";
-import { CHATPAGE } from "../chat-popup/chat-constants";
+import { CHATPAGE, COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
 import { Theme } from "../../../store/global/types";
-import { NostrKeysType } from "../types";
 import {
   formatMessageTime,
   isMessageGif,
@@ -46,6 +39,9 @@ import {
 } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
+import "./index.scss";
+import { useMount } from "react-use";
+
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
@@ -94,6 +90,15 @@ export default function ChatsChannelMessages(props: Props) {
   const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
+  const [windowWidth, setWindowWidth] = useState(0);
+  const [showMessageActions, setShowMessageActions] = useState(false);
+
+  useMount(() => {
+    setWindowWidth(window.innerWidth);
+    if (window.innerWidth <= 768) {
+      setShowMessageActions(true);
+    }
+  });
 
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
@@ -118,6 +123,14 @@ export default function ChatsChannelMessages(props: Props) {
     }
   }, [currentChannel]);
 
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
@@ -160,6 +173,13 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
+  const handleResize = () => {
+    setWindowWidth(window.innerWidth);
+    if (window.innerWidth <= 768) {
+      setShowMessageActions(true);
+    }
+  };
+
   const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
     setDmMessage(e.target.value);
   };
@@ -190,14 +210,11 @@ export default function ChatsChannelMessages(props: Props) {
   };
 
   const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
-    const privilegedRoles = ["owner", "admin", "mod"];
-    const communityAdminRoles = ["owner", "admin"];
-
     const privilegedUsers = communityModerators.filter((user) =>
-      privilegedRoles.includes(user.role)
+      PRIVILEGEDROLES.includes(user.role)
     );
     const communityAdmins = communityModerators.filter((user) =>
-      communityAdminRoles.includes(user.role)
+      COMMUNITYADMINROLES.includes(user.role)
     );
 
     const privilegedUserNames = privilegedUsers.map((user) => user.name);
@@ -290,6 +307,15 @@ export default function ChatsChannelMessages(props: Props) {
     return <></>;
   };
 
+  const handelMessageActions = (msgId: string) => {
+    console.log("showMessageActions", showMessageActions, "msgId", msgId);
+    if (showMessageActions && hoveredMessageId !== msgId) {
+      setHoveredMessageId(msgId);
+    } else {
+      setHoveredMessageId("");
+    }
+  };
+
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -402,8 +428,8 @@ export default function ChatsChannelMessages(props: Props) {
                   <div
                     key={pMsg.id}
                     className="receiver"
-                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                    onMouseLeave={() => setHoveredMessageId("")}
+                    onMouseEnter={() => !showMessageActions && setHoveredMessageId(pMsg.id)}
+                    onMouseLeave={() => !showMessageActions && setHoveredMessageId("")}
                   >
                     {!isSameUserMessage && (
                       <div className="community-user-img">
@@ -430,7 +456,10 @@ export default function ChatsChannelMessages(props: Props) {
                         </p>
                       )}
 
-                      <div className="receiver-messag">
+                      <div
+                        className="receiver-message"
+                        onClick={() => handelMessageActions(pMsg.id)}
+                      >
                         <Tooltip
                           content={
                             formatMessageDate(pMsg.created).split(",")[1] +
@@ -449,7 +478,9 @@ export default function ChatsChannelMessages(props: Props) {
                               }`}
                               dangerouslySetInnerHTML={{ __html: renderedPreview }}
                             />
-                            {/* <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p> */}
+                            {windowWidth <= 768 && (
+                              <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
+                            )}
                           </div>
                         </Tooltip>
                         {hoveredMessageId === pMsg.id &&
@@ -476,13 +507,14 @@ export default function ChatsChannelMessages(props: Props) {
                   <div
                     key={pMsg.id}
                     className="sender"
-                    onMouseEnter={() => setHoveredMessageId(pMsg.id)}
-                    onMouseLeave={() => setHoveredMessageId("")}
+                    onMouseEnter={() => !showMessageActions && setHoveredMessageId(pMsg.id)}
+                    onMouseLeave={() => !showMessageActions && setHoveredMessageId("")}
                   >
                     <div
                       className={`sender-message ${
                         pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
                       }`}
+                      onClick={() => handelMessageActions(pMsg.id)}
                     >
                       {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
                         <Tooltip content={"Hide Message"}>
@@ -523,14 +555,16 @@ export default function ChatsChannelMessages(props: Props) {
                       >
                         <div
                           className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
-                            isImage ? "chat-image" : ""
+                            isImage ? "chat-image" : isSameUserMessage ? "same-user-message" : ""
                           }`}
                         >
                           <div
                             className="sender-message-content"
                             dangerouslySetInnerHTML={{ __html: renderedPreview }}
                           />
-                          {/* <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p> */}
+                          {windowWidth <= 768 && (
+                            <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
+                          )}
                         </div>
                       </Tooltip>
 
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
index a75f1a15306..d4836f769c8 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -63,6 +63,10 @@
           word-wrap: break-word;
           padding: 10px;
           border-radius: 0px 10px 10px;
+
+          &.same-user-message {
+            border-radius: 10px;
+          }
         }
       }
       &.same-user {
@@ -125,7 +129,7 @@
       }
 
       .sender-message-content {
-        border-radius: 10px 10px 0px;
+        border-radius: 10px 0px 10px 10px;
         max-width: 70%;
         word-wrap: break-word;
         margin-bottom: 0;
@@ -158,6 +162,9 @@
             max-width: 100%;
           }
         }
+        &.same-user-message {
+          border-radius: 10px;
+        }
       }
     }
   }
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index af1d4c29f73..8f2f06d68b3 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -178,7 +178,7 @@ export default function ChatsDirectMessages(props: Props) {
                             >
                               <div
                                 className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                                  isImage ? "chat-image" : ""
+                                  isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
                                 }`}
                                 dangerouslySetInnerHTML={{ __html: renderedPreview }}
                               />
@@ -216,7 +216,7 @@ export default function ChatsDirectMessages(props: Props) {
                           >
                             <div
                               className={`sender-message-content ${isGif ? "gif" : ""} ${
-                                isImage ? "chat-image" : ""
+                                isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
                               }`}
                               dangerouslySetInnerHTML={{ __html: renderedPreview }}
                             />
diff --git a/src/common/components/chats/chats-messages-box/index.scss b/src/common/components/chats/chats-messages-box/index.scss
index 73d644d8d86..4b533466c7b 100644
--- a/src/common/components/chats/chats-messages-box/index.scss
+++ b/src/common/components/chats/chats-messages-box/index.scss
@@ -14,7 +14,7 @@
   @include themify(night) {
     box-shadow: 0px -5px 5px $charcoal-grey;
   }
-  width: 60vw;
+  width: 100%;
 
   .no-chat-select {
     height: calc(100vh - 70px);
diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
index 80b5d265208..7c0ab8fdfd7 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -2,7 +2,7 @@
 
 .chats-messages-header {
   grid-row: span 1;
-  width: 60vw;
+  width: 100%;
   height: 67px;
   @include themify(day) {
     border-bottom: 1px solid #e7e7e7;
diff --git a/src/common/components/chats/chats-side-profile/index.scss b/src/common/components/chats/chats-side-profile/index.scss
index fd2db536fd3..6375caa1db8 100644
--- a/src/common/components/chats/chats-side-profile/index.scss
+++ b/src/common/components/chats/chats-side-profile/index.scss
@@ -1,7 +1,7 @@
 @import "../../../../style/vars_mixins";
 
 .profile-side-bar {
-  // width: 40vw;
+  width: 400px;
   .side-profile {
     padding: 20px;
   }
diff --git a/src/common/components/chats/chats-side-profile/index.tsx b/src/common/components/chats/chats-side-profile/index.tsx
index 6eb1ac38f42..c24f010580a 100644
--- a/src/common/components/chats/chats-side-profile/index.tsx
+++ b/src/common/components/chats/chats-side-profile/index.tsx
@@ -15,7 +15,7 @@ export const ChatsSideProfile = (props: Props) => {
   console.log("Username in profile sidebar", props.username);
   return (
     <div className="profile-side-bar">
-      <p className="side-profile">
+      <p className="d-flex justify-content-center align-items-center side-profile">
         <UserAvatar username={formattedUserName(username)} size="large" />
       </p>
     </div>
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index 9eeda140b33..0baf0d1ed05 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -225,3 +225,49 @@
     }
   }
 }
+
+@include media-breakpoint-down(sm) {
+  .chats-sidebar {
+    width: 45%;
+
+    .chats-title {
+      margin: 15px 0px 5px 5px;
+    }
+    .chats-search {
+      padding: 0 5px 0 5px;
+      margin-bottom: 0;
+    }
+    .chats-list {
+      overflow-x: hidden;
+      .community-title,
+      .dm-title {
+        font-size: 1rem;
+        padding: 15px 0 10px 8px;
+      }
+      .community,
+      .dm {
+        margin: 0;
+        padding: 9.5px 0px 9.5px 5px;
+        .community-info,
+        .dm-info {
+          .community-name,
+          .dm-name {
+            padding: 3px 0 0 10px;
+          }
+          .community-last-message,
+          .dm-last-message {
+            padding: 4px 0 0 10px;
+            max-width: 35vw;
+          }
+        }
+      }
+    }
+  }
+}
+// @media (max-width: 300px) {
+// .chats-sidebar {
+//   .community-info, .dm-info {
+//     display: none;
+//   }
+// }
+// }
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index a8152d31759..aafd4ff0d7d 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -92,11 +92,11 @@ export const Chats = (props: Props) => {
                   ) : (
                     <>
                       <ChatsMessagesBox {...props} />
-                      {match.url !== "/chats" && (
-                        <div className="d-none d-lg-block">
+                      {/* {match.url !== "/chats" && (
+                        <div className="d-none d-lg-block mt-2" style={{ background: "red" }}>
                           <ChatsSideProfile username={username} />
                         </div>
-                      )}
+                      )} */}
                     </>
                   )}
                 </>

From 647f7ba78cdb6f21020d6f56a98e84784b30c560 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 22 Sep 2023 19:47:10 +0500
Subject: [PATCH 078/179] Issue fixes and Completed chat extended page

---
 .../chats/chat-context-provider.tsx           |  84 ++++-
 .../components/chats/chat-input/index.tsx     |   4 +-
 .../chats/chat-popup/chat-constants.ts        |   4 +-
 .../components/chats/chat-popup/index.scss    | 172 ++--------
 .../components/chats/chat-popup/index.tsx     | 295 ++++-------------
 .../chats/chats-channel-messages/index.scss   |   4 +
 .../chats/chats-channel-messages/index.tsx    |  40 +--
 .../chats/chats-direct-messages/index.tsx     |  18 +-
 .../chats/chats-messages-box/index.scss       |  16 +-
 .../chats/chats-messages-box/index.tsx        |  58 ++--
 .../chats/chats-messages-header/index.scss    |  55 +++-
 .../chats/chats-messages-header/index.tsx     |  31 +-
 .../chats/chats-messages-view/index.tsx       |  33 --
 .../chats/chats-profile-box/index.tsx         |   7 -
 .../chats/chats-scroller/index.scss           |   2 +-
 .../components/chats/chats-sidebar/indes.tsx  | 299 ++++++++++--------
 .../components/chats/chats-sidebar/index.scss |  63 +++-
 .../components/chats/import-chats/index.tsx   |   1 -
 .../chats/join-community-chat-btn/index.tsx   |  61 ++--
 .../chats/utils/upload-chat-public-key.ts     |  14 +-
 .../components/manage-chat-key/index.scss     |  22 +-
 .../components/manage-chat-key/index.tsx      |  18 +-
 src/common/helper/message-service.ts          |   4 -
 src/common/i18n/locales/en-US.json            |   3 +-
 src/common/img/svg.tsx                        |  35 ++
 src/common/pages/chats/index.scss             |   2 +-
 src/common/pages/chats/index.tsx              |  87 ++---
 src/managers/message-manager.tsx              |  45 +--
 28 files changed, 683 insertions(+), 794 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 9b66d5a375f..fc693ac07f7 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -8,7 +8,7 @@ import {
   createNoStrAccount,
   getPrivateKey,
   getUserChatPublicKey,
-  setProfileMetaData
+  uploadChatPublicKey
 } from "./utils";
 import * as ls from "../../util/local-storage";
 import { setNostrkeys } from "../../../managers/message-manager";
@@ -23,6 +23,11 @@ interface Context {
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   currentChannel: Channel | null;
+  showSideBar: boolean;
+  windowWidth: number;
+  maxHeight: number;
+  isActveUserRemoved: boolean;
+  setShowSideBar: (d: boolean) => void;
   setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
@@ -47,6 +52,11 @@ export const ChatContext = React.createContext<Context>({
   messageServiceInstance: null,
   hasUserJoinedChat: false,
   currentChannel: null,
+  showSideBar: true,
+  windowWidth: 0,
+  maxHeight: 0,
+  isActveUserRemoved: false,
+  setShowSideBar: () => {},
   setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
@@ -70,22 +80,59 @@ export const ChatContextProvider = (props: Props) => {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
-
-  useEffect(() => {
-    console.log("currentChannel", currentChannel);
-  }, [currentChannel]);
+  const [showSideBar, setShowSideBar] = useState(true);
+  const [windowWidth, setWindowWidth] = useState(0);
+  const [maxHeight, setMaxHeight] = useState(0);
+  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
   useMount(() => {
     getActiveUserKeys();
+    handleShowSideBar();
+    setWindowWidth(window.innerWidth);
+    setMaxHeight(window.innerHeight - 66);
   });
 
   useEffect(() => {
+    if (currentChannel && currentChannel.removedUserIds) {
+      setIsActiveUserRemoved(currentChannel.removedUserIds?.includes(activeUserKeys?.pub!));
+    }
+  }, [currentChannel]);
+
+  useEffect(() => {
+    console.log("messageServiceInstance", messageServiceInstance);
+  }, [messageServiceInstance]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+      setMaxHeight(window.innerHeight - 66);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    getActiveUserKeys();
     if (messageServiceInstance) {
-      getActiveUserKeys();
       setShouldUpdateProfile(false);
     }
   }, [messageServiceInstance]);
 
+  useEffect(() => {
+    console.log("showsidebar", showSideBar);
+  }, [showSideBar]);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleShowSideBar);
+    return () => {
+      window.removeEventListener("resize", handleShowSideBar);
+    };
+  }, []);
+
   useEffect(() => {
     if (shouldUpdateProfile && messageServiceInstance) {
       messageServiceInstance.updateProfile({
@@ -96,16 +143,17 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [shouldUpdateProfile, messageServiceInstance]);
 
-  useEffect(() => {
-    if (showSpinner) {
-      setTimeout(() => {
-        setShowSpinner(false);
-      }, 3000);
-    }
-  }, [showSpinner]);
-
   useDebounce(() => setShowSpinner(false), 3000, [showSpinner]);
 
+  const handleShowSideBar = () => {
+    console.log("Function run", window.innerWidth);
+    if (window.innerWidth < 768) {
+      setShowSideBar(false);
+    } else {
+      setShowSideBar(true);
+    }
+  };
+
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
     const privKey = getPrivateKey(activeUser?.username!);
@@ -125,7 +173,6 @@ export const ChatContextProvider = (props: Props) => {
       newMessageService = new MessageService(keys.priv, keys.pub);
       setMessageServiceInstance(newMessageService);
     }
-    console.log("newMessageService", newMessageService);
     return newMessageService;
   };
 
@@ -133,7 +180,7 @@ export const ChatContextProvider = (props: Props) => {
     resetChat();
     const keys = createNoStrAccount();
     ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    await setProfileMetaData(activeUser, keys.pub);
+    await uploadChatPublicKey(activeUser, keys.pub);
     setHasUserJoinedChat(true);
     setNostrkeys(keys);
     setChatPrivKey(keys.priv);
@@ -152,6 +199,11 @@ export const ChatContextProvider = (props: Props) => {
         messageServiceInstance,
         hasUserJoinedChat,
         currentChannel,
+        showSideBar,
+        windowWidth,
+        maxHeight,
+        isActveUserRemoved,
+        setShowSideBar,
         setCurrentChannel,
         setRevealPrivKey,
         setShowSpinner,
diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index c58061737e9..f6386bddd50 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -33,7 +33,6 @@ import { ChatContext } from "../chat-context-provider";
 interface Props {
   isCurrentUser: boolean;
   isCommunity: boolean;
-  isActveUserRemoved: boolean;
   currentChannel: Channel;
   currentUser: string;
   isCurrentUserJoined: boolean;
@@ -52,12 +51,11 @@ export default function ChatInput(props: Props) {
   const [isMessageText, setIsMessageText] = useState(false);
   // const [isMounted, setIsMounted] = useState(false);
 
-  const { messageServiceInstance, chatPrivKey } = useContext(ChatContext);
+  const { messageServiceInstance, chatPrivKey, isActveUserRemoved } = useContext(ChatContext);
 
   const {
     isCommunity,
     isCurrentUser,
-    isActveUserRemoved,
     currentChannel,
     currentUser,
     isCurrentUserJoined,
diff --git a/src/common/components/chats/chat-popup/chat-constants.ts b/src/common/components/chats/chat-popup/chat-constants.ts
index 76338f7b27c..2e0ff4d8312 100644
--- a/src/common/components/chats/chat-popup/chat-constants.ts
+++ b/src/common/components/chats/chat-popup/chat-constants.ts
@@ -19,8 +19,8 @@ export const GifPickerStyle = {
 };
 
 export const DropDownStyle = {
-  width: "40px",
-  height: "40px"
+  width: "35px",
+  height: "35px"
 };
 
 export const GifImagesStyle = {
diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/components/chats/chat-popup/index.scss
index 1c56a18b60a..4e8590d9ec0 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/components/chats/chat-popup/index.scss
@@ -29,8 +29,8 @@
 
   .chat-header {
     border-bottom: 1px solid $white-four;
-    padding-left: 6px;
-    padding-right: 6px;
+    padding-left: 10px;
+    padding-right: 4px;
     cursor: pointer;
     height: 53px;
     display: flex;
@@ -50,6 +50,7 @@
       .back-arrow-svg {
         border-radius: 50%;
         padding: 6px;
+        margin-top: 6px;
       }
     }
 
@@ -59,23 +60,24 @@
     .message-header-title {
       display: flex;
       width: 288px;
-      margin-left: 0.6rem;
+      margin-left: 0.1rem;
       .user-icon {
-        margin: 14px 11px 0 0;
+        margin: 17px 11px 0 0;
       }
     }
 
     .message-header-content {
-      margin: 0.8rem 0;
+      margin: 1rem 0;
       font-weight: 700;
       line-height: 24px;
       font-size: 21px;
       font-family: $font-family-sans-serif;
 
-      max-width: 190px;
+      max-width: 185px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      margin-bottom: 0;
 
       @include themify(day) {
         color: $charcoal-grey;
@@ -91,16 +93,18 @@
       align-items: center;
       justify-content: center;
       margin-top: 1.1rem;
-      .message-image {
+      .message-image,
+      .extended-image {
         margin-top: 2px;
 
-        .message-svg {
-          width: 40px;
-          height: 40px;
+        .message-svg,
+        .extended-svg {
+          width: 35px;
+          height: 35px;
           justify-content: center;
           text-align: center;
           border-radius: 50%;
-          padding-top: 13px;
+          padding-top: 10px;
           display: flex;
 
           svg {
@@ -108,7 +112,11 @@
             width: 20px;
           }
         }
-        .message-svg:hover {
+        .extended-svg {
+          padding-top: 8px;
+        }
+        .message-svg:hover,
+        .extended-svg:hover {
           background: rgba(29, 155, 240, 0.1);
         }
       }
@@ -118,10 +126,11 @@
           display: flex;
           justify-content: center;
           text-align: center;
-          padding-top: 6px;
-          width: 40px;
-          height: 40px;
+          padding-top: 3px;
+          width: 35px;
+          height: 35px;
           border-radius: 50%;
+          margin-bottom: 14px;
         }
 
         .arrow-svg:hover {
@@ -290,76 +299,6 @@
         background: $gunmetal;
       }
     }
-    .user-profile {
-      border-bottom-right-radius: 20px;
-      border-bottom-left-radius: 20px;
-      min-height: 266px;
-
-      @include themify(day) {
-        background: $white-three;
-      }
-      @include themify(night) {
-        background: #172b44;
-      }
-
-      padding: 0 16px 16px 16px;
-      margin: 0 16px 16px 16px;
-
-      .user-logo {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-top: 16px;
-        cursor: pointer;
-      }
-      .user-name {
-        font-size: 20px;
-        font-weight: 700;
-        @include themify(day) {
-          color: $charcoal-grey;
-        }
-        @include themify(night) {
-          color: $white;
-        }
-      }
-      .about {
-        text-align: center;
-        padding: 4px 0;
-        @include themify(day) {
-          color: $charcoal-grey;
-        }
-        @include themify(night) {
-          color: $white;
-        }
-      }
-      .joining-info {
-        justify-content: space-evenly;
-      }
-      .created-date {
-        padding-top: 8px;
-        font-size: 14px;
-        @include themify(day) {
-          color: $charcoal-grey;
-        }
-        @include themify(night) {
-          color: $white;
-        }
-      }
-      .followers {
-        font-size: 14px;
-        padding-top: 4px !important;
-        font-family: New Century Schoolbook;
-      }
-    }
-
-    .user-profile:hover {
-      @include themify(day) {
-        background: $white-four;
-      }
-      @include themify(night) {
-        background: #0f223a;
-      }
-    }
 
     .scroller {
       position: sticky;
@@ -450,66 +389,3 @@
     }
   }
 }
-
-.chats-dialog {
-  .chat-modals-body {
-    padding: 2rem;
-
-    .leave-dialog-body {
-      font-size: 18px;
-      margin-top: 12px;
-    }
-    .leave-confirm-buttons {
-      text-align: right !important;
-      .close-btn,
-      .confirm-btn {
-        margin-right: 20px;
-      }
-    }
-
-    .import-chat-dialog-header {
-      display: flex;
-      .import-chat-dialog-titles {
-        margin-top: 9px;
-      }
-      .import-chat-main-title {
-        font-weight: bold;
-      }
-    }
-    .success-dialog-body {
-      margin: 2rem 0 1.4rem 0;
-      .success-dialog-content {
-        text-align: center;
-        margin-bottom: 1.4rem;
-      }
-    }
-  }
-  .add-dialog-header {
-    margin-bottom: 20px;
-  }
-  .community-chat-role-edit-dialog-content {
-    .add-user-role-form {
-      margin: 15px 0;
-    }
-    .user {
-      display: flex;
-    }
-    .username {
-      margin: 10px 0 0 10px;
-    }
-  }
-}
-
-.chat-button {
-  position: fixed;
-  z-index: 99;
-  right: 6rem;
-  bottom: 20px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50% !important;
-}
-.medium-zoom-overlay,
-.medium-zoom-image--opened {
-  z-index: 999;
-}
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index d584c598081..6926e5eca83 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { useLocation } from "react-router";
-import { History } from "history";
-import { Button, Form, Modal, Spinner } from "react-bootstrap";
+import { Button, Form, Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
+import { history } from "../../../../common/store";
 
 import { Community } from "../../../store/communities/types";
 import { ToggleType } from "../../../store/ui/types";
@@ -18,7 +18,6 @@ import {
 import Tooltip from "../../tooltip";
 import UserAvatar from "../../user-avatar";
 import LinearProgress from "../../linear-progress";
-import { error } from "../../feedback";
 import { setNostrkeys } from "../../../../managers/message-manager";
 import ManageChatKey from "../../manage-chat-key";
 import ChatInput from "../chat-input";
@@ -34,48 +33,36 @@ import {
   arrowBackSvg,
   chevronUpSvg,
   chevronDownSvgForSlider,
-  syncSvg
+  syncSvg,
+  extendedView
 } from "../../../img/svg";
 
-import {
-  NOSTRKEY,
-  NEWCHATACCOUNT,
-  CHATIMPORT,
-  RESENDMESSAGE,
-  EmojiPickerStyle,
-  GifPickerStyle
-} from "./chat-constants";
-
-import * as ls from "../../../util/local-storage";
+import { EmojiPickerStyle, GifPickerStyle } from "./chat-constants";
+
 import accountReputation from "../../../helper/account-reputation";
 import { _t } from "../../../i18n";
 import { usePrevious } from "../../../util/use-previous";
 
-import { getAccountFull, getAccountReputations } from "../../../api/hive";
+import { getAccountReputations } from "../../../api/hive";
 import { getCommunity } from "../../../api/bridge";
 
 import "./index.scss";
 import ChatsDirectMessages from "../chats-direct-messages";
-import { AccountWithReputation, NostrKeysType } from "../types";
+import { AccountWithReputation } from "../types";
 import {
-  createNoStrAccount,
   deleteChatPublicKey,
   fetchCommunityMessages,
   getCommunityLastMessage,
   getDirectLastMessage,
   getJoinedCommunities,
   getPrivateKey,
-  getProfileMetaData,
-  getUserChatPublicKey,
-  setProfileMetaData
+  getUserChatPublicKey
 } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ImportChats from "../import-chats";
-import MessageService from "../../../helper/message-service";
 
 interface Props {
-  history: History;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
@@ -92,6 +79,7 @@ export const ChatPopUp = (props: Props) => {
     showSpinner,
     hasUserJoinedChat,
     currentChannel,
+    windowWidth,
     setCurrentChannel,
     setRevealPrivKey,
     setShowSpinner,
@@ -118,19 +106,13 @@ export const ChatPopUp = (props: Props) => {
   const [communityName, setCommunityName] = useState("");
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
-  const [clickedMessage, setClickedMessage] = useState("");
-  const [keyDialog, setKeyDialog] = useState(false);
-  const [step, setStep] = useState(0);
   const [communities, setCommunities] = useState<Channel[]>([]);
   const [searchtext, setSearchText] = useState("");
   const [userList, setUserList] = useState<AccountWithReputation[]>([]);
-  const [noStrPrivKey, setNoStrPrivKey] = useState("");
-  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
-  const [innerWidth, setInnerWidth] = useState(0);
   const [isChatPage, setIsChatPage] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     console.log("chat in store", chat);
@@ -156,11 +138,12 @@ export const ChatPopUp = (props: Props) => {
   useEffect(() => {
     // deleteChatPublicKey(activeUser);
     setShow(!!activeUser?.username && !isChatPage);
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    setNoStrPrivKey(noStrPrivKey);
-    setInnerWidth(window.innerWidth);
   }, []);
 
+  useEffect(() => {
+    console.log("Show", show);
+  }, [show]);
+
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -198,10 +181,10 @@ export const ChatPopUp = (props: Props) => {
   useEffect(() => {
     if (messageServiceInstance) {
       setIsSpinner(false);
-      const noStrPrivKey = getPrivateKey(activeUser?.username!);
-      setNoStrPrivKey(noStrPrivKey);
+    } else {
+      console.log("Else run in chat-popup");
     }
-  }, [typeof window !== "undefined" && messageServiceInstance]);
+  }, [messageServiceInstance]);
 
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
@@ -224,10 +207,10 @@ export const ChatPopUp = (props: Props) => {
   }, [global.theme, activeUser]);
 
   useEffect(() => {
-    if (directMessagesList.length !== 0) {
+    if (directMessagesList.length !== 0 && !isScrolled) {
       scrollerClicked();
     }
-    if (!isScrollToBottom && publicMessages.length !== 0 && isCommunity) {
+    if (!isScrolled && publicMessages.length !== 0 && isCommunity) {
       scrollerClicked();
     }
   }, [directMessagesList, publicMessages]);
@@ -240,45 +223,31 @@ export const ChatPopUp = (props: Props) => {
         currentChannel,
         currentChannel.hiddenMessageIds
       );
-      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
       const messages = publicMessages.sort((a, b) => a.created - b.created);
       setPublicMessages(messages);
     }
   }, [currentChannel, isCommunity, chat.publicMessages]);
 
   useEffect(() => {
-    scrollerClicked();
-  }, [isCurrentUser, isCommunity]);
-
-  useEffect(() => {
-    if (removedUsers) {
-      const removed = removedUsers.includes(activeUserKeys?.pub!);
-      setIsActiveUserRemoved(removed);
+    if ((isCurrentUser || isCommunity) && show) {
+      scrollerClicked();
     }
-  }, [removedUsers]);
+  }, [isCurrentUser, isCommunity, show]);
 
   useEffect(() => {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
     setDirectMessagesList(messages);
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    setNoStrPrivKey(noStrPrivKey);
   }, [activeUser]);
 
   useEffect(() => {
-    if (isCommunity) {
+    if (isCommunity && show) {
       fetchCommunity();
+
       scrollerClicked();
       fetchCurrentChannel(communityName);
     }
-  }, [isCommunity, communityName]);
-
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  }, [isCommunity, communityName, show]);
 
   useEffect(() => {
     if (currentUser) {
@@ -327,7 +296,7 @@ export const ChatPopUp = (props: Props) => {
       setShow(false);
       setIsChatPage(true);
     } else {
-      setShow(true);
+      setShow(!!activeUser?.username);
     }
   };
 
@@ -362,10 +331,6 @@ export const ChatPopUp = (props: Props) => {
     }
   };
 
-  const handleResize = () => {
-    setInnerWidth(window.innerWidth);
-  };
-
   const fetchDirectMessages = (peer: string) => {
     for (const item of chat.directMessages) {
       if (item.peer === peer) {
@@ -376,20 +341,12 @@ export const ChatPopUp = (props: Props) => {
   };
 
   const fetchCurrentUserData = async () => {
-    console.log("Fetch profile run");
-    // const response = await getAccountFull(currentUser);
-    // const { posting_json_metadata } = response;
-    // const profile = JSON.parse(posting_json_metadata!).profile;
-    // const { nsKey } = profile || {};
     const nsKey = await getUserChatPublicKey(currentUser);
-    console.log("nsKey", nsKey);
     if (nsKey) {
       setReceiverPubKey(nsKey);
     } else {
       setReceiverPubKey("");
     }
-
-    console.log("Hello reached");
     setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
@@ -423,6 +380,8 @@ export const ChatPopUp = (props: Props) => {
     const isScrollToBottom =
       (isCurrentUser || isCommunity) &&
       element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
+    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
+    setIsScrolled(isScrolled);
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
     const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
@@ -459,8 +418,6 @@ export const ChatPopUp = (props: Props) => {
       if (isCommunity && communityName) {
         fetchCurrentChannel(communityName);
       }
-    } else {
-      setNoStrPrivKey("");
     }
   };
 
@@ -473,128 +430,38 @@ export const ChatPopUp = (props: Props) => {
     <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
   );
 
-  const communityClicked = (community: string, name: string) => {
+  const communityClicked = (community: string) => {
     setIsCommunity(true);
     setCommunityName(community);
   };
 
-  const finish = () => {
-    setStep(0);
-    setKeyDialog(false);
-  };
-
-  const handleConfirmButton = (actionType: string) => {
-    switch (actionType) {
-      case NEWCHATACCOUNT:
-        setInProgress(true);
-        deleteChatPublicKey(activeUser)
-          .then((updatedProfile) => {
-            handleJoinChat();
-            setStep(10);
-            setInProgress(false);
-          })
-          .catch((err) => {
-            error(err);
-          });
-        break;
-      default:
-        break;
-    }
-  };
-
-  const successModal = (message: string) => {
-    return (
-      <>
-        <div className="import-chat-dialog-header border-bottom">
-          <div className="step-no">2</div>
-          <div className="import-chat-dialog-titles">
-            <div className="import-chat-main-title">{_t("manage-authorities.success-title")}</div>
-            <div className="import-chat-sub-title">
-              {_t("manage-authorities.success-sub-title")}
-            </div>
-          </div>
-        </div>
-        <div className="success-dialog-body">
-          <div className="success-dialog-content">
-            <span>
-              {message === CHATIMPORT
-                ? "Chats imported successfully"
-                : message === NEWCHATACCOUNT
-                ? "New Account created successfully"
-                : ""}
-            </span>
-          </div>
-          <div className="d-flex justify-content-center">
-            <span className="hr-6px-btn-spacer" />
-            <Button onClick={finish}>{_t("g.finish")}</Button>
-          </div>
-        </div>
-      </>
-    );
-  };
-
-  const confirmationModal = (actionType: string) => {
-    return (
-      <>
-        <div className="join-community-dialog-header border-bottom">
-          <div className="join-community-dialog-titles">
-            <h2 className="join-community-main-title">
-              {actionType === NEWCHATACCOUNT ? "Warning" : "Confirmation"}
-            </h2>
-          </div>
-        </div>
-        {inProgress && actionType === NEWCHATACCOUNT && <LinearProgress />}
-        <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
-          {actionType === NEWCHATACCOUNT
-            ? "creating new account will reset your chats"
-            : "Are you sure?"}
-        </div>
-        <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
-          <Button
-            variant="outline-primary"
-            className="close-btn"
-            style={{ marginRight: "20px" }}
-            onClick={() => {
-              setStep(0);
-              setKeyDialog(false);
-            }}
-          >
-            {_t("chat.close")}
-          </Button>
-          <Button
-            variant="outline-primary"
-            className="confirm-btn"
-            onClick={() => handleConfirmButton(actionType)}
-          >
-            {_t("chat.confirm")}
-          </Button>
-        </p>
-      </>
-    );
-  };
-
-  const toggleKeyDialog = () => {
-    setKeyDialog(!keyDialog);
-  };
-
   const handleBackArrowSvg = () => {
     setCurrentUser("");
     setIsCurrentUser(false);
     setCommunityName("");
     setIsCommunity(false);
-    setClickedMessage("");
     setShowSearchUser(false);
     setSearchText("");
     setHasMore(true);
     setRevealPrivKey(false);
   };
 
+  const handleExtendedView = () => {
+    if (!isCurrentUser && !isCommunity) {
+      history?.push("/chats");
+    } else if (isCurrentUser) {
+      history?.push(`/chats/@${currentUser}`);
+    } else {
+      history?.push(`/chats/${communityName}`);
+    }
+  };
+
   return (
     <>
       {show && (
         <div
           className={`chatbox-container ${expanded ? "expanded" : ""} ${
-            innerWidth <= 666 ? "small-screen" : ""
+            windowWidth <= 666 ? "small-screen" : ""
           }`}
         >
           <div className="chat-header">
@@ -633,19 +500,28 @@ export const ChatPopUp = (props: Props) => {
               </p>
             </div>
             <div className="actionable-imgs">
-              {!currentUser && hasUserJoinedChat && noStrPrivKey && !isCommunity && !revealPrivKey && (
-                <>
-                  <div className="message-image" onClick={handleMessageSvgClick}>
-                    <Tooltip content={_t("chat.new-message")}>
-                      <p className="message-svg">{addMessageSVG}</p>
-                    </Tooltip>
-                  </div>
-                </>
-              )}
-              {hasUserJoinedChat && noStrPrivKey && !revealPrivKey && (
+              <div className="extended-image" onClick={handleExtendedView}>
+                <Tooltip content={_t("chat.extended-view")}>
+                  <p className="extended-svg">{extendedView}</p>
+                </Tooltip>
+              </div>
+              {!currentUser &&
+                hasUserJoinedChat &&
+                activeUserKeys?.priv &&
+                !isCommunity &&
+                !revealPrivKey && (
+                  <>
+                    <div className="message-image" onClick={handleMessageSvgClick}>
+                      <Tooltip content={_t("chat.new-message")}>
+                        <p className="message-svg">{addMessageSVG}</p>
+                      </Tooltip>
+                    </div>
+                  </>
+                )}
+              {hasUserJoinedChat && activeUserKeys?.priv && !revealPrivKey && (
                 <div className="message-image" onClick={handleRefreshSvgClick}>
                   <Tooltip content={_t("chat.refresh")}>
-                    <p className="message-svg" style={{ paddingTop: "10px" }}>
+                    <p className="message-svg" style={{ paddingTop: "8px" }}>
                       {syncSvg}
                     </p>
                   </Tooltip>
@@ -653,13 +529,13 @@ export const ChatPopUp = (props: Props) => {
               )}
               {isCommunity && (
                 <div className="community-menu">
-                  <ChatsCommunityDropdownMenu history={props.history} username={communityName} />
+                  <ChatsCommunityDropdownMenu history={history!} username={communityName} />
                 </div>
               )}{" "}
-              {!isCommunity && !isCurrentUser && noStrPrivKey && (
+              {!isCommunity && !isCurrentUser && activeUserKeys?.priv && (
                 <div className="simple-menu" onClick={() => setExpanded(true)}>
                   <ChatsDropdownMenu
-                    history={props.history}
+                    history={history!}
                     onManageChatKey={() => {
                       setRevealPrivKey(!revealPrivKey);
                     }}
@@ -685,13 +561,7 @@ export const ChatPopUp = (props: Props) => {
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${
-              !hasUserJoinedChat
-                ? "join-chat"
-                : clickedMessage || (isTop && hasMore)
-                ? "no-scroll"
-                : ""
-            }`}
+            } ${!hasUserJoinedChat ? "join-chat" : isTop && hasMore ? "no-scroll" : ""}`}
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
@@ -727,11 +597,11 @@ export const ChatPopUp = (props: Props) => {
                       ) : (
                         <ChatsChannelMessages
                           {...props}
+                          history={history!}
                           username={communityName}
                           publicMessages={publicMessages}
                           currentChannel={currentChannel!}
                           isScrollToBottom={false}
-                          isActveUserRemoved={isActveUserRemoved}
                           currentChannelSetter={setCurrentChannel}
                         />
                       )}
@@ -786,7 +656,7 @@ export const ChatPopUp = (props: Props) => {
                     {(chat.directContacts.length !== 0 ||
                       (chat.channels.length !== 0 && communities.length !== 0)) &&
                     !showSpinner &&
-                    noStrPrivKey ? (
+                    activeUserKeys?.priv ? (
                       <React.Fragment>
                         {chat.channels.length !== 0 && communities.length !== 0 && (
                           <>
@@ -807,9 +677,7 @@ export const ChatPopUp = (props: Props) => {
 
                                   <div
                                     className="user-title"
-                                    onClick={() =>
-                                      communityClicked(channel.communityName!, channel.name)
-                                    }
+                                    onClick={() => communityClicked(channel.communityName!)}
                                   >
                                     <p className="username">{channel.name}</p>
                                     <p className="last-message">
@@ -851,7 +719,7 @@ export const ChatPopUp = (props: Props) => {
                           );
                         })}
                       </React.Fragment>
-                    ) : !noStrPrivKey || noStrPrivKey.length === 0 || noStrPrivKey === null ? (
+                    ) : !activeUserKeys?.priv ? (
                       <>
                         <ImportChats />
                       </>
@@ -897,17 +765,11 @@ export const ChatPopUp = (props: Props) => {
                 </div>
               </Tooltip>
             )}
-            {isActveUserRemoved && isCommunity && (
-              <p className="d-flex justify-content-center mt-4 mb-0">
-                {_t("chat.blocked-user-message")}
-              </p>
-            )}
           </div>
           {(isCurrentUser || isCommunity) && (
             <ChatInput
               isCurrentUser={isCurrentUser}
               isCommunity={isCommunity}
-              isActveUserRemoved={isActveUserRemoved}
               currentUser={currentUser}
               receiverPubKey={receiverPubKey}
               currentChannel={currentChannel!}
@@ -918,25 +780,6 @@ export const ChatPopUp = (props: Props) => {
           )}
         </div>
       )}
-
-      {keyDialog && (
-        <Modal
-          animation={false}
-          show={true}
-          centered={true}
-          onHide={toggleKeyDialog}
-          keyboard={false}
-          className="chats-dialog modal-thin-header"
-          size="lg"
-        >
-          <Modal.Header closeButton={true} />
-          <Modal.Body className="chat-modals-body">
-            {step === 9 && confirmationModal(NEWCHATACCOUNT)}
-            {step === 11 && confirmationModal(RESENDMESSAGE)}
-            {step === 10 && successModal(NEWCHATACCOUNT)}
-          </Modal.Body>
-        </Modal>
-      )}
     </>
   );
 };
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 40532ce80eb..9045fe3358c 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -273,3 +273,7 @@
     }
   }
 }
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
+}
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index fbc273861af..82f4d9dad41 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -50,7 +50,6 @@ interface Props {
   history: History;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
-  isActveUserRemoved: boolean;
   setActiveUser: (username: string | null) => void;
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
@@ -68,13 +67,13 @@ export default function ChatsChannelMessages(props: Props) {
     from,
     isScrollToBottom,
     isScrolled,
-    isActveUserRemoved,
     scrollToBottom,
     currentChannelSetter
   } = props;
   const { chat, global, activeUser, ui, users, deletePublicMessage } = useMappedStore();
 
-  const { messageServiceInstance, activeUserKeys } = useContext(ChatContext);
+  const { messageServiceInstance, activeUserKeys, windowWidth, isActveUserRemoved } =
+    useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
 
@@ -90,11 +89,10 @@ export default function ChatsChannelMessages(props: Props) {
   const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
-  const [windowWidth, setWindowWidth] = useState(0);
+
   const [showMessageActions, setShowMessageActions] = useState(false);
 
   useMount(() => {
-    setWindowWidth(window.innerWidth);
     if (window.innerWidth <= 768) {
       setShowMessageActions(true);
     }
@@ -116,6 +114,12 @@ export default function ChatsChannelMessages(props: Props) {
     }
   }, [publicMessages, isScrollToBottom, channelMessagesRef]);
 
+  useEffect(() => {
+    if (windowWidth <= 768) {
+      setShowMessageActions(true);
+    }
+  }, [windowWidth]);
+
   useEffect(() => {
     if (currentChannel) {
       zoomInitializer();
@@ -123,14 +127,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   }, [currentChannel]);
 
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const clickedElement = event.target as HTMLElement;
@@ -173,13 +169,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const handleResize = () => {
-    setWindowWidth(window.innerWidth);
-    if (window.innerWidth <= 768) {
-      setShowMessageActions(true);
-    }
-  };
-
   const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
     setDmMessage(e.target.value);
   };
@@ -191,11 +180,11 @@ export default function ChatsChannelMessages(props: Props) {
   };
 
   const setBackground = () => {
-    if (global.theme === Theme.day) {
-      zoom?.update({ background: "#ffffff" });
-    } else {
-      zoom?.update({ background: "#131111" });
-    }
+    // if (global.theme === Theme.day) {
+    //   zoom?.update({ background: "#ffffff" });
+    // } else {
+    //   zoom?.update({ background: "#131111" });
+    // }
   };
 
   const handleImageClick = (msgId: string, pubkey: string) => {
@@ -308,7 +297,6 @@ export default function ChatsChannelMessages(props: Props) {
   };
 
   const handelMessageActions = (msgId: string) => {
-    console.log("showMessageActions", showMessageActions, "msgId", msgId);
     if (showMessageActions && hoveredMessageId !== msgId) {
       setHoveredMessageId(msgId);
     } else {
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 8f2f06d68b3..55d1930a9be 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -48,11 +48,9 @@ export default function ChatsDirectMessages(props: Props) {
     scrollToBottom
   } = props;
 
-  const { chat, global, activeUser, deleteDirectMessage } = useMappedStore();
+  const { global, activeUser, deleteDirectMessage } = useMappedStore();
   const { activeUserKeys, messageServiceInstance } = useContext(ChatContext);
 
-  console.log("directMessages", directMessages);
-
   let prevGlobal = usePrevious(global);
   const [step, setStep] = useState(0);
   const [resendMessage, setResendMessage] = useState<DirectMessage>();
@@ -103,16 +101,6 @@ export default function ChatsDirectMessages(props: Props) {
     return <></>;
   };
 
-  // const getFormattedDate = (msg: DirectMessage, i: number) => {
-  //   const prevMsg = directMessages[i - 1];
-  //   const msgDate = formatMessageDate(msg.created);
-  //   const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-  //   if (msgDate !== prevMsgDate) {
-  //     return true;
-  //   }
-  //   return false;
-  // };
-
   const handleConfirm = () => {
     switch (step) {
       case 1:
@@ -146,10 +134,6 @@ export default function ChatsDirectMessages(props: Props) {
 
                 const isSameUser = checkContiguousMessage(msg, i, directMessages);
 
-                // const date = getFormattedDate(msg, i);
-
-                // console.log('date', date, msg)
-
                 return (
                   <React.Fragment key={msg.id}>
                     {dayAndMonth}
diff --git a/src/common/components/chats/chats-messages-box/index.scss b/src/common/components/chats/chats-messages-box/index.scss
index 4b533466c7b..43d34528bf8 100644
--- a/src/common/components/chats/chats-messages-box/index.scss
+++ b/src/common/components/chats/chats-messages-box/index.scss
@@ -23,15 +23,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    .start-chat {
-      @include themify(day) {
-        color: #65676b;
-      }
-      @include themify(night) {
-        color: $white;
+    .start-chat-wrapper {
+      .start-chat {
+        @include themify(day) {
+          color: #65676b;
+        }
+        @include themify(night) {
+          color: $white;
+        }
       }
     }
+
     .info-message {
       font-size: 16px;
       // font-weight: 100;
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index 6bda5f2d967..c63c078f136 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -17,6 +17,7 @@ import { CHANNEL } from "../chat-popup/chat-constants";
 import { Button } from "react-bootstrap";
 import { ChatContext } from "../chat-context-provider";
 import { getCommunities } from "../../../api/bridge";
+import { useMount } from "react-use";
 
 interface MatchParams {
   filter: string;
@@ -40,34 +41,37 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
 
-  const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
+  const {
+    messageServiceInstance,
+    currentChannel,
+    windowWidth,
+    maxHeight,
+    setCurrentChannel,
+    setShowSideBar
+  } = useContext(ChatContext);
 
   const { channels, updatedChannel } = chat;
   const { match } = props;
   const username = match.params.username;
 
-  const [maxHeight, setMaxHeight] = useState(0);
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatEnabled, setIsCommunityChatEnabled] = useState(false);
   const [isCommunityJoined, setIsCommunityChatJoined] = useState(false);
   const [currentCommunity, setCurrentCommunity] = useState<Channel>();
   const [hasLeftCommunity, setHasLeftCommunity] = useState(false);
 
-  useEffect(() => {
-    setMaxHeight(window.innerHeight - 68);
-  }, [typeof window !== "undefined"]);
-
-  useEffect(() => {
+  useMount(() => {
     checkUserCommunityMembership();
-    const handleResize = () => {
-      setMaxHeight(window.innerHeight - 68);
-    };
+  });
 
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+  useEffect(() => {
+    console.log(
+      "isCommunityChatEnabled",
+      isCommunityChatEnabled,
+      "isCommunityJoined",
+      isCommunityJoined
+    );
+  }, [isCommunityChatEnabled, isCommunityJoined]);
 
   useEffect(() => {
     if (currentCommunity && chat.leftChannelsList.includes(currentCommunity.id)) {
@@ -84,17 +88,6 @@ export default function ChatsMessagesBox(props: Props) {
     }
   }, [username]);
 
-  useEffect(() => {
-    console.log(
-      "isCommunityChatEnabled",
-      isCommunityChatEnabled,
-      "isCommunityJoined",
-      isCommunityJoined,
-      "hasLeftCommunity",
-      hasLeftCommunity
-    );
-  }, [isCommunityChatEnabled, isCommunityJoined, hasLeftCommunity]);
-
   const checkUserCommunityMembership = () => {
     getCommunityProfile();
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
@@ -161,10 +154,19 @@ export default function ChatsMessagesBox(props: Props) {
   };
 
   return (
-    <div className="chats-messages-box" style={{ maxHeight: maxHeight }}>
+    <div
+      className="chats-messages-box"
+      style={{
+        maxHeight: maxHeight,
+        position: windowWidth < 768 ? "absolute" : "static"
+      }}
+    >
       {match.url === "/chats" ? (
         <div className="no-chat-select">
-          <p className="start-chat text-center">Select a chat or start a new conversation</p>
+          <div className="start-chat-wrapper text-center ">
+            <p className="start-chat ">Select a chat or start a new conversation</p>
+            {windowWidth < 768 && <Button onClick={() => setShowSideBar(true)}>Start Chat</Button>}
+          </div>
         </div>
       ) : (
         <>
diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
index 7c0ab8fdfd7..bda15d751c6 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -26,29 +26,52 @@
   }
 
   .header-content {
-    .user-info {
-      display: inline-flex;
-      padding: 8px 10px;
-      margin: 5px 0 0 9px;
-      cursor: pointer;
+    .user-info-wrapper {
+      .expand-icon {
+        margin-top: 15px;
+        .expand-svg {
+          height: 35px;
+          width: 35px;
+          background: #f4f4f4;
+          margin-left: 10px;
+          border-radius: 10px;
+          cursor: pointer;
+          svg {
+            width: 35px;
+            height: 35px;
+          }
 
-      .username {
-        font-size: 21px;
-        font-family: Helvetica, Arial, sans-serif;
-        font-weight: 700;
-        margin: 7px 0 0 12px;
+          &:hover {
+            background: #e4e6eb;
+          }
+        }
       }
-      &:hover {
-        border-radius: 10px;
-        @include themify(day) {
-          background: #eeeeee;
+
+      .user-info {
+        display: inline-flex;
+        padding: 8px 10px;
+        margin: 5px 0 0 0;
+        cursor: pointer;
+
+        .username {
+          font-size: 21px;
+          font-family: Helvetica, Arial, sans-serif;
+          font-weight: 700;
+          margin: 7px 0 0 12px;
         }
+        &:hover {
+          border-radius: 10px;
+          @include themify(day) {
+            background: #eeeeee;
+          }
 
-        @include themify(night) {
-          background: $dusky-blue;
+          @include themify(night) {
+            background: $dusky-blue;
+          }
         }
       }
     }
+
     .community-menu {
       border: none;
       width: 40px;
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
index 9e7b8b99165..2bf04665272 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -11,6 +11,8 @@ import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
 import Link from "../../alink";
+import { expandSideBar } from "../../../img/svg";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   username: string;
@@ -20,6 +22,7 @@ interface Props {
 export default function ChatsMessagesHeader(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
+  const { setShowSideBar } = useContext(ChatContext);
 
   const isChannel = (username: string) => {
     if (username.startsWith("@")) {
@@ -42,16 +45,24 @@ export default function ChatsMessagesHeader(props: Props) {
   return (
     <div className="chats-messages-header">
       <div className="d-flex justify-content-between header-content">
-        <Link
-          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
-          target="_blank"
-          style={{ textDecoration: "none" }}
-        >
-          <div className="user-info">
-            <UserAvatar username={formattedUserName(username)} size="medium" />
-            <p className="username">{formattedName(username, chat)}</p>
+        <div className="d-flex user-info-wrapper">
+          <div className="expand-icon d-md-none">
+            <p className="expand-svg" onClick={() => setShowSideBar(true)}>
+              {expandSideBar}
+            </p>
           </div>
-        </Link>
+          <Link
+            to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+            target="_blank"
+            style={{ textDecoration: "none" }}
+          >
+            <div className="user-info">
+              <UserAvatar username={formattedUserName(username)} size="medium" />
+              <p className="username">{formattedName(username, chat)}</p>
+            </div>
+          </Link>
+        </div>
+
         {isChannel(username) && (
           <div className="community-menu">
             <ChatsCommunityDropdownMenu from={CHATPAGE} {...props} />
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index ae38a3fa13c..7cda969158a 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -61,16 +61,12 @@ export default function ChatsMessagesView(props: Props) {
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
   const [communityName, setCommunityName] = useState("");
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>();
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
-  const [removedUsers, setRemovedUsers] = useState<string[]>([]);
-  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
   useEffect(() => {
-    getActiveUserKeys();
     isDirectUserOrCommunity();
   }, []);
 
@@ -87,7 +83,6 @@ export default function ChatsMessagesView(props: Props) {
       getDirectMessages();
     } else if (communityName && currentChannel) {
       getChannelMessages();
-      currentChannel?.removedUserIds && setRemovedUsers(currentChannel.removedUserIds);
     }
   }, [directUser, communityName, currentChannel, chat.directMessages]);
 
@@ -104,13 +99,6 @@ export default function ChatsMessagesView(props: Props) {
     }
   }, [isTop]);
 
-  useEffect(() => {
-    if (removedUsers) {
-      const removed = removedUsers.includes(activeUserKeys?.pub!);
-      setIsActiveUserRemoved(removed);
-    }
-  }, [removedUsers]);
-
   const fetchPrevMessages = () => {
     if (!hasMore || inProgress) return;
 
@@ -118,7 +106,6 @@ export default function ChatsMessagesView(props: Props) {
     messageServiceInstance
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
-        console.log("number", num);
         if (num < 25) {
           setHasMore(false);
         }
@@ -129,16 +116,6 @@ export default function ChatsMessagesView(props: Props) {
       });
   };
 
-  const getActiveUserKeys = async () => {
-    const profileData = await getProfileMetaData(activeUser?.username!);
-    const noStrPrivKey = getPrivateKey(activeUser?.username!);
-    const activeUserKeys = {
-      pub: profileData?.nsKey,
-      priv: noStrPrivKey
-    };
-    setActiveUserKeys(activeUserKeys);
-  };
-
   const isDirectUserOrCommunity = () => {
     if (username) {
       if (username && username.startsWith("@")) {
@@ -163,15 +140,12 @@ export default function ChatsMessagesView(props: Props) {
 
   const getDirectMessages = () => {
     const user = chat.directContacts.find((item) => item.name === directUser);
-    console.log("user", user?.pubkey);
     const messages = user && fetchDirectMessages(user?.pubkey, chat.directMessages);
     const directMessages = messages?.sort((a, b) => a.created - b.created);
     setDirectMessages(directMessages!);
-    console.log("Messages", messages);
   };
 
   const scrollToBottom = () => {
-    console.log("Scroll to bottom clicked", messagesBoxRef.current?.scrollHeight);
     messagesBoxRef &&
       messagesBoxRef?.current?.scroll({
         top: messagesBoxRef.current?.scrollHeight,
@@ -181,16 +155,11 @@ export default function ChatsMessagesView(props: Props) {
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
-    let srollHeight: number = (element.scrollHeight / 100) * 25;
-    // const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
     const isScrollToBottom =
       element.scrollTop + messagesBoxRef?.current?.clientHeight! < element.scrollHeight - 200;
     setIsScrollToBottom(isScrollToBottom);
-    // console.log(element.scrollTop, (element.scrollTop / 100) * 98);
     const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
     setIsScrolled(isScrolled);
-    // const isScrolled = element.scrollHeight/100 *3 - 50;
-    // console.log("isScrolled", isScrolled)
     const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
     if (communityName && scrollerTop) {
       setIsTop(true);
@@ -221,7 +190,6 @@ export default function ChatsMessagesView(props: Props) {
               isScrollToBottom={isScrollToBottom}
               from={CHATPAGE}
               isScrolled={isScrolled}
-              isActveUserRemoved={isActveUserRemoved}
               scrollToBottom={scrollToBottom}
               currentChannelSetter={currentChannelSetter}
             />
@@ -252,7 +220,6 @@ export default function ChatsMessagesView(props: Props) {
         gifPickerStyle={EmojiPickerStyle}
         isCurrentUser={directUser ? true : false}
         isCommunity={communityName ? true : false}
-        isActveUserRemoved={isActveUserRemoved}
         currentUser={directUser}
         currentChannel={currentChannel!}
         isCurrentUserJoined={true}
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
index 35f7e4e03d2..ea441a050df 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -6,7 +6,6 @@ import { dateToFormatted } from "../../../helper/parse-date";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { getAccountFull } from "../../../api/hive";
-import { getCommunity } from "../../../api/bridge";
 import { formattedUserName } from "../utils";
 import { useCommunityCache } from "../../../core/caches/communities-cache";
 
@@ -35,12 +34,6 @@ export default function ChatsProfileBox(props: Props) {
 
   const { data: community } = useCommunityCache(username ? username! : communityName!);
 
-  // useEffect(() => {
-  //   if (community) {
-  //     console.log("Community 1st", community);
-  //   }
-  // }, [community, communityName]);
-
   useEffect(() => {
     fetchProfileData();
   }, [username, isCommunity, isCurrentUser, communityName, currentUser]);
diff --git a/src/common/components/chats/chats-scroller/index.scss b/src/common/components/chats/chats-scroller/index.scss
index aefcae9b48f..fe337a59e70 100644
--- a/src/common/components/chats/chats-scroller/index.scss
+++ b/src/common/components/chats/chats-scroller/index.scss
@@ -6,7 +6,7 @@
   height: 33px;
   border-radius: 50%;
   float: right;
-  z-index: 10;
+  z-index: 9;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 7cfb4d8c3d9..9885d8fbf61 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -10,7 +10,7 @@ import { getAccountReputations } from "../../../api/hive";
 import accountReputation from "../../../helper/account-reputation";
 import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
 import { _t } from "../../../i18n";
-import { arrowBackSvg, syncSvg } from "../../../img/svg";
+import { arrowBackSvg, closeSvg, syncSvg } from "../../../img/svg";
 import ChatsScroller from "../chats-scroller";
 import LinearProgress from "../../linear-progress";
 import Tooltip from "../../tooltip";
@@ -36,6 +36,10 @@ export default function ChatsSideBar(props: Props) {
     activeUserKeys,
     revealPrivKey,
     chatPrivKey,
+    showSideBar,
+    windowWidth,
+    maxHeight,
+    setShowSideBar,
     setShowSpinner,
     setRevealPrivKey,
     setReceiverPubKey
@@ -116,144 +120,179 @@ export default function ChatsSideBar(props: Props) {
     }
   };
 
+  const handleSideBar = () => {
+    if (windowWidth < 768 && showSideBar) {
+      setShowSideBar(false);
+    }
+  };
+
   return (
-    <div className="chats-sidebar">
-      <div className="d-flex justify-content-between chats-title">
-        <div className="d-flex chats-content">
-          {revealPrivKey && (
-            <Tooltip content={_t("chat.back")}>
-              <div
-                className="back-arrow-image d-flex justify-content-center align-items-center"
-                onClick={() => setRevealPrivKey(false)}
-              >
-                <span className="back-arrow-svg"> {arrowBackSvg}</span>
-              </div>
-            </Tooltip>
+    <>
+      {showSideBar && (
+        <div className="chats-sidebar">
+          {windowWidth < 768 && (
+            <div
+              className="close-sidebar d-flex justify-content-end"
+              onClick={() => setShowSideBar(false)}
+            >
+              {closeSvg}
+            </div>
           )}
 
-          <p className="chats">Chats</p>
-        </div>
+          <div className="d-flex justify-content-between chats-title">
+            <div className="d-flex chats-content">
+              {revealPrivKey && windowWidth > 768 && (
+                <Tooltip content={_t("chat.back")}>
+                  <div
+                    className="back-arrow-image d-flex justify-content-center align-items-center"
+                    onClick={() => setRevealPrivKey(false)}
+                  >
+                    <span className="back-arrow-svg"> {arrowBackSvg}</span>
+                  </div>
+                </Tooltip>
+              )}
+
+              <p className="chats">Chats</p>
+            </div>
 
-        <div className="chat-actions d-flex">
-          <div className="refresh-button">
-            <Tooltip content={_t("chat.refresh")}>
-              <p className="refresh-svg" onClick={handleRefreshChat}>
-                {syncSvg}
-              </p>
-            </Tooltip>
+            <div className="chat-actions d-flex">
+              <div className="refresh-button">
+                <Tooltip content={_t("chat.refresh")}>
+                  <p className="refresh-svg" onClick={handleRefreshChat}>
+                    {syncSvg}
+                  </p>
+                </Tooltip>
+              </div>
+              {chatPrivKey && (
+                <div className="chat-menu">
+                  <ChatsDropdownMenu
+                    onManageChatKey={() => {
+                      setRevealPrivKey(!revealPrivKey);
+                      if (windowWidth < 768) {
+                        setShowSideBar(false);
+                      }
+                    }}
+                    {...props}
+                  />
+                </div>
+              )}
+            </div>
           </div>
-          {chatPrivKey && (
-            <div className="chat-menu">
-              <ChatsDropdownMenu
-                onManageChatKey={() => {
-                  setRevealPrivKey(!revealPrivKey);
+          <div className="chats-search">
+            <Form.Group className="w-100">
+              <Form.Control
+                type="text"
+                placeholder={_t("chat.search")}
+                value={searchText}
+                onChange={(e) => {
+                  setSearchText(e.target.value);
+                  setSearchInProgress(true);
+                  if (e.target.value.length === 0) {
+                    setSearchInProgress(false);
+                    setUserList([]);
+                  }
                 }}
-                {...props}
               />
-            </div>
+            </Form.Group>
+          </div>
+          {showDivider && <div className="divider" />}
+          {searchInProgress && <LinearProgress />}
+          <div className="chats-list" onScroll={handleScroll} ref={chatsSideBarRef}>
+            {searchText ? (
+              <div className="searched-users">
+                {userList.map((user) => (
+                  <Link
+                    to={`/chats/@${user.account}`}
+                    onClick={() => {
+                      setSearchText("");
+                      setSearchInProgress(false);
+                    }}
+                    key={user.account}
+                  >
+                    <div
+                      className="d-flex user-info"
+                      key={user.account}
+                      onClick={() => {
+                        setRevealPrivKey(false);
+                        getReceiverPubKey(user.account);
+                        handleSideBar();
+                      }}
+                    >
+                      <span>
+                        <UserAvatar username={user.account} size="medium" />
+                      </span>
+                      <span className="user-name">{user.account}</span>
+                      <span className="user-reputation">
+                        ({accountReputation(user.reputation)})
+                      </span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            ) : (
+              <>
+                {communities.length !== 0 && <p className="community-title">Communities</p>}
+                {communities.map((channel) => (
+                  <Link to={`/chats/${channel.communityName}`} key={channel.id}>
+                    <div
+                      className={`community ${
+                        username === channel.communityName ? "selected" : ""
+                      }`}
+                      key={channel.id}
+                      onClick={() => {
+                        setRevealPrivKey(false);
+                        handleSideBar();
+                      }}
+                    >
+                      <UserAvatar username={channel.communityName!} size="medium" />
+                      <div className="community-info">
+                        <p className="community-name">{channel.name}</p>
+                        <p className="community-last-message">
+                          {getCommunityLastMessage(channel.id, chat.publicMessages)}
+                        </p>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+                {directContacts.length !== 0 && <p className="dm-title">DMs</p>}
+                {directContacts.map((contact) => (
+                  <Link
+                    to={`/chats/@${contact.name}`}
+                    key={contact.pubkey}
+                    onClick={() => {
+                      setReceiverPubKey(contact.pubkey);
+                      handleSideBar();
+                    }}
+                  >
+                    <div
+                      className={`dm ${
+                        username && username === `@${contact.name}` ? "selected" : ""
+                      }`}
+                      onClick={handleRevealPrivKey}
+                    >
+                      <UserAvatar username={contact.name} size="medium" />
+                      <div className="dm-info">
+                        <p className="dm-name">{contact.name}</p>
+                        <p className="dm-last-message">
+                          {getDirectLastMessage(contact.pubkey, chat.directMessages)}
+                        </p>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </>
+            )}
+          </div>
+          {isScrollToTop && (
+            <ChatsScroller
+              bodyRef={chatsSideBarRef}
+              isScrollToTop={isScrollToTop}
+              isScrollToBottom={false}
+              marginRight={"5%"}
+            />
           )}
         </div>
-      </div>
-      <div className="chats-search">
-        <Form.Group className="w-100">
-          <Form.Control
-            type="text"
-            placeholder={_t("chat.search")}
-            value={searchText}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-              setSearchInProgress(true);
-              if (e.target.value.length === 0) {
-                setSearchInProgress(false);
-                setUserList([]);
-              }
-            }}
-          />
-        </Form.Group>
-      </div>
-      {showDivider && <div className="divider" />}
-      {searchInProgress && <LinearProgress />}
-      <div className="chats-list" onScroll={handleScroll} ref={chatsSideBarRef}>
-        {searchText ? (
-          <div className="searched-users">
-            {userList.map((user) => (
-              <Link
-                to={`/chats/@${user.account}`}
-                onClick={() => {
-                  setSearchText("");
-                  setSearchInProgress(false);
-                }}
-                key={user.account}
-              >
-                <div
-                  className="d-flex user-info"
-                  key={user.account}
-                  onClick={() => {
-                    handleRevealPrivKey();
-                    getReceiverPubKey(user.account);
-                  }}
-                >
-                  <span>
-                    <UserAvatar username={user.account} size="medium" />
-                  </span>
-                  <span className="user-name">{user.account}</span>
-                  <span className="user-reputation">({accountReputation(user.reputation)})</span>
-                </div>
-              </Link>
-            ))}
-          </div>
-        ) : (
-          <>
-            {communities.length !== 0 && <p className="community-title">Communities</p>}
-            {communities.map((channel) => (
-              <Link to={`/chats/${channel.communityName}`} key={channel.id}>
-                <div
-                  className={`community ${username === channel.communityName ? "selected" : ""}`}
-                  key={channel.id}
-                  onClick={handleRevealPrivKey}
-                >
-                  <UserAvatar username={channel.communityName!} size="medium" />
-                  <div className="community-info">
-                    <p className="community-name">{channel.name}</p>
-                    <p className="community-last-message">
-                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                    </p>
-                  </div>
-                </div>
-              </Link>
-            ))}
-            {directContacts.length !== 0 && <p className="dm-title">DMs</p>}
-            {directContacts.map((contact) => (
-              <Link
-                to={`/chats/@${contact.name}`}
-                key={contact.pubkey}
-                onClick={() => setReceiverPubKey(contact.pubkey)}
-              >
-                <div
-                  className={`dm ${username && username === `@${contact.name}` ? "selected" : ""}`}
-                  onClick={handleRevealPrivKey}
-                >
-                  <UserAvatar username={contact.name} size="medium" />
-                  <div className="dm-info">
-                    <p className="dm-name">{contact.name}</p>
-                    <p className="dm-last-message">
-                      {getDirectLastMessage(contact.pubkey, chat.directMessages)}
-                    </p>
-                  </div>
-                </div>
-              </Link>
-            ))}
-          </>
-        )}
-      </div>
-      {isScrollToTop && (
-        <ChatsScroller
-          bodyRef={chatsSideBarRef}
-          isScrollToTop={isScrollToTop}
-          isScrollToBottom={false}
-          marginRight={"5%"}
-        />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index 0baf0d1ed05..127f1f2a5e3 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -9,10 +9,21 @@
     background: $dark-two;
     box-shadow: 0px -5px 5px $charcoal-grey;
   }
-  width: 330px;
+  z-index: 10;
+  min-width: 330px;
   height: 100%;
   margin-top: 10px;
 
+  .close-sidebar {
+    margin: 10px 5px 0 0;
+    svg {
+      width: 30px;
+      height: 30px;
+      color: $steel-grey;
+      cursor: pointer;
+    }
+  }
+
   .chats-title {
     margin: 30px 16px 12px 16px;
 
@@ -226,9 +237,48 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+// @include media-breakpoint-down(sm) {
+//   .chats-sidebar {
+//     width: 45%;
+
+//     .chats-title {
+//       margin: 15px 0px 5px 5px;
+//     }
+//     .chats-search {
+//       padding: 0 5px 0 5px;
+//       margin-bottom: 0;
+//     }
+//     .chats-list {
+//       overflow-x: hidden;
+//       .community-title,
+//       .dm-title {
+//         font-size: 1rem;
+//         padding: 15px 0 10px 8px;
+//       }
+//       .community,
+//       .dm {
+//         margin: 0;
+//         padding: 9.5px 0px 9.5px 5px;
+//         .community-info,
+//         .dm-info {
+//           .community-name,
+//           .dm-name {
+//             padding: 3px 0 0 10px;
+//           }
+//           .community-last-message,
+//           .dm-last-message {
+//             padding: 4px 0 0 10px;
+//             max-width: 35vw;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+//handle the width of the sidebar when screen size is less than 330px
+@media (max-width: 320px) {
   .chats-sidebar {
-    width: 45%;
+    min-width: 260px;
 
     .chats-title {
       margin: 15px 0px 5px 5px;
@@ -264,10 +314,3 @@
     }
   }
 }
-// @media (max-width: 300px) {
-// .chats-sidebar {
-//   .community-info, .dm-info {
-//     display: none;
-//   }
-// }
-// }
diff --git a/src/common/components/chats/import-chats/index.tsx b/src/common/components/chats/import-chats/index.tsx
index 4ecf4688505..c02abd2aa64 100644
--- a/src/common/components/chats/import-chats/index.tsx
+++ b/src/common/components/chats/import-chats/index.tsx
@@ -12,7 +12,6 @@ import { setNostrkeys } from "../../../../managers/message-manager";
 import "./index.scss";
 import LinearProgress from "../../linear-progress";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { createNoStrAccount, setProfileMetaData } from "../utils";
 
 export default function ImportChats() {
   const { activeUser } = useMappedStore();
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index 2c6f41893f4..9fe45261aa2 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -24,14 +24,18 @@ export default function JoinCommunityChatBtn(props: Props) {
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
   const [isChatEnabled, setIsChatEnabled] = useState(false);
-  const [currentChannel, setCurrentChannel] = useState<Channel>();
+  const [currentCommunity, setCurrentCommunity] = useState<Channel>();
   const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
   const [loadCommunity, setLoadCommunity] = useState(false);
   const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
 
   useEffect(() => {
     fetchCommunityProfile();
-  }, [chat.channels, currentChannel, chat.leftChannelsList]);
+  }, [chat.channels, currentCommunity, chat.leftChannelsList]);
+
+  useEffect(() => {
+    console.log("isChatEnabled", isChatEnabled, "isCommunityChatJoined", isCommunityChatJoined);
+  }, [isChatEnabled, isCommunityChatJoined]);
 
   useEffect(() => {
     fetchCommunityProfile();
@@ -44,20 +48,18 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [activeUserKeys]);
 
   useEffect(() => {
+    fetchCommunityProfile();
+    checkIsChatJoined();
     if (messageServiceInstance) {
       if (loadCommunity) {
-        messageServiceInstance?.loadChannel(currentChannel?.id!);
+        messageServiceInstance?.loadChannel(currentCommunity?.id!);
+        setInProgress(false);
       }
       if (initiateCommunityChat && communityRoles.length !== 0) {
         createCommunityChat();
       }
     }
-  }, [
-    typeof window !== "undefined" && messageServiceInstance,
-    loadCommunity,
-    communityRoles,
-    initiateCommunityChat
-  ]);
+  }, [messageServiceInstance, loadCommunity, communityRoles, initiateCommunityChat]);
 
   useEffect(() => {
     checkIsChatJoined();
@@ -66,26 +68,24 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [isCommunityChatJoined, props.community, chat.channels, chat.leftChannelsList]);
 
   const fetchCommunityProfile = async () => {
+    console.log("fetch community profile");
     const communityProfile = await getProfileMetaData(props.community?.name);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
     setIsChatEnabled(haschannelMetaData);
 
-    if (!currentChannel) {
-      setCurrentChannel(communityProfile.channel);
+    if (!currentCommunity) {
+      setCurrentCommunity(communityProfile.channel);
     }
   };
 
   const checkIsChatJoined = () => {
-    for (const item of chat.channels) {
-      if (
-        item.communityName === props.community.name &&
-        !chat.leftChannelsList.includes(currentChannel?.id!)
-      ) {
-        setIsCommunityChatJoined(true);
-      } else {
-        setIsCommunityChatJoined(false);
-      }
-    }
+    setIsCommunityChatJoined(
+      chat.channels.some(
+        (item) =>
+          item.communityName === props.community.name &&
+          !chat.leftChannelsList.includes(currentCommunity?.id!)
+      )
+    );
   };
 
   const getCommunityRoles = async () => {
@@ -121,7 +121,6 @@ export default function JoinCommunityChatBtn(props: Props) {
   const createCommunityChat = async () => {
     const { community } = props;
     try {
-      setInProgress(true);
       const data = await messageServiceInstance?.createChannel({
         name: community.title,
         about: community.description,
@@ -132,6 +131,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         removedUserIds: []
       });
 
+      console.log("Community data", data);
       const content = JSON.parse(data?.content!);
       const channelMetaData = {
         id: data?.id as string,
@@ -143,7 +143,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         picture: content.picture
       };
       setChannelMetaData(community.name, channelMetaData).then(() =>
-        setCurrentChannel(channelMetaData)
+        setCurrentCommunity(channelMetaData)
       );
     } finally {
       setInProgress(false);
@@ -153,27 +153,28 @@ export default function JoinCommunityChatBtn(props: Props) {
   };
 
   const joinCommunityChat = () => {
+    setInProgress(true);
     if (!hasUserJoinedChat) {
-      setInProgress(true);
       joinChat();
       setLoadCommunity(true);
-      setIsCommunityChatJoined(true);
       return;
     }
-    if (chat.leftChannelsList.includes(currentChannel?.id!)) {
+    if (chat.leftChannelsList.includes(currentCommunity?.id!)) {
       messageServiceInstance?.updateLeftChannelList(
-        chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
+        chat.leftChannelsList.filter((x) => x !== currentCommunity?.id)
       );
     }
-    messageServiceInstance?.loadChannel(currentChannel?.id!);
+    messageServiceInstance?.loadChannel(currentCommunity?.id!);
     setIsCommunityChatJoined(true);
+    setInProgress(false);
   };
 
   const startCommunityChat = () => {
+    setInProgress(true);
     if (!hasUserJoinedChat) {
       joinChat();
       setInitiateCommunityChat(true);
-      setIsCommunityChatJoined(true);
+
       return;
     } else {
       createCommunityChat();
@@ -183,7 +184,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   const fetchCurrentChannel = () => {
     for (const item of chat.channels) {
       if (item.communityName === props.community.name) {
-        setCurrentChannel(item);
+        setCurrentCommunity(item);
         return item;
       }
     }
diff --git a/src/common/components/chats/utils/upload-chat-public-key.ts b/src/common/components/chats/utils/upload-chat-public-key.ts
index c407bb527fb..5fe18c12a9c 100644
--- a/src/common/components/chats/utils/upload-chat-public-key.ts
+++ b/src/common/components/chats/utils/upload-chat-public-key.ts
@@ -2,15 +2,25 @@ import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
 import { ActiveUser } from "../../../store/active-user/types";
 
-export const setProfileMetaData = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
+export const uploadChatPublicKey = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
   const response = await getAccountFull(activeUser?.username!);
 
   const { posting_json_metadata } = response;
-  const profile = JSON.parse(posting_json_metadata!).profile;
+
   const newProfile = {
     nsKey: noStrPubKey
   };
 
+  if (!response || !response.posting_json_metadata) {
+    const newPostingData = {
+      posting_json_metadata: JSON.stringify({ profile: {} })
+    };
+    const profile = JSON.parse(newPostingData.posting_json_metadata)?.profile;
+    const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+    return updatedProfile;
+  }
+
+  const profile = JSON.parse(posting_json_metadata!)?.profile;
   const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
   return updatedProfile;
 };
diff --git a/src/common/components/manage-chat-key/index.scss b/src/common/components/manage-chat-key/index.scss
index 777c9c5a110..ca206fdd106 100644
--- a/src/common/components/manage-chat-key/index.scss
+++ b/src/common/components/manage-chat-key/index.scss
@@ -3,12 +3,32 @@
 @import "src/style/bootstrap_vars";
 @import "src/style/mixins";
 
-
 .manage-chat-key {
   .private-key {
     margin-top: 2.5rem;
     margin-left: 14px;
     margin-right: 7px;
+
+    .expand-icon {
+      margin: 13px 15px 0 0;
+      .expand-svg {
+        height: 35px;
+        width: 35px;
+        background: #e4e6eb;
+        margin-left: 10px;
+        border-radius: 10px;
+        cursor: pointer;
+
+        svg {
+          width: 35px;
+          height: 35px;
+        }
+
+        &:hover {
+          background: #ecf3ff;
+        }
+      }
+    }
   }
   .chat-priv-key {
     width: 100%;
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index a4007b0b7cf..454bdc5585c 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { Form } from "react-bootstrap";
 import { _t } from "../../i18n";
-import { copyContent } from "../../img/svg";
+import { copyContent, expandSideBar } from "../../img/svg";
 import { ChatContext } from "../chats/chat-context-provider";
 import { copyToClipboard } from "../chats/utils";
 import { success } from "../feedback";
@@ -13,9 +13,7 @@ import "./index.scss";
 export default function ManageChatKey() {
   const context = useContext(ChatContext);
 
-  const { chatPrivKey } = context;
-
-  console.log("chatPrivKey in manage chat key", chatPrivKey);
+  const { chatPrivKey, windowWidth, setShowSideBar } = context;
 
   const copyPrivateKey = () => {
     copyToClipboard(chatPrivKey);
@@ -25,8 +23,15 @@ export default function ManageChatKey() {
   return (
     <>
       <div className="manage-chat-key">
-        <div className="private-key">
-          <Form.Group controlId="private-key">
+        <div className="private-key d-flex">
+          {windowWidth < 768 && (
+            <div className="expand-icon d-md-none">
+              <p className="expand-svg" onClick={() => setShowSideBar(true)}>
+                {expandSideBar}
+              </p>
+            </div>
+          )}
+          <Form.Group controlId="private-key" style={{ width: "39vw" }}>
             <Form.Label>{_t("chat.chat-priv-key")}</Form.Label>
             <div className="d-flex private-key-input">
               <Form.Control
@@ -39,7 +44,6 @@ export default function ManageChatKey() {
                 <p
                   className="copy-svg"
                   onClick={() => {
-                    console.log("SVG clicked");
                     copyPrivateKey();
                   }}
                 >
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 2867f49274a..73810a7887c 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -242,7 +242,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateLeftChannelList(channelIds: string[]) {
-    console.log("Update channel list");
     const tags = [["d", "left-channel-list"]];
     return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
   }
@@ -446,7 +445,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateChannel(channel: Channel, meta: Metadata) {
-    console.log("Update channel Run");
     return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
       return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
     });
@@ -530,7 +528,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    console.log("Profile update run", profile);
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -702,7 +699,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           : null;
       })
       .filter(MessageService.notEmpty);
-    console.log("Channel creation event is emitted", channelCreations);
     if (channelCreations.length > 0) {
       this.emit(MessageEvents.ChannelCreation, channelCreations);
     }
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index c81a045eaa7..1cb83609c4b 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1861,7 +1861,8 @@
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
     "chat-priv-key": "Chat Private key",
-    "copy-priv-key": "Copy Private key"
+    "copy-priv-key": "Copy Private key",
+    "extended-view": "Extended View"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 07c32c55b35..0038326dd1b 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2323,3 +2323,38 @@ export const messangerSvg = (
     <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
   </svg>
 );
+
+export const extendedView = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    width="24"
+    height="24"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+    />
+  </svg>
+);
+
+export const expandSideBar = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+);
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
index 905f03fd7bf..80f0425fe8c 100644
--- a/src/common/pages/chats/index.scss
+++ b/src/common/pages/chats/index.scss
@@ -8,7 +8,7 @@
     width: 100vw;
     height: 100vh;
   }
-  .chats-messages-box {
+  .chats-manage-key {
     .private-key {
       margin-top: 4.5rem;
     }
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index aafd4ff0d7d..d8b7c2e6651 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -37,9 +37,8 @@ export const Chats = (props: Props) => {
 
   const username = match.params.username;
 
-  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } = useContext(ChatContext);
-
-  console.log("inProgress in chats page", showSpinner);
+  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey, windowWidth } =
+    useContext(ChatContext);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -71,48 +70,58 @@ export const Chats = (props: Props) => {
     <>
       <Feedback activeUser={activeUser} />
       {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
+
       <div
         style={{ marginTop: marginTop }}
         className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
       >
-        {showSpinner ? (
-          <div className="d-flex justify-content-center align-items-center full-page">
-            <Spinner animation="border" variant="primary" />
-          </div>
-        ) : (
-          <>
-            {activeUserKeys?.pub ? (
-              chatPrivKey ? (
-                <>
-                  <ChatsSideBar history={history} username={username} />
-                  {revealPrivKey ? (
-                    <div className="chats-messages-box">
-                      <ManageChatKey />
+        {activeUser ? (
+          showSpinner ? (
+            <div className="d-flex justify-content-center align-items-center full-page">
+              <Spinner animation="border" variant="primary" />
+            </div>
+          ) : (
+            <>
+              {activeUserKeys?.pub ? (
+                chatPrivKey ? (
+                  <>
+                    <ChatsSideBar history={history} username={username} />
+                    {revealPrivKey ? (
+                      <div
+                        className="chats-manage-key"
+                        style={{ position: windowWidth < 768 ? "absolute" : "static" }}
+                      >
+                        <ManageChatKey />
+                      </div>
+                    ) : (
+                      <>
+                        <ChatsMessagesBox {...props} />
+                        {/* {match.url !== "/chats" && (
+                          <div className="d-none d-lg-block mt-2" style={{ background: "red" }}>
+                            <ChatsSideProfile username={username} />
+                          </div>
+                        )} */}
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <div className="import-chat">
+                      <ImportChats />
                     </div>
-                  ) : (
-                    <>
-                      <ChatsMessagesBox {...props} />
-                      {/* {match.url !== "/chats" && (
-                        <div className="d-none d-lg-block mt-2" style={{ background: "red" }}>
-                          <ChatsSideProfile username={username} />
-                        </div>
-                      )} */}
-                    </>
-                  )}
-                </>
+                  </>
+                )
               ) : (
-                <>
-                  <div className="import-chat">
-                    <ImportChats />
-                  </div>
-                </>
-              )
-            ) : (
-              <div className="d-flex justify-content-center align-items-center full-page">
-                <JoinChat />
-              </div>
-            )}
-          </>
+                <div className="d-flex justify-content-center align-items-center full-page">
+                  <JoinChat />
+                </div>
+              )}
+            </>
+          )
+        ) : (
+          <h4 className="d-flex justify-content-center align-items-center full-page text-center">
+            Please login to continue the chat
+          </h4>
         )}
       </div>
     </>
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 9f3d23eb23a..88eda63a377 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
-import { DirectContactsType } from "../common/store/chat/types";
 import { NostrKeysType } from "../common/components/chats/types";
 import {
   DirectMessage,
@@ -20,6 +19,7 @@ import { getProfileMetaData, getPrivateKey } from "../common/components/chats/ut
 import { useMappedStore } from "../common/store/use-mapped-store";
 import { ChatContext } from "../common/components/chats/chat-context-provider";
 import { useTimeoutFn } from "react-use";
+import { usePrevious } from "../common/util/use-previous";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -45,9 +45,12 @@ const MessageManager = () => {
     verifyPublicMessageSending,
     replaceDirectMessage,
     verifyDirectMessageSending,
-    addPreviousPublicMessages
+    addPreviousPublicMessages,
+    resetChat
   } = useMappedStore();
 
+  const prevActiveUser = usePrevious(activeUser);
+
   const [messageServiceReady, setMessageServiceReady] = useState(false);
   const [since, setSince] = useState(0);
   const [keys, setKeys] = useState<Keys>();
@@ -80,33 +83,32 @@ const MessageManager = () => {
   }, []);
 
   useEffect(() => {
-    if (!messageServiceInstance && keys?.priv) {
+    console.log("active USer", activeUser);
+  }, [activeUser]);
+
+  useEffect(() => {
+    if (keys?.priv) {
       const messageService = initMessageServiceInstance(keys);
-      console.log("messageService", messageService!!);
       setMessageServiceInstance(messageService);
       setMessageService(messageService!);
+    } else {
+      setMessageServiceInstance(null);
     }
   }, [keys]);
 
-  // useEffect(() => {
-  //   if (messageServiceInstance === undefined && keys?.priv) {
-  //     const messageService = initMessageServiceInstance(keys);
-  //     if (messageService) {
-  //       setMessageService(messageService);
-  //     }
-  //   }
-  // }, [keys]);
-
   useEffect(() => {
     if (activeUser) {
       getNostrKeys(activeUser);
     }
+    if (prevActiveUser?.username !== activeUser?.username) {
+      resetChat();
+      getNostrKeys(activeUser!);
+    }
   }, [activeUser]);
 
   const createMSInstance = (e: Event) => {
     const detail = (e as CustomEvent).detail as NostrKeysType;
     const messageService = initMessageServiceInstance(detail);
-    console.log("messageService", messageService!!);
     setMessageServiceInstance(messageService);
     setMessageService(messageService!);
   };
@@ -115,7 +117,7 @@ const MessageManager = () => {
     const profile = await getProfileMetaData(activeUser.username);
     const noStrPrivKey = getPrivateKey(activeUser.username);
     const keys = {
-      pub: profile.nsKey,
+      pub: profile?.nsKey,
       priv: noStrPrivKey
     };
     setKeys(keys);
@@ -199,17 +201,6 @@ const MessageManager = () => {
       const { peer, id } = m;
       setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
       addDirectMessages(peer, m);
-      // const startTimeout = () => {
-      //   console.log("Start time out called");
-      //   useTimeoutFn(() => {
-      //     console.log("Inner called");
-      //     checkDirectMessageSending(peer, m);
-      //   }, 2000);
-      // };
-
-      // Start the timeout
-      // startTimeout();
-      // const [startTimeout] = useTimeoutFn(checkDirectMessageSending(peer, m), 20000);
       checkDirectMessageSending(peer, m);
     });
   };
@@ -234,7 +225,6 @@ const MessageManager = () => {
 
   const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
     setTimeout(() => {
-      console.log("checkDirectMessageSending called");
       verifyDirectMessageSending(peer, data);
     }, 20000);
   };
@@ -295,7 +285,6 @@ const MessageManager = () => {
 
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
-    console.log("handle channel creation run");
     addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
   };
 

From 9fb0a134b6018aab80b6905fdab141ce414d6f9d Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 26 Sep 2023 16:23:10 +0500
Subject: [PATCH 079/179] Issue fixes found during testing

---
 .../chats/chat-context-provider.tsx           | 11 +----
 .../components/chats/chat-popup/index.scss    | 23 ++++++++--
 .../components/chats/chat-popup/index.tsx     |  8 +---
 .../chats/chats-channel-messages/index.scss   |  4 ++
 .../chats/chats-channel-messages/index.tsx    | 46 +++++++++++--------
 .../chats/chats-messages-box/index.tsx        | 14 +-----
 .../chats/chats-profile-box/index.tsx         |  1 -
 .../chats/chats-side-profile/index.scss       |  8 ----
 .../chats/chats-side-profile/index.tsx        | 23 ----------
 .../components/manage-chat-key/index.tsx      | 14 ++++--
 src/common/pages/chats/index.tsx              |  8 +---
 src/managers/message-manager.tsx              |  4 --
 12 files changed, 67 insertions(+), 97 deletions(-)
 delete mode 100644 src/common/components/chats/chats-side-profile/index.scss
 delete mode 100644 src/common/components/chats/chats-side-profile/index.tsx

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index fc693ac07f7..0f1eb192945 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -98,10 +98,6 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [currentChannel]);
 
-  useEffect(() => {
-    console.log("messageServiceInstance", messageServiceInstance);
-  }, [messageServiceInstance]);
-
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
@@ -122,10 +118,6 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [messageServiceInstance]);
 
-  useEffect(() => {
-    console.log("showsidebar", showSideBar);
-  }, [showSideBar]);
-
   useEffect(() => {
     window.addEventListener("resize", handleShowSideBar);
     return () => {
@@ -143,10 +135,9 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [shouldUpdateProfile, messageServiceInstance]);
 
-  useDebounce(() => setShowSpinner(false), 3000, [showSpinner]);
+  useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
 
   const handleShowSideBar = () => {
-    console.log("Function run", window.innerWidth);
     if (window.innerWidth < 768) {
       setShowSideBar(false);
     } else {
diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/components/chats/chat-popup/index.scss
index 4e8590d9ec0..137337d01f0 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/components/chats/chat-popup/index.scss
@@ -344,17 +344,25 @@
     .import-chats {
       margin-top: 20px;
     }
+
+    .manage-chat-key {
+      .private-key {
+        .form-group {
+          width: 90vw !important;
+        }
+      }
+    }
   }
 
   &.small-screen {
     right: 0;
     width: 100vw;
     display: grid;
-    grid-template-rows: repeat(18, 1fr);
+    grid-template-rows: repeat(100, 1fr);
     grid-template-columns: repeat(1, 1fr);
     .chat-header {
-      width: 94vw;
-      grid-row: span 1;
+      width: 100vw;
+      grid-row: span 5;
     }
     .back-arrow-svg {
       padding: 0;
@@ -375,9 +383,14 @@
       margin: 0;
     }
     .chat-body {
-      grid-row: span 16;
+      grid-row: span 95;
       height: 100%;
 
+      &.current-user,
+      .community {
+        grid-row: span 90;
+      }
+
       .chat-content {
         .last-message {
           max-width: 75vw;
@@ -385,7 +398,7 @@
       }
     }
     .chat {
-      grid-row: span 1;
+      grid-row: span 5;
     }
   }
 }
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 6926e5eca83..f60aae8e36a 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -140,10 +140,6 @@ export const ChatPopUp = (props: Props) => {
     setShow(!!activeUser?.username && !isChatPage);
   }, []);
 
-  useEffect(() => {
-    console.log("Show", show);
-  }, [show]);
-
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -557,7 +553,7 @@ export const ChatPopUp = (props: Props) => {
             </div>
           </div>
           {inProgress && <LinearProgress />}
-          {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />}
+          {/* {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />} */}
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
@@ -741,7 +737,7 @@ export const ChatPopUp = (props: Props) => {
                 )}
               </>
             ) : revealPrivKey ? (
-              <ManageChatKey />
+              <ManageChatKey history={history!} />
             ) : (
               <Button className="join-chat-btn" onClick={handleJoinChat}>
                 {isSpinner && chatButtonSpinner}
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/components/chats/chats-channel-messages/index.scss
index 9045fe3358c..d0a7ab77edf 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/components/chats/chats-channel-messages/index.scss
@@ -116,6 +116,10 @@
           border-radius: 10px;
         }
       }
+      &.date-changed {
+        margin-left: 0;
+        border-radius: 0px 10px 10px 0px;
+      }
     }
   }
 
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 82f4d9dad41..7f6690f25aa 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -180,11 +180,11 @@ export default function ChatsChannelMessages(props: Props) {
   };
 
   const setBackground = () => {
-    // if (global.theme === Theme.day) {
-    //   zoom?.update({ background: "#ffffff" });
-    // } else {
-    //   zoom?.update({ background: "#131111" });
-    // }
+    if (global.theme === Theme.day) {
+      zoom?.update({ background: "#ffffff" });
+    } else {
+      zoom?.update({ background: "#131111" });
+    }
   };
 
   const handleImageClick = (msgId: string, pubkey: string) => {
@@ -285,15 +285,9 @@ export default function ChatsChannelMessages(props: Props) {
     const msgDate = formatMessageDate(msg.created);
     const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
     if (msgDate !== prevMsgDate) {
-      return (
-        <div className="custom-divider">
-          <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
-            {msgDate}
-          </span>
-        </div>
-      );
+      return msgDate;
     }
-    return <></>;
+    return null;
   };
 
   const handelMessageActions = (msgId: string) => {
@@ -311,6 +305,7 @@ export default function ChatsChannelMessages(props: Props) {
           activeUserKeys &&
           publicMessages.map((pMsg, i) => {
             const dayAndMonth = getFormattedDateAndDay(pMsg, i);
+            console.log("dayAndMonth", dayAndMonth);
 
             const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
 
@@ -410,7 +405,13 @@ export default function ChatsChannelMessages(props: Props) {
 
             return (
               <React.Fragment key={pMsg.id}>
-                {dayAndMonth}
+                {dayAndMonth && (
+                  <div className="custom-divider">
+                    <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+                      {dayAndMonth}
+                    </span>
+                  </div>
+                )}
 
                 {pMsg.creator !== activeUserKeys?.pub ? (
                   <div
@@ -419,7 +420,7 @@ export default function ChatsChannelMessages(props: Props) {
                     onMouseEnter={() => !showMessageActions && setHoveredMessageId(pMsg.id)}
                     onMouseLeave={() => !showMessageActions && setHoveredMessageId("")}
                   >
-                    {!isSameUserMessage && (
+                    {!isSameUserMessage || (isSameUserMessage && dayAndMonth) ? (
                       <div className="community-user-img">
                         <OverlayTrigger
                           trigger="click"
@@ -434,13 +435,22 @@ export default function ChatsChannelMessages(props: Props) {
                           </span>
                         </OverlayTrigger>
                       </div>
+                    ) : (
+                      <></>
                     )}
 
-                    <div className={`user-info ${isSameUserMessage ? "same-user-msg" : ""}`}>
-                      {!isSameUserMessage && (
+                    <div
+                      className={`user-info ${
+                        isSameUserMessage && !dayAndMonth
+                          ? "same-user-msg"
+                          : dayAndMonth
+                          ? "date-changed"
+                          : ""
+                      }`}
+                    >
+                      {(!isSameUserMessage || dayAndMonth) && (
                         <p className="user-msg-time">
                           <span className="username-community">{name}</span>
-                          {/* {formatMessageTime(pMsg.created)} */}
                         </p>
                       )}
 
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/components/chats/chats-messages-box/index.tsx
index c63c078f136..21aba4c968e 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/components/chats/chats-messages-box/index.tsx
@@ -11,14 +11,13 @@ import { Channel, ChannelUpdate } from "../../../../managers/message-manager-typ
 import LinearProgress from "../../linear-progress";
 import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-
-import "./index.scss";
 import { CHANNEL } from "../chat-popup/chat-constants";
 import { Button } from "react-bootstrap";
 import { ChatContext } from "../chat-context-provider";
-import { getCommunities } from "../../../api/bridge";
 import { useMount } from "react-use";
 
+import "./index.scss";
+
 interface MatchParams {
   filter: string;
   name: string;
@@ -64,15 +63,6 @@ export default function ChatsMessagesBox(props: Props) {
     checkUserCommunityMembership();
   });
 
-  useEffect(() => {
-    console.log(
-      "isCommunityChatEnabled",
-      isCommunityChatEnabled,
-      "isCommunityJoined",
-      isCommunityJoined
-    );
-  }, [isCommunityChatEnabled, isCommunityJoined]);
-
   useEffect(() => {
     if (currentCommunity && chat.leftChannelsList.includes(currentCommunity.id)) {
       setHasLeftCommunity(true);
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
index ea441a050df..b90f498a95f 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -28,7 +28,6 @@ interface Props {
 
 export default function ChatsProfileBox(props: Props) {
   const { username, isCommunity, isCurrentUser, communityName, currentUser } = props;
-  const { chat, activeUser } = useMappedStore();
 
   const [profileData, setProfileData] = useState<profileData>();
 
diff --git a/src/common/components/chats/chats-side-profile/index.scss b/src/common/components/chats/chats-side-profile/index.scss
deleted file mode 100644
index 6375caa1db8..00000000000
--- a/src/common/components/chats/chats-side-profile/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../../../../style/vars_mixins";
-
-.profile-side-bar {
-  width: 400px;
-  .side-profile {
-    padding: 20px;
-  }
-}
diff --git a/src/common/components/chats/chats-side-profile/index.tsx b/src/common/components/chats/chats-side-profile/index.tsx
deleted file mode 100644
index c24f010580a..00000000000
--- a/src/common/components/chats/chats-side-profile/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import UserAvatar from "../../user-avatar";
-import { ChatContext } from "../chat-context-provider";
-import { formattedUserName } from "../utils";
-
-import "./index.scss";
-
-interface Props {
-  username: string;
-}
-export const ChatsSideProfile = (props: Props) => {
-  const { currentChannel } = useContext(ChatContext);
-  const { username } = props;
-  console.log("Current channel in chats side profile", currentChannel);
-  console.log("Username in profile sidebar", props.username);
-  return (
-    <div className="profile-side-bar">
-      <p className="d-flex justify-content-center align-items-center side-profile">
-        <UserAvatar username={formattedUserName(username)} size="large" />
-      </p>
-    </div>
-  );
-};
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
index 454bdc5585c..2b0daa7de80 100644
--- a/src/common/components/manage-chat-key/index.tsx
+++ b/src/common/components/manage-chat-key/index.tsx
@@ -1,20 +1,28 @@
 import React, { useContext } from "react";
 import { Form } from "react-bootstrap";
 import { _t } from "../../i18n";
+import { History } from "history";
 import { copyContent, expandSideBar } from "../../img/svg";
 import { ChatContext } from "../chats/chat-context-provider";
 import { copyToClipboard } from "../chats/utils";
 import { success } from "../feedback";
-import OrDivider from "../or-divider";
 import Tooltip from "../tooltip";
 
 import "./index.scss";
 
-export default function ManageChatKey() {
+interface Props {
+  history: History;
+}
+
+export default function ManageChatKey(props: Props) {
   const context = useContext(ChatContext);
 
+  console.log("Props", props.history);
+
   const { chatPrivKey, windowWidth, setShowSideBar } = context;
 
+  const { history } = props;
+
   const copyPrivateKey = () => {
     copyToClipboard(chatPrivKey);
     success("Key copied into clipboad");
@@ -24,7 +32,7 @@ export default function ManageChatKey() {
     <>
       <div className="manage-chat-key">
         <div className="private-key d-flex">
-          {windowWidth < 768 && (
+          {windowWidth < 768 && history.location.pathname.includes("/chats") && (
             <div className="expand-icon d-md-none">
               <p className="expand-svg" onClick={() => setShowSideBar(true)}>
                 {expandSideBar}
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index d8b7c2e6651..9c0e86584c4 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -14,7 +14,6 @@ import { useMappedStore } from "../../store/use-mapped-store";
 import { ChatContext } from "../../components/chats/chat-context-provider";
 import ImportChats from "../../components/chats/import-chats";
 import JoinChat from "../../components/chats/join-chat";
-import { ChatsSideProfile } from "../../components/chats/chats-side-profile";
 
 import "./index.scss";
 
@@ -91,16 +90,11 @@ export const Chats = (props: Props) => {
                         className="chats-manage-key"
                         style={{ position: windowWidth < 768 ? "absolute" : "static" }}
                       >
-                        <ManageChatKey />
+                        <ManageChatKey history={history} />
                       </div>
                     ) : (
                       <>
                         <ChatsMessagesBox {...props} />
-                        {/* {match.url !== "/chats" && (
-                          <div className="d-none d-lg-block mt-2" style={{ background: "red" }}>
-                            <ChatsSideProfile username={username} />
-                          </div>
-                        )} */}
                       </>
                     )}
                   </>
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 88eda63a377..01ecc924e85 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -82,10 +82,6 @@ const MessageManager = () => {
     };
   }, []);
 
-  useEffect(() => {
-    console.log("active USer", activeUser);
-  }, [activeUser]);
-
   useEffect(() => {
     if (keys?.priv) {
       const messageService = initMessageServiceInstance(keys);

From 4282e5276995f1f2a57b9df834a1b54c264d1c8e Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 26 Sep 2023 16:49:29 +0500
Subject: [PATCH 080/179] Change spinner styling

---
 src/common/components/chats/chat-popup/index.tsx | 3 ++-
 src/common/pages/chats/index.tsx                 | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index f60aae8e36a..eb2f0abcc47 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -721,7 +721,8 @@ export const ChatPopUp = (props: Props) => {
                       </>
                     ) : showSpinner ? (
                       <div className="no-chat">
-                        <Spinner animation="border" variant="primary" />
+                        <Spinner animation="border" variant="primary" size="sm" />
+                        <p className="mt-3 ml-2">Loading...</p>
                       </div>
                     ) : (
                       <>
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 9c0e86584c4..19429a54cec 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -78,6 +78,9 @@ export const Chats = (props: Props) => {
           showSpinner ? (
             <div className="d-flex justify-content-center align-items-center full-page">
               <Spinner animation="border" variant="primary" />
+              <p className="mt-3 ml-2" style={{ fontSize: "26px" }}>
+                Loading...
+              </p>
             </div>
           ) : (
             <>

From 16cb0e0196a34b62d474d1257159d409cca5764e Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 27 Sep 2023 12:14:57 +0500
Subject: [PATCH 081/179] Show message time under the message in direct
 messages

---
 .../chats/chats-channel-messages/index.tsx    |  15 +-
 .../chats/chats-direct-messages/index.scss    | 214 +++++++++++++++---
 .../chats/chats-direct-messages/index.tsx     |  82 ++++---
 .../chats/utils/format-message-data.ts        |   0
 .../utils/format-message-date-and-day.ts      |  17 ++
 src/common/components/chats/utils/index.ts    |   1 +
 6 files changed, 251 insertions(+), 78 deletions(-)
 delete mode 100644 src/common/components/chats/utils/format-message-data.ts
 create mode 100644 src/common/components/chats/utils/format-message-date-and-day.ts

diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 7f6690f25aa..2c5973d6ed5 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -35,7 +35,8 @@ import {
   isMessageGif,
   isMessageImage,
   formatMessageDate,
-  checkContiguousMessage
+  checkContiguousMessage,
+  formatMessageDateAndDay
 } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
@@ -280,16 +281,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const getFormattedDateAndDay = (msg: PublicMessage, i: number) => {
-    const prevMsg = publicMessages[i - 1];
-    const msgDate = formatMessageDate(msg.created);
-    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-    if (msgDate !== prevMsgDate) {
-      return msgDate;
-    }
-    return null;
-  };
-
   const handelMessageActions = (msgId: string) => {
     if (showMessageActions && hoveredMessageId !== msgId) {
       setHoveredMessageId(msgId);
@@ -304,7 +295,7 @@ export default function ChatsChannelMessages(props: Props) {
         {publicMessages.length !== 0 &&
           activeUserKeys &&
           publicMessages.map((pMsg, i) => {
-            const dayAndMonth = getFormattedDateAndDay(pMsg, i);
+            const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
             console.log("dayAndMonth", dayAndMonth);
 
             const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
index d4836f769c8..d61175857dd 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -35,7 +35,44 @@
       }
       .receiver-messag {
         display: flex;
-        .receiver-message-content {
+        // .receiver-message-content {
+        //   @include themify(day) {
+        //     background: #e4e6eb;
+        //   }
+        //   @include themify(night) {
+        //     background: #cee2ff;
+        //   }
+
+        //   &.gif {
+        //     background: none;
+        //     img {
+        //       max-width: 100%;
+        //     }
+        //   }
+
+        //   &.chat-image {
+        //     background: none;
+        //     img {
+        //       max-width: 100%;
+        //     }
+        //   }
+        //   color: #050505;
+        //   // max-width: 290px;
+        //   display: inline-block;
+        //   max-width: 70% !important;
+        //   word-wrap: break-word;
+        //   padding: 10px;
+        //   border-radius: 0px 10px 10px;
+
+        //   &.same-user-message {
+        //     border-radius: 10px;
+        //   }
+        // }
+        .receiver-message-wrapper {
+          box-sizing: content-box;
+          border-radius: 0 10px 10px 10px;
+          max-width: 70% !important;
+          word-wrap: break-word;
           @include themify(day) {
             background: #e4e6eb;
           }
@@ -43,8 +80,31 @@
             background: #cee2ff;
           }
 
+          .receiver-message-content {
+            max-width: 100%;
+            color: #050505;
+            display: inline-block;
+            padding: 10px;
+            border-radius: 0px 10px 10px 0px;
+          }
+
+          .receiver-msg-time {
+            @include themify(day) {
+              color: rgb(138, 141, 145);
+            }
+            @include themify(night) {
+              color: $charcoal-grey;
+            }
+
+            font-size: 10px;
+            display: flex;
+            justify-content: flex-end;
+            margin: -5px 7px 3px 45px;
+          }
+
           &.gif {
             background: none;
+            padding: 0;
             img {
               max-width: 100%;
             }
@@ -52,45 +112,52 @@
 
           &.chat-image {
             background: none;
+            padding: 0;
             img {
               max-width: 100%;
             }
           }
-          color: #050505;
-          // max-width: 290px;
-          display: inline-block;
-          max-width: 70% !important;
-          word-wrap: break-word;
-          padding: 10px;
-          border-radius: 0px 10px 10px;
 
-          &.same-user-message {
-            border-radius: 10px;
+          &.gif,
+          &.chat-image {
+            .receiver-message-wrapper {
+              background: none;
+            }
+            .receiver-message-content {
+              padding: 0;
+              img {
+                padding-bottom: 10px;
+              }
+            }
+            .receiver-msg-time {
+              @include themify(day) {
+                color: rgb(138, 141, 145);
+              }
+              @include themify(night) {
+                color: $white-three;
+              }
+            }
           }
         }
       }
-      &.same-user {
-        padding-top: 1.5px;
+      &.same-user-msg {
         margin-left: 4rem;
-        .receiver-message-content {
-          border-radius: 0px 10px 10px 10px;
+        padding-top: 1px;
+        .receiver-message-wrapper {
+          border-radius: 10px;
         }
       }
+
+      &.date-changed {
+        margin-left: 0;
+        border-radius: 0px 10px 10px 0px;
+      }
     }
   }
 
   .sender {
     margin-bottom: 1.5px;
-    .sender-message-time {
-      color: rgb(138, 141, 145);
-      display: flex;
-      font-weight: 400;
-      justify-content: flex-end;
-      font-size: 12px;
-      margin: 0;
-      margin-right: 18px;
-      margin-bottom: 2px;
-    }
+
     .sender-message {
       // max-width: 320px;
       margin-left: auto;
@@ -128,19 +195,50 @@
         margin-right: 7px;
       }
 
-      .sender-message-content {
+      // .sender-message-content {
+      //   border-radius: 10px 0px 10px 10px;
+      //   max-width: 70%;
+      //   word-wrap: break-word;
+      //   margin-bottom: 0;
+      //   color: $charcoal-grey;
+      //   font-size: 16px;
+      //   font-weight: 400;
+      //   padding: 8px 12px 8px 12px;
+      //   a {
+      //     text-decoration: underline;
+      //     color: white;
+      //   }
+      //   @include themify(day) {
+      //     background-color: rgb(0, 132, 255);
+      //     color: $white;
+      //   }
+      //   @include themify(night) {
+      //     background-color: $charcoal-grey;
+      //     color: $white;
+      //   }
+      //   &.gif {
+      //     background: none;
+      //     img {
+      //       max-width: 100%;
+      //     }
+      //   }
+
+      //   &.chat-image {
+      //     background: none;
+      //     img {
+      //       max-width: 100%;
+      //     }
+      //   }
+      //   &.same-user-message {
+      //     border-radius: 10px;
+      //   }
+      // }
+      .sender-message-wrapper {
+        box-sizing: content-box;
         border-radius: 10px 0px 10px 10px;
         max-width: 70%;
         word-wrap: break-word;
-        margin-bottom: 0;
-        color: $charcoal-grey;
-        font-size: 16px;
-        font-weight: 400;
-        padding: 8px 12px 8px 12px;
-        a {
-          text-decoration: underline;
-          color: white;
-        }
+
         @include themify(day) {
           background-color: rgb(0, 132, 255);
           color: $white;
@@ -149,8 +247,11 @@
           background-color: $charcoal-grey;
           color: $white;
         }
+
         &.gif {
           background: none;
+
+          padding: 0;
           img {
             max-width: 100%;
           }
@@ -158,10 +259,55 @@
 
         &.chat-image {
           background: none;
+          padding: 0;
           img {
             max-width: 100%;
           }
         }
+
+        &.gif,
+        &.chat-image {
+          .sender-message-time {
+            color: rgb(138, 141, 145);
+          }
+          .sender-message-content {
+            padding: 10px 0 0 5px;
+            img {
+              padding-bottom: 10px;
+            }
+          }
+        }
+
+        .sender-message-content {
+          max-width: 100%;
+          margin-bottom: 0;
+          color: $charcoal-grey;
+          font-size: 16px;
+          font-weight: 400;
+          padding: 8px 8px 8px 12px;
+          a {
+            text-decoration: underline;
+            color: white;
+          }
+          @include themify(day) {
+            color: $white;
+          }
+          @include themify(night) {
+            color: $white;
+          }
+        }
+
+        .sender-message-time {
+          color: $white;
+          margin-bottom: 3px;
+          font-size: 10px;
+          display: flex;
+          justify-content: flex-end;
+          margin-right: 7px;
+          margin-left: 45px;
+          margin-top: -5px;
+        }
+
         &.same-user-message {
           border-radius: 10px;
         }
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 55d1930a9be..14dbd3f91b1 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -8,7 +8,8 @@ import {
   formatMessageDate,
   isMessageGif,
   isMessageImage,
-  checkContiguousMessage
+  checkContiguousMessage,
+  formatMessageDateAndDay
 } from "../utils";
 
 import { Theme } from "../../../store/global/types";
@@ -49,7 +50,7 @@ export default function ChatsDirectMessages(props: Props) {
   } = props;
 
   const { global, activeUser, deleteDirectMessage } = useMappedStore();
-  const { activeUserKeys, messageServiceInstance } = useContext(ChatContext);
+  const { activeUserKeys, messageServiceInstance, windowWidth } = useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
   const [step, setStep] = useState(0);
@@ -85,22 +86,6 @@ export default function ChatsDirectMessages(props: Props) {
     }
   };
 
-  const getFormattedDateAndDay = (msg: DirectMessage, i: number) => {
-    const prevMsg = directMessages[i - 1];
-    const msgDate = formatMessageDate(msg.created);
-    const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-    if (msgDate !== prevMsgDate) {
-      return (
-        <div className="custom-divider">
-          <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
-            {msgDate}
-          </span>
-        </div>
-      );
-    }
-    return <></>;
-  };
-
   const handleConfirm = () => {
     switch (step) {
       case 1:
@@ -122,7 +107,7 @@ export default function ChatsDirectMessages(props: Props) {
           <>
             {directMessages &&
               directMessages.map((msg, i) => {
-                const dayAndMonth = getFormattedDateAndDay(msg, i);
+                const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
                 let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
 
                 renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
@@ -136,10 +121,16 @@ export default function ChatsDirectMessages(props: Props) {
 
                 return (
                   <React.Fragment key={msg.id}>
-                    {dayAndMonth}
+                    {dayAndMonth && (
+                      <div className="custom-divider">
+                        <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+                          {dayAndMonth}
+                        </span>
+                      </div>
+                    )}
                     {msg.creator !== activeUserKeys?.pub ? (
                       <div key={msg.id} className="receiver">
-                        {!isSameUser && (
+                        {!isSameUser || (isSameUser && dayAndMonth) ? (
                           <div className="user-img">
                             <Link to={`/@${currentUser}`}>
                               <span>
@@ -147,11 +138,19 @@ export default function ChatsDirectMessages(props: Props) {
                               </span>
                             </Link>
                           </div>
+                        ) : (
+                          <></>
                         )}
 
-                        <div className={`user-info ${isSameUser ? "same-user" : ""}`}>
-                          {/* <p className="user-msg-time">{formatMessageTime(msg.created)}</p> */}
-
+                        <div
+                          className={`user-info ${
+                            isSameUser && !dayAndMonth
+                              ? "same-user-msg"
+                              : dayAndMonth
+                              ? "date-changed"
+                              : ""
+                          }`}
+                        >
                           <div className="receiver-messag">
                             <Tooltip
                               content={
@@ -161,18 +160,28 @@ export default function ChatsDirectMessages(props: Props) {
                               }
                             >
                               <div
-                                className={`receiver-message-content ${isGif ? "gif" : ""} ${
-                                  isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
+                                className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
+                                  isImage ? "chat-image" : ""
                                 }`}
-                                dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                              />
+                              >
+                                <div
+                                  className={`receiver-message-content  ${isGif ? "gif" : ""} ${
+                                    isImage ? "chat-image" : ""
+                                  }`}
+                                  dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                                />
+                                {windowWidth <= 768 && (
+                                  <p className="receiver-msg-time">
+                                    {formatMessageTime(msg.created)}
+                                  </p>
+                                )}
+                              </div>
                             </Tooltip>
                           </div>
                         </div>
                       </div>
                     ) : (
                       <div key={msg.id} className="sender">
-                        {/* <p className="sender-message-time">{formatMessageTime(msg.created)}</p> */}
                         <div
                           className={`sender-message ${
                             msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
@@ -199,11 +208,20 @@ export default function ChatsDirectMessages(props: Props) {
                             }
                           >
                             <div
-                              className={`sender-message-content ${isGif ? "gif" : ""} ${
+                              className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
                                 isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
                               }`}
-                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                            />
+                            >
+                              <div
+                                className="sender-message-content"
+                                dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                              />
+                              {windowWidth <= 768 && (
+                                <p className="sender-message-time">
+                                  {formatMessageTime(msg.created)}
+                                </p>
+                              )}
+                            </div>
                           </Tooltip>
                           {msg.sent === 0 && (
                             <span style={{ margin: "10px 0 0 5px" }}>
diff --git a/src/common/components/chats/utils/format-message-data.ts b/src/common/components/chats/utils/format-message-data.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/common/components/chats/utils/format-message-date-and-day.ts b/src/common/components/chats/utils/format-message-date-and-day.ts
new file mode 100644
index 00000000000..a0821a17bbd
--- /dev/null
+++ b/src/common/components/chats/utils/format-message-date-and-day.ts
@@ -0,0 +1,17 @@
+import { PublicMessage } from "./../../../../managers/message-manager-types";
+import { DirectMessage } from "../../../../managers/message-manager-types";
+import { formatMessageDate } from "./format-message-time";
+
+export const formatMessageDateAndDay = (
+  msg: DirectMessage | PublicMessage,
+  i: number,
+  messagesList: DirectMessage[] | PublicMessage[]
+) => {
+  const prevMsg = messagesList[i - 1];
+  const msgDate = formatMessageDate(msg.created);
+  const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
+  if (msgDate !== prevMsgDate) {
+    return msgDate;
+  }
+  return null;
+};
diff --git a/src/common/components/chats/utils/index.ts b/src/common/components/chats/utils/index.ts
index 6ec55dfc912..f24962a55f2 100644
--- a/src/common/components/chats/utils/index.ts
+++ b/src/common/components/chats/utils/index.ts
@@ -16,3 +16,4 @@ export * from "./get-joined-communities";
 export * from "./copy-to-clipboard";
 export * from "./use-fetch-direct-messages";
 export * from "./check-contiguous-message";
+export * from "./format-message-date-and-day";

From 1d2a3878b319ab794077a25f3730ac02977d3ab2 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 27 Sep 2023 12:51:30 +0500
Subject: [PATCH 082/179] Add styling in edit community chat roles modal

---
 .../chats/chats-community-dropdown-menu/index.scss        | 7 +++++++
 .../chats/chats-community-dropdown-menu/index.tsx         | 8 +++++---
 .../components/chats/join-community-chat-btn/index.tsx    | 4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 src/common/components/chats/chats-community-dropdown-menu/index.scss

diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.scss b/src/common/components/chats/chats-community-dropdown-menu/index.scss
new file mode 100644
index 00000000000..e41eef9d5db
--- /dev/null
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.scss
@@ -0,0 +1,7 @@
+@import "../../../../style/vars_mixins";
+
+.chats-dialog{
+  .add-dialog-header{
+    margin-bottom: 2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index e41fbc79d05..cc9f04037ba 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -27,6 +27,8 @@ import UserAvatar from "../../user-avatar";
 import { copyToClipboard, getProfileMetaData } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
+import "./index.scss";
+
 interface Props {
   history: History;
   from?: string;
@@ -249,7 +251,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const EditRolesModal = () => {
     return (
       <>
-        <div className="add-dialog-header">
+        <div className="add-dialog-header border-bottom">
           <div className="add-dialog-titles">
             <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
           </div>
@@ -317,9 +319,9 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                       return (
                         <tr key={i}>
                           <td>
-                            <span className="user">
+                            <span className="d-flex user">
                               <UserAvatar username={moderator.name} size="medium" />{" "}
-                              <span className="username">@{moderator.name}</span>
+                              <span className="mt-2 ml-2 username">@{moderator.name}</span>
                             </span>
                           </td>
                           <td>
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index 9fe45261aa2..aa07cd565e5 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -34,8 +34,8 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [chat.channels, currentCommunity, chat.leftChannelsList]);
 
   useEffect(() => {
-    console.log("isChatEnabled", isChatEnabled, "isCommunityChatJoined", isCommunityChatJoined);
-  }, [isChatEnabled, isCommunityChatJoined]);
+    console.log("communityRoles", communityRoles);
+  }, [communityRoles]);
 
   useEffect(() => {
     fetchCommunityProfile();

From 211744bcaa43fba62f53d6a03c187f45c5e7ecb7 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 27 Sep 2023 15:26:42 +0500
Subject: [PATCH 083/179] Remove unwanted code

---
 .../components/chats/chat-input/index.tsx     | 13 +---
 .../components/chats/chat-popup/index.tsx     |  3 -
 .../chats/chats-channel-messages/index.tsx    |  1 -
 .../chats-community-dropdown-menu/index.tsx   |  8 +--
 .../chats/chats-direct-messages/index.scss    | 71 -------------------
 .../chats/chats-messages-header/index.tsx     |  7 +-
 .../chats/chats-messages-view/index.scss      |  3 -
 .../chats/chats-profile-box/index.tsx         |  4 +-
 .../components/chats/chats-sidebar/indes.tsx  |  5 +-
 .../components/chats/chats-sidebar/index.scss | 49 -------------
 .../components/chats/import-chats/index.scss  |  8 ---
 .../chats/join-community-chat-btn/index.tsx   | 11 ++-
 src/config.ts                                 |  2 +-
 13 files changed, 15 insertions(+), 170 deletions(-)

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index f6386bddd50..0f2338e9339 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -49,9 +49,8 @@ export default function ChatInput(props: Props) {
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
-  // const [isMounted, setIsMounted] = useState(false);
 
-  const { messageServiceInstance, chatPrivKey, isActveUserRemoved } = useContext(ChatContext);
+  const { messageServiceInstance, isActveUserRemoved } = useContext(ChatContext);
 
   const {
     isCommunity,
@@ -64,15 +63,6 @@ export default function ChatInput(props: Props) {
     receiverPubKey
   } = props;
 
-  // useEffect(() => {
-  //   setIsMounted(true);
-  //   setShowEmojiPicker(true);
-  //   return () => {
-  //     setShowEmojiPicker(false);
-  //     setIsMounted(false);
-  //   };
-  // }, []);
-
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
@@ -304,7 +294,6 @@ export default function ChatInput(props: Props) {
               disabled={(isCurrentUser && receiverPubKey?.length === 0) || isActveUserRemoved}
             />
             <InputGroup.Append
-              // className={`msg-svg ${isMessageText || message.length !== 0 ? "active" : ""}`}
               className={classNameObject({
                 "msg-svg": true,
                 active: isMessageText || message.length !== 0
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index eb2f0abcc47..063c6b70497 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -177,8 +177,6 @@ export const ChatPopUp = (props: Props) => {
   useEffect(() => {
     if (messageServiceInstance) {
       setIsSpinner(false);
-    } else {
-      console.log("Else run in chat-popup");
     }
   }, [messageServiceInstance]);
 
@@ -553,7 +551,6 @@ export const ChatPopUp = (props: Props) => {
             </div>
           </div>
           {inProgress && <LinearProgress />}
-          {/* {inProgress && !isCommunity && !isCurrentUser && <LinearProgress />} */}
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 2c5973d6ed5..0fbdca8ae6b 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -296,7 +296,6 @@ export default function ChatsChannelMessages(props: Props) {
           activeUserKeys &&
           publicMessages.map((pMsg, i) => {
             const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
-            console.log("dayAndMonth", dayAndMonth);
 
             const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
 
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index cc9f04037ba..8d4bba7983e 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -14,11 +14,7 @@ import {
   UNBLOCKUSER
 } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import {
-  Channel,
-  ChannelUpdate,
-  communityModerator
-} from "../../../../managers/message-manager-types";
+import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import { error, success } from "../../feedback";
 import { Button, Form, Modal, Row, Col, InputGroup, FormControl } from "react-bootstrap";
 import LinearProgress from "../../linear-progress";
@@ -171,7 +167,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       label: _t("chat.invite"),
       onClick: () => {
         copyToClipboard(
-          `http://localhost:3000/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
+          `https://ecency.com/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
         );
         success("Link copied into clipboard.");
       },
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/components/chats/chats-direct-messages/index.scss
index d61175857dd..df50d5ee8b8 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/components/chats/chats-direct-messages/index.scss
@@ -35,39 +35,7 @@
       }
       .receiver-messag {
         display: flex;
-        // .receiver-message-content {
-        //   @include themify(day) {
-        //     background: #e4e6eb;
-        //   }
-        //   @include themify(night) {
-        //     background: #cee2ff;
-        //   }
 
-        //   &.gif {
-        //     background: none;
-        //     img {
-        //       max-width: 100%;
-        //     }
-        //   }
-
-        //   &.chat-image {
-        //     background: none;
-        //     img {
-        //       max-width: 100%;
-        //     }
-        //   }
-        //   color: #050505;
-        //   // max-width: 290px;
-        //   display: inline-block;
-        //   max-width: 70% !important;
-        //   word-wrap: break-word;
-        //   padding: 10px;
-        //   border-radius: 0px 10px 10px;
-
-        //   &.same-user-message {
-        //     border-radius: 10px;
-        //   }
-        // }
         .receiver-message-wrapper {
           box-sizing: content-box;
           border-radius: 0 10px 10px 10px;
@@ -159,7 +127,6 @@
     margin-bottom: 1.5px;
 
     .sender-message {
-      // max-width: 320px;
       margin-left: auto;
 
       display: flex;
@@ -195,44 +162,6 @@
         margin-right: 7px;
       }
 
-      // .sender-message-content {
-      //   border-radius: 10px 0px 10px 10px;
-      //   max-width: 70%;
-      //   word-wrap: break-word;
-      //   margin-bottom: 0;
-      //   color: $charcoal-grey;
-      //   font-size: 16px;
-      //   font-weight: 400;
-      //   padding: 8px 12px 8px 12px;
-      //   a {
-      //     text-decoration: underline;
-      //     color: white;
-      //   }
-      //   @include themify(day) {
-      //     background-color: rgb(0, 132, 255);
-      //     color: $white;
-      //   }
-      //   @include themify(night) {
-      //     background-color: $charcoal-grey;
-      //     color: $white;
-      //   }
-      //   &.gif {
-      //     background: none;
-      //     img {
-      //       max-width: 100%;
-      //     }
-      //   }
-
-      //   &.chat-image {
-      //     background: none;
-      //     img {
-      //       max-width: 100%;
-      //     }
-      //   }
-      //   &.same-user-message {
-      //     border-radius: 10px;
-      //   }
-      // }
       .sender-message-wrapper {
         box-sizing: content-box;
         border-radius: 10px 0px 10px 10px;
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/components/chats/chats-messages-header/index.tsx
index 2bf04665272..17c7611069a 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/components/chats/chats-messages-header/index.tsx
@@ -1,12 +1,9 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 import { History } from "history";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
 import UserAvatar from "../../user-avatar";
-
-import "./index.scss";
-import { Channel } from "../../../../managers/message-manager-types";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
@@ -14,6 +11,8 @@ import Link from "../../alink";
 import { expandSideBar } from "../../../img/svg";
 import { ChatContext } from "../chat-context-provider";
 
+import "./index.scss";
+
 interface Props {
   username: string;
   history: History;
diff --git a/src/common/components/chats/chats-messages-view/index.scss b/src/common/components/chats/chats-messages-view/index.scss
index 5b0b1467b8b..92ca90be431 100644
--- a/src/common/components/chats/chats-messages-view/index.scss
+++ b/src/common/components/chats/chats-messages-view/index.scss
@@ -9,11 +9,8 @@
   }
 
   grid-row: span 16;
-  // height: 79.5vh;
   overflow: scroll;
   overflow-x: hidden;
-  // margin-bottom: 20px;
-
   a::after {
     display: none;
   }
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/components/chats/chats-profile-box/index.tsx
index b90f498a95f..7b348b504ad 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/components/chats/chats-profile-box/index.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import UserAvatar from "../../user-avatar";
 
-import "./index.scss";
 import { dateToFormatted } from "../../../helper/parse-date";
 import { _t } from "../../../i18n";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import { getAccountFull } from "../../../api/hive";
 import { formattedUserName } from "../utils";
 import { useCommunityCache } from "../../../core/caches/communities-cache";
 
+import "./index.scss";
+
 export interface profileData {
   joiningData: string;
   about: string | undefined;
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/components/chats/chats-sidebar/indes.tsx
index 9885d8fbf61..15c94a2919d 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/components/chats/chats-sidebar/indes.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from "react";
 import { Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { History } from "history";
-import { match } from "react-router";
 import useDebounce from "react-use/lib/useDebounce";
 import { setNostrkeys } from "../../../../managers/message-manager";
 import { Channel } from "../../../../managers/message-manager-types";
@@ -16,12 +15,13 @@ import LinearProgress from "../../linear-progress";
 import Tooltip from "../../tooltip";
 import UserAvatar from "../../user-avatar";
 
-import "./index.scss";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { AccountWithReputation } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
+
+import "./index.scss";
 interface Props {
   username: string;
   history: History;
@@ -38,7 +38,6 @@ export default function ChatsSideBar(props: Props) {
     chatPrivKey,
     showSideBar,
     windowWidth,
-    maxHeight,
     setShowSideBar,
     setShowSpinner,
     setRevealPrivKey,
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/components/chats/chats-sidebar/index.scss
index 127f1f2a5e3..813da76f615 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/components/chats/chats-sidebar/index.scss
@@ -167,8 +167,6 @@
     @include themify(night) {
       background: $dusky-blue;
     }
-
-    // rgba(29, 155, 240, 0.1);
   }
 
   .community,
@@ -179,14 +177,6 @@
     border-radius: 8px;
     margin: 0px 10px;
 
-    // @include themify(day) {
-    //   border: 1px solid #f5f5f5;
-    // }
-
-    // @include themify(night) {
-    //   border: 1px solid $charcoal-grey;
-    // }
-
     .community-info,
     .dm-info {
       .community-name,
@@ -237,45 +227,6 @@
   }
 }
 
-// @include media-breakpoint-down(sm) {
-//   .chats-sidebar {
-//     width: 45%;
-
-//     .chats-title {
-//       margin: 15px 0px 5px 5px;
-//     }
-//     .chats-search {
-//       padding: 0 5px 0 5px;
-//       margin-bottom: 0;
-//     }
-//     .chats-list {
-//       overflow-x: hidden;
-//       .community-title,
-//       .dm-title {
-//         font-size: 1rem;
-//         padding: 15px 0 10px 8px;
-//       }
-//       .community,
-//       .dm {
-//         margin: 0;
-//         padding: 9.5px 0px 9.5px 5px;
-//         .community-info,
-//         .dm-info {
-//           .community-name,
-//           .dm-name {
-//             padding: 3px 0 0 10px;
-//           }
-//           .community-last-message,
-//           .dm-last-message {
-//             padding: 4px 0 0 10px;
-//             max-width: 35vw;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-//handle the width of the sidebar when screen size is less than 330px
 @media (max-width: 320px) {
   .chats-sidebar {
     min-width: 260px;
diff --git a/src/common/components/chats/import-chats/index.scss b/src/common/components/chats/import-chats/index.scss
index 08c32779aa7..9e3a8d90203 100644
--- a/src/common/components/chats/import-chats/index.scss
+++ b/src/common/components/chats/import-chats/index.scss
@@ -4,12 +4,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  // width: 410px;
-  // height: 50%;
-  // width: 100%;
-  // background-color: green;
-  .import-chats-container {
-    // width: 50%;
-    // background-color: red;
-  }
 }
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index aa07cd565e5..b9c33db5963 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -33,10 +33,6 @@ export default function JoinCommunityChatBtn(props: Props) {
     fetchCommunityProfile();
   }, [chat.channels, currentCommunity, chat.leftChannelsList]);
 
-  useEffect(() => {
-    console.log("communityRoles", communityRoles);
-  }, [communityRoles]);
-
   useEffect(() => {
     fetchCommunityProfile();
   }, [activeUser]);
@@ -55,7 +51,10 @@ export default function JoinCommunityChatBtn(props: Props) {
         messageServiceInstance?.loadChannel(currentCommunity?.id!);
         setInProgress(false);
       }
-      if (initiateCommunityChat && communityRoles.length !== 0) {
+      if (
+        initiateCommunityChat &&
+        communityRoles.some((role) => role.pubkey === activeUserKeys.pub)
+      ) {
         createCommunityChat();
       }
     }
@@ -68,7 +67,6 @@ export default function JoinCommunityChatBtn(props: Props) {
   }, [isCommunityChatJoined, props.community, chat.channels, chat.leftChannelsList]);
 
   const fetchCommunityProfile = async () => {
-    console.log("fetch community profile");
     const communityProfile = await getProfileMetaData(props.community?.name);
     const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
     setIsChatEnabled(haschannelMetaData);
@@ -131,7 +129,6 @@ export default function JoinCommunityChatBtn(props: Props) {
         removedUserIds: []
       });
 
-      console.log("Community data", data);
       const content = JSON.parse(data?.content!);
       const channelMetaData = {
         id: data?.id as string,
diff --git a/src/config.ts b/src/config.ts
index a947bb3075d..a1392ba4265 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,7 +1,7 @@
 /* !!! DO NOT IMPORT config.js TO FRONTEND CODE !!! */
 
 export default {
-  usePrivate: process.env.USE_PRIVATE || "1", // "1" | "0"
+  usePrivate: process.env.USE_PRIVATE || "0", // "1" | "0"
   hsClientSecret: process.env.HIVESIGNER_SECRET || "", // when USE_PRIVATE=0 and HIVESIGNER client secret must be provided
   hsClientId: process.env.HIVESIGNER_ID || "ecency.app", // When USE_PRIVATE=0, this is used to override which user will do posting authority on behalf of the user via hive signer
   redisPass: process.env.REDIS_HOST_PASSWORD

From e0d2bbbd6f82d7dcd94f85285b2eda1621311172 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 27 Sep 2023 16:57:02 +0500
Subject: [PATCH 084/179] Fix some styling of chat priv key and handle disable
 in chat input

---
 src/common/components/chats/chat-input/index.tsx | 8 ++++----
 src/common/pages/chats/index.scss                | 6 ++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index 0f2338e9339..bc1acd92490 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -63,6 +63,8 @@ export default function ChatInput(props: Props) {
     receiverPubKey
   } = props;
 
+  console.log("receiverPubKey", receiverPubKey, "isCurrentUser", isCurrentUser);
+
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
@@ -181,9 +183,7 @@ export default function ChatInput(props: Props) {
     <>
       <div
         className={`chat ${
-          isActveUserRemoved ||
-          !isCurrentUserJoined ||
-          (isCurrentUser && receiverPubKey?.length === 0)
+          isActveUserRemoved || !isCurrentUserJoined || (isCurrentUser && !receiverPubKey)
             ? "disable"
             : ""
         }`}
@@ -291,7 +291,7 @@ export default function ChatInput(props: Props) {
               placeholder={_t("chat.start-chat-placeholder")}
               autoComplete="off"
               className="chat-input"
-              disabled={(isCurrentUser && receiverPubKey?.length === 0) || isActveUserRemoved}
+              disabled={(isCurrentUser && !receiverPubKey) || isActveUserRemoved}
             />
             <InputGroup.Append
               className={classNameObject({
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
index 80f0425fe8c..3fdad1cf095 100644
--- a/src/common/pages/chats/index.scss
+++ b/src/common/pages/chats/index.scss
@@ -11,6 +11,12 @@
   .chats-manage-key {
     .private-key {
       margin-top: 4.5rem;
+      @include media-breakpoint-down(md) {
+        width: 95vw;
+      }
+      .form-group {
+        width: 100% !important;
+      }
     }
   }
   .import-chat {

From c743352cd41caadba89f5df82770369acc949d23 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 27 Sep 2023 17:19:49 +0500
Subject: [PATCH 085/179] Remove consoles

---
 src/common/components/chats/chat-input/index.tsx | 2 --
 src/common/store/chat/index.ts                   | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index bc1acd92490..4cadc8185a0 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -63,8 +63,6 @@ export default function ChatInput(props: Props) {
     receiverPubKey
   } = props;
 
-  console.log("receiverPubKey", receiverPubKey, "isCurrentUser", isCurrentUser);
-
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 04d16e296d5..6bbcb79a15c 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -327,7 +327,6 @@ export const replaceDirectMessage = (peer: string, data: DirectMessage) => (disp
 
 export const verifyDirectMessageSending =
   (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
-    console.log("verifyDirectMessageSending called");
     dispatch(verifyDirectMessageSendingAct(peer, data));
   };
 

From 6cd31c3bf68d71180687a3e9a0936c5e48b51f17 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Mon, 2 Oct 2023 18:40:29 +0500
Subject: [PATCH 086/179] Make a custom hook for message service

---
 .../components/chats/chat-popup/index.tsx     |  4 ---
 .../chats/chats-messages-header/index.scss    | 16 ++++++---
 .../hooks/use-message-service-listener.tsx    | 33 +++++++++++++++++++
 src/managers/message-manager.tsx              | 23 ++-----------
 4 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 src/common/components/chats/hooks/use-message-service-listener.tsx

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 063c6b70497..3a6742ab955 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -114,10 +114,6 @@ export const ChatPopUp = (props: Props) => {
   const [isChatPage, setIsChatPage] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
-  useEffect(() => {
-    console.log("chat in store", chat);
-  }, [chat]);
-
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
index bda15d751c6..79003457acc 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -32,17 +32,25 @@
         .expand-svg {
           height: 35px;
           width: 35px;
-          background: #f4f4f4;
           margin-left: 10px;
           border-radius: 10px;
           cursor: pointer;
+
           svg {
             width: 35px;
             height: 35px;
           }
 
           &:hover {
-            background: #e4e6eb;
+            @include themify(day) {
+              background: #f4f4f4;
+            }
+
+            @include themify(night) {
+              background: $dusky-blue;
+            }
+
+            // background: #e4e6eb;
           }
         }
       }
@@ -50,7 +58,7 @@
       .user-info {
         display: inline-flex;
         padding: 8px 10px;
-        margin: 5px 0 0 0;
+        margin: 5px 0 0 5px;
         cursor: pointer;
 
         .username {
@@ -62,7 +70,7 @@
         &:hover {
           border-radius: 10px;
           @include themify(day) {
-            background: #eeeeee;
+            background: #f4f4f4;
           }
 
           @include themify(night) {
diff --git a/src/common/components/chats/hooks/use-message-service-listener.tsx b/src/common/components/chats/hooks/use-message-service-listener.tsx
new file mode 100644
index 00000000000..5a6b4f51965
--- /dev/null
+++ b/src/common/components/chats/hooks/use-message-service-listener.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import { Channel } from "../../../../managers/message-manager-types";
+import MessageService from "../../../helper/message-service";
+
+function useMessageServiceListener(
+  messageServiceReady: boolean,
+  messageService: MessageService | undefined,
+  chatChannels: Channel[]
+) {
+  const [since, setSince] = useState(0);
+  const timerRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (!messageServiceReady) return;
+
+    timerRef.current = window.setTimeout(
+      () => {
+        messageService?.listen(
+          chatChannels.map((x) => x.id),
+          Math.floor((since || Date.now()) / 1000)
+        );
+        setSince(Date.now());
+      },
+      since === 0 ? 500 : 10000
+    );
+
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, [since, messageServiceReady, messageService, chatChannels, setSince]);
+}
+
+export default useMessageServiceListener;
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 01ecc924e85..0b740588b20 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -20,6 +20,7 @@ import { useMappedStore } from "../common/store/use-mapped-store";
 import { ChatContext } from "../common/components/chats/chat-context-provider";
 import { useTimeoutFn } from "react-use";
 import { usePrevious } from "../common/util/use-previous";
+import useMessageServiceListener from "../common/components/chats/hooks/use-message-service-listener";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -52,7 +53,6 @@ const MessageManager = () => {
   const prevActiveUser = usePrevious(activeUser);
 
   const [messageServiceReady, setMessageServiceReady] = useState(false);
-  const [since, setSince] = useState(0);
   const [keys, setKeys] = useState<Keys>();
   const [messageService, setMessageService] = useState<MessageService | undefined>(undefined);
   const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
@@ -120,24 +120,7 @@ const MessageManager = () => {
   };
 
   //Listen for events in an interval.
-  useEffect(() => {
-    if (!messageServiceReady) return;
-
-    const timer = setTimeout(
-      () => {
-        messageService?.listen(
-          chat.channels.map((x) => x.id),
-          Math.floor((since || Date.now()) / 1000)
-        );
-        setSince(Date.now());
-      },
-      since === 0 ? 500 : 10000
-    );
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [since, messageServiceReady, messageService, chat.channels]);
+  useMessageServiceListener(messageServiceReady, messageService, chat.channels);
 
   // // Ready state handler
   const handleReadyState = () => {
@@ -225,7 +208,7 @@ const MessageManager = () => {
     }, 20000);
   };
 
-  // // Direct message handler after sent
+  // Direct message handler after sent
   const handleDirectMessageAfterSent = (data: DirectMessage[]) => {
     if (isDirectChatCreated) {
       data.forEach((message) => {

From ca47a95a3e19b18b034d3490ec3e43ba10347851 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 11:28:28 +0500
Subject: [PATCH 087/179] Removed props drilling

---
 .../components/chats/chat-popup/index.tsx     | 12 +--------
 .../chats/chats-channel-messages/index.tsx    | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index 3a6742ab955..bdde77f6f97 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -6,8 +6,6 @@ import { Link } from "react-router-dom";
 import { history } from "../../../../common/store";
 
 import { Community } from "../../../store/communities/types";
-import { ToggleType } from "../../../store/ui/types";
-import { Account } from "../../../store/accounts/types";
 import {
   Channel,
   ChannelUpdate,
@@ -62,14 +60,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ImportChats from "../import-chats";
 
-interface Props {
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  toggleUIProp: (what: ToggleType) => void;
-}
-
-export const ChatPopUp = (props: Props) => {
+export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
 
   const {
@@ -585,7 +576,6 @@ export const ChatPopUp = (props: Props) => {
                         />
                       ) : (
                         <ChatsChannelMessages
-                          {...props}
                           history={history!}
                           username={communityName}
                           publicMessages={publicMessages}
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 0fbdca8ae6b..1cccfad4dfd 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState, RefObject, useEffect, useContext } from "react";
+import { useMount } from "react-use";
 import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
@@ -20,8 +21,6 @@ import {
 } from "react-bootstrap";
 import UserAvatar from "../../user-avatar";
 import FollowControls from "../../follow-controls";
-import { Account } from "../../../store/accounts/types";
-import { ToggleType } from "../../../store/ui/types";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
 import Tooltip from "../../tooltip";
@@ -41,7 +40,6 @@ import {
 import { ChatContext } from "../chat-context-provider";
 
 import "./index.scss";
-import { useMount } from "react-use";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -51,10 +49,6 @@ interface Props {
   history: History;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  toggleUIProp: (what: ToggleType) => void;
   scrollToBottom?: () => void;
   currentChannelSetter: (channel: Channel) => void;
 }
@@ -71,7 +65,18 @@ export default function ChatsChannelMessages(props: Props) {
     scrollToBottom,
     currentChannelSetter
   } = props;
-  const { chat, global, activeUser, ui, users, deletePublicMessage } = useMappedStore();
+  const {
+    chat,
+    global,
+    activeUser,
+    ui,
+    users,
+    deletePublicMessage,
+    setActiveUser,
+    updateActiveUser,
+    deleteUser,
+    toggleUIProp
+  } = useMappedStore();
 
   const { messageServiceInstance, activeUserKeys, windowWidth, isActveUserRemoved } =
     useContext(ChatContext);
@@ -328,7 +333,10 @@ export default function ChatsChannelMessages(props: Props) {
                         }  profile-box-buttons`}
                       >
                         <FollowControls
-                          {...props}
+                          setActiveUser={setActiveUser}
+                          updateActiveUser={updateActiveUser}
+                          deleteUser={deleteUser}
+                          toggleUIProp={toggleUIProp}
                           activeUser={activeUser}
                           targetUsername={name!}
                           where={"chat-box"}

From b2c4fce6c656a7524c5b30240f7746a1bdb4fa6e Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 11:39:52 +0500
Subject: [PATCH 088/179] Remove unwanted code

---
 .../components/chats/chats-messages-header/index.scss    | 2 --
 .../chats/hooks/use-message-service-listener.tsx         | 9 ++++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/components/chats/chats-messages-header/index.scss
index 79003457acc..9afa3619d94 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/components/chats/chats-messages-header/index.scss
@@ -49,8 +49,6 @@
             @include themify(night) {
               background: $dusky-blue;
             }
-
-            // background: #e4e6eb;
           }
         }
       }
diff --git a/src/common/components/chats/hooks/use-message-service-listener.tsx b/src/common/components/chats/hooks/use-message-service-listener.tsx
index 5a6b4f51965..2f4a2bab072 100644
--- a/src/common/components/chats/hooks/use-message-service-listener.tsx
+++ b/src/common/components/chats/hooks/use-message-service-listener.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Channel } from "../../../../managers/message-manager-types";
 import MessageService from "../../../helper/message-service";
 
@@ -8,12 +8,11 @@ function useMessageServiceListener(
   chatChannels: Channel[]
 ) {
   const [since, setSince] = useState(0);
-  const timerRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {
     if (!messageServiceReady) return;
 
-    timerRef.current = window.setTimeout(
+    const timer = setTimeout(
       () => {
         messageService?.listen(
           chatChannels.map((x) => x.id),
@@ -25,9 +24,9 @@ function useMessageServiceListener(
     );
 
     return () => {
-      clearTimeout(timerRef.current);
+      clearTimeout(timer);
     };
-  }, [since, messageServiceReady, messageService, chatChannels, setSince]);
+  }, [since, messageServiceReady, messageService, chatChannels]);
 }
 
 export default useMessageServiceListener;

From 18140d64e828b49d718b3fe109c50db806b7bf8f Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 11:47:31 +0500
Subject: [PATCH 089/179] Remove commented code

---
 .../chats/utils/get-user-chat-public-key.ts           | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/common/components/chats/utils/get-user-chat-public-key.ts b/src/common/components/chats/utils/get-user-chat-public-key.ts
index 2a05b7f3dcc..3dc9ae8cf7f 100644
--- a/src/common/components/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/components/chats/utils/get-user-chat-public-key.ts
@@ -1,16 +1,5 @@
 import { getAccountFull } from "../../../api/hive";
 
-// export const getUserChatPublicKey = async (username: string) => {
-//   const response = await getAccountFull(username);
-//   console.log("response", response);
-//   const { posting_json_metadata } = response;
-//   const profile = JSON.parse(posting_json_metadata!).profile;
-//   console.log("profile", profile);
-//   const { nsKey } = profile || {};
-//   console.log("nsKey", nsKey);
-//   return nsKey;
-// };
-
 export const getUserChatPublicKey = async (username: string) => {
   const response = await getAccountFull(username);
   if (response && response.posting_json_metadata) {

From 47620db9d5e76195f8d1a3615ce13bf250df6007 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 15:53:34 +0500
Subject: [PATCH 090/179] Handle the case that  community owner cannot be
 blocked by admins

---
 .../chats/chat-context-provider.tsx           | 12 +++-
 .../components/chats/chat-popup/index.tsx     |  4 ++
 .../chats/chats-channel-messages/index.tsx    | 64 ++++++++++---------
 .../chats-community-dropdown-menu/index.scss  | 18 ++++--
 .../chats-community-dropdown-menu/index.tsx   | 64 ++++++++++++-------
 .../hooks/use-message-service-listener.tsx    |  8 +--
 .../chats/join-community-chat-btn/index.tsx   |  7 +-
 .../chats/utils/upload-channel-data.ts        | 28 ++++----
 src/common/helper/message-service.ts          |  8 +++
 src/managers/message-manager.tsx              |  2 +-
 10 files changed, 129 insertions(+), 86 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 0f1eb192945..4a010f93e6c 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -69,7 +69,7 @@ export const ChatContext = React.createContext<Context>({
 });
 
 export const ChatContextProvider = (props: Props) => {
-  const { activeUser, resetChat } = useMappedStore();
+  const { activeUser, chat, resetChat } = useMappedStore();
 
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: " ", priv: "" });
   const [showSpinner, setShowSpinner] = useState(true);
@@ -91,6 +91,9 @@ export const ChatContextProvider = (props: Props) => {
     setWindowWidth(window.innerWidth);
     setMaxHeight(window.innerHeight - 66);
   });
+  useEffect(() => {
+    console.log("chat in context", chat);
+  }, []);
 
   useEffect(() => {
     if (currentChannel && currentChannel.removedUserIds) {
@@ -113,10 +116,13 @@ export const ChatContextProvider = (props: Props) => {
 
   useEffect(() => {
     getActiveUserKeys();
-    if (messageServiceInstance) {
+    if (
+      messageServiceInstance &&
+      chat.profiles.some((profile) => profile.name === activeUser?.username)
+    ) {
       setShouldUpdateProfile(false);
     }
-  }, [messageServiceInstance]);
+  }, [messageServiceInstance, chat.profiles]);
 
   useEffect(() => {
     window.addEventListener("resize", handleShowSideBar);
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index bdde77f6f97..cef6b5ba4d7 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -127,6 +127,10 @@ export const ChatPopUp = () => {
     setShow(!!activeUser?.username && !isChatPage);
   }, []);
 
+  useEffect(() => {
+    console.log("Chat in store", chat);
+  }, [chat]);
+
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/components/chats/chats-channel-messages/index.tsx
index 1cccfad4dfd..d05d642c000 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/components/chats/chats-channel-messages/index.tsx
@@ -57,11 +57,11 @@ let zoom: Zoom | null = null;
 export default function ChatsChannelMessages(props: Props) {
   const {
     publicMessages,
-    currentChannel,
     history,
     from,
     isScrollToBottom,
     isScrolled,
+    currentChannel,
     scrollToBottom,
     currentChannelSetter
   } = props;
@@ -327,7 +327,8 @@ export default function ChatsChannelMessages(props: Props) {
                       <p className="d-flex justify-content-center profile-name">{`@${name!}`}</p>
                       <div
                         className={`d-flex mb-3 ${
-                          communityAdmins.includes(activeUser?.username!)
+                          communityAdmins.includes(activeUser?.username!) &&
+                          name !== currentChannel.communityName
                             ? "justify-content-between"
                             : "justify-content-center"
                         }  profile-box-buttons`}
@@ -344,35 +345,36 @@ export default function ChatsChannelMessages(props: Props) {
                           users={users}
                         />
 
-                        {communityAdmins.includes(activeUser?.username!) && (
-                          <>
-                            {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
-                              <>
-                                <Button
-                                  variant="primary"
-                                  onClick={() => {
-                                    setStep(3);
-                                    setClickedMessage("");
-                                  }}
-                                >
-                                  {_t("chat.unblock")}
-                                </Button>
-                              </>
-                            ) : (
-                              <>
-                                <Button
-                                  variant="primary"
-                                  onClick={() => {
-                                    setStep(2);
-                                    setClickedMessage("");
-                                  }}
-                                >
-                                  {_t("chat.block")}
-                                </Button>
-                              </>
-                            )}
-                          </>
-                        )}
+                        {communityAdmins.includes(activeUser?.username!) &&
+                          name !== currentChannel.communityName && (
+                            <>
+                              {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
+                                <>
+                                  <Button
+                                    variant="primary"
+                                    onClick={() => {
+                                      setStep(3);
+                                      setClickedMessage("");
+                                    }}
+                                  >
+                                    {_t("chat.unblock")}
+                                  </Button>
+                                </>
+                              ) : (
+                                <>
+                                  <Button
+                                    variant="primary"
+                                    onClick={() => {
+                                      setStep(2);
+                                      setClickedMessage("");
+                                    }}
+                                  >
+                                    {_t("chat.block")}
+                                  </Button>
+                                </>
+                              )}
+                            </>
+                          )}
                       </div>
 
                       <Form
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.scss b/src/common/components/chats/chats-community-dropdown-menu/index.scss
index e41eef9d5db..d1c23632f86 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.scss
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.scss
@@ -1,7 +1,17 @@
 @import "../../../../style/vars_mixins";
 
-.chats-dialog{
-  .add-dialog-header{
-    margin-bottom: 2rem;
+.chats-dialog {
+  .chat-modals-body {
+    .add-dialog-header {
+      margin-bottom: 2rem;
+    }
+    .success-dialog-header {
+      .success-dialog-titles {
+        margin-top: 10px;
+      }
+    }
+    .success-dialog-body {
+      padding: 10px 20px 20px 10px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index 8d4bba7983e..d2c4c62a92d 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -24,6 +24,7 @@ import { copyToClipboard, getProfileMetaData } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
 import "./index.scss";
+import { getAccountFull } from "../../../api/hive";
 
 interface Props {
   history: History;
@@ -130,33 +131,47 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         setInProgress(false);
         return;
       }
-
       try {
-        const profileData = await getProfileMetaData(user);
-        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
-          const alreadyExists = currentChannel?.communityModerators?.some(
-            (moderator) => moderator.name === profileData.name
-          );
-          if (alreadyExists) {
-            setAddRoleError("You have already assigned some rule to this user.");
-            setInProgress(false);
-            return;
-          }
+        const response = await getAccountFull(user);
+        if (!response) {
+          setAddRoleError("Account does not exist");
+          return;
+        }
+
+        if (!response.posting_json_metadata) {
+          setAddRoleError("This user hasn't joined the chat yet.");
+          return;
+        }
+
+        const { posting_json_metadata } = response;
+        const profile = JSON.parse(posting_json_metadata).profile;
+
+        if (!profile || !profile.hasOwnProperty(NOSTRKEY)) {
+          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
+          return;
+        }
+
+        const alreadyExists = currentChannel?.communityModerators?.some(
+          (moderator) => moderator.name === response.name
+        );
+
+        if (alreadyExists) {
+          setAddRoleError("You have already assigned some rule to this user.");
+          setInProgress(false);
+        } else {
           const moderator = {
             name: user,
-            pubkey: profileData.nsKey,
+            pubkey: profile.nsKey,
             role: role
           };
           setModerator(moderator);
           setAddRoleError("");
-        } else {
-          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
         }
       } catch (err) {
         error(err as string);
+      } finally {
+        setInProgress(false);
       }
-
-      setInProgress(false);
     },
     200,
     [user, role]
@@ -414,20 +429,18 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const successModal = (message: string) => {
     return (
       <>
-        <div className="import-chat-dialog-header border-bottom">
+        <div className="success-dialog-header d-flex border-bottom">
           <div className="step-no">2</div>
-          <div className="import-chat-dialog-titles">
-            <div className="import-chat-main-title">{_t("manage-authorities.success-title")}</div>
-            <div className="import-chat-sub-title">
-              {_t("manage-authorities.success-sub-title")}
-            </div>
+          <div className="success-dialog-titles">
+            <div className="success-main-title">{_t("manage-authorities.success-title")}</div>
+            <div className="success-sub-title">{_t("manage-authorities.success-sub-title")}</div>
           </div>
         </div>
         <div className="success-dialog-body">
-          <div className="success-dialog-content">
+          <div className="success-dialog-content text-center">
             <span>{message === UNBLOCKUSER ? "User unblock successfully" : ""}</span>
           </div>
-          <div className="d-flex justify-content-center">
+          <div className="d-flex justify-content-center mt-3">
             <span className="hr-6px-btn-spacer" />
             <Button onClick={finish}>{_t("g.finish")}</Button>
           </div>
@@ -489,6 +502,9 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         setKeyDialog(true);
         setRemovedUserID("");
       }
+      if (operationType === ADDROLE) {
+        setUser("");
+      }
     } catch (err) {
       error(_t("chat.error-updating-community"));
     }
diff --git a/src/common/components/chats/hooks/use-message-service-listener.tsx b/src/common/components/chats/hooks/use-message-service-listener.tsx
index 2f4a2bab072..3c85a776bce 100644
--- a/src/common/components/chats/hooks/use-message-service-listener.tsx
+++ b/src/common/components/chats/hooks/use-message-service-listener.tsx
@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 import { Channel } from "../../../../managers/message-manager-types";
 import MessageService from "../../../helper/message-service";
 
-function useMessageServiceListener(
+export const useMessageServiceListener = (
   messageServiceReady: boolean,
   messageService: MessageService | undefined,
   chatChannels: Channel[]
-) {
+) => {
   const [since, setSince] = useState(0);
 
   useEffect(() => {
@@ -27,6 +27,4 @@ function useMessageServiceListener(
       clearTimeout(timer);
     };
   }, [since, messageServiceReady, messageService, chatChannels]);
-}
-
-export default useMessageServiceListener;
+};
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/components/chats/join-community-chat-btn/index.tsx
index b9c33db5963..b1e3dbda41c 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/components/chats/join-community-chat-btn/index.tsx
@@ -139,9 +139,10 @@ export default function JoinCommunityChatBtn(props: Props) {
         about: content.about,
         picture: content.picture
       };
-      setChannelMetaData(community.name, channelMetaData).then(() =>
-        setCurrentCommunity(channelMetaData)
-      );
+      const response = await setChannelMetaData(community.name, channelMetaData);
+      if (response) {
+        setCurrentCommunity(channelMetaData);
+      }
     } finally {
       setInProgress(false);
       setIsCommunityChatJoined(true);
diff --git a/src/common/components/chats/utils/upload-channel-data.ts b/src/common/components/chats/utils/upload-channel-data.ts
index 0a0f13477a6..8452caf2773 100644
--- a/src/common/components/chats/utils/upload-channel-data.ts
+++ b/src/common/components/chats/utils/upload-channel-data.ts
@@ -2,19 +2,17 @@ import { Channel } from "../../../../managers/message-manager-types";
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
 
-export const setChannelMetaData = (username: string, channel: Channel) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const response = await getAccountFull(username!);
-      const { posting_json_metadata } = response;
-      const profile = JSON.parse(posting_json_metadata!).profile;
-      const newProfile = {
-        channel: channel
-      };
-      const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-      resolve(updatedProfile);
-    } catch (error) {
-      reject(error);
-    }
-  });
+export const setChannelMetaData = async (username: string, channel: Channel) => {
+  try {
+    const response = await getAccountFull(username!);
+    const { posting_json_metadata } = response;
+    const profile = JSON.parse(posting_json_metadata!).profile;
+    const newProfile = {
+      channel: channel
+    };
+    const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
+    return updatedProfile;
+  } catch (error) {
+    throw error;
+  }
 };
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 73810a7887c..879d7341dc6 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -528,6 +528,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
+    console.log("Update profile run");
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -582,9 +583,15 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
+            console.log("Event published", event);
+            // this.pushToEventBuffer(event);
             if (event.kind === Kind.Contacts) {
+              console.log("Direct contacts");
               this.getContacts();
             }
+            if (event.kind === Kind.Metadata) {
+              this.pushToEventBuffer(event);
+            }
           });
 
           pub.on("failed", () => {
@@ -610,6 +617,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   pushToEventBuffer(event: Event) {
+    console.log("Push to event buffer run");
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index 0b740588b20..ec15d8ad99a 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -20,7 +20,7 @@ import { useMappedStore } from "../common/store/use-mapped-store";
 import { ChatContext } from "../common/components/chats/chat-context-provider";
 import { useTimeoutFn } from "react-use";
 import { usePrevious } from "../common/util/use-previous";
-import useMessageServiceListener from "../common/components/chats/hooks/use-message-service-listener";
+import { useMessageServiceListener } from "../common/components/chats/hooks/use-message-service-listener";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {

From 72850c571c5e1c52c0f7aa22bf49b0ce41c7b5b5 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 16:15:35 +0500
Subject: [PATCH 091/179] Removed consoles

---
 src/common/components/chats/chat-context-provider.tsx | 3 ---
 src/common/components/chats/chat-popup/index.tsx      | 4 ----
 2 files changed, 7 deletions(-)

diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/components/chats/chat-context-provider.tsx
index 4a010f93e6c..90a65488047 100644
--- a/src/common/components/chats/chat-context-provider.tsx
+++ b/src/common/components/chats/chat-context-provider.tsx
@@ -91,9 +91,6 @@ export const ChatContextProvider = (props: Props) => {
     setWindowWidth(window.innerWidth);
     setMaxHeight(window.innerHeight - 66);
   });
-  useEffect(() => {
-    console.log("chat in context", chat);
-  }, []);
 
   useEffect(() => {
     if (currentChannel && currentChannel.removedUserIds) {
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index cef6b5ba4d7..bdde77f6f97 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -127,10 +127,6 @@ export const ChatPopUp = () => {
     setShow(!!activeUser?.username && !isChatPage);
   }, []);
 
-  useEffect(() => {
-    console.log("Chat in store", chat);
-  }, [chat]);
-
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)

From 66581175c286239bf67143cf8b03258a381ba5cb Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 16:17:08 +0500
Subject: [PATCH 092/179] Removed consoles

---
 src/common/helper/message-service.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 879d7341dc6..10ad7a01976 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -528,7 +528,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   public async updateProfile(profile: Metadata) {
-    console.log("Update profile run");
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
 
@@ -583,10 +582,7 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
           const pub = this.pool.publish(this.writeRelays, event);
           pub.on("ok", () => {
             resolve(event);
-            console.log("Event published", event);
-            // this.pushToEventBuffer(event);
             if (event.kind === Kind.Contacts) {
-              console.log("Direct contacts");
               this.getContacts();
             }
             if (event.kind === Kind.Metadata) {
@@ -617,7 +613,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
   }
 
   pushToEventBuffer(event: Event) {
-    console.log("Push to event buffer run");
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
       if (this.eventQueueFlag) {

From 8c0ab8e79d32ec531d1a91459d162df3607d7660 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 17:35:03 +0500
Subject: [PATCH 093/179] Use useMount hook

---
 src/common/components/chats/chat-popup/index.tsx      | 11 ++++++-----
 .../components/chats/chats-messages-view/index.tsx    |  6 ++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index bdde77f6f97..b985757ea62 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -59,6 +59,7 @@ import {
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ImportChats from "../import-chats";
+import { useMount } from "react-use";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -105,6 +106,11 @@ export const ChatPopUp = () => {
   const [isChatPage, setIsChatPage] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  useMount(() => {
+    // deleteChatPublicKey(activeUser);
+    setShow(!!activeUser?.username && !isChatPage);
+  });
+
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
@@ -122,11 +128,6 @@ export const ChatPopUp = () => {
     }
   }, [isChatPage]);
 
-  useEffect(() => {
-    // deleteChatPublicKey(activeUser);
-    setShow(!!activeUser?.username && !isChatPage);
-  }, []);
-
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index 7cda969158a..6f088103f5d 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -70,6 +70,12 @@ export default function ChatsMessagesView(props: Props) {
     isDirectUserOrCommunity();
   }, []);
 
+  useEffect(() => {
+    if (publicMessages.length < 25) {
+      setHasMore(false);
+    }
+  }, [publicMessages]);
+
   useEffect(() => {
     isDirectUserOrCommunity();
   }, [chat.channels]);

From e1e10ea8633e19043ab37419b6b676317e4fa82b Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 17:42:55 +0500
Subject: [PATCH 094/179] Get receiver public key from context

---
 .../components/chats/chat-input/index.tsx      |  6 ++----
 .../components/chats/chat-popup/index.tsx      |  3 +--
 .../chats/chats-direct-messages/index.tsx      | 13 +++----------
 .../chats/chats-messages-view/index.tsx        | 18 +++++-------------
 4 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/components/chats/chat-input/index.tsx
index 4cadc8185a0..8d60dcc7d6e 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/components/chats/chat-input/index.tsx
@@ -36,7 +36,6 @@ interface Props {
   currentChannel: Channel;
   currentUser: string;
   isCurrentUserJoined: boolean;
-  receiverPubKey: string;
   emojiPickerStyles: EmojiPickerStyleProps;
   gifPickerStyle: EmojiPickerStyleProps;
 }
@@ -50,7 +49,7 @@ export default function ChatInput(props: Props) {
   const [shGif, setShGif] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
 
-  const { messageServiceInstance, isActveUserRemoved } = useContext(ChatContext);
+  const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const {
     isCommunity,
@@ -59,8 +58,7 @@ export default function ChatInput(props: Props) {
     currentUser,
     isCurrentUserJoined,
     emojiPickerStyles,
-    gifPickerStyle,
-    receiverPubKey
+    gifPickerStyle
   } = props;
 
   useEffect(() => {
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
index b985757ea62..ed9cf152eb0 100644
--- a/src/common/components/chats/chat-popup/index.tsx
+++ b/src/common/components/chats/chat-popup/index.tsx
@@ -570,7 +570,7 @@ export const ChatPopUp = () => {
                       </Link>
                       {isCurrentUser ? (
                         <ChatsDirectMessages
-                          receiverPubKey={receiverPubKey}
+                          // receiverPubKey={receiverPubKey}
                           directMessages={directMessagesList}
                           currentUser={currentUser}
                           isScrollToBottom={false}
@@ -752,7 +752,6 @@ export const ChatPopUp = () => {
               isCurrentUser={isCurrentUser}
               isCommunity={isCommunity}
               currentUser={currentUser}
-              receiverPubKey={receiverPubKey}
               currentChannel={currentChannel!}
               isCurrentUserJoined={isCurrentUserJoined}
               emojiPickerStyles={EmojiPickerStyle}
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/components/chats/chats-direct-messages/index.tsx
index 14dbd3f91b1..ca5f1b1ddad 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/components/chats/chats-direct-messages/index.tsx
@@ -34,23 +34,16 @@ interface Props {
   currentUser: string;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
-  receiverPubKey: string;
   scrollToBottom?: () => void;
 }
 
 let zoom: Zoom | null = null;
 export default function ChatsDirectMessages(props: Props) {
-  const {
-    directMessages,
-    currentUser,
-    isScrolled,
-    receiverPubKey,
-    isScrollToBottom,
-    scrollToBottom
-  } = props;
+  const { directMessages, currentUser, isScrolled, isScrollToBottom, scrollToBottom } = props;
 
   const { global, activeUser, deleteDirectMessage } = useMappedStore();
-  const { activeUserKeys, messageServiceInstance, windowWidth } = useContext(ChatContext);
+  const { activeUserKeys, messageServiceInstance, windowWidth, receiverPubKey } =
+    useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
   const [step, setStep] = useState(0);
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/components/chats/chats-messages-view/index.tsx
index 6f088103f5d..f68a78f514c 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/components/chats/chats-messages-view/index.tsx
@@ -1,15 +1,9 @@
-import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { Channel, DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
-import {
-  fetchCommunityMessages,
-  fetchDirectMessages,
-  getPrivateKey,
-  getProfileMetaData
-} from "../utils";
+import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
 import { History } from "history";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { Global } from "../../../store/global/types";
 import ChatsProfileBox from "../chats-profile-box";
 
 import "./index.scss";
@@ -22,7 +16,7 @@ import { User } from "../../../store/users/types";
 import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
-import { EmojiPickerStyleProps, NostrKeysType } from "../types";
+import { EmojiPickerStyleProps } from "../types";
 import { ChatContext } from "../chat-context-provider";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
@@ -52,11 +46,11 @@ interface Props {
 export default function ChatsMessagesView(props: Props) {
   const { username, currentChannel, inProgress, currentChannelSetter, setInProgress } = props;
 
-  const { messageServiceInstance, receiverPubKey } = useContext(ChatContext);
+  const { messageServiceInstance } = useContext(ChatContext);
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
-  const { chat, activeUser } = useMappedStore();
+  const { chat } = useMappedStore();
   const [directUser, setDirectUser] = useState("");
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
@@ -206,7 +200,6 @@ export default function ChatsMessagesView(props: Props) {
             directMessages={directMessages && directMessages}
             currentUser={directUser!}
             isScrolled={isScrolled}
-            receiverPubKey={receiverPubKey}
             isScrollToBottom={isScrollToBottom}
             scrollToBottom={scrollToBottom}
           />
@@ -221,7 +214,6 @@ export default function ChatsMessagesView(props: Props) {
         )}
       </div>
       <ChatInput
-        receiverPubKey={receiverPubKey}
         emojiPickerStyles={EmojiPickerStyle}
         gifPickerStyle={EmojiPickerStyle}
         isCurrentUser={directUser ? true : false}

From c3297641c04d2d985f0f0f8bc75f08b38bb2f22d Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Tue, 3 Oct 2023 18:48:19 +0500
Subject: [PATCH 095/179] Change styling in edit community role modal

---
 .../components/chats/chats-community-dropdown-menu/index.scss | 4 ++--
 .../components/chats/chats-community-dropdown-menu/index.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.scss b/src/common/components/chats/chats-community-dropdown-menu/index.scss
index d1c23632f86..c428319e091 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.scss
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.scss
@@ -2,8 +2,8 @@
 
 .chats-dialog {
   .chat-modals-body {
-    .add-dialog-header {
-      margin-bottom: 2rem;
+    .community-chat-role-edit-dialog-content {
+      margin-top: 2rem;
     }
     .success-dialog-header {
       .success-dialog-titles {
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
index d2c4c62a92d..36548d45930 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/components/chats/chats-community-dropdown-menu/index.tsx
@@ -265,10 +265,10 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         <div className="add-dialog-header border-bottom">
           <div className="add-dialog-titles">
             <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
+            {inProgress && <LinearProgress />}
           </div>
         </div>
         <div className="community-chat-role-edit-dialog-content">
-          {inProgress && <LinearProgress />}
           <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
             <Form.Group as={Row}>
               <Form.Label column={true} sm="2">
@@ -317,7 +317,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
           </div>
           {currentChannel?.communityModerators?.length !== 0 ? (
             <>
-              <table className="table table-striped table-bordered table-roles">
+              <table className="table table-striped table-bordered table-roles mt-4">
                 <thead>
                   <tr>
                     <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>

From d5c122bef3f8eb66954ff498289141212a88da51 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 15 Oct 2023 16:16:39 +0600
Subject: [PATCH 096/179] Fixed TW migration conflicts and starting working on
 chats popup fixes

---
 src/common/app.tsx                            |   4 +-
 .../components/chats/chat-popup/index.tsx     | 765 ------------------
 .../chats/chats-dropdown-menu/index.tsx       |  48 --
 .../chats/chats-messages-view/index.scss      |  21 -
 .../chats/utils/upload-chat-public-key.ts     |  26 -
 .../components/community-cover/index.tsx      |   2 +-
 .../components/emoji-picker/index-old.tsx     |   2 +-
 src/common/components/login/index.tsx         |   2 +-
 .../components/manage-auth-icon/index.tsx     |   4 +-
 .../components/manage-chat-key/index.tsx      |  68 --
 .../chats/chat-context-provider.tsx           |   0
 .../chats/chat-input/index.scss               |   2 +-
 .../chats/chat-input/index.tsx                |  55 +-
 .../chats/chat-popup/chat-constants.ts        |   0
 .../chat-popup/chat-popup-direct-messages.tsx | 114 +++
 .../chats/chat-popup/chat-popup-header.tsx    | 150 ++++
 .../chat-popup/chat-popup-messages-list.tsx   |  69 ++
 .../chat-popup/chat-popup-search-user.tsx     |  63 ++
 .../chats/chat-popup/index.scss               | 178 +---
 .../features/chats/chat-popup/index.tsx       | 490 +++++++++++
 .../chats/chats-channel-messages/index.scss   |  28 +-
 .../chats/chats-channel-messages/index.tsx    |  91 +--
 .../chats-community-dropdown-menu/index.scss  |   2 +-
 .../chats-community-dropdown-menu/index.tsx   | 105 ++-
 .../chats/chats-confirmation-modal/index.scss |   5 +-
 .../chats/chats-confirmation-modal/index.tsx  |  16 +-
 .../chats/chats-direct-messages/index.scss    |  27 +-
 .../chats/chats-direct-messages/index.tsx     |  16 +-
 .../chats/chats-dropdown-menu/index.tsx       |  47 ++
 .../chats/chats-messages-box/index.scss       |   6 +-
 .../chats/chats-messages-box/index.tsx        |   5 +-
 .../chats/chats-messages-header/index.scss    |  22 +-
 .../chats/chats-messages-header/index.tsx     |  14 +-
 .../chats/chats-messages-view/index.scss      |  12 +
 .../chats/chats-messages-view/index.tsx       |  12 +-
 .../chats/chats-profile-box/index.scss        |  14 +-
 .../chats/chats-profile-box/index.tsx         |   5 +-
 .../chats/chats-scroller/index.scss           |   8 +-
 .../chats/chats-scroller/index.tsx            |   2 +-
 .../chats/chats-sidebar/indes.tsx             |  24 +-
 .../chats/chats-sidebar/index.scss            |  30 +-
 .../hooks/use-message-service-listener.tsx    |   0
 .../chats/import-chats/index.scss             |   2 +-
 .../chats/import-chats/index.tsx              |  44 +-
 .../chats/join-chat/index.tsx                 |  17 +-
 .../chats/join-community-chat-btn/index.tsx   |  38 +-
 .../chats}/manage-chat-key/index.scss         |   7 +-
 .../features/chats/manage-chat-key/index.tsx  |  37 +
 src/common/features/chats/queries/index.ts    |   2 +
 src/common/features/chats/queries/queries.ts  |   3 +
 .../chats/queries/search-users-query.ts       |  20 +
 .../chats/types/chat-types.ts                 |   0
 .../chats/types/index.ts                      |   0
 .../chats/utils/check-contiguous-message.ts   |   8 +-
 .../chats/utils/copy-to-clipboard.ts          |   0
 .../chats/utils/create-nostr-account.ts       |   0
 .../chats/utils/delete-chat-public-key.ts     |   0
 .../chats/utils/fetch-profile-metadata.ts     |   4 +-
 .../utils/format-message-date-and-day.ts      |   2 +-
 .../chats/utils/format-message-time.ts        |   0
 .../chats/utils/formatted-user-name.ts        |   0
 .../chats/utils/get-chat-private-key.ts       |   0
 .../chats/utils/get-joined-communities.ts     |   0
 .../chats/utils/get-user-chat-public-key.ts   |   0
 .../chats/utils/index.ts                      |   0
 .../chats/utils/is-message-gif.ts             |   0
 .../chats/utils/is-message-image.ts           |   0
 .../chats/utils/upload-channel-data.ts        |   3 +-
 .../chats/utils/upload-chat-public-key.ts     |  13 +
 .../utils/use-fetch-community-messages.ts     |   3 +-
 .../chats/utils/use-fetch-direct-messages.ts  |   0
 .../utils/use-get-community-last-message.ts   |   0
 .../utils/use-get-direct-last-message.ts      |   0
 src/common/i18n/locales/en-US.json            |  10 +-
 src/common/img/svg.tsx                        | 123 ++-
 src/common/pages/chats/index.tsx              |  16 +-
 src/common/pages/community-functional.tsx     |  49 +-
 src/managers/message-manager.tsx              |   8 +-
 yarn.lock                                     | 277 ++++++-
 79 files changed, 1698 insertions(+), 1542 deletions(-)
 delete mode 100644 src/common/components/chats/chat-popup/index.tsx
 delete mode 100644 src/common/components/chats/chats-dropdown-menu/index.tsx
 delete mode 100644 src/common/components/chats/chats-messages-view/index.scss
 delete mode 100644 src/common/components/chats/utils/upload-chat-public-key.ts
 delete mode 100644 src/common/components/manage-chat-key/index.tsx
 rename src/common/{components => features}/chats/chat-context-provider.tsx (100%)
 rename src/common/{components => features}/chats/chat-input/index.scss (96%)
 rename src/common/{components => features}/chats/chat-input/index.tsx (89%)
 rename src/common/{components => features}/chats/chat-popup/chat-constants.ts (100%)
 create mode 100644 src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
 create mode 100644 src/common/features/chats/chat-popup/chat-popup-header.tsx
 create mode 100644 src/common/features/chats/chat-popup/chat-popup-messages-list.tsx
 create mode 100644 src/common/features/chats/chat-popup/chat-popup-search-user.tsx
 rename src/common/{components => features}/chats/chat-popup/index.scss (61%)
 create mode 100644 src/common/features/chats/chat-popup/index.tsx
 rename src/common/{components => features}/chats/chats-channel-messages/index.scss (91%)
 rename src/common/{components => features}/chats/chats-channel-messages/index.tsx (90%)
 rename src/common/{components => features}/chats/chats-community-dropdown-menu/index.scss (87%)
 rename src/common/{components => features}/chats/chats-community-dropdown-menu/index.tsx (86%)
 rename src/common/{components => features}/chats/chats-confirmation-modal/index.scss (63%)
 rename src/common/{components => features}/chats/chats-confirmation-modal/index.tsx (81%)
 rename src/common/{components => features}/chats/chats-direct-messages/index.scss (90%)
 rename src/common/{components => features}/chats/chats-direct-messages/index.tsx (97%)
 create mode 100644 src/common/features/chats/chats-dropdown-menu/index.tsx
 rename src/common/{components => features}/chats/chats-messages-box/index.scss (86%)
 rename src/common/{components => features}/chats/chats-messages-box/index.tsx (98%)
 rename src/common/{components => features}/chats/chats-messages-header/index.scss (83%)
 rename src/common/{components => features}/chats/chats-messages-header/index.tsx (87%)
 create mode 100644 src/common/features/chats/chats-messages-view/index.scss
 rename src/common/{components => features}/chats/chats-messages-view/index.tsx (95%)
 rename src/common/{components => features}/chats/chats-profile-box/index.scss (83%)
 rename src/common/{components => features}/chats/chats-profile-box/index.tsx (96%)
 rename src/common/{components => features}/chats/chats-scroller/index.scss (77%)
 rename src/common/{components => features}/chats/chats-scroller/index.tsx (95%)
 rename src/common/{components => features}/chats/chats-sidebar/indes.tsx (95%)
 rename src/common/{components => features}/chats/chats-sidebar/index.scss (89%)
 rename src/common/{components => features}/chats/hooks/use-message-service-listener.tsx (100%)
 rename src/common/{components => features}/chats/import-chats/index.scss (67%)
 rename src/common/{components => features}/chats/import-chats/index.tsx (70%)
 rename src/common/{components => features}/chats/join-chat/index.tsx (64%)
 rename src/common/{components => features}/chats/join-community-chat-btn/index.tsx (89%)
 rename src/common/{components => features/chats}/manage-chat-key/index.scss (84%)
 create mode 100644 src/common/features/chats/manage-chat-key/index.tsx
 create mode 100644 src/common/features/chats/queries/index.ts
 create mode 100644 src/common/features/chats/queries/queries.ts
 create mode 100644 src/common/features/chats/queries/search-users-query.ts
 rename src/common/{components => features}/chats/types/chat-types.ts (100%)
 rename src/common/{components => features}/chats/types/index.ts (100%)
 rename src/common/{components => features}/chats/utils/check-contiguous-message.ts (55%)
 rename src/common/{components => features}/chats/utils/copy-to-clipboard.ts (100%)
 rename src/common/{components => features}/chats/utils/create-nostr-account.ts (100%)
 rename src/common/{components => features}/chats/utils/delete-chat-public-key.ts (100%)
 rename src/common/{components => features}/chats/utils/fetch-profile-metadata.ts (74%)
 rename src/common/{components => features}/chats/utils/format-message-date-and-day.ts (87%)
 rename src/common/{components => features}/chats/utils/format-message-time.ts (100%)
 rename src/common/{components => features}/chats/utils/formatted-user-name.ts (100%)
 rename src/common/{components => features}/chats/utils/get-chat-private-key.ts (100%)
 rename src/common/{components => features}/chats/utils/get-joined-communities.ts (100%)
 rename src/common/{components => features}/chats/utils/get-user-chat-public-key.ts (100%)
 rename src/common/{components => features}/chats/utils/index.ts (100%)
 rename src/common/{components => features}/chats/utils/is-message-gif.ts (100%)
 rename src/common/{components => features}/chats/utils/is-message-image.ts (100%)
 rename src/common/{components => features}/chats/utils/upload-channel-data.ts (82%)
 create mode 100644 src/common/features/chats/utils/upload-chat-public-key.ts
 rename src/common/{components => features}/chats/utils/use-fetch-community-messages.ts (82%)
 rename src/common/{components => features}/chats/utils/use-fetch-direct-messages.ts (100%)
 rename src/common/{components => features}/chats/utils/use-get-community-last-message.ts (100%)
 rename src/common/{components => features}/chats/utils/use-get-direct-last-message.ts (100%)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 676ca704362..86ff6df6710 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -29,8 +29,8 @@ import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
-import { ChatContextProvider } from "./components/chats/chat-context-provider";
-import { ChatPopUp } from "./components/chats/chat-popup";
+import { ChatContextProvider } from "./features/chats/chat-context-provider";
+import { ChatPopUp } from "./features/chats/chat-popup";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
diff --git a/src/common/components/chats/chat-popup/index.tsx b/src/common/components/chats/chat-popup/index.tsx
deleted file mode 100644
index ed9cf152eb0..00000000000
--- a/src/common/components/chats/chat-popup/index.tsx
+++ /dev/null
@@ -1,765 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import useDebounce from "react-use/lib/useDebounce";
-import { useLocation } from "react-router";
-import { Button, Form, Spinner } from "react-bootstrap";
-import { Link } from "react-router-dom";
-import { history } from "../../../../common/store";
-
-import { Community } from "../../../store/communities/types";
-import {
-  Channel,
-  ChannelUpdate,
-  DirectMessage,
-  PublicMessage
-} from "../../../../managers/message-manager-types";
-
-import Tooltip from "../../tooltip";
-import UserAvatar from "../../user-avatar";
-import LinearProgress from "../../linear-progress";
-import { setNostrkeys } from "../../../../managers/message-manager";
-import ManageChatKey from "../../manage-chat-key";
-import ChatInput from "../chat-input";
-import ChatsProfileBox from "../chats-profile-box";
-import ChatsDropdownMenu from "../chats-dropdown-menu";
-import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import ChatsChannelMessages from "../chats-channel-messages";
-
-import {
-  addMessageSVG,
-  expandArrow,
-  collapseArrow,
-  arrowBackSvg,
-  chevronUpSvg,
-  chevronDownSvgForSlider,
-  syncSvg,
-  extendedView
-} from "../../../img/svg";
-
-import { EmojiPickerStyle, GifPickerStyle } from "./chat-constants";
-
-import accountReputation from "../../../helper/account-reputation";
-import { _t } from "../../../i18n";
-import { usePrevious } from "../../../util/use-previous";
-
-import { getAccountReputations } from "../../../api/hive";
-import { getCommunity } from "../../../api/bridge";
-
-import "./index.scss";
-import ChatsDirectMessages from "../chats-direct-messages";
-import { AccountWithReputation } from "../types";
-import {
-  deleteChatPublicKey,
-  fetchCommunityMessages,
-  getCommunityLastMessage,
-  getDirectLastMessage,
-  getJoinedCommunities,
-  getPrivateKey,
-  getUserChatPublicKey
-} from "../utils";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
-import ImportChats from "../import-chats";
-import { useMount } from "react-use";
-
-export const ChatPopUp = () => {
-  const { activeUser, global, chat, resetChat } = useMappedStore();
-
-  const {
-    messageServiceInstance,
-    revealPrivKey,
-    activeUserKeys,
-    showSpinner,
-    hasUserJoinedChat,
-    currentChannel,
-    windowWidth,
-    setCurrentChannel,
-    setRevealPrivKey,
-    setShowSpinner,
-    joinChat
-  } = useContext(ChatContext);
-
-  const routerLocation = useLocation();
-  const prevActiveUser = usePrevious(activeUser);
-  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
-
-  const [expanded, setExpanded] = useState(false);
-  const [currentUser, setCurrentUser] = useState("");
-  const [isCurrentUser, setIsCurrentUser] = useState(false);
-  const [isScrollToTop, setIsScrollToTop] = useState(false);
-  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
-  const [showSearchUser, setShowSearchUser] = useState(false);
-  const [inProgress, setInProgress] = useState(false);
-  const [show, setShow] = useState(false);
-  const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [isSpinner, setIsSpinner] = useState(false);
-  const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
-  const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
-  const [isCommunity, setIsCommunity] = useState(false);
-  const [communityName, setCommunityName] = useState("");
-  const [currentCommunity, setCurrentCommunity] = useState<Community>();
-  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
-  const [communities, setCommunities] = useState<Channel[]>([]);
-  const [searchtext, setSearchText] = useState("");
-  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
-  const [isTop, setIsTop] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [isChatPage, setIsChatPage] = useState(false);
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  useMount(() => {
-    // deleteChatPublicKey(activeUser);
-    setShow(!!activeUser?.username && !isChatPage);
-  });
-
-  useEffect(() => {
-    if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
-      setIsCommunity(false);
-      setCommunityName("");
-    }
-  }, [chat.leftChannelsList]);
-
-  useEffect(() => {
-    handleRouterChange();
-  }, [routerLocation]);
-
-  useEffect(() => {
-    if (isChatPage) {
-      setShow(false);
-    }
-  }, [isChatPage]);
-
-  useEffect(() => {
-    const updated: ChannelUpdate = chat.updatedChannel
-      .filter((x) => x.channelId === currentChannel?.id!)
-      .sort((a, b) => b.created - a.created)[0];
-    if (currentChannel && updated) {
-      const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        chat.publicMessages,
-        currentChannel,
-        updated?.hiddenMessageIds
-      );
-      const messages = publicMessages.sort((a, b) => a.created - b.created);
-      setPublicMessages(messages);
-      const channel = {
-        name: updated.name,
-        about: updated.about,
-        picture: updated.picture,
-        communityName: updated.communityName,
-        communityModerators: updated.communityModerators,
-        id: updated.channelId,
-        creator: updated.creator,
-        created: currentChannel?.created!,
-        hiddenMessageIds: updated.hiddenMessageIds,
-        removedUserIds: updated.removedUserIds
-      };
-      setCurrentChannel(channel);
-    }
-  }, [chat.updatedChannel]);
-
-  useEffect(() => {
-    if (isTop) {
-      fetchPrevMessages();
-    }
-  }, [isTop]);
-
-  useEffect(() => {
-    if (messageServiceInstance) {
-      setIsSpinner(false);
-    }
-  }, [messageServiceInstance]);
-
-  useEffect(() => {
-    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
-    setCommunities(communities);
-  }, [chat.channels, chat.leftChannelsList]);
-
-  useEffect(() => {
-    const msgsList = fetchDirectMessages(receiverPubKey!);
-    const messages = msgsList.sort((a, b) => a.created - b.created);
-    setDirectMessagesList(messages);
-  }, [chat.directMessages]);
-
-  useEffect(() => {
-    if (prevActiveUser?.username !== activeUser?.username) {
-      setIsCommunity(false);
-      setIsCurrentUser(false);
-      setCurrentUser("");
-      setCommunityName("");
-    }
-  }, [global.theme, activeUser]);
-
-  useEffect(() => {
-    if (directMessagesList.length !== 0 && !isScrolled) {
-      scrollerClicked();
-    }
-    if (!isScrolled && publicMessages.length !== 0 && isCommunity) {
-      scrollerClicked();
-    }
-  }, [directMessagesList, publicMessages]);
-
-  useEffect(() => {
-    if (currentChannel && isCommunity) {
-      messageServiceInstance?.fetchChannel(currentChannel.id);
-      const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        chat.publicMessages,
-        currentChannel,
-        currentChannel.hiddenMessageIds
-      );
-      const messages = publicMessages.sort((a, b) => a.created - b.created);
-      setPublicMessages(messages);
-    }
-  }, [currentChannel, isCommunity, chat.publicMessages]);
-
-  useEffect(() => {
-    if ((isCurrentUser || isCommunity) && show) {
-      scrollerClicked();
-    }
-  }, [isCurrentUser, isCommunity, show]);
-
-  useEffect(() => {
-    const msgsList = fetchDirectMessages(receiverPubKey!);
-    const messages = msgsList.sort((a, b) => a.created - b.created);
-    setDirectMessagesList(messages);
-  }, [activeUser]);
-
-  useEffect(() => {
-    if (isCommunity && show) {
-      fetchCommunity();
-
-      scrollerClicked();
-      fetchCurrentChannel(communityName);
-    }
-  }, [isCommunity, communityName, show]);
-
-  useEffect(() => {
-    if (currentUser) {
-      const isCurrentUserFound = chat.directContacts.find(
-        (contact) => contact.name === currentUser
-      );
-      if (isCurrentUserFound) {
-        setReceiverPubKey(isCurrentUserFound.pubkey);
-        setIsCurrentUserJoined(true);
-      } else {
-        setInProgress(true);
-        fetchCurrentUserData();
-      }
-
-      const peer = chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
-      const msgsList = fetchDirectMessages(peer!);
-      const messages = msgsList.sort((a, b) => a.created - b.created);
-      setDirectMessagesList(messages);
-      if (!messageServiceInstance) {
-        setNostrkeys(activeUserKeys!);
-      }
-    } else {
-      setIsCurrentUserJoined(true);
-      setInProgress(false);
-    }
-  }, [currentUser]);
-
-  useDebounce(
-    async () => {
-      if (searchtext.length !== 0) {
-        const resp = await getAccountReputations(searchtext, 30);
-        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
-        setUserList(sortedByReputation);
-        setInProgress(false);
-      } else {
-        setInProgress(false);
-        setUserList([]);
-      }
-    },
-    500,
-    [searchtext]
-  );
-
-  const handleRouterChange = () => {
-    if (routerLocation.pathname.match("/chats")) {
-      setShow(false);
-      setIsChatPage(true);
-    } else {
-      setShow(!!activeUser?.username);
-    }
-  };
-
-  const fetchCommunity = async () => {
-    const community = await getCommunity(communityName, activeUser?.username);
-    setCurrentCommunity(community!);
-  };
-
-  const fetchCurrentChannel = (communityName: string) => {
-    const channel = chat.channels.find((channel) => channel.communityName === communityName);
-    if (channel) {
-      const updated: ChannelUpdate = chat.updatedChannel
-        .filter((x) => x.channelId === channel.id)
-        .sort((a, b) => b.created - a.created)[0];
-      if (updated) {
-        const channel = {
-          name: updated.name,
-          about: updated.about,
-          picture: updated.picture,
-          communityName: updated.communityName,
-          communityModerators: updated.communityModerators,
-          id: updated.channelId,
-          creator: updated.creator,
-          created: currentChannel?.created!,
-          hiddenMessageIds: updated.hiddenMessageIds,
-          removedUserIds: updated.removedUserIds
-        };
-        setCurrentChannel(channel);
-      } else {
-        setCurrentChannel(channel);
-      }
-    }
-  };
-
-  const fetchDirectMessages = (peer: string) => {
-    for (const item of chat.directMessages) {
-      if (item.peer === peer) {
-        return Object.values(item.chat);
-      }
-    }
-    return [];
-  };
-
-  const fetchCurrentUserData = async () => {
-    const nsKey = await getUserChatPublicKey(currentUser);
-    if (nsKey) {
-      setReceiverPubKey(nsKey);
-    } else {
-      setReceiverPubKey("");
-    }
-    setIsCurrentUserJoined(!!nsKey);
-    setInProgress(false);
-  };
-
-  const userClicked = (username: string) => {
-    setIsCurrentUser(true);
-    setCurrentUser(username);
-  };
-
-  const fetchPrevMessages = () => {
-    if (!hasMore || inProgress) return;
-
-    setInProgress(true);
-    messageServiceInstance
-      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
-      .then((num) => {
-        if (num < 25) {
-          setHasMore(false);
-        }
-      })
-      .finally(() => {
-        setInProgress(false);
-        setIsTop(false);
-      });
-  };
-
-  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    var element = event.currentTarget;
-    let srollHeight: number = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
-    const isScrollToBottom =
-      (isCurrentUser || isCommunity) &&
-      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
-    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
-    setIsScrolled(isScrolled);
-    setIsScrollToTop(isScrollToTop);
-    setIsScrollToBottom(isScrollToBottom);
-    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
-    if (isCommunity && scrollerTop) {
-      setIsTop(true);
-    } else {
-      setIsTop(false);
-    }
-  };
-
-  const scrollerClicked = () => {
-    chatBodyDivRef?.current?.scroll({
-      top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
-      behavior: "auto"
-    });
-  };
-
-  const handleMessageSvgClick = () => {
-    setShowSearchUser(!showSearchUser);
-    setExpanded(true);
-  };
-
-  const handleRefreshSvgClick = () => {
-    setExpanded(true);
-    resetChat();
-    handleBackArrowSvg();
-    if (getPrivateKey(activeUser?.username!)) {
-      setShowSpinner(true);
-      const keys = {
-        pub: activeUserKeys?.pub!,
-        priv: getPrivateKey(activeUser?.username!)
-      };
-      setNostrkeys(keys);
-      if (isCommunity && communityName) {
-        fetchCurrentChannel(communityName);
-      }
-    }
-  };
-
-  const handleJoinChat = async () => {
-    setIsSpinner(true);
-    joinChat();
-  };
-
-  const chatButtonSpinner = (
-    <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
-  );
-
-  const communityClicked = (community: string) => {
-    setIsCommunity(true);
-    setCommunityName(community);
-  };
-
-  const handleBackArrowSvg = () => {
-    setCurrentUser("");
-    setIsCurrentUser(false);
-    setCommunityName("");
-    setIsCommunity(false);
-    setShowSearchUser(false);
-    setSearchText("");
-    setHasMore(true);
-    setRevealPrivKey(false);
-  };
-
-  const handleExtendedView = () => {
-    if (!isCurrentUser && !isCommunity) {
-      history?.push("/chats");
-    } else if (isCurrentUser) {
-      history?.push(`/chats/@${currentUser}`);
-    } else {
-      history?.push(`/chats/${communityName}`);
-    }
-  };
-
-  return (
-    <>
-      {show && (
-        <div
-          className={`chatbox-container ${expanded ? "expanded" : ""} ${
-            windowWidth <= 666 ? "small-screen" : ""
-          }`}
-        >
-          <div className="chat-header">
-            {(currentUser || communityName || showSearchUser || revealPrivKey) && expanded && (
-              <Tooltip content={_t("chat.back")}>
-                <div className="back-arrow-image">
-                  <span className="back-arrow-svg" onClick={handleBackArrowSvg}>
-                    {" "}
-                    {arrowBackSvg}
-                  </span>
-                </div>
-              </Tooltip>
-            )}
-            <div className="message-header-title" onClick={() => setExpanded(!expanded)}>
-              {(currentUser || isCommunity) && (
-                <p className="user-icon">
-                  <UserAvatar
-                    username={
-                      isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""
-                    }
-                    size="small"
-                  />
-                </p>
-              )}
-
-              <p className="message-header-content">
-                {currentUser
-                  ? currentUser
-                  : isCommunity
-                  ? currentCommunity?.title
-                  : showSearchUser
-                  ? "New Message"
-                  : revealPrivKey
-                  ? "Manage chat key"
-                  : "Messages"}
-              </p>
-            </div>
-            <div className="actionable-imgs">
-              <div className="extended-image" onClick={handleExtendedView}>
-                <Tooltip content={_t("chat.extended-view")}>
-                  <p className="extended-svg">{extendedView}</p>
-                </Tooltip>
-              </div>
-              {!currentUser &&
-                hasUserJoinedChat &&
-                activeUserKeys?.priv &&
-                !isCommunity &&
-                !revealPrivKey && (
-                  <>
-                    <div className="message-image" onClick={handleMessageSvgClick}>
-                      <Tooltip content={_t("chat.new-message")}>
-                        <p className="message-svg">{addMessageSVG}</p>
-                      </Tooltip>
-                    </div>
-                  </>
-                )}
-              {hasUserJoinedChat && activeUserKeys?.priv && !revealPrivKey && (
-                <div className="message-image" onClick={handleRefreshSvgClick}>
-                  <Tooltip content={_t("chat.refresh")}>
-                    <p className="message-svg" style={{ paddingTop: "8px" }}>
-                      {syncSvg}
-                    </p>
-                  </Tooltip>
-                </div>
-              )}
-              {isCommunity && (
-                <div className="community-menu">
-                  <ChatsCommunityDropdownMenu history={history!} username={communityName} />
-                </div>
-              )}{" "}
-              {!isCommunity && !isCurrentUser && activeUserKeys?.priv && (
-                <div className="simple-menu" onClick={() => setExpanded(true)}>
-                  <ChatsDropdownMenu
-                    history={history!}
-                    onManageChatKey={() => {
-                      setRevealPrivKey(!revealPrivKey);
-                    }}
-                  />
-                </div>
-              )}
-              <div className="arrow-image">
-                <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-                  <p
-                    className="arrow-svg"
-                    onClick={() => {
-                      setExpanded(!expanded);
-                    }}
-                  >
-                    {expanded ? expandArrow : collapseArrow}
-                  </p>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-          {inProgress && <LinearProgress />}
-          <div
-            className={`chat-body ${
-              currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${!hasUserJoinedChat ? "join-chat" : isTop && hasMore ? "no-scroll" : ""}`}
-            ref={chatBodyDivRef}
-            onScroll={handleScroll}
-          >
-            {hasUserJoinedChat && !revealPrivKey ? (
-              <>
-                {currentUser.length !== 0 || communityName.length !== 0 ? (
-                  <div className="chats">
-                    <>
-                      {" "}
-                      <Link
-                        to={
-                          isCurrentUser
-                            ? `/@${currentUser}`
-                            : isCommunity
-                            ? `/created/${currentCommunity?.name}`
-                            : ""
-                        }
-                      >
-                        <ChatsProfileBox
-                          isCommunity={isCommunity}
-                          isCurrentUser={isCurrentUser}
-                          communityName={communityName}
-                          currentUser={currentUser}
-                        />
-                      </Link>
-                      {isCurrentUser ? (
-                        <ChatsDirectMessages
-                          // receiverPubKey={receiverPubKey}
-                          directMessages={directMessagesList}
-                          currentUser={currentUser}
-                          isScrollToBottom={false}
-                        />
-                      ) : (
-                        <ChatsChannelMessages
-                          history={history!}
-                          username={communityName}
-                          publicMessages={publicMessages}
-                          currentChannel={currentChannel!}
-                          isScrollToBottom={false}
-                          currentChannelSetter={setCurrentChannel}
-                        />
-                      )}
-                    </>
-                  </div>
-                ) : showSearchUser ? (
-                  <>
-                    <div className="user-search-bar">
-                      <Form.Group className="w-100 mb-3">
-                        <Form.Control
-                          type="text"
-                          placeholder={_t("chat.search")}
-                          value={searchtext}
-                          autoFocus={true}
-                          onChange={(e) => {
-                            setSearchText(e.target.value);
-                            setInProgress(true);
-                          }}
-                        />
-                      </Form.Group>
-                    </div>
-                    <div className="user-search-suggestion-list">
-                      {userList.map((user, index) => {
-                        return (
-                          <div
-                            key={index}
-                            className="search-content"
-                            onClick={() => {
-                              setCurrentUser(user.account);
-                              setIsCurrentUser(true);
-                            }}
-                          >
-                            <div className="search-user-img">
-                              <span>
-                                <UserAvatar username={user.account} size="medium" />
-                              </span>
-                            </div>
-
-                            <div className="search-user-title">
-                              <p className="search-username">{user.account}</p>
-                              <p className="search-reputation">
-                                ({accountReputation(user.reputation)})
-                              </p>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    {(chat.directContacts.length !== 0 ||
-                      (chat.channels.length !== 0 && communities.length !== 0)) &&
-                    !showSpinner &&
-                    activeUserKeys?.priv ? (
-                      <React.Fragment>
-                        {chat.channels.length !== 0 && communities.length !== 0 && (
-                          <>
-                            <div className="community-header">{_t("chat.communities")}</div>
-                            {communities.map((channel) => {
-                              return (
-                                <div key={channel.id} className="chat-content">
-                                  <Link to={`/created/${channel.communityName}`}>
-                                    <div className="user-img">
-                                      <span>
-                                        <UserAvatar
-                                          username={channel.communityName!}
-                                          size="medium"
-                                        />
-                                      </span>
-                                    </div>
-                                  </Link>
-
-                                  <div
-                                    className="user-title"
-                                    onClick={() => communityClicked(channel.communityName!)}
-                                  >
-                                    <p className="username">{channel.name}</p>
-                                    <p className="last-message">
-                                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                                    </p>
-                                  </div>
-                                </div>
-                              );
-                            })}
-                            {chat.directContacts.length !== 0 && (
-                              <div className="dm-header">{_t("chat.dms")}</div>
-                            )}
-                          </>
-                        )}
-                        {chat.directContacts.map((user) => {
-                          return (
-                            <div key={user.pubkey} className="chat-content">
-                              <Link to={`/@${user.name}`}>
-                                <div className="user-img">
-                                  <span>
-                                    <UserAvatar username={user.name} size="medium" />
-                                  </span>
-                                </div>
-                              </Link>
-
-                              <div
-                                className="user-title"
-                                onClick={() => {
-                                  userClicked(user.name);
-                                  setReceiverPubKey(user.pubkey);
-                                }}
-                              >
-                                <p className="username">{user.name}</p>
-                                <p className="last-message">
-                                  {getDirectLastMessage(user.pubkey, chat.directMessages)}
-                                </p>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </React.Fragment>
-                    ) : !activeUserKeys?.priv ? (
-                      <>
-                        <ImportChats />
-                      </>
-                    ) : showSpinner ? (
-                      <div className="no-chat">
-                        <Spinner animation="border" variant="primary" size="sm" />
-                        <p className="mt-3 ml-2">Loading...</p>
-                      </div>
-                    ) : (
-                      <>
-                        <p className="no-chat">{_t("chat.no-chat")}</p>
-                        <div className="start-chat-btn">
-                          <Button variant="primary" onClick={() => setShowSearchUser(true)}>
-                            {_t("chat.start-chat")}
-                          </Button>
-                        </div>
-                      </>
-                    )}
-                  </>
-                )}
-              </>
-            ) : revealPrivKey ? (
-              <ManageChatKey history={history!} />
-            ) : (
-              <Button className="join-chat-btn" onClick={handleJoinChat}>
-                {isSpinner && chatButtonSpinner}
-                {_t("chat.join-chat")}
-              </Button>
-            )}
-
-            {((isScrollToTop && !isCurrentUser) ||
-              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
-              <Tooltip
-                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
-              >
-                <div
-                  className="scroller"
-                  style={{
-                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
-                  }}
-                  onClick={scrollerClicked}
-                >
-                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
-                </div>
-              </Tooltip>
-            )}
-          </div>
-          {(isCurrentUser || isCommunity) && (
-            <ChatInput
-              isCurrentUser={isCurrentUser}
-              isCommunity={isCommunity}
-              currentUser={currentUser}
-              currentChannel={currentChannel!}
-              isCurrentUserJoined={isCurrentUserJoined}
-              emojiPickerStyles={EmojiPickerStyle}
-              gifPickerStyle={GifPickerStyle}
-            />
-          )}
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/src/common/components/chats/chats-dropdown-menu/index.tsx b/src/common/components/chats/chats-dropdown-menu/index.tsx
deleted file mode 100644
index ae335b04534..00000000000
--- a/src/common/components/chats/chats-dropdown-menu/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import { History } from "history";
-import DropDown, { MenuItem } from "../../dropdown";
-
-import { KebabMenu, chatKeySvg } from "../../../img/svg";
-import { _t } from "../../../i18n";
-import { DropDownStyle } from "../chat-popup/chat-constants";
-
-interface Props {
-  history: History | null;
-  onManageChatKey?: () => void;
-}
-
-const ChatsDropdownMenu = (props: Props) => {
-  const onManageChatKey = () => {
-    const { onManageChatKey } = props;
-    if (onManageChatKey) {
-      onManageChatKey();
-    }
-  };
-
-  const menuItems: MenuItem[] = [
-    {
-      label: "Manage Chat key",
-      onClick: onManageChatKey,
-      icon: chatKeySvg
-    }
-  ];
-
-  const menuConfig = {
-    history: props.history,
-    label: "",
-    icon: KebabMenu,
-    items: menuItems
-  };
-
-  return (
-    <DropDown
-      {...menuConfig}
-      style={DropDownStyle}
-      float="right"
-      alignBottom={false}
-      noMarginTop={true}
-    />
-  );
-};
-
-export default ChatsDropdownMenu;
diff --git a/src/common/components/chats/chats-messages-view/index.scss b/src/common/components/chats/chats-messages-view/index.scss
deleted file mode 100644
index 92ca90be431..00000000000
--- a/src/common/components/chats/chats-messages-view/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../../../style/vars_mixins";
-
-.chats-messages-view {
-  @include themify(day) {
-    border-bottom: 1px solid $white-three;
-  }
-  @include themify(night) {
-    border-bottom: 1px solid $charcoal-grey;
-  }
-
-  grid-row: span 16;
-  overflow: scroll;
-  overflow-x: hidden;
-  a::after {
-    display: none;
-  }
-
-  &.no-scroll {
-    overflow: hidden;
-  }
-}
diff --git a/src/common/components/chats/utils/upload-chat-public-key.ts b/src/common/components/chats/utils/upload-chat-public-key.ts
deleted file mode 100644
index 5fe18c12a9c..00000000000
--- a/src/common/components/chats/utils/upload-chat-public-key.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getAccountFull } from "../../../api/hive";
-import { updateProfile } from "../../../api/operations";
-import { ActiveUser } from "../../../store/active-user/types";
-
-export const uploadChatPublicKey = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
-  const response = await getAccountFull(activeUser?.username!);
-
-  const { posting_json_metadata } = response;
-
-  const newProfile = {
-    nsKey: noStrPubKey
-  };
-
-  if (!response || !response.posting_json_metadata) {
-    const newPostingData = {
-      posting_json_metadata: JSON.stringify({ profile: {} })
-    };
-    const profile = JSON.parse(newPostingData.posting_json_metadata)?.profile;
-    const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-    return updatedProfile;
-  }
-
-  const profile = JSON.parse(posting_json_metadata!)?.profile;
-  const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-  return updatedProfile;
-};
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index a380e6bac79..47fba56af53 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -13,7 +13,7 @@ import { setProxyBase } from "@ecency/render-helper";
 import BaseComponent from "../base";
 import SubscriptionBtn from "../subscription-btn";
 import CommunityPostBtn from "../community-post-btn";
-import JoinCommunityChatBtn from "../chats/join-community-chat-btn";
+import JoinCommunityChatBtn from "../../features/chats/join-community-chat-btn";
 import Tooltip from "../tooltip";
 import ImageUploadDialog from "../image-upload";
 
diff --git a/src/common/components/emoji-picker/index-old.tsx b/src/common/components/emoji-picker/index-old.tsx
index c4f58498bb8..124fd93d84b 100644
--- a/src/common/components/emoji-picker/index-old.tsx
+++ b/src/common/components/emoji-picker/index-old.tsx
@@ -5,7 +5,7 @@ import { _t } from "../../i18n";
 import { getEmojiData } from "../../api/misc";
 import * as ls from "../../util/local-storage";
 import { insertOrReplace } from "../../util/input-util";
-import { EmojiPickerStyleProps } from "../chats/types/chat-types";
+import { EmojiPickerStyleProps } from "../../features/chats/types/chat-types";
 import "./_index-old.scss";
 
 interface Emoji {
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index f0779a55ec6..0db85268759 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -24,7 +24,7 @@ import { usrActivity } from "../../api/private-api";
 import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission } from "../../api/operations";
 import { getRefreshToken } from "../../helper/user-token";
-import { getPrivateKey, getProfileMetaData } from "../../components/chats/utils";
+import { getPrivateKey, getProfileMetaData } from "../../features/chats/utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 import { addAccountAuthority, signBuffer } from "../../helper/keychain";
diff --git a/src/common/components/manage-auth-icon/index.tsx b/src/common/components/manage-auth-icon/index.tsx
index 50b8a1dc723..4fc214c9b9d 100644
--- a/src/common/components/manage-auth-icon/index.tsx
+++ b/src/common/components/manage-auth-icon/index.tsx
@@ -5,7 +5,7 @@ import { PrivateKey, PublicKey } from "@hiveio/dhive";
 import { actionType } from "../manage-authority/types";
 import DropDown, { MenuItem } from "../dropdown";
 
-import { KebabMenu, revokeSvg, copyOutlinSvg, keyOutlineSvg } from "../../img/svg";
+import { copyOutlinSvg, kebabMenuSvg, keyOutlineSvg, revokeSvg } from "../../img/svg";
 import { _t } from "../../i18n";
 import "./index.scss";
 
@@ -79,7 +79,7 @@ const ManageAuthIcon = (props: Props) => {
   const menuConfig = {
     history: props.history,
     label: "",
-    icon: KebabMenu,
+    icon: kebabMenuSvg,
     items: menuItems
   };
 
diff --git a/src/common/components/manage-chat-key/index.tsx b/src/common/components/manage-chat-key/index.tsx
deleted file mode 100644
index 2b0daa7de80..00000000000
--- a/src/common/components/manage-chat-key/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useContext } from "react";
-import { Form } from "react-bootstrap";
-import { _t } from "../../i18n";
-import { History } from "history";
-import { copyContent, expandSideBar } from "../../img/svg";
-import { ChatContext } from "../chats/chat-context-provider";
-import { copyToClipboard } from "../chats/utils";
-import { success } from "../feedback";
-import Tooltip from "../tooltip";
-
-import "./index.scss";
-
-interface Props {
-  history: History;
-}
-
-export default function ManageChatKey(props: Props) {
-  const context = useContext(ChatContext);
-
-  console.log("Props", props.history);
-
-  const { chatPrivKey, windowWidth, setShowSideBar } = context;
-
-  const { history } = props;
-
-  const copyPrivateKey = () => {
-    copyToClipboard(chatPrivKey);
-    success("Key copied into clipboad");
-  };
-
-  return (
-    <>
-      <div className="manage-chat-key">
-        <div className="private-key d-flex">
-          {windowWidth < 768 && history.location.pathname.includes("/chats") && (
-            <div className="expand-icon d-md-none">
-              <p className="expand-svg" onClick={() => setShowSideBar(true)}>
-                {expandSideBar}
-              </p>
-            </div>
-          )}
-          <Form.Group controlId="private-key" style={{ width: "39vw" }}>
-            <Form.Label>{_t("chat.chat-priv-key")}</Form.Label>
-            <div className="d-flex private-key-input">
-              <Form.Control
-                className="chat-priv-key"
-                type="text"
-                readOnly={true}
-                value={chatPrivKey}
-              />
-              <Tooltip content={_t("chat.copy-priv-key")}>
-                <p
-                  className="copy-svg"
-                  onClick={() => {
-                    copyPrivateKey();
-                  }}
-                >
-                  {copyContent}
-                </p>
-              </Tooltip>
-            </div>
-          </Form.Group>
-        </div>
-        {/* <OrDivider /> */}
-      </div>
-    </>
-  );
-}
diff --git a/src/common/components/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
similarity index 100%
rename from src/common/components/chats/chat-context-provider.tsx
rename to src/common/features/chats/chat-context-provider.tsx
diff --git a/src/common/components/chats/chat-input/index.scss b/src/common/features/chats/chat-input/index.scss
similarity index 96%
rename from src/common/components/chats/chat-input/index.scss
rename to src/common/features/chats/chat-input/index.scss
index a93f6b97fd1..896d8fd2441 100644
--- a/src/common/components/chats/chat-input/index.scss
+++ b/src/common/features/chats/chat-input/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chat {
   grid-row: span 1;
diff --git a/src/common/components/chats/chat-input/index.tsx b/src/common/features/chats/chat-input/index.tsx
similarity index 89%
rename from src/common/components/chats/chat-input/index.tsx
rename to src/common/features/chats/chat-input/index.tsx
index 8d60dcc7d6e..8bd4dd7cf7e 100644
--- a/src/common/components/chats/chat-input/index.tsx
+++ b/src/common/features/chats/chat-input/index.tsx
@@ -1,21 +1,18 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Form, FormControl, InputGroup } from "react-bootstrap";
 import axios from "axios";
-
 import { Channel } from "../../../../managers/message-manager-types";
 import { EmojiPickerStyleProps } from "../types";
-
-import ClickAwayListener from "../../clickaway-listener";
-import EmojiPicker from "../../emoji-picker/index-old";
+import ClickAwayListener from "../../../components/clickaway-listener";
+import EmojiPicker from "../../../components/emoji-picker/index-old";
 // import { EmojiPicker } from "../../emoji-picker";
-import GifPicker from "../../gif-picker";
-import { error } from "../../feedback";
-import Tooltip from "../../tooltip";
+import GifPicker from "../../../components/gif-picker";
+import { error } from "../../../components/feedback";
+import Tooltip from "../../../components/tooltip";
 
 import {
+  chatBoxImageSvg,
   emoticonHappyOutlineSvg,
   gifIcon,
-  chatBoxImageSvg,
   messageSendSvg
 } from "../../../img/svg";
 import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
@@ -29,6 +26,9 @@ import { addImage } from "../../../api/private-api";
 
 import "./index.scss";
 import { ChatContext } from "../chat-context-provider";
+import { Form } from "@ui/form";
+import { FormControl, InputGroup } from "@ui/input";
+import { Button } from "@ui/button";
 
 interface Props {
   isCurrentUser: boolean;
@@ -170,11 +170,6 @@ export default function ChatInput(props: Props) {
     }
   };
 
-  const handleMessage = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    setMessage(e.target.value);
-    setIsMessageText(e.target.value.length !== 0);
-  };
-
   return (
     <>
       <div
@@ -275,13 +270,28 @@ export default function ChatInput(props: Props) {
             e.stopPropagation();
             sendMessage();
           }}
-          className="w-100"
+          className="w-full"
         >
-          <InputGroup className="chat-input-group">
-            <Form.Control
+          <InputGroup
+            className="chat-input-group"
+            append={
+              <Button
+                className={classNameObject({
+                  "msg-svg": true,
+                  active: isMessageText || message.length !== 0
+                })}
+                icon={messageSendSvg}
+                onClick={sendMessage}
+              />
+            }
+          >
+            <FormControl
               value={message}
               autoFocus={true}
-              onChange={handleMessage}
+              onChange={(e) => {
+                setMessage(e.target.value);
+                setIsMessageText(e.target.value.length !== 0);
+              }}
               required={true}
               type="text"
               placeholder={_t("chat.start-chat-placeholder")}
@@ -289,15 +299,6 @@ export default function ChatInput(props: Props) {
               className="chat-input"
               disabled={(isCurrentUser && !receiverPubKey) || isActveUserRemoved}
             />
-            <InputGroup.Append
-              className={classNameObject({
-                "msg-svg": true,
-                active: isMessageText || message.length !== 0
-              })}
-              onClick={sendMessage}
-            >
-              {messageSendSvg}
-            </InputGroup.Append>
           </InputGroup>
         </Form>
       </div>
diff --git a/src/common/components/chats/chat-popup/chat-constants.ts b/src/common/features/chats/chat-popup/chat-constants.ts
similarity index 100%
rename from src/common/components/chats/chat-popup/chat-constants.ts
rename to src/common/features/chats/chat-popup/chat-constants.ts
diff --git a/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
new file mode 100644
index 00000000000..f4034a12ec6
--- /dev/null
+++ b/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
@@ -0,0 +1,114 @@
+import React, { useContext, useEffect, useState } from "react";
+import { _t } from "../../../i18n";
+import { Link } from "react-router-dom";
+import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
+import ImportChats from "../import-chats";
+import { Spinner } from "@ui/spinner";
+import { Button } from "@ui/button";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-context-provider";
+import { Channel } from "../../../../managers/message-manager-types";
+import UserAvatar from "../../../components/user-avatar";
+
+interface Props {
+  communityClicked: (v: string) => void;
+  userClicked: (v: string) => void;
+  setReceiverPubKey: (v: string) => void;
+  setShowSearchUser: (v: boolean) => void;
+}
+
+export function ChatPopupDirectMessages({
+  communityClicked,
+  userClicked,
+  setReceiverPubKey,
+  setShowSearchUser
+}: Props) {
+  const { chat } = useMappedStore();
+  const { activeUserKeys, showSpinner } = useContext(ChatContext);
+
+  const [communities, setCommunities] = useState<Channel[]>([]);
+
+  useEffect(() => {
+    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
+    setCommunities(communities);
+  }, [chat.channels, chat.leftChannelsList]);
+
+  return (
+    <>
+      {(chat.directContacts.length !== 0 ||
+        (chat.channels.length !== 0 && communities.length !== 0)) &&
+      !showSpinner &&
+      activeUserKeys?.priv ? (
+        <React.Fragment>
+          {chat.channels.length !== 0 && communities.length !== 0 && (
+            <>
+              <div className="community-header">{_t("chat.communities")}</div>
+              {communities.map((channel) => (
+                <div key={channel.id} className="chat-content">
+                  <Link to={`/created/${channel.communityName}`}>
+                    <div className="user-img">
+                      <span>
+                        <UserAvatar username={channel.communityName!} size="medium" />
+                      </span>
+                    </div>
+                  </Link>
+
+                  <div
+                    className="user-title"
+                    onClick={() => communityClicked(channel.communityName!)}
+                  >
+                    <p className="username">{channel.name}</p>
+                    <p className="last-message">
+                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
+                    </p>
+                  </div>
+                </div>
+              ))}
+              {chat.directContacts.length !== 0 && (
+                <div className="dm-header">{_t("chat.dms")}</div>
+              )}
+            </>
+          )}
+          {chat.directContacts.map((user) => (
+            <div key={user.pubkey} className="chat-content">
+              <Link to={`/@${user.name}`}>
+                <div className="user-img">
+                  <span>
+                    <UserAvatar username={user.name} size="medium" />
+                  </span>
+                </div>
+              </Link>
+
+              <div
+                className="user-title"
+                onClick={() => {
+                  userClicked(user.name);
+                  setReceiverPubKey(user.pubkey);
+                }}
+              >
+                <p className="username">{user.name}</p>
+                <p className="last-message">
+                  {getDirectLastMessage(user.pubkey, chat.directMessages)}
+                </p>
+              </div>
+            </div>
+          ))}
+        </React.Fragment>
+      ) : !activeUserKeys?.priv ? (
+        <ImportChats />
+      ) : showSpinner ? (
+        <div className="no-chat">
+          <Spinner />
+          <p className="mt-3 ml-2">Loading...</p>
+        </div>
+      ) : (
+        <>
+          <p className="no-chat">{_t("chat.no-chat")}</p>
+          <div className="start-chat-btn">
+            <Button onClick={() => setShowSearchUser(true)}>{_t("chat.start-chat")}</Button>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/chat-popup/chat-popup-header.tsx b/src/common/features/chats/chat-popup/chat-popup-header.tsx
new file mode 100644
index 00000000000..f19de84d3c1
--- /dev/null
+++ b/src/common/features/chats/chat-popup/chat-popup-header.tsx
@@ -0,0 +1,150 @@
+import Tooltip from "../../../components/tooltip";
+import { _t } from "../../../i18n";
+import { Button } from "@ui/button";
+import {
+  addMessageSvg,
+  arrowBackSvg,
+  duotoneRefreshSvg,
+  expandArrow,
+  extendedView
+} from "../../../img/svg";
+import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
+import { history } from "../../../store";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import { classNameObject } from "../../../helper/class-name-object";
+import React, { useContext } from "react";
+import UserAvatar from "../../../components/user-avatar";
+import { Community } from "../../../store/communities";
+import { ChatContext } from "../chat-context-provider";
+
+interface Props {
+  currentUser: string;
+  communityName: string;
+  showSearchUser: boolean;
+  expanded: boolean;
+  canSendMessage: boolean;
+  isCommunity: boolean;
+  isCurrentUser: boolean;
+  handleBackArrowSvg: () => void;
+  handleMessageSvgClick: () => void;
+  handleRefreshSvgClick: () => void;
+  handleExtendedView: () => void;
+  setExpanded: (v: boolean) => void;
+  currentCommunity?: Community;
+}
+
+export function ChatPopupHeader({
+  currentUser,
+  communityName,
+  showSearchUser,
+  expanded,
+  canSendMessage,
+  isCommunity,
+  isCurrentUser,
+  handleBackArrowSvg,
+  handleMessageSvgClick,
+  handleRefreshSvgClick,
+  handleExtendedView,
+  setExpanded,
+  currentCommunity
+}: Props) {
+  const { revealPrivKey, activeUserKeys, hasUserJoinedChat, setRevealPrivKey } =
+    useContext(ChatContext);
+
+  return (
+    <div className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2">
+      <div className="flex items-center gap-2">
+        {(currentUser || communityName || showSearchUser || revealPrivKey) && expanded && (
+          <Tooltip content={_t("chat.back")}>
+            <Button
+              size="sm"
+              noPadding={true}
+              appearance="link"
+              onClick={handleBackArrowSvg}
+              icon={arrowBackSvg}
+            />
+          </Tooltip>
+        )}
+        <div className="flex items-center gap-3" onClick={() => setExpanded(!expanded)}>
+          {(currentUser || isCommunity) && (
+            <UserAvatar
+              username={isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""}
+              size="small"
+            />
+          )}
+
+          <div className="text-lg truncate max-w-[180px] font-semibold">
+            {currentUser
+              ? currentUser
+              : isCommunity
+              ? currentCommunity?.title
+              : showSearchUser
+              ? _t("chat.new-message")
+              : revealPrivKey
+              ? _t("chat.manage-chat-key")
+              : _t("chat.messages")}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <Tooltip content={_t("chat.extended-view")}>
+          <Button
+            noPadding={true}
+            size="sm"
+            appearance="link"
+            icon={extendedView}
+            onClick={handleExtendedView}
+          />
+        </Tooltip>
+        {canSendMessage && (
+          <Tooltip content={_t("chat.new-message")}>
+            <Button
+              noPadding={true}
+              size="sm"
+              appearance="link"
+              icon={addMessageSvg}
+              onClick={handleMessageSvgClick}
+            />
+          </Tooltip>
+        )}
+        {hasUserJoinedChat && activeUserKeys?.priv && !revealPrivKey && (
+          <Tooltip content={_t("chat.refresh")}>
+            <Button
+              noPadding={true}
+              size="sm"
+              appearance="link"
+              icon={duotoneRefreshSvg}
+              onClick={handleRefreshSvgClick}
+            />
+          </Tooltip>
+        )}
+        {isCommunity && (
+          <div className="community-menu">
+            <ChatsCommunityDropdownMenu history={history!} username={communityName} />
+          </div>
+        )}
+        {!isCommunity && !isCurrentUser && activeUserKeys?.priv && (
+          <div className="simple-menu" onClick={() => setExpanded(true)}>
+            <ChatsDropdownMenu
+              history={history!}
+              onManageChatKey={() => setRevealPrivKey(!revealPrivKey)}
+            />
+          </div>
+        )}
+        <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+          <Button
+            noPadding={true}
+            size="sm"
+            appearance="link"
+            className={classNameObject({
+              "duration-300": true,
+              "rotate-180": !expanded
+            })}
+            onClick={() => setExpanded(!expanded)}
+            icon={expandArrow}
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/chat-popup/chat-popup-messages-list.tsx
new file mode 100644
index 00000000000..2e5430f5754
--- /dev/null
+++ b/src/common/features/chats/chat-popup/chat-popup-messages-list.tsx
@@ -0,0 +1,69 @@
+import { Link } from "react-router-dom";
+import ChatsProfileBox from "../chats-profile-box";
+import ChatsDirectMessages from "../chats-direct-messages";
+import ChatsChannelMessages from "../chats-channel-messages";
+import { history } from "../../../store";
+import React, { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
+import { Community } from "../../../store/communities";
+import { DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
+
+interface Props {
+  isCurrentUser: boolean;
+  currentUser: string;
+  isCommunity: boolean;
+  communityName: string;
+  currentCommunity?: Community;
+  directMessagesList: DirectMessage[];
+  publicMessages: PublicMessage[];
+}
+
+export function ChatPopupMessagesList({
+  isCommunity,
+  currentUser,
+  isCurrentUser,
+  currentCommunity,
+  communityName,
+  directMessagesList,
+  publicMessages
+}: Props) {
+  const { currentChannel, setCurrentChannel } = useContext(ChatContext);
+
+  return (
+    <div className="chats">
+      {" "}
+      <Link
+        to={
+          isCurrentUser
+            ? `/@${currentUser}`
+            : isCommunity
+            ? `/created/${currentCommunity?.name}`
+            : ""
+        }
+      >
+        <ChatsProfileBox
+          isCommunity={isCommunity}
+          isCurrentUser={isCurrentUser}
+          communityName={communityName}
+          currentUser={currentUser}
+        />
+      </Link>
+      {isCurrentUser ? (
+        <ChatsDirectMessages
+          directMessages={directMessagesList}
+          currentUser={currentUser}
+          isScrollToBottom={false}
+        />
+      ) : (
+        <ChatsChannelMessages
+          history={history!}
+          username={communityName}
+          publicMessages={publicMessages}
+          currentChannel={currentChannel!}
+          isScrollToBottom={false}
+          currentChannelSetter={setCurrentChannel}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/chat-popup/chat-popup-search-user.tsx b/src/common/features/chats/chat-popup/chat-popup-search-user.tsx
new file mode 100644
index 00000000000..df7a16050f9
--- /dev/null
+++ b/src/common/features/chats/chat-popup/chat-popup-search-user.tsx
@@ -0,0 +1,63 @@
+import { FormControl, InputGroup } from "@ui/input";
+import { _t } from "../../../i18n";
+import accountReputation from "../../../helper/account-reputation";
+import React, { useState } from "react";
+import UserAvatar from "../../../components/user-avatar";
+import useDebounce from "react-use/lib/useDebounce";
+import { useSearchUsersQuery } from "../queries";
+import { Spinner } from "@ui/spinner";
+
+interface Props {
+  setCurrentUser: (v: string) => void;
+  setIsCurrentUser: (v: boolean) => void;
+}
+
+export function ChatPopupSearchUser({ setCurrentUser, setIsCurrentUser }: Props) {
+  const [search, setSearch] = useState("");
+  const { data, isLoading, refetch } = useSearchUsersQuery(search);
+
+  useDebounce(() => refetch(), 500, [search]);
+
+  return (
+    <>
+      <div className="p-4">
+        <div className="w-full mb-3">
+          <InputGroup prepend={isLoading ? <Spinner className="w-3.5 h-3.5" /> : "@"}>
+            <FormControl
+              type="text"
+              placeholder={_t("chat.search")}
+              value={search}
+              autoFocus={true}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </InputGroup>
+        </div>
+      </div>
+      <div className="user-search-suggestion-list">
+        {data.map((user, index) => {
+          return (
+            <div
+              key={index}
+              className="search-content"
+              onClick={() => {
+                setCurrentUser(user.account);
+                setIsCurrentUser(true);
+              }}
+            >
+              <div className="search-user-img">
+                <span>
+                  <UserAvatar username={user.account} size="medium" />
+                </span>
+              </div>
+
+              <div className="search-user-title">
+                <p className="search-username">{user.account}</p>
+                <p className="search-reputation">({accountReputation(user.reputation)})</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/components/chats/chat-popup/index.scss b/src/common/features/chats/chat-popup/index.scss
similarity index 61%
rename from src/common/components/chats/chat-popup/index.scss
rename to src/common/features/chats/chat-popup/index.scss
index 137337d01f0..00333fbfd3d 100644
--- a/src/common/components/chats/chat-popup/index.scss
+++ b/src/common/features/chats/chat-popup/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chatbox-container {
   position: fixed;
@@ -15,11 +15,11 @@
 
   @include themify(day) {
     box-shadow: rgb(101 119 134 / 20%) 0px 0px 15px, rgb(101 119 134 / 15%) 0px 0px 3px 1px;
-    background: $white;
+    @apply bg-white;
   }
 
   @include themify(night) {
-    background: $dark;
+    @apply bg-dark-default;
     box-shadow: rgb(255 255 255 / 20%) 0px 0px 15px, rgb(255 255 255 / 15%) 0px 0px 3px 1px;
   }
 
@@ -27,133 +27,6 @@
     height: 530px;
   }
 
-  .chat-header {
-    border-bottom: 1px solid $white-four;
-    padding-left: 10px;
-    padding-right: 4px;
-    cursor: pointer;
-    height: 53px;
-    display: flex;
-    justify-content: space-between;
-    @include themify(day) {
-      border-bottom: 1px solid $white-four;
-    }
-
-    @include themify(night) {
-      border-bottom: 1px solid $dark-indigo;
-    }
-
-    .back-arrow-image {
-      justify-content: center;
-      display: flex;
-      align-items: center;
-      .back-arrow-svg {
-        border-radius: 50%;
-        padding: 6px;
-        margin-top: 6px;
-      }
-    }
-
-    .back-arrow-svg:hover {
-      background: rgba(29, 155, 240, 0.1);
-    }
-    .message-header-title {
-      display: flex;
-      width: 288px;
-      margin-left: 0.1rem;
-      .user-icon {
-        margin: 17px 11px 0 0;
-      }
-    }
-
-    .message-header-content {
-      margin: 1rem 0;
-      font-weight: 700;
-      line-height: 24px;
-      font-size: 21px;
-      font-family: $font-family-sans-serif;
-
-      max-width: 185px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-bottom: 0;
-
-      @include themify(day) {
-        color: $charcoal-grey;
-      }
-
-      @include themify(night) {
-        color: $white-two;
-      }
-    }
-
-    .actionable-imgs {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 1.1rem;
-      .message-image,
-      .extended-image {
-        margin-top: 2px;
-
-        .message-svg,
-        .extended-svg {
-          width: 35px;
-          height: 35px;
-          justify-content: center;
-          text-align: center;
-          border-radius: 50%;
-          padding-top: 10px;
-          display: flex;
-
-          svg {
-            height: 20px;
-            width: 20px;
-          }
-        }
-        .extended-svg {
-          padding-top: 8px;
-        }
-        .message-svg:hover,
-        .extended-svg:hover {
-          background: rgba(29, 155, 240, 0.1);
-        }
-      }
-      .arrow-image {
-        margin: 1.5 0.3rem 0 0;
-        .arrow-svg {
-          display: flex;
-          justify-content: center;
-          text-align: center;
-          padding-top: 3px;
-          width: 35px;
-          height: 35px;
-          border-radius: 50%;
-          margin-bottom: 14px;
-        }
-
-        .arrow-svg:hover {
-          background: rgba(29, 155, 240, 0.1);
-        }
-      }
-      .community-menu,
-      .simple-menu {
-        border: none;
-        margin-bottom: 13px;
-        svg {
-          @include themify(day) {
-            color: $charcoal-grey;
-          }
-
-          @include themify(night) {
-            color: $white-two;
-          }
-        }
-      }
-    }
-  }
-
   .chat-body {
     position: relative;
     height: 470px;
@@ -173,8 +46,10 @@
       padding-bottom: 10px;
       height: 412px;
       margin-bottom: 8px;
+      @apply border-b;
+
       @include themify(day) {
-        border-bottom: 1px solid $white-three;
+        @apply border-light-300;
       }
       @include themify(night) {
         border-bottom: 1px solid #172b44;
@@ -184,8 +59,10 @@
     &.community {
       height: 412px;
       margin-bottom: 8px;
+      @apply border-b;
+
       @include themify(day) {
-        border-bottom: 1px solid $white-three;
+        @apply border-light-300;
       }
       @include themify(night) {
         border-bottom: 1px solid #172b44;
@@ -201,21 +78,20 @@
       justify-content: center;
       align-items: center;
     }
+
     .no-chat {
       display: flex;
       align-items: center;
       justify-content: center;
       margin-top: 20%;
     }
+
     .start-chat-btn {
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    .user-search-bar {
-      margin: 12px;
-    }
     .user-search-suggestion-list {
       .search-content {
         padding: 0.7rem;
@@ -234,21 +110,24 @@
         .search-user-title {
           display: flex;
           margin-left: 1rem;
+
           .search-username {
             margin: 7px 0 0 0;
             font-size: 20px;
             font-weight: 700;
           }
+
           .search-reputation {
             margin: 9px 0 0 6px;
           }
         }
+
         &:hover {
           @include themify(day) {
-            background: $white-four;
+            @apply bg-light-400;
           }
           @include themify(night) {
-            background: $charcoal-grey;
+            @apply bg-gray-charcoal;
           }
         }
       }
@@ -262,6 +141,7 @@
       .user-img {
         padding: 13px 16px;
       }
+
       .user-title {
         padding-top: 6px;
         width: -webkit-fill-available;
@@ -269,17 +149,18 @@
         .username {
           padding-top: 8px;
           @include themify(day) {
-            color: $charcoal-grey;
+            @apply text-gray-charcoal;
           }
 
           @include themify(night) {
-            color: $white-two;
+            @apply text-light-200;
           }
 
           font-size: 18px;
           font-weight: 700;
           margin-bottom: 0.2rem !important;
         }
+
         .last-message {
           max-width: 320px;
           white-space: nowrap;
@@ -296,7 +177,7 @@
         background: #eeeeee;
       }
       @include themify(night) {
-        background: $gunmetal;
+        @apply bg-gunmetal;
       }
     }
 
@@ -311,9 +192,10 @@
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      @apply border-b;
       @include themify(day) {
         background: #e4e6eb;
-        border: 1px solid $white-five;
+        @apply border-light-400;
       }
       @include themify(night) {
         background: #0f223a;
@@ -321,10 +203,10 @@
 
       svg {
         @include themify(day) {
-          color: $dark-sky-blue;
+          @apply text-blue-dark-sky;
         }
         @include themify(night) {
-          color: $white;
+          @apply text-white;
         }
 
         width: 20px;
@@ -360,28 +242,35 @@
     display: grid;
     grid-template-rows: repeat(100, 1fr);
     grid-template-columns: repeat(1, 1fr);
+
     .chat-header {
       width: 100vw;
       grid-row: span 5;
     }
+
     .back-arrow-svg {
       padding: 0;
     }
+
     .message-header-content {
       max-width: 40vw !important;
     }
+
     .sender-message-content,
     .receiver-message-content {
       max-width: 75vw !important;
     }
+
     &.expanded {
       height: 100vh;
     }
+
     .message-header-title {
       width: 100vw;
-      margin-right: 0.3rem;
       margin: 0;
+      margin-right: 0.3rem;
     }
+
     .chat-body {
       grid-row: span 95;
       height: 100%;
@@ -397,6 +286,7 @@
         }
       }
     }
+
     .chat {
       grid-row: span 5;
     }
diff --git a/src/common/features/chats/chat-popup/index.tsx b/src/common/features/chats/chat-popup/index.tsx
new file mode 100644
index 00000000000..b9581fe24ae
--- /dev/null
+++ b/src/common/features/chats/chat-popup/index.tsx
@@ -0,0 +1,490 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "react-router";
+import { history } from "../../../store";
+import { Community } from "../../../store/communities";
+import {
+  ChannelUpdate,
+  DirectMessage,
+  PublicMessage
+} from "../../../../managers/message-manager-types";
+import Tooltip from "../../../components/tooltip";
+import LinearProgress from "../../../components/linear-progress";
+import { setNostrkeys } from "../../../../managers/message-manager";
+import ManageChatKey from "../manage-chat-key";
+import ChatInput from "../chat-input";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../../img/svg";
+import { EmojiPickerStyle, GifPickerStyle } from "./chat-constants";
+import { _t } from "../../../i18n";
+import { usePrevious } from "../../../util/use-previous";
+import { getCommunity } from "../../../api/bridge";
+import "./index.scss";
+import { fetchCommunityMessages, getPrivateKey, getUserChatPublicKey } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-context-provider";
+import { useMount } from "react-use";
+import { Spinner } from "@ui/spinner";
+import { Button } from "@ui/button";
+import { classNameObject } from "../../../helper/class-name-object";
+import { ChatPopupHeader } from "./chat-popup-header";
+import { ChatPopupMessagesList } from "./chat-popup-messages-list";
+import { ChatPopupSearchUser } from "./chat-popup-search-user";
+import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
+
+export const ChatPopUp = () => {
+  const { activeUser, global, chat, resetChat } = useMappedStore();
+
+  const {
+    messageServiceInstance,
+    revealPrivKey,
+    activeUserKeys,
+    showSpinner,
+    hasUserJoinedChat,
+    currentChannel,
+    windowWidth,
+    setCurrentChannel,
+    setRevealPrivKey,
+    setShowSpinner,
+    joinChat
+  } = useContext(ChatContext);
+
+  const routerLocation = useLocation();
+  const prevActiveUser = usePrevious(activeUser);
+  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
+
+  const [expanded, setExpanded] = useState(false);
+  const [currentUser, setCurrentUser] = useState("");
+  const [isCurrentUser, setIsCurrentUser] = useState(false);
+  const [isScrollToTop, setIsScrollToTop] = useState(false);
+  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const [showSearchUser, setShowSearchUser] = useState(false);
+  const [inProgress, setInProgress] = useState(false);
+  const [show, setShow] = useState(false);
+  const [receiverPubKey, setReceiverPubKey] = useState("");
+  const [isSpinner, setIsSpinner] = useState(false);
+  const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
+  const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
+  const [isCommunity, setIsCommunity] = useState(false);
+  const [communityName, setCommunityName] = useState("");
+  const [currentCommunity, setCurrentCommunity] = useState<Community>();
+  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
+  const [isTop, setIsTop] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [isChatPage, setIsChatPage] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const canSendMessage = useMemo(
+    () =>
+      !currentUser && hasUserJoinedChat && !!activeUserKeys?.priv && !isCommunity && !revealPrivKey,
+    [currentUser, hasUserJoinedChat, activeUserKeys, isCommunity, revealPrivKey]
+  );
+
+  useMount(() => {
+    // deleteChatPublicKey(activeUser);
+    setShow(!!activeUser?.username && !isChatPage);
+  });
+
+  useEffect(() => {
+    if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
+      setIsCommunity(false);
+      setCommunityName("");
+    }
+  }, [chat.leftChannelsList]);
+
+  useEffect(() => {
+    handleRouterChange();
+  }, [routerLocation]);
+
+  useEffect(() => {
+    if (isChatPage) {
+      setShow(false);
+    }
+  }, [isChatPage]);
+
+  useEffect(() => {
+    const updated: ChannelUpdate = chat.updatedChannel
+      .filter((x) => x.channelId === currentChannel?.id!)
+      .sort((a, b) => b.created - a.created)[0];
+    if (currentChannel && updated) {
+      const publicMessages: PublicMessage[] = fetchCommunityMessages(
+        chat.publicMessages,
+        currentChannel,
+        updated?.hiddenMessageIds
+      );
+      const messages = publicMessages.sort((a, b) => a.created - b.created);
+      setPublicMessages(messages);
+      const channel = {
+        name: updated.name,
+        about: updated.about,
+        picture: updated.picture,
+        communityName: updated.communityName,
+        communityModerators: updated.communityModerators,
+        id: updated.channelId,
+        creator: updated.creator,
+        created: currentChannel?.created!,
+        hiddenMessageIds: updated.hiddenMessageIds,
+        removedUserIds: updated.removedUserIds
+      };
+      setCurrentChannel(channel);
+    }
+  }, [chat.updatedChannel]);
+
+  useEffect(() => {
+    if (isTop) {
+      fetchPrevMessages();
+    }
+  }, [isTop]);
+
+  useEffect(() => {
+    if (messageServiceInstance) {
+      setIsSpinner(false);
+    }
+  }, [messageServiceInstance]);
+
+  useEffect(() => {
+    const msgsList = fetchDirectMessages(receiverPubKey!);
+    const messages = msgsList.sort((a, b) => a.created - b.created);
+    setDirectMessagesList(messages);
+  }, [chat.directMessages]);
+
+  useEffect(() => {
+    if (prevActiveUser?.username !== activeUser?.username) {
+      setIsCommunity(false);
+      setIsCurrentUser(false);
+      setCurrentUser("");
+      setCommunityName("");
+    }
+  }, [global.theme, activeUser]);
+
+  useEffect(() => {
+    if (directMessagesList.length !== 0 && !isScrolled) {
+      scrollerClicked();
+    }
+    if (!isScrolled && publicMessages.length !== 0 && isCommunity) {
+      scrollerClicked();
+    }
+  }, [directMessagesList, publicMessages]);
+
+  useEffect(() => {
+    if (currentChannel && isCommunity) {
+      messageServiceInstance?.fetchChannel(currentChannel.id);
+      const publicMessages: PublicMessage[] = fetchCommunityMessages(
+        chat.publicMessages,
+        currentChannel,
+        currentChannel.hiddenMessageIds
+      );
+      const messages = publicMessages.sort((a, b) => a.created - b.created);
+      setPublicMessages(messages);
+    }
+  }, [currentChannel, isCommunity, chat.publicMessages]);
+
+  useEffect(() => {
+    if ((isCurrentUser || isCommunity) && show) {
+      scrollerClicked();
+    }
+  }, [isCurrentUser, isCommunity, show]);
+
+  useEffect(() => {
+    const msgsList = fetchDirectMessages(receiverPubKey!);
+    const messages = msgsList.sort((a, b) => a.created - b.created);
+    setDirectMessagesList(messages);
+  }, [activeUser]);
+
+  useEffect(() => {
+    if (isCommunity && show) {
+      fetchCommunity();
+
+      scrollerClicked();
+      fetchCurrentChannel(communityName);
+    }
+  }, [isCommunity, communityName, show]);
+
+  useEffect(() => {
+    if (currentUser) {
+      const isCurrentUserFound = chat.directContacts.find(
+        (contact) => contact.name === currentUser
+      );
+      if (isCurrentUserFound) {
+        setReceiverPubKey(isCurrentUserFound.pubkey);
+        setIsCurrentUserJoined(true);
+      } else {
+        setInProgress(true);
+        fetchCurrentUserData();
+      }
+
+      const peer = chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
+      const msgsList = fetchDirectMessages(peer!);
+      const messages = msgsList.sort((a, b) => a.created - b.created);
+      setDirectMessagesList(messages);
+      if (!messageServiceInstance) {
+        setNostrkeys(activeUserKeys!);
+      }
+    } else {
+      setIsCurrentUserJoined(true);
+      setInProgress(false);
+    }
+  }, [currentUser]);
+
+  const handleRouterChange = () => {
+    if (routerLocation.pathname.match("/chats")) {
+      setShow(false);
+      setIsChatPage(true);
+    } else {
+      setShow(!!activeUser?.username);
+    }
+  };
+
+  const fetchCommunity = async () => {
+    const community = await getCommunity(communityName, activeUser?.username);
+    setCurrentCommunity(community!);
+  };
+
+  const fetchCurrentChannel = (communityName: string) => {
+    const channel = chat.channels.find((channel) => channel.communityName === communityName);
+    if (channel) {
+      const updated: ChannelUpdate = chat.updatedChannel
+        .filter((x) => x.channelId === channel.id)
+        .sort((a, b) => b.created - a.created)[0];
+      if (updated) {
+        const channel = {
+          name: updated.name,
+          about: updated.about,
+          picture: updated.picture,
+          communityName: updated.communityName,
+          communityModerators: updated.communityModerators,
+          id: updated.channelId,
+          creator: updated.creator,
+          created: currentChannel?.created!,
+          hiddenMessageIds: updated.hiddenMessageIds,
+          removedUserIds: updated.removedUserIds
+        };
+        setCurrentChannel(channel);
+      } else {
+        setCurrentChannel(channel);
+      }
+    }
+  };
+
+  const fetchDirectMessages = (peer: string) => {
+    for (const item of chat.directMessages) {
+      if (item.peer === peer) {
+        return Object.values(item.chat);
+      }
+    }
+    return [];
+  };
+
+  const fetchCurrentUserData = async () => {
+    const nsKey = await getUserChatPublicKey(currentUser);
+    if (nsKey) {
+      setReceiverPubKey(nsKey);
+    } else {
+      setReceiverPubKey("");
+    }
+    setIsCurrentUserJoined(!!nsKey);
+    setInProgress(false);
+  };
+
+  const userClicked = (username: string) => {
+    setIsCurrentUser(true);
+    setCurrentUser(username);
+  };
+
+  const fetchPrevMessages = () => {
+    if (!hasMore || inProgress) return;
+
+    setInProgress(true);
+    messageServiceInstance
+      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
+      .then((num) => {
+        if (num < 25) {
+          setHasMore(false);
+        }
+      })
+      .finally(() => {
+        setInProgress(false);
+        setIsTop(false);
+      });
+  };
+
+  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    var element = event.currentTarget;
+    let srollHeight: number = (element.scrollHeight / 100) * 25;
+    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
+    const isScrollToBottom =
+      (isCurrentUser || isCommunity) &&
+      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
+    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
+    setIsScrolled(isScrolled);
+    setIsScrollToTop(isScrollToTop);
+    setIsScrollToBottom(isScrollToBottom);
+    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
+    if (isCommunity && scrollerTop) {
+      setIsTop(true);
+    } else {
+      setIsTop(false);
+    }
+  };
+
+  const scrollerClicked = () => {
+    chatBodyDivRef?.current?.scroll({
+      top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
+      behavior: "auto"
+    });
+  };
+
+  const handleMessageSvgClick = () => {
+    setShowSearchUser(!showSearchUser);
+    setExpanded(true);
+  };
+
+  const handleRefreshSvgClick = () => {
+    setExpanded(true);
+    resetChat();
+    handleBackArrowSvg();
+    if (getPrivateKey(activeUser?.username!)) {
+      setShowSpinner(true);
+      const keys = {
+        pub: activeUserKeys?.pub!,
+        priv: getPrivateKey(activeUser?.username!)
+      };
+      setNostrkeys(keys);
+      if (isCommunity && communityName) {
+        fetchCurrentChannel(communityName);
+      }
+    }
+  };
+
+  const handleJoinChat = async () => {
+    setIsSpinner(true);
+    joinChat();
+  };
+
+  const communityClicked = (community: string) => {
+    setIsCommunity(true);
+    setCommunityName(community);
+  };
+
+  const handleBackArrowSvg = () => {
+    setCurrentUser("");
+    setIsCurrentUser(false);
+    setCommunityName("");
+    setIsCommunity(false);
+    setShowSearchUser(false);
+    setHasMore(true);
+    setRevealPrivKey(false);
+  };
+
+  const handleExtendedView = () => {
+    if (!isCurrentUser && !isCommunity) {
+      history?.push("/chats");
+    } else if (isCurrentUser) {
+      history?.push(`/chats/@${currentUser}`);
+    } else {
+      history?.push(`/chats/${communityName}`);
+    }
+  };
+
+  return (
+    <>
+      {show && (
+        <div
+          className={classNameObject({
+            "chatbox-container": true,
+            expanded,
+            smallScreen: windowWidth <= 666
+          })}
+        >
+          <ChatPopupHeader
+            currentUser={currentUser}
+            setExpanded={setExpanded}
+            canSendMessage={canSendMessage}
+            expanded={expanded}
+            isCurrentUser={isCurrentUser}
+            communityName={communityName}
+            isCommunity={isCommunity}
+            handleBackArrowSvg={handleBackArrowSvg}
+            handleExtendedView={handleExtendedView}
+            handleMessageSvgClick={handleMessageSvgClick}
+            handleRefreshSvgClick={handleRefreshSvgClick}
+            showSearchUser={showSearchUser}
+            currentCommunity={currentCommunity}
+          />
+          {inProgress && <LinearProgress />}
+          <div
+            className={`chat-body ${
+              currentUser ? "current-user" : isCommunity ? "community" : ""
+            } ${!hasUserJoinedChat ? "join-chat" : isTop && hasMore ? "no-scroll" : ""}`}
+            ref={chatBodyDivRef}
+            onScroll={handleScroll}
+          >
+            {hasUserJoinedChat && !revealPrivKey ? (
+              <>
+                {currentUser.length !== 0 || communityName.length !== 0 ? (
+                  <ChatPopupMessagesList
+                    isCurrentUser={isCurrentUser}
+                    currentUser={currentUser}
+                    isCommunity={isCommunity}
+                    communityName={communityName}
+                    directMessagesList={directMessagesList}
+                    publicMessages={publicMessages}
+                  />
+                ) : showSearchUser ? (
+                  <ChatPopupSearchUser
+                    setCurrentUser={setCurrentUser}
+                    setIsCurrentUser={setIsCurrentUser}
+                  />
+                ) : (
+                  <ChatPopupDirectMessages
+                    communityClicked={communityClicked}
+                    setReceiverPubKey={setReceiverPubKey}
+                    setShowSearchUser={setShowSearchUser}
+                    userClicked={userClicked}
+                  />
+                )}
+              </>
+            ) : revealPrivKey ? (
+              <ManageChatKey history={history!} />
+            ) : (
+              <Button
+                className="join-chat-btn"
+                onClick={() => handleJoinChat()}
+                icon={isSpinner ? <Spinner style={{ marginRight: "6px" }} /> : undefined}
+                iconPlacement="left"
+              >
+                {_t("chat.join-chat")}
+              </Button>
+            )}
+
+            {((isScrollToTop && !isCurrentUser) ||
+              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
+              <Tooltip
+                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
+              >
+                <div
+                  className="scroller"
+                  style={{
+                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
+                  }}
+                  onClick={scrollerClicked}
+                >
+                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
+                </div>
+              </Tooltip>
+            )}
+          </div>
+          {(isCurrentUser || isCommunity) && (
+            <ChatInput
+              isCurrentUser={isCurrentUser}
+              isCommunity={isCommunity}
+              currentUser={currentUser}
+              currentChannel={currentChannel!}
+              isCurrentUserJoined={isCurrentUserJoined}
+              emojiPickerStyles={EmojiPickerStyle}
+              gifPickerStyle={GifPickerStyle}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/common/components/chats/chats-channel-messages/index.scss b/src/common/features/chats/chats-channel-messages/index.scss
similarity index 91%
rename from src/common/components/chats/chats-channel-messages/index.scss
rename to src/common/features/chats/chats-channel-messages/index.scss
index d0a7ab77edf..b5d08a1da9a 100644
--- a/src/common/components/chats/chats-channel-messages/index.scss
+++ b/src/common/features/chats/chats-channel-messages/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .channel-messages {
   padding-bottom: 15px;
@@ -62,7 +62,7 @@
               color: rgb(138, 141, 145);
             }
             @include themify(night) {
-              color: $charcoal-grey;
+              @apply text-gray-charcoal;
             }
 
             font-size: 10px;
@@ -103,7 +103,7 @@
                 color: rgb(138, 141, 145);
               }
               @include themify(night) {
-                color: $white-three;
+                @apply text-light-300;
               }
             }
           }
@@ -138,10 +138,10 @@
         cursor: pointer;
         svg {
           @include themify(day) {
-            fill: $light-black;
+            @apply fill-gray-600;
           }
           @include themify(night) {
-            fill: $white;
+            @apply fill-white;
           }
         }
       }
@@ -151,7 +151,7 @@
         svg {
           width: 16px;
           height: 16px;
-          fill: $red !important;
+          @apply fill-red;
         }
       }
 
@@ -170,11 +170,10 @@
 
         @include themify(day) {
           background-color: rgb(0, 132, 255);
-          color: $white;
+          @apply text-white;
         }
         @include themify(night) {
-          background-color: $charcoal-grey;
-          color: $white;
+          @apply text-white bg-gray-charcoal;
         }
 
         &.gif {
@@ -210,24 +209,19 @@
         .sender-message-content {
           max-width: 100%;
           margin-bottom: 0;
-          color: $charcoal-grey;
+          @apply text-gray-charcoal;
           font-size: 16px;
           font-weight: 400;
           padding: 8px 8px 8px 12px;
+          @apply text-white;
           a {
             text-decoration: underline;
             color: white;
           }
-          @include themify(day) {
-            color: $white;
-          }
-          @include themify(night) {
-            color: $white;
-          }
         }
 
         .sender-message-time {
-          color: $white;
+          @apply text-white;
           margin-bottom: 3px;
           font-size: 10px;
           display: flex;
diff --git a/src/common/components/chats/chats-channel-messages/index.tsx b/src/common/features/chats/chats-channel-messages/index.tsx
similarity index 90%
rename from src/common/components/chats/chats-channel-messages/index.tsx
rename to src/common/features/chats/chats-channel-messages/index.tsx
index d05d642c000..2879349f771 100644
--- a/src/common/components/chats/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/chats-channel-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, RefObject, useEffect, useContext } from "react";
+import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
 import { useMount } from "react-use";
 import mediumZoom, { Zoom } from "medium-zoom";
 import {
@@ -10,36 +10,32 @@ import {
 import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import {
-  Button,
-  Form,
-  FormControl,
-  InputGroup,
-  OverlayTrigger,
-  Popover,
-  Spinner
-} from "react-bootstrap";
-import UserAvatar from "../../user-avatar";
-import FollowControls from "../../follow-controls";
+import UserAvatar from "../../../components/user-avatar";
+import FollowControls from "../../../components/follow-controls";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
-import Tooltip from "../../tooltip";
+import Tooltip from "../../../components/tooltip";
 import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../img/svg";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { error } from "../../feedback";
+import { error } from "../../../components/feedback";
 import { CHATPAGE, COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
 import { Theme } from "../../../store/global/types";
 import {
+  checkContiguousMessage,
+  formatMessageDate,
+  formatMessageDateAndDay,
   formatMessageTime,
   isMessageGif,
-  isMessageImage,
-  formatMessageDate,
-  checkContiguousMessage,
-  formatMessageDateAndDay
+  isMessageImage
 } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
 import "./index.scss";
+import { Popover, PopoverContent } from "@ui/popover";
+import { Button } from "@ui/button";
+import { Form } from "@ui/form";
+import { FormControl } from "@ui/input";
+import { Spinner } from "@ui/spinner";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -175,10 +171,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const handleDMChange = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    setDmMessage(e.target.value);
-  };
-
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
     zoom = mediumZoom(elements);
@@ -316,8 +308,8 @@ export default function ChatsChannelMessages(props: Props) {
             const name = getProfileName(pMsg.creator, chat.profiles);
 
             const popover = (
-              <Popover id={`profile-popover`} placement="right" className="profile-popover">
-                <Popover.Content>
+              <Popover id={`profile-popover`} className="profile-popover">
+                <PopoverContent>
                   <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
                     <div className="profile-box-content">
                       <div className="profile-box-logo d-flex justify-content-center">
@@ -351,7 +343,6 @@ export default function ChatsChannelMessages(props: Props) {
                               {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
                                 <>
                                   <Button
-                                    variant="primary"
                                     onClick={() => {
                                       setStep(3);
                                       setClickedMessage("");
@@ -363,7 +354,6 @@ export default function ChatsChannelMessages(props: Props) {
                               ) : (
                                 <>
                                   <Button
-                                    variant="primary"
                                     onClick={() => {
                                       setStep(2);
                                       setClickedMessage("");
@@ -384,22 +374,19 @@ export default function ChatsChannelMessages(props: Props) {
                           sendDM(name!, pMsg.creator);
                         }}
                       >
-                        <InputGroup className="dm-input-group">
-                          <Form.Control
-                            value={dmMessage}
-                            autoFocus={true}
-                            onChange={handleDMChange}
-                            required={true}
-                            type="text"
-                            placeholder={"Send direct message"}
-                            autoComplete="off"
-                            className="dm-chat-input"
-                          />
-                        </InputGroup>
+                        <FormControl
+                          value={dmMessage}
+                          autoFocus={true}
+                          onChange={(e) => setDmMessage(e.target.value)}
+                          required={true}
+                          type="text"
+                          placeholder={"Send direct message"}
+                          autoComplete="off"
+                        />
                       </Form>
                     </div>
                   </div>
-                </Popover.Content>
+                </PopoverContent>
               </Popover>
             );
 
@@ -422,18 +409,18 @@ export default function ChatsChannelMessages(props: Props) {
                   >
                     {!isSameUserMessage || (isSameUserMessage && dayAndMonth) ? (
                       <div className="community-user-img">
-                        <OverlayTrigger
-                          trigger="click"
-                          placement="right"
-                          show={clickedMessage === pMsg.id}
-                          overlay={popover}
-                          delay={1000}
-                          onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}
-                        >
-                          <span>
-                            <UserAvatar username={name!} size="medium" />
-                          </span>
-                        </OverlayTrigger>
+                        {/*<OverlayTrigger*/}
+                        {/*  trigger="click"*/}
+                        {/*  placement="right"*/}
+                        {/*  show={clickedMessage === pMsg.id}*/}
+                        {/*  overlay={popover}*/}
+                        {/*  delay={1000}*/}
+                        {/*  onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}*/}
+                        {/*>*/}
+                        {/*  <span>*/}
+                        {/*    <UserAvatar username={name!} size="medium" />*/}
+                        {/*  </span>*/}
+                        {/*</OverlayTrigger>*/}
                       </div>
                     ) : (
                       <></>
@@ -568,7 +555,7 @@ export default function ChatsChannelMessages(props: Props) {
 
                       {pMsg.sent === 0 && (
                         <span style={{ margin: "10px 0 0 5px" }}>
-                          <Spinner animation="border" variant="primary" size="sm" />
+                          <Spinner />
                         </span>
                       )}
                       {pMsg.sent === 2 && (
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.scss b/src/common/features/chats/chats-community-dropdown-menu/index.scss
similarity index 87%
rename from src/common/components/chats/chats-community-dropdown-menu/index.scss
rename to src/common/features/chats/chats-community-dropdown-menu/index.scss
index c428319e091..ec44864509c 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.scss
+++ b/src/common/features/chats/chats-community-dropdown-menu/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chats-dialog {
   .chat-modals-body {
diff --git a/src/common/components/chats/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/chats-community-dropdown-menu/index.tsx
similarity index 86%
rename from src/common/components/chats/chats-community-dropdown-menu/index.tsx
rename to src/common/features/chats/chats-community-dropdown-menu/index.tsx
index 36548d45930..07d42ceb806 100644
--- a/src/common/components/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/chats-community-dropdown-menu/index.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../dropdown";
+import DropDown, { MenuItem } from "../../../components/dropdown";
 import useDebounce from "react-use/lib/useDebounce";
 
-import { KebabMenu, linkSvg, chatLeaveSvg, editSVG, removeUserSvg } from "../../../img/svg";
+import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../img/svg";
 import { _t } from "../../../i18n";
 import {
   ADDROLE,
@@ -15,16 +15,18 @@ import {
 } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { Channel, communityModerator } from "../../../../managers/message-manager-types";
-import { error, success } from "../../feedback";
-import { Button, Form, Modal, Row, Col, InputGroup, FormControl } from "react-bootstrap";
-import LinearProgress from "../../linear-progress";
+import { error, success } from "../../../components/feedback";
+import LinearProgress from "../../../components/linear-progress";
 import { ROLES } from "../../../store/communities";
-import UserAvatar from "../../user-avatar";
-import { copyToClipboard, getProfileMetaData } from "../utils";
+import UserAvatar from "../../../components/user-avatar";
+import { copyToClipboard } from "../utils";
 import { ChatContext } from "../chat-context-provider";
 
 import "./index.scss";
 import { getAccountFull } from "../../../api/hive";
+import { Button } from "@ui/button";
+import { FormControl, InputGroup } from "@ui/input";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 
 interface Props {
   history: History;
@@ -68,12 +70,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     setKeyDialog(!keyDialog);
   };
 
-  const userChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    const { value: user } = e.target;
-    setUser(user);
-    setInProgress(true);
-  };
-
   const getCommunityAdmins = () => {
     const communityAdminRoles = ["owner", "admin"];
     const communityAdmins = currentChannel?.communityModerators?.filter((user) =>
@@ -90,11 +86,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     setBlockedUsers(blockedUsers);
   };
 
-  const roleChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
-    const { value: role } = e.target;
-    setRole(role);
-  };
-
   const handleBlockedUsers = () => {
     setKeyDialog(true);
     setStep(3);
@@ -220,7 +211,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const communityMenuConfig = {
     history: props.history,
     label: "",
-    icon: KebabMenu,
+    icon: kebabMenuSvg,
     items: communityMenuItems
   };
 
@@ -229,17 +220,14 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       <>
         <div className="join-community-dialog-header border-bottom">
           <div className="join-community-dialog-titles">
-            <h2 className="join-community-main-title">Confirmation</h2>
+            <h2 className="join-community-main-title">{_t("communities-create.confirmation")}</h2>
           </div>
         </div>
-        <div className="join-community-dialog-body" style={{ fontSize: "18px", marginTop: "12px" }}>
-          Are you sure?
-        </div>
-        <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+        <div className="text-lg mt-4">{_t("confirm.title")}</div>
+        <p className="text-right mt-8">
           <Button
-            variant="outline-primary"
-            className="close-btn"
-            style={{ marginRight: "20px" }}
+            outline={true}
+            className="mr-6"
             onClick={() => {
               setStep(0);
               setKeyDialog(false);
@@ -248,7 +236,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
             {_t("chat.close")}
           </Button>
           <Button
-            variant="outline-primary"
+            outline={true}
             className="confirm-btn"
             onClick={() => handleConfirmButton(actionType)}
           >
@@ -270,41 +258,41 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         </div>
         <div className="community-chat-role-edit-dialog-content">
           <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
-            <Form.Group as={Row}>
-              <Form.Label column={true} sm="2">
-                {_t("community-role-edit.username")}
-              </Form.Label>
-              <Col sm="10">
-                <InputGroup>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>@</InputGroup.Text>
-                  </InputGroup.Prepend>
-                  <Form.Control
+            <div className="grid grid-cols-12">
+              <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.username")}</div>
+              <div className="col-span-12 sm:col-span-10">
+                <InputGroup prepend="@">
+                  <FormControl
                     type="text"
                     autoFocus={user === ""}
                     placeholder={_t("community-role-edit.username").toLowerCase()}
                     value={user}
-                    onChange={userChanged}
+                    onChange={(e) => {
+                      setUser(e.target.value);
+                      setInProgress(true);
+                    }}
                     className={addRoleError ? "is-invalid" : ""}
                   />
                 </InputGroup>
-                {addRoleError && <Form.Text className="text-danger">{addRoleError}</Form.Text>}
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row}>
-              <Form.Label column={true} sm="2">
-                {_t("community-role-edit.role")}
-              </Form.Label>
-              <Col sm="10">
-                <Form.Control as="select" value={role} onChange={roleChanged}>
+                {addRoleError && <div className="text-danger">{addRoleError}</div>}
+              </div>
+            </div>
+            <div className="grid grid-cols-12">
+              <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.role")}</div>
+              <div className="col-span-12 sm:col-span-10">
+                <FormControl
+                  type="select"
+                  value={role}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setRole(e.target.value)}
+                >
                   {roles.map((r, i) => (
                     <option key={i} value={r}>
                       {r}
                     </option>
                   ))}
-                </Form.Control>
-              </Col>
-            </Form.Group>
+                </FormControl>
+              </div>
+            </div>
             <div className="d-flex justify-content-end">
               <Button
                 type="button"
@@ -339,8 +327,8 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                             {moderator.name === activeUser?.username ? (
                               <p style={{ margin: "5px 0 0 12px" }}>{moderator.role}</p>
                             ) : (
-                              <Form.Control
-                                as="select"
+                              <FormControl
+                                type="select"
                                 value={moderator.role}
                                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                                   updateRole(e, moderator)
@@ -351,7 +339,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                                     {r}
                                   </option>
                                 ))}
-                              </Form.Control>
+                              </FormControl>
                             )}
                           </td>
                         </tr>
@@ -401,7 +389,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                         </td>
                         <td>
                           <Button
-                            variant="outline-primary"
+                            outline={true}
                             onClick={() => {
                               setKeyDialog(true);
                               setStep(4);
@@ -526,18 +514,17 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
           show={true}
           centered={true}
           onHide={toggleKeyDialog}
-          keyboard={false}
           className="chats-dialog modal-thin-header"
           size="lg"
         >
-          <Modal.Header closeButton={true} />
-          <Modal.Body className="chat-modals-body">
+          <ModalHeader thin={true} closeButton={true} />
+          <ModalBody className="chat-modals-body">
             {step === 1 && confirmationModal(LEAVECOMMUNITY)}
             {step === 2 && EditRolesModal()}
             {step === 3 && blockedUsersModal()}
             {step === 4 && confirmationModal(UNBLOCKUSER)}
             {step === 5 && successModal(UNBLOCKUSER)}
-          </Modal.Body>
+          </ModalBody>
         </Modal>
       )}
     </>
diff --git a/src/common/components/chats/chats-confirmation-modal/index.scss b/src/common/features/chats/chats-confirmation-modal/index.scss
similarity index 63%
rename from src/common/components/chats/chats-confirmation-modal/index.scss
rename to src/common/features/chats/chats-confirmation-modal/index.scss
index cf1333fb494..167d69933b0 100644
--- a/src/common/components/chats/chats-confirmation-modal/index.scss
+++ b/src/common/features/chats/chats-confirmation-modal/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .join-community-dialog-body {
   font-size: 18px;
@@ -7,7 +7,4 @@
 .join-community-confirm-buttons {
   text-align: right;
   margin-top: 2rem;
-  .close-btn {
-    margin-right: 20px;
-  }
 }
diff --git a/src/common/components/chats/chats-confirmation-modal/index.tsx b/src/common/features/chats/chats-confirmation-modal/index.tsx
similarity index 81%
rename from src/common/components/chats/chats-confirmation-modal/index.tsx
rename to src/common/features/chats/chats-confirmation-modal/index.tsx
index 04d440a7ac2..115c5ef99b3 100644
--- a/src/common/components/chats/chats-confirmation-modal/index.tsx
+++ b/src/common/features/chats/chats-confirmation-modal/index.tsx
@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Button, Modal } from "react-bootstrap";
 import { _t } from "../../../i18n";
-import LinearProgress from "../../linear-progress";
+import LinearProgress from "../../../components/linear-progress";
 import { ChatContext } from "../chat-context-provider";
 
 import "./index.scss";
+import { Button } from "@ui/button";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 
 interface Props {
   actionType: string;
@@ -33,7 +34,7 @@ const ChatsConfirmationModal = (props: Props) => {
       <div className="join-community-dialog-body">{content}</div>
       <p className="join-community-confirm-buttons">
         <Button
-          variant="outline-primary"
+          outline={true}
           className="close-btn"
           onClick={() => {
             onClose();
@@ -42,7 +43,7 @@ const ChatsConfirmationModal = (props: Props) => {
           {_t("chat.close")}
         </Button>
         <Button
-          variant="outline-primary"
+          outline={true}
           className="confirm-btn"
           onClick={() => {
             setInProgress(true);
@@ -61,12 +62,11 @@ const ChatsConfirmationModal = (props: Props) => {
       show={true}
       centered={true}
       onHide={onClose}
-      keyboard={false}
-      className="chats-dialog modal-thin-header"
+      className="chats-dialog"
       size="lg"
     >
-      <Modal.Header closeButton={true} />
-      <Modal.Body className="chat-modals-body">{confirmationModalContent}</Modal.Body>
+      <ModalHeader thin={true} closeButton={true} />
+      <ModalBody className="chat-modals-body">{confirmationModalContent}</ModalBody>
     </Modal>
   );
 };
diff --git a/src/common/components/chats/chats-direct-messages/index.scss b/src/common/features/chats/chats-direct-messages/index.scss
similarity index 90%
rename from src/common/components/chats/chats-direct-messages/index.scss
rename to src/common/features/chats/chats-direct-messages/index.scss
index df50d5ee8b8..6a9451effbf 100644
--- a/src/common/components/chats/chats-direct-messages/index.scss
+++ b/src/common/features/chats/chats-direct-messages/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .direct-messages {
   padding-bottom: 15px;
@@ -61,7 +61,7 @@
               color: rgb(138, 141, 145);
             }
             @include themify(night) {
-              color: $charcoal-grey;
+              @apply text-gray-charcoal;
             }
 
             font-size: 10px;
@@ -102,7 +102,7 @@
                 color: rgb(138, 141, 145);
               }
               @include themify(night) {
-                color: $white-three;
+                @apply text-light-300;
               }
             }
           }
@@ -138,10 +138,10 @@
         cursor: pointer;
         svg {
           @include themify(day) {
-            fill: $light-black;
+            @apply fill-gray-600;
           }
           @include themify(night) {
-            fill: $white;
+            @apply fill-white;
           }
         }
       }
@@ -151,7 +151,7 @@
         svg {
           width: 16px;
           height: 16px;
-          fill: $red !important;
+          @apply fill-red;
         }
       }
 
@@ -170,11 +170,10 @@
 
         @include themify(day) {
           background-color: rgb(0, 132, 255);
-          color: $white;
+          @apply text-white;
         }
         @include themify(night) {
-          background-color: $charcoal-grey;
-          color: $white;
+          @apply border-gray-charcoal text-white;
         }
 
         &.gif {
@@ -210,7 +209,7 @@
         .sender-message-content {
           max-width: 100%;
           margin-bottom: 0;
-          color: $charcoal-grey;
+          @apply text-white;
           font-size: 16px;
           font-weight: 400;
           padding: 8px 8px 8px 12px;
@@ -218,16 +217,10 @@
             text-decoration: underline;
             color: white;
           }
-          @include themify(day) {
-            color: $white;
-          }
-          @include themify(night) {
-            color: $white;
-          }
         }
 
         .sender-message-time {
-          color: $white;
+          @apply text-white;
           margin-bottom: 3px;
           font-size: 10px;
           display: flex;
diff --git a/src/common/components/chats/chats-direct-messages/index.tsx b/src/common/features/chats/chats-direct-messages/index.tsx
similarity index 97%
rename from src/common/components/chats/chats-direct-messages/index.tsx
rename to src/common/features/chats/chats-direct-messages/index.tsx
index ca5f1b1ddad..2406948cae1 100644
--- a/src/common/components/chats/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/chats-direct-messages/index.tsx
@@ -1,15 +1,14 @@
 import React, { useContext, useEffect, useState } from "react";
 import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
-import { Spinner } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import {
-  formatMessageTime,
+  checkContiguousMessage,
   formatMessageDate,
+  formatMessageDateAndDay,
+  formatMessageTime,
   isMessageGif,
-  isMessageImage,
-  checkContiguousMessage,
-  formatMessageDateAndDay
+  isMessageImage
 } from "../utils";
 
 import { Theme } from "../../../store/global/types";
@@ -17,8 +16,8 @@ import { DirectMessage } from "../../../../managers/message-manager-types";
 
 import { useMappedStore } from "../../../store/use-mapped-store";
 
-import UserAvatar from "../../user-avatar";
-import Tooltip from "../../tooltip";
+import UserAvatar from "../../../components/user-avatar";
+import Tooltip from "../../../components/tooltip";
 import { ChatContext } from "../chat-context-provider";
 
 import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
@@ -28,6 +27,7 @@ import { _t } from "../../../i18n";
 
 import "./index.scss";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
+import { Spinner } from "@ui/spinner";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -218,7 +218,7 @@ export default function ChatsDirectMessages(props: Props) {
                           </Tooltip>
                           {msg.sent === 0 && (
                             <span style={{ margin: "10px 0 0 5px" }}>
-                              <Spinner animation="border" variant="primary" size="sm" />
+                              <Spinner />
                             </span>
                           )}
                           {msg.sent === 2 && (
diff --git a/src/common/features/chats/chats-dropdown-menu/index.tsx b/src/common/features/chats/chats-dropdown-menu/index.tsx
new file mode 100644
index 00000000000..5a1ed185dd1
--- /dev/null
+++ b/src/common/features/chats/chats-dropdown-menu/index.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo } from "react";
+import { History } from "history";
+import DropDown, { MenuItem } from "../../../components/dropdown";
+import { chatKeySvg, kebabMenuSvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
+
+interface Props {
+  history: History | null;
+  onManageChatKey?: () => void;
+}
+
+const ChatsDropdownMenu = (props: Props) => {
+  const onManageChatKey = () => {
+    const { onManageChatKey } = props;
+    if (onManageChatKey) {
+      onManageChatKey();
+    }
+  };
+
+  const menuItems: MenuItem[] = useMemo(
+    () => [
+      {
+        label: _t("chat.manage-chat-key"),
+        onClick: onManageChatKey,
+        icon: chatKeySvg
+      }
+    ],
+    []
+  );
+  return (
+    <DropDown
+      history={props.history}
+      label=""
+      icon={kebabMenuSvg}
+      items={menuItems}
+      style={{
+        width: "35px",
+        height: "35px"
+      }}
+      float="right"
+      alignBottom={false}
+      noMarginTop={true}
+    />
+  );
+};
+
+export default ChatsDropdownMenu;
diff --git a/src/common/components/chats/chats-messages-box/index.scss b/src/common/features/chats/chats-messages-box/index.scss
similarity index 86%
rename from src/common/components/chats/chats-messages-box/index.scss
rename to src/common/features/chats/chats-messages-box/index.scss
index 43d34528bf8..7897210be42 100644
--- a/src/common/components/chats/chats-messages-box/index.scss
+++ b/src/common/features/chats/chats-messages-box/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chats-messages-box {
   margin-top: 10px;
@@ -12,7 +12,7 @@
   }
 
   @include themify(night) {
-    box-shadow: 0px -5px 5px $charcoal-grey;
+    box-shadow: 0px -5px 5px rgb(60, 68, 73);
   }
   width: 100%;
 
@@ -29,7 +29,7 @@
           color: #65676b;
         }
         @include themify(night) {
-          color: $white;
+          @apply text-white;
         }
       }
     }
diff --git a/src/common/components/chats/chats-messages-box/index.tsx b/src/common/features/chats/chats-messages-box/index.tsx
similarity index 98%
rename from src/common/components/chats/chats-messages-box/index.tsx
rename to src/common/features/chats/chats-messages-box/index.tsx
index 21aba4c968e..40491912b07 100644
--- a/src/common/components/chats/chats-messages-box/index.tsx
+++ b/src/common/features/chats/chats-messages-box/index.tsx
@@ -6,17 +6,16 @@ import { ToggleType, UI } from "../../../store/ui/types";
 import { User } from "../../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
-
 import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
-import LinearProgress from "../../linear-progress";
+import LinearProgress from "../../../components/linear-progress";
 import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { CHANNEL } from "../chat-popup/chat-constants";
-import { Button } from "react-bootstrap";
 import { ChatContext } from "../chat-context-provider";
 import { useMount } from "react-use";
 
 import "./index.scss";
+import { Button } from "@ui/button";
 
 interface MatchParams {
   filter: string;
diff --git a/src/common/components/chats/chats-messages-header/index.scss b/src/common/features/chats/chats-messages-header/index.scss
similarity index 83%
rename from src/common/components/chats/chats-messages-header/index.scss
rename to src/common/features/chats/chats-messages-header/index.scss
index 9afa3619d94..90f45cd07d8 100644
--- a/src/common/components/chats/chats-messages-header/index.scss
+++ b/src/common/features/chats/chats-messages-header/index.scss
@@ -1,23 +1,25 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chats-messages-header {
   grid-row: span 1;
   width: 100%;
   height: 67px;
+  @apply border-b;
+
   @include themify(day) {
-    border-bottom: 1px solid #e7e7e7;
+    border-color: #e7e7e7;
   }
   @include themify(night) {
-    border-bottom: 1px solid $charcoal-grey;
+    @apply border-gray-charcoal;
   }
 
   a {
     @include themify(day) {
-      color: $light-black;
+      @apply text-gray-600;
     }
 
     @include themify(night) {
-      color: $white-two;
+      @apply text-light-200;
     }
   }
 
@@ -47,7 +49,7 @@
             }
 
             @include themify(night) {
-              background: $dusky-blue;
+              @apply bg-blue-dusky;
             }
           }
         }
@@ -72,7 +74,7 @@
           }
 
           @include themify(night) {
-            background: $dusky-blue;
+            @apply bg-blue-dusky;
           }
         }
       }
@@ -90,11 +92,11 @@
       border-radius: 50%;
       svg {
         @include themify(day) {
-          color: $charcoal-grey;
+          @apply text-gray-charcoal;
         }
 
         @include themify(night) {
-          color: $white-two;
+          @apply text-light-200;
         }
       }
       &:hover {
@@ -102,7 +104,7 @@
           background: rgba(29, 155, 240, 0.1);
         }
         @include themify(night) {
-          background: $dark-grey-blue;
+          @apply bg-blue-dark-grey;
         }
       }
     }
diff --git a/src/common/components/chats/chats-messages-header/index.tsx b/src/common/features/chats/chats-messages-header/index.tsx
similarity index 87%
rename from src/common/components/chats/chats-messages-header/index.tsx
rename to src/common/features/chats/chats-messages-header/index.tsx
index 17c7611069a..3822892eb5c 100644
--- a/src/common/components/chats/chats-messages-header/index.tsx
+++ b/src/common/features/chats/chats-messages-header/index.tsx
@@ -1,13 +1,12 @@
 import React, { useContext } from "react";
 import { History } from "history";
-import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import UserAvatar from "../../user-avatar";
+import UserAvatar from "../../../components/user-avatar";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
-import Link from "../../alink";
+import Link from "../../../components/alink";
 import { expandSideBar } from "../../../img/svg";
 import { ChatContext } from "../chat-context-provider";
 
@@ -37,8 +36,7 @@ export default function ChatsMessagesHeader(props: Props) {
         return community.name;
       }
     }
-    const replacedUserName = username.replace("@", "");
-    return replacedUserName;
+    return username.replace("@", "");
   };
 
   return (
@@ -64,7 +62,11 @@ export default function ChatsMessagesHeader(props: Props) {
 
         {isChannel(username) && (
           <div className="community-menu">
-            <ChatsCommunityDropdownMenu from={CHATPAGE} {...props} />
+            <ChatsCommunityDropdownMenu
+              from={CHATPAGE}
+              history={props.history}
+              username={props.username}
+            />
           </div>
         )}
       </div>
diff --git a/src/common/features/chats/chats-messages-view/index.scss b/src/common/features/chats/chats-messages-view/index.scss
new file mode 100644
index 00000000000..0c3fe3489eb
--- /dev/null
+++ b/src/common/features/chats/chats-messages-view/index.scss
@@ -0,0 +1,12 @@
+.chats-messages-view {
+  grid-row: span 16;
+  overflow: scroll;
+  overflow-x: hidden;
+  a::after {
+    display: none;
+  }
+
+  &.no-scroll {
+    overflow: hidden;
+  }
+}
diff --git a/src/common/components/chats/chats-messages-view/index.tsx b/src/common/features/chats/chats-messages-view/index.tsx
similarity index 95%
rename from src/common/components/chats/chats-messages-view/index.tsx
rename to src/common/features/chats/chats-messages-view/index.tsx
index f68a78f514c..4084dca2f87 100644
--- a/src/common/components/chats/chats-messages-view/index.tsx
+++ b/src/common/features/chats/chats-messages-view/index.tsx
@@ -5,9 +5,7 @@ import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
 import { History } from "history";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsProfileBox from "../chats-profile-box";
-
 import "./index.scss";
-import { _t } from "../../../i18n";
 import ChatsChannelMessages from "../chats-channel-messages";
 import ChatsDirectMessages from "../chats-direct-messages";
 import { Account } from "../../../store/accounts/types";
@@ -18,6 +16,7 @@ import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
 import { EmojiPickerStyleProps } from "../types";
 import { ChatContext } from "../chat-context-provider";
+import { classNameObject } from "../../../helper/class-name-object";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
@@ -171,7 +170,10 @@ export default function ChatsMessagesView(props: Props) {
   return (
     <>
       <div
-        className={`chats-messages-view ${isTop && hasMore ? "no-scroll" : ""}`}
+        className={classNameObject({
+          "chats-messages-view border-b border-[--border-color]": true,
+          "no-scroll": isTop && hasMore
+        })}
         ref={messagesBoxRef}
         onScroll={handleScroll}
       >
@@ -216,8 +218,8 @@ export default function ChatsMessagesView(props: Props) {
       <ChatInput
         emojiPickerStyles={EmojiPickerStyle}
         gifPickerStyle={EmojiPickerStyle}
-        isCurrentUser={directUser ? true : false}
-        isCommunity={communityName ? true : false}
+        isCurrentUser={!!directUser}
+        isCommunity={!!communityName}
         currentUser={directUser}
         currentChannel={currentChannel!}
         isCurrentUserJoined={true}
diff --git a/src/common/components/chats/chats-profile-box/index.scss b/src/common/features/chats/chats-profile-box/index.scss
similarity index 83%
rename from src/common/components/chats/chats-profile-box/index.scss
rename to src/common/features/chats/chats-profile-box/index.scss
index 0eac90de329..3fed697a18d 100644
--- a/src/common/components/chats/chats-profile-box/index.scss
+++ b/src/common/features/chats/chats-profile-box/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chats-profile-box {
   .user-profile {
@@ -7,7 +7,7 @@
     min-height: 266px;
 
     @include themify(day) {
-      background: $white-three;
+      @apply bg-light-300;
     }
     @include themify(night) {
       background: #172b44;
@@ -27,7 +27,7 @@
       font-size: 20px;
       font-weight: 700;
       @include themify(day) {
-        color: $charcoal-grey;
+        @apply text-gray-charcoal;
       }
       @include themify(night) {
         color: $white;
@@ -37,10 +37,10 @@
       text-align: center;
       padding: 4px 0;
       @include themify(day) {
-        color: $charcoal-grey;
+        @apply text-gray-charcoal;
       }
       @include themify(night) {
-        color: $white;
+        @apply text-white;
       }
     }
     .joining-info {
@@ -50,10 +50,10 @@
       padding-top: 8px;
       font-size: 14px;
       @include themify(day) {
-        color: $charcoal-grey;
+        @apply text-gray-charcoal;
       }
       @include themify(night) {
-        color: $white;
+        @apply text-white;
       }
     }
     .followers {
diff --git a/src/common/components/chats/chats-profile-box/index.tsx b/src/common/features/chats/chats-profile-box/index.tsx
similarity index 96%
rename from src/common/components/chats/chats-profile-box/index.tsx
rename to src/common/features/chats/chats-profile-box/index.tsx
index 7b348b504ad..f537a0399a8 100644
--- a/src/common/components/chats/chats-profile-box/index.tsx
+++ b/src/common/features/chats/chats-profile-box/index.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-import UserAvatar from "../../user-avatar";
-
+import UserAvatar from "../../../components/user-avatar";
 import { dateToFormatted } from "../../../helper/parse-date";
 import { _t } from "../../../i18n";
 import { getAccountFull } from "../../../api/hive";
 import { formattedUserName } from "../utils";
-import { useCommunityCache } from "../../../core/caches/communities-cache";
+import { useCommunityCache } from "../../../core";
 
 import "./index.scss";
 
diff --git a/src/common/components/chats/chats-scroller/index.scss b/src/common/features/chats/chats-scroller/index.scss
similarity index 77%
rename from src/common/components/chats/chats-scroller/index.scss
rename to src/common/features/chats/chats-scroller/index.scss
index fe337a59e70..8493b3b827e 100644
--- a/src/common/components/chats/chats-scroller/index.scss
+++ b/src/common/features/chats/chats-scroller/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .scroller {
   position: sticky;
@@ -13,7 +13,7 @@
   cursor: pointer;
   @include themify(day) {
     background: #e4e6eb;
-    border: 1px solid $white-five;
+    @apply border border-light-500;
   }
   @include themify(night) {
     background: #0f223a;
@@ -21,10 +21,10 @@
 
   svg {
     @include themify(day) {
-      color: $dark-sky-blue;
+      @apply text-blue-dark-sky;
     }
     @include themify(night) {
-      color: $white;
+      @apply text-white;
     }
 
     width: 20px;
diff --git a/src/common/components/chats/chats-scroller/index.tsx b/src/common/features/chats/chats-scroller/index.tsx
similarity index 95%
rename from src/common/components/chats/chats-scroller/index.tsx
rename to src/common/features/chats/chats-scroller/index.tsx
index 8f77b368621..8ca89454d4e 100644
--- a/src/common/components/chats/chats-scroller/index.tsx
+++ b/src/common/features/chats/chats-scroller/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Tooltip from "../../tooltip";
+import Tooltip from "../../../components/tooltip";
 
 import { _t } from "../../../i18n";
 import { chevronDownSvgForSlider, chevronUpSvg } from "../../../img/svg";
diff --git a/src/common/components/chats/chats-sidebar/indes.tsx b/src/common/features/chats/chats-sidebar/indes.tsx
similarity index 95%
rename from src/common/components/chats/chats-sidebar/indes.tsx
rename to src/common/features/chats/chats-sidebar/indes.tsx
index 15c94a2919d..450fdae899a 100644
--- a/src/common/components/chats/chats-sidebar/indes.tsx
+++ b/src/common/features/chats/chats-sidebar/indes.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { History } from "history";
 import useDebounce from "react-use/lib/useDebounce";
@@ -7,21 +6,28 @@ import { setNostrkeys } from "../../../../managers/message-manager";
 import { Channel } from "../../../../managers/message-manager-types";
 import { getAccountReputations } from "../../../api/hive";
 import accountReputation from "../../../helper/account-reputation";
-import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
+import {
+  formattedUserName,
+  getCommunityLastMessage,
+  getDirectLastMessage,
+  getJoinedCommunities,
+  getUserChatPublicKey
+} from "../utils";
 import { _t } from "../../../i18n";
 import { arrowBackSvg, closeSvg, syncSvg } from "../../../img/svg";
 import ChatsScroller from "../chats-scroller";
-import LinearProgress from "../../linear-progress";
-import Tooltip from "../../tooltip";
-import UserAvatar from "../../user-avatar";
+import LinearProgress from "../../../components/linear-progress";
+import Tooltip from "../../../components/tooltip";
+import UserAvatar from "../../../components/user-avatar";
 
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { AccountWithReputation } from "../types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
-import { getUserChatPublicKey, formattedUserName } from "../../../components/chats/utils";
 
 import "./index.scss";
+import { FormControl } from "@ui/input";
+
 interface Props {
   username: string;
   history: History;
@@ -178,8 +184,8 @@ export default function ChatsSideBar(props: Props) {
             </div>
           </div>
           <div className="chats-search">
-            <Form.Group className="w-100">
-              <Form.Control
+            <div className="w-full mb-4">
+              <FormControl
                 type="text"
                 placeholder={_t("chat.search")}
                 value={searchText}
@@ -192,7 +198,7 @@ export default function ChatsSideBar(props: Props) {
                   }
                 }}
               />
-            </Form.Group>
+            </div>
           </div>
           {showDivider && <div className="divider" />}
           {searchInProgress && <LinearProgress />}
diff --git a/src/common/components/chats/chats-sidebar/index.scss b/src/common/features/chats/chats-sidebar/index.scss
similarity index 89%
rename from src/common/components/chats/chats-sidebar/index.scss
rename to src/common/features/chats/chats-sidebar/index.scss
index 813da76f615..9f214296045 100644
--- a/src/common/components/chats/chats-sidebar/index.scss
+++ b/src/common/features/chats/chats-sidebar/index.scss
@@ -1,13 +1,13 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .chats-sidebar {
   @include themify(day) {
-    background: $white-two;
+    @apply bg-light-200;
     box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
   }
   @include themify(night) {
-    background: $dark-two;
-    box-shadow: 0px -5px 5px $charcoal-grey;
+    @apply bg-dark-200;
+    box-shadow: 0px -5px 5px rgb(60, 68, 58);
   }
   z-index: 10;
   min-width: 330px;
@@ -19,7 +19,7 @@
     svg {
       width: 30px;
       height: 30px;
-      color: $steel-grey;
+      @apply text-gray-steel;
       cursor: pointer;
     }
   }
@@ -40,7 +40,7 @@
             background: rgba(29, 155, 240, 0.1);
           }
           @include themify(night) {
-            background: $dark-grey-blue;
+            @apply bg-blue-dark-grey;
           }
         }
       }
@@ -51,7 +51,7 @@
         color: #050505;
       }
       @include themify(night) {
-        color: $white;
+        @apply text-white;
       }
 
       color: #050505;
@@ -83,7 +83,7 @@
               background: rgba(29, 155, 240, 0.1);
             }
             @include themify(night) {
-              background: $dark-grey-blue;
+              @apply bg-blue-dark-grey
             }
           }
         }
@@ -100,11 +100,11 @@
         border-radius: 50%;
         svg {
           @include themify(day) {
-            color: $charcoal-grey;
+            @apply text-gray-charcoal;
           }
 
           @include themify(night) {
-            color: $white-two;
+            @apply text-light-200;
           }
         }
         &:hover {
@@ -112,7 +112,7 @@
             background: rgba(29, 155, 240, 0.1);
           }
           @include themify(night) {
-            background: $dark-grey-blue;
+            @apply bg-blue-dark-grey;
           }
         }
       }
@@ -129,7 +129,7 @@
       border-bottom: 1px solid #ced0d4;
     }
     @include themify(night) {
-      border-bottom: 1px solid $charcoal-grey;
+      @apply border-b border-gray-charcoal
     }
   }
 
@@ -165,7 +165,7 @@
     }
 
     @include themify(night) {
-      background: $dusky-blue;
+      @apply bg-blue-dusky;
     }
   }
 
@@ -203,7 +203,7 @@
       }
 
       @include themify(night) {
-        background: $charcoal-grey;
+        @apply border-gray-charcoal;
       }
 
       &:hover {
@@ -212,7 +212,7 @@
         }
 
         @include themify(night) {
-          background: $charcoal-grey;
+          @apply bg-gray-charcoal
         }
       }
     }
diff --git a/src/common/components/chats/hooks/use-message-service-listener.tsx b/src/common/features/chats/hooks/use-message-service-listener.tsx
similarity index 100%
rename from src/common/components/chats/hooks/use-message-service-listener.tsx
rename to src/common/features/chats/hooks/use-message-service-listener.tsx
diff --git a/src/common/components/chats/import-chats/index.scss b/src/common/features/chats/import-chats/index.scss
similarity index 67%
rename from src/common/components/chats/import-chats/index.scss
rename to src/common/features/chats/import-chats/index.scss
index 9e3a8d90203..6a2e3d11b86 100644
--- a/src/common/components/chats/import-chats/index.scss
+++ b/src/common/features/chats/import-chats/index.scss
@@ -1,4 +1,4 @@
-@import "../../../../style/vars_mixins";
+@import "src/style/vars_mixins";
 
 .import-chats {
   display: flex;
diff --git a/src/common/components/chats/import-chats/index.tsx b/src/common/features/chats/import-chats/index.tsx
similarity index 70%
rename from src/common/components/chats/import-chats/index.tsx
rename to src/common/features/chats/import-chats/index.tsx
index c02abd2aa64..8cf512de746 100644
--- a/src/common/components/chats/import-chats/index.tsx
+++ b/src/common/features/chats/import-chats/index.tsx
@@ -1,17 +1,19 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Button, Form, InputGroup } from "react-bootstrap";
 import { getPublicKey } from "../../../../lib/nostr-tools/keys";
 import { _t } from "../../../i18n";
 import { keySvg } from "../../../img/svg";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import OrDivider from "../../or-divider";
+import OrDivider from "../../../components/or-divider";
 import * as ls from "../../../util/local-storage";
 import { ChatContext } from "../chat-context-provider";
 import { setNostrkeys } from "../../../../managers/message-manager";
 
 import "./index.scss";
-import LinearProgress from "../../linear-progress";
+import LinearProgress from "../../../components/linear-progress";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
+import { Button } from "@ui/button";
+import { Form } from "@ui/form";
+import { FormControl, InputGroup } from "@ui/input";
 
 export default function ImportChats() {
   const { activeUser } = useMappedStore();
@@ -61,48 +63,34 @@ export default function ImportChats() {
       <div className="import-chats">
         <div className="import-chats-container">
           <div className="d-flex justify-content-center import-chat-btn">
-            <Button variant="primary" onClick={() => setImportPrivKey(!importPrivKey)}>
+            <Button onClick={() => setImportPrivKey(!importPrivKey)}>
               {_t("chat.import-chat")}
             </Button>
           </div>
           {importPrivKey && (
             <div className="private-key" style={{ margin: "15px 10px" }}>
-              <Form
-                onSubmit={(e: React.FormEvent) => {
-                  e.preventDefault();
-                }}
-              >
-                <InputGroup>
-                  <InputGroup.Prepend>
-                    <InputGroup.Text>{keySvg}</InputGroup.Text>
-                  </InputGroup.Prepend>
-                  <Form.Control
+              <Form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+                <InputGroup
+                  prepend={keySvg}
+                  append={<Button onClick={handleImportChatSubmit}>{_t("chat.submit")}</Button>}
+                >
+                  <FormControl
                     value={privKey}
                     type="password"
                     autoFocus={true}
                     autoComplete="off"
-                    placeholder="Chat private key"
+                    placeholder={_t("chat.enter-private-key")}
                     onChange={(e) => setPrivKey(e.target.value)}
                   />
-                  <InputGroup.Append>
-                    <Button onClick={handleImportChatSubmit}>{_t("chat.submit")}</Button>
-                  </InputGroup.Append>
                 </InputGroup>
                 {inProgress && <LinearProgress />}
-                {error && <Form.Text className="text-danger">{error}</Form.Text>}
+                {error && <div className="text-danger">{error}</div>}
               </Form>
             </div>
           )}
           {<OrDivider />}
-          <div className="d-flex justify-content-center create-new-chat-btn">
-            <Button
-              variant="primary"
-              onClick={() => {
-                setStep(1);
-              }}
-            >
-              {_t("chat.create-new-account")}
-            </Button>
+          <div className="flex justify-center">
+            <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
           </div>
         </div>
       </div>
diff --git a/src/common/components/chats/join-chat/index.tsx b/src/common/features/chats/join-chat/index.tsx
similarity index 64%
rename from src/common/components/chats/join-chat/index.tsx
rename to src/common/features/chats/join-chat/index.tsx
index b79cbfd204a..47ba2890b8d 100644
--- a/src/common/components/chats/join-chat/index.tsx
+++ b/src/common/features/chats/join-chat/index.tsx
@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Button, Spinner } from "react-bootstrap";
 import { ChatContext } from "../chat-context-provider";
+import { Button } from "@ui/button";
+import { Spinner } from "@ui/spinner";
+import { _t } from "../../../i18n";
 
 export default function JoinChat() {
   const { messageServiceInstance, joinChat } = useContext(ChatContext);
@@ -20,12 +22,13 @@ export default function JoinChat() {
 
   return (
     <div className="no-chat text-center">
-      <p>You haven't joined the chat yet. Please join the chat to start chatting.</p>
-      <Button onClick={handleJoinChat}>
-        {showSpinner && (
-          <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
-        )}
-        Join Chat
+      <p>{_t("chat.you-haven-t-joined")}</p>
+      <Button
+        onClick={handleJoinChat}
+        icon={showSpinner ? <Spinner /> : <></>}
+        iconPlacement="left"
+      >
+        {_t("chat.join-chat")}
       </Button>
     </div>
   );
diff --git a/src/common/components/chats/join-community-chat-btn/index.tsx b/src/common/features/chats/join-community-chat-btn/index.tsx
similarity index 89%
rename from src/common/components/chats/join-community-chat-btn/index.tsx
rename to src/common/features/chats/join-community-chat-btn/index.tsx
index b1e3dbda41c..34342e34718 100644
--- a/src/common/components/chats/join-community-chat-btn/index.tsx
+++ b/src/common/features/chats/join-community-chat-btn/index.tsx
@@ -1,16 +1,14 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Button, Spinner } from "react-bootstrap";
 import { History } from "history";
-
-import { Community, ROLES } from "../../../store/communities/types";
-
+import { Community, ROLES } from "../../../store/communities";
 import { _t } from "../../../i18n";
-
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import { ChatContext } from "../chat-context-provider";
 import { CHANNEL, NOSTRKEY } from "../chat-popup/chat-constants";
 import { getProfileMetaData, setChannelMetaData } from "../utils";
+import { Spinner } from "@ui/spinner";
+import { Button } from "@ui/button";
 
 interface Props {
   history: History;
@@ -189,36 +187,40 @@ export default function JoinCommunityChatBtn(props: Props) {
     return {};
   };
 
-  const chatButtonSpinner = (
-    <Spinner animation="grow" variant="light" size="sm" style={{ marginRight: "6px" }} />
-  );
-
   return (
     <>
       {props.community.name === activeUser?.username ? (
         isCommunityChatJoined ? (
-          <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
+          <Button outline={true}>{_t("chat.chat-joined")}</Button>
         ) : !isChatEnabled ? (
-          <Button onClick={startCommunityChat}>
-            {inProgress && chatButtonSpinner}
+          <Button
+            onClick={startCommunityChat}
+            icon={inProgress ? <Spinner /> : <></>}
+            iconPlacement="left"
+          >
             {_t("chat.start-community-chat")}
           </Button>
         ) : !isCommunityChatJoined && isChatEnabled && hasUserJoinedChat ? (
-          <Button onClick={joinCommunityChat}>
-            {" "}
-            {inProgress && chatButtonSpinner}
+          <Button
+            onClick={joinCommunityChat}
+            icon={inProgress ? <Spinner /> : <></>}
+            iconPlacement="left"
+          >
             {_t("chat.join-community-chat")}
           </Button>
         ) : (
           <></>
         )
       ) : isChatEnabled && !isCommunityChatJoined ? (
-        <Button onClick={joinCommunityChat}>
-          {inProgress && chatButtonSpinner}
+        <Button
+          onClick={joinCommunityChat}
+          icon={inProgress ? <Spinner /> : <></>}
+          iconPlacement="left"
+        >
           {_t("community.join-community-chat")}
         </Button>
       ) : isCommunityChatJoined ? (
-        <Button variant="outline-primary">{_t("chat.chat-joined")}</Button>
+        <Button outline={true}>{_t("chat.chat-joined")}</Button>
       ) : (
         <></>
       )}
diff --git a/src/common/components/manage-chat-key/index.scss b/src/common/features/chats/manage-chat-key/index.scss
similarity index 84%
rename from src/common/components/manage-chat-key/index.scss
rename to src/common/features/chats/manage-chat-key/index.scss
index ca206fdd106..cea50e61b95 100644
--- a/src/common/components/manage-chat-key/index.scss
+++ b/src/common/features/chats/manage-chat-key/index.scss
@@ -1,7 +1,4 @@
-@import "src/style/colors";
-@import "src/style/variables";
-@import "src/style/bootstrap_vars";
-@import "src/style/mixins";
+@import "src/style/vars_mixins";
 
 .manage-chat-key {
   .private-key {
@@ -46,7 +43,7 @@
         color: #a1a1a1;
       }
       @include themify(night) {
-        color: $white-two;
+        @apply text-light-200;
       }
     }
   }
diff --git a/src/common/features/chats/manage-chat-key/index.tsx b/src/common/features/chats/manage-chat-key/index.tsx
new file mode 100644
index 00000000000..7b8d18acde0
--- /dev/null
+++ b/src/common/features/chats/manage-chat-key/index.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { _t } from "../../../i18n";
+import { History } from "history";
+import { expandSideBar } from "../../../img/svg";
+import { ChatContext } from "../chat-context-provider";
+import "./index.scss";
+import { InputGroupCopyClipboard } from "@ui/input";
+
+interface Props {
+  history: History;
+}
+
+export default function ManageChatKey({ history }: Props) {
+  const context = useContext(ChatContext);
+  const { chatPrivKey, windowWidth, setShowSideBar } = context;
+
+  return (
+    <>
+      <div className="manage-chat-key">
+        <div className="private-key d-flex">
+          {windowWidth < 768 && history.location.pathname.includes("/chats") && (
+            <div className="expand-icon d-md-none">
+              <p className="expand-svg" onClick={() => setShowSideBar(true)}>
+                {expandSideBar}
+              </p>
+            </div>
+          )}
+          <div className="mb-4" style={{ width: "39vw" }}>
+            <div>{_t("chat.chat-priv-key")}</div>
+            <InputGroupCopyClipboard value={chatPrivKey} />
+          </div>
+        </div>
+        {/* <OrDivider /> */}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
new file mode 100644
index 00000000000..abb89894ef7
--- /dev/null
+++ b/src/common/features/chats/queries/index.ts
@@ -0,0 +1,2 @@
+export * from "./search-users-query";
+export * from "./queries";
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
new file mode 100644
index 00000000000..1ccc0df4abc
--- /dev/null
+++ b/src/common/features/chats/queries/queries.ts
@@ -0,0 +1,3 @@
+export enum ChatQueries {
+  SEARCH_USER = "search-user"
+}
diff --git a/src/common/features/chats/queries/search-users-query.ts b/src/common/features/chats/queries/search-users-query.ts
new file mode 100644
index 00000000000..8171fbad7be
--- /dev/null
+++ b/src/common/features/chats/queries/search-users-query.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChatQueries } from "./queries";
+import { getAccountReputations } from "../../../api/hive";
+
+export function useSearchUsersQuery(query: string) {
+  return useQuery(
+    [ChatQueries.SEARCH_USER, query],
+    async () => {
+      if (!query) {
+        return [];
+      }
+      const response = await getAccountReputations(query);
+      response.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
+      return response;
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/components/chats/types/chat-types.ts b/src/common/features/chats/types/chat-types.ts
similarity index 100%
rename from src/common/components/chats/types/chat-types.ts
rename to src/common/features/chats/types/chat-types.ts
diff --git a/src/common/components/chats/types/index.ts b/src/common/features/chats/types/index.ts
similarity index 100%
rename from src/common/components/chats/types/index.ts
rename to src/common/features/chats/types/index.ts
diff --git a/src/common/components/chats/utils/check-contiguous-message.ts b/src/common/features/chats/utils/check-contiguous-message.ts
similarity index 55%
rename from src/common/components/chats/utils/check-contiguous-message.ts
rename to src/common/features/chats/utils/check-contiguous-message.ts
index 75c0fc9223d..95dee746833 100644
--- a/src/common/components/chats/utils/check-contiguous-message.ts
+++ b/src/common/features/chats/utils/check-contiguous-message.ts
@@ -1,5 +1,4 @@
-import { DirectMessage } from "./../../../../managers/message-manager-types";
-import { PublicMessage } from "../../../../managers/message-manager-types";
+import { DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
 
 export const checkContiguousMessage = (
   msg: PublicMessage | DirectMessage,
@@ -9,8 +8,5 @@ export const checkContiguousMessage = (
   const prevMsg = publicMessages[i - 1];
   const msgAuthor = msg.creator;
   const prevMsgAuthor = prevMsg ? prevMsg.creator : null;
-  if (msgAuthor === prevMsgAuthor) {
-    return true;
-  }
-  return false;
+  return msgAuthor === prevMsgAuthor;
 };
diff --git a/src/common/components/chats/utils/copy-to-clipboard.ts b/src/common/features/chats/utils/copy-to-clipboard.ts
similarity index 100%
rename from src/common/components/chats/utils/copy-to-clipboard.ts
rename to src/common/features/chats/utils/copy-to-clipboard.ts
diff --git a/src/common/components/chats/utils/create-nostr-account.ts b/src/common/features/chats/utils/create-nostr-account.ts
similarity index 100%
rename from src/common/components/chats/utils/create-nostr-account.ts
rename to src/common/features/chats/utils/create-nostr-account.ts
diff --git a/src/common/components/chats/utils/delete-chat-public-key.ts b/src/common/features/chats/utils/delete-chat-public-key.ts
similarity index 100%
rename from src/common/components/chats/utils/delete-chat-public-key.ts
rename to src/common/features/chats/utils/delete-chat-public-key.ts
diff --git a/src/common/components/chats/utils/fetch-profile-metadata.ts b/src/common/features/chats/utils/fetch-profile-metadata.ts
similarity index 74%
rename from src/common/components/chats/utils/fetch-profile-metadata.ts
rename to src/common/features/chats/utils/fetch-profile-metadata.ts
index 56988efb3cf..7a38f8f76be 100644
--- a/src/common/components/chats/utils/fetch-profile-metadata.ts
+++ b/src/common/features/chats/utils/fetch-profile-metadata.ts
@@ -4,8 +4,6 @@ export const getProfileMetaData = async (username: string) => {
   const response = await getAccountFull(username);
   const { posting_json_metadata } = response;
   if (posting_json_metadata) {
-    const profile = JSON.parse(posting_json_metadata!).profile;
-
-    return profile;
+    return JSON.parse(posting_json_metadata!).profile;
   }
 };
diff --git a/src/common/components/chats/utils/format-message-date-and-day.ts b/src/common/features/chats/utils/format-message-date-and-day.ts
similarity index 87%
rename from src/common/components/chats/utils/format-message-date-and-day.ts
rename to src/common/features/chats/utils/format-message-date-and-day.ts
index a0821a17bbd..d76b1c51152 100644
--- a/src/common/components/chats/utils/format-message-date-and-day.ts
+++ b/src/common/features/chats/utils/format-message-date-and-day.ts
@@ -1,4 +1,4 @@
-import { PublicMessage } from "./../../../../managers/message-manager-types";
+import { PublicMessage } from "../../../../managers/message-manager-types";
 import { DirectMessage } from "../../../../managers/message-manager-types";
 import { formatMessageDate } from "./format-message-time";
 
diff --git a/src/common/components/chats/utils/format-message-time.ts b/src/common/features/chats/utils/format-message-time.ts
similarity index 100%
rename from src/common/components/chats/utils/format-message-time.ts
rename to src/common/features/chats/utils/format-message-time.ts
diff --git a/src/common/components/chats/utils/formatted-user-name.ts b/src/common/features/chats/utils/formatted-user-name.ts
similarity index 100%
rename from src/common/components/chats/utils/formatted-user-name.ts
rename to src/common/features/chats/utils/formatted-user-name.ts
diff --git a/src/common/components/chats/utils/get-chat-private-key.ts b/src/common/features/chats/utils/get-chat-private-key.ts
similarity index 100%
rename from src/common/components/chats/utils/get-chat-private-key.ts
rename to src/common/features/chats/utils/get-chat-private-key.ts
diff --git a/src/common/components/chats/utils/get-joined-communities.ts b/src/common/features/chats/utils/get-joined-communities.ts
similarity index 100%
rename from src/common/components/chats/utils/get-joined-communities.ts
rename to src/common/features/chats/utils/get-joined-communities.ts
diff --git a/src/common/components/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
similarity index 100%
rename from src/common/components/chats/utils/get-user-chat-public-key.ts
rename to src/common/features/chats/utils/get-user-chat-public-key.ts
diff --git a/src/common/components/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
similarity index 100%
rename from src/common/components/chats/utils/index.ts
rename to src/common/features/chats/utils/index.ts
diff --git a/src/common/components/chats/utils/is-message-gif.ts b/src/common/features/chats/utils/is-message-gif.ts
similarity index 100%
rename from src/common/components/chats/utils/is-message-gif.ts
rename to src/common/features/chats/utils/is-message-gif.ts
diff --git a/src/common/components/chats/utils/is-message-image.ts b/src/common/features/chats/utils/is-message-image.ts
similarity index 100%
rename from src/common/components/chats/utils/is-message-image.ts
rename to src/common/features/chats/utils/is-message-image.ts
diff --git a/src/common/components/chats/utils/upload-channel-data.ts b/src/common/features/chats/utils/upload-channel-data.ts
similarity index 82%
rename from src/common/components/chats/utils/upload-channel-data.ts
rename to src/common/features/chats/utils/upload-channel-data.ts
index 8452caf2773..0eb3562df2a 100644
--- a/src/common/components/chats/utils/upload-channel-data.ts
+++ b/src/common/features/chats/utils/upload-channel-data.ts
@@ -10,8 +10,7 @@ export const setChannelMetaData = async (username: string, channel: Channel) =>
     const newProfile = {
       channel: channel
     };
-    const updatedProfile = await updateProfile(response, { ...profile, ...newProfile });
-    return updatedProfile;
+    return await updateProfile(response, { ...profile, ...newProfile });
   } catch (error) {
     throw error;
   }
diff --git a/src/common/features/chats/utils/upload-chat-public-key.ts b/src/common/features/chats/utils/upload-chat-public-key.ts
new file mode 100644
index 00000000000..31154282d9c
--- /dev/null
+++ b/src/common/features/chats/utils/upload-chat-public-key.ts
@@ -0,0 +1,13 @@
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+import { ActiveUser } from "../../../store/active-user/types";
+
+export const uploadChatPublicKey = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
+  const response = await getAccountFull(activeUser?.username!);
+
+  debugger;
+  return await updateProfile(response, {
+    ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}"),
+    nsKey: noStrPubKey
+  });
+};
diff --git a/src/common/components/chats/utils/use-fetch-community-messages.ts b/src/common/features/chats/utils/use-fetch-community-messages.ts
similarity index 82%
rename from src/common/components/chats/utils/use-fetch-community-messages.ts
rename to src/common/features/chats/utils/use-fetch-community-messages.ts
index 8c0bc6f0c63..4dae981e7ff 100644
--- a/src/common/components/chats/utils/use-fetch-community-messages.ts
+++ b/src/common/features/chats/utils/use-fetch-community-messages.ts
@@ -9,10 +9,9 @@ export const fetchCommunityMessages = (
   const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
   for (const item of publicMessages) {
     if (item.channelId === currentChannel.id) {
-      const filteredPublicMessages = Object.values(item.PublicMessage).filter(
+      return Object.values(item.PublicMessage).filter(
         (message) => !hideMessageIds.includes(message.id)
       );
-      return filteredPublicMessages;
     }
   }
   return [];
diff --git a/src/common/components/chats/utils/use-fetch-direct-messages.ts b/src/common/features/chats/utils/use-fetch-direct-messages.ts
similarity index 100%
rename from src/common/components/chats/utils/use-fetch-direct-messages.ts
rename to src/common/features/chats/utils/use-fetch-direct-messages.ts
diff --git a/src/common/components/chats/utils/use-get-community-last-message.ts b/src/common/features/chats/utils/use-get-community-last-message.ts
similarity index 100%
rename from src/common/components/chats/utils/use-get-community-last-message.ts
rename to src/common/features/chats/utils/use-get-community-last-message.ts
diff --git a/src/common/components/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
similarity index 100%
rename from src/common/components/chats/utils/use-get-direct-last-message.ts
rename to src/common/features/chats/utils/use-get-direct-last-message.ts
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 39434fa30ad..9b27af3dd0f 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -76,7 +76,9 @@
     "you": "You",
     "copy-clipboard": "Copy to clipboard",
     "first": "First",
-    "last": "Last"
+    "last": "Last",
+    "ok": "OK",
+    "join": "Join"
   },
   "confirm": {
     "title": "Are you sure?",
@@ -751,7 +753,8 @@
     "roles-role": "Role",
     "roles-account-title": "Title",
     "roles-add": "Add User",
-    "join-community-chat": "Join Community Chat"
+    "join-community-chat": "Join Community Chat",
+    "already-joined-community": "You have already joined this community"
   },
   "community-cover": {
     "rewards": "rewards",
@@ -1871,7 +1874,8 @@
     "submit": "Submit",
     "chat-priv-key": "Chat Private key",
     "copy-priv-key": "Copy Private key",
-    "extended-view": "Extended View"
+    "extended-view": "Extended View",
+    "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting."
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index c54729e2978..2d4806f80c6 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -1852,7 +1852,7 @@ export const sellStakeSvg = (
   </svg>
 );
 
-export const KebabMenu = (
+export const kebabMenuSvg = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="20"
@@ -2020,23 +2020,31 @@ export const dragSvg = (
   </svg>
 );
 
-export const addMessageSVG = (
-  <svg
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    mirror-in-rtl="true"
-  >
+export const addMessageSvg = (
+  <svg viewBox="0 0 24 24" fill="none">
     <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M24 3v4a1 1 0 0 1 -2 0V3a1 1 0 0 0 -0.9 -0.99c-0.05 0 -0.08 -0.01 -0.11 -0.01H3a1.016 1.016 0 0 0 -1 1v10a1.016 1.016 0 0 0 1 1h2v2.81l2.69 -2.32 0.57 -0.49h6.74a1 1 0 0 1 0 2h-6l-4.35 3.76a0.969 0.969 0 0 1 -0.65 0.241 1.059 1.059 0 0 1 -0.42 -0.09 1 1 0 0 1 -0.58 -0.91v-3A3.009 3.009 0 0 1 0 13V3A3.009 3.009 0 0 1 3 0h18a2.832 2.832 0 0 1 0.3 0.02A3 3 0 0 1 24 3z"
+      opacity="0.4"
+      d="M16 2H8C4 2 2 4 2 8V21C2 21.55 2.45 22 3 22H16C20 22 22 20 22 16V8C22 4 20 2 16 2Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
-      fill="currentColor"
-      fillRule="evenodd"
-      d="M24 11a1 1 0 0 1 -1 1h-3v3a1 1 0 0 1 -2 0V12h-3a1 1 0 0 1 0 -2h3V7a1 1 0 0 1 2 0v3h3A1 1 0 0 1 24 10.999z"
+      d="M8.5 12H15.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 15.5V8.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -2057,22 +2065,6 @@ export const expandArrow = (
   </svg>
 );
 
-export const collapseArrow = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="square"
-    strokeLinejoin="round"
-  >
-    <path d="M18 15l-6-6-6 6" />
-  </svg>
-);
-
 export const arrowBackSvg = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -2333,20 +2325,47 @@ export const messangerSvg = (
 );
 
 export const extendedView = (
-  <svg
-    fill="none"
-    stroke="currentColor"
-    width="24"
-    height="24"
-    strokeWidth="2"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
+  <svg viewBox="0 0 24 24" fill="none">
+    <path
+      d="M17.98 10.79V14.79C17.98 15.05 17.97 15.3 17.94 15.54C17.71 18.24 16.12 19.58 13.19 19.58H12.79C12.54 19.58 12.3 19.7 12.15 19.9L10.95 21.5C10.42 22.21 9.56 22.21 9.03 21.5L7.82999 19.9C7.69999 19.73 7.41 19.58 7.19 19.58H6.79001C3.60001 19.58 2 18.79 2 14.79V10.79C2 7.86001 3.35001 6.27001 6.04001 6.04001C6.28001 6.01001 6.53001 6 6.79001 6H13.19C16.38 6 17.98 7.60001 17.98 10.79Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M21.9791 6.79001V10.79C21.9791 13.73 20.6291 15.31 17.9391 15.54C17.9691 15.3 17.9791 15.05 17.9791 14.79V10.79C17.9791 7.60001 16.3791 6 13.1891 6H6.78906C6.52906 6 6.27906 6.01001 6.03906 6.04001C6.26906 3.35001 7.85906 2 10.7891 2H17.1891C20.3791 2 21.9791 3.60001 21.9791 6.79001Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
     <path
+      opacity="0.4"
+      d="M13.4955 13.25H13.5045"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M9.9955 13.25H10.0045"
+      stroke="#292D32"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M6.4955 13.25H6.5045"
+      stroke="#292D32"
+      strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
     />
   </svg>
 );
@@ -2366,3 +2385,23 @@ export const expandSideBar = (
     <path d="M15 18l-6-6 6-6" />
   </svg>
 );
+
+export const duotoneRefreshSvg = (
+  <svg viewBox="0 0 24 24" fill="none">
+    <path
+      d="M2 12C2 6.48 6.44 2 12 2C18.67 2 22 7.56 22 7.56M22 7.56V2.56M22 7.56H17.56"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M21.89 12C21.89 17.52 17.41 22 11.89 22C6.37 22 3 16.44 3 16.44M3 16.44H7.52M3 16.44V21.44"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 19429a54cec..53f729c429e 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -1,21 +1,21 @@
 import React, { useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { match } from "react-router";
-import { Spinner } from "react-bootstrap";
 import NavBar from "../../components/navbar";
 import NavBarElectron from "../../../desktop/app/components/navbar";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
-import ChatsSideBar from "../../components/chats/chats-sidebar/indes";
-import ChatsMessagesBox from "../../components/chats/chats-messages-box";
+import ChatsSideBar from "../../features/chats/chats-sidebar/indes";
+import ChatsMessagesBox from "../../features/chats/chats-messages-box";
 
-import ManageChatKey from "../../components/manage-chat-key";
+import ManageChatKey from "../../features/chats/manage-chat-key";
 import Feedback from "../../components/feedback";
 import { useMappedStore } from "../../store/use-mapped-store";
-import { ChatContext } from "../../components/chats/chat-context-provider";
-import ImportChats from "../../components/chats/import-chats";
-import JoinChat from "../../components/chats/join-chat";
+import { ChatContext } from "../../features/chats/chat-context-provider";
+import ImportChats from "../../features/chats/import-chats";
+import JoinChat from "../../features/chats/join-chat";
 
 import "./index.scss";
+import { Spinner } from "@ui/spinner";
 
 interface MatchParams {
   filter: string;
@@ -77,7 +77,7 @@ export const Chats = (props: Props) => {
         {activeUser ? (
           showSpinner ? (
             <div className="d-flex justify-content-center align-items-center full-page">
-              <Spinner animation="border" variant="primary" />
+              <Spinner />
               <p className="mt-3 ml-2" style={{ fontSize: "26px" }}>
                 Loading...
               </p>
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index a0d13c87023..6a22d6b70b0 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -7,7 +7,7 @@ import { EntryFilter, ListStyle } from "../store/global/types";
 import { Channel } from "../../managers/message-manager-types";
 import { usePrevious } from "../util/use-previous";
 
-import { getJoinedCommunities } from "../components/chats/utils";
+import { getJoinedCommunities } from "../features/chats/utils";
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -37,12 +37,13 @@ import { EntryListContent } from "../components/entry-list";
 import { connect } from "react-redux";
 import { withPersistentScroll } from "../components/with-persistent-scroll";
 import "./community.scss";
-import { Button, Modal } from "react-bootstrap";
 import LoginRequired from "../components/login-required";
 import { useMappedStore } from "../store/use-mapped-store";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
-import { ChatContext } from "../components/chats/chat-context-provider";
+import { ChatContext } from "../features/chats/chat-context-provider";
+import { Button } from "@ui/button";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 
 interface MatchParams {
   filter: string;
@@ -252,18 +253,12 @@ export const CommunityPage = (props: Props) => {
     if (isCommunityAlreadyJoined) {
       return (
         <>
-          <div className="join-chat-header border-bottom">
-            <div className="join-chat-titles">
-              <h4 className="join-chat-main-title"> You have already joined this community</h4>
-            </div>
+          <div>
+            <h4>{_t("community.already-joined-community")}</h4>
           </div>
-          <p className="join-chat-btn" style={{ marginTop: "30px", textAlign: "right" }}>
-            <Button
-              variant="outline-primary"
-              className="join-btn"
-              onClick={() => setIsJoinCommunity(false)}
-            >
-              Ok
+          <p className="mt-5 text-right">
+            <Button outline={true} onClick={() => setIsJoinCommunity(false)}>
+              {_t("g.ok")}
             </Button>
           </p>
         </>
@@ -271,7 +266,7 @@ export const CommunityPage = (props: Props) => {
     } else {
       return (
         <>
-          <div className="join-community-dialog-header border-bottom">
+          <div className="border-bottom">
             <div className="join-community-dialog-titles">
               <h2 className="join-community-main-title">Confirmaton</h2>
             </div>
@@ -281,21 +276,14 @@ export const CommunityPage = (props: Props) => {
             className="join-community-dialog-body"
             style={{ fontSize: "18px", marginTop: "12px" }}
           >
-            Are you sure?
+            {_t("confirm.title")}
           </div>
           <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
-            <Button
-              variant="outline-primary"
-              className="close-btn"
-              style={{ marginRight: "20px" }}
-              onClick={() => {
-                setIsJoinCommunity(false);
-              }}
-            >
-              Close
+            <Button outline={true} className="mr-4" onClick={() => setIsJoinCommunity(false)}>
+              {_t("g.close")}
             </Button>
-            <Button variant="outline-primary" className="confirm-btn" onClick={joinCommunityChat}>
-              Join
+            <Button outline={true} className="confirm-btn" onClick={() => joinCommunityChat()}>
+              {_t("g.join")}
             </Button>
           </p>
         </>
@@ -312,12 +300,11 @@ export const CommunityPage = (props: Props) => {
             show={true}
             centered={true}
             onHide={() => setIsJoinCommunity(false)}
-            keyboard={false}
-            className="authorities-dialog modal-thin-header"
+            className="authorities-dialog"
             size="lg"
           >
-            <Modal.Header closeButton={true} />
-            <Modal.Body>{joinCommunityModal()}</Modal.Body>
+            <ModalHeader thin={true} closeButton={true} />
+            <ModalBody>{joinCommunityModal()}</ModalBody>
           </Modal>
         </LoginRequired>
       )}
diff --git a/src/managers/message-manager.tsx b/src/managers/message-manager.tsx
index ec15d8ad99a..f44cb723c73 100644
--- a/src/managers/message-manager.tsx
+++ b/src/managers/message-manager.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 
 import { ActiveUser } from "../common/store/active-user/types";
-import { NostrKeysType } from "../common/components/chats/types";
+import { NostrKeysType } from "../common/features/chats/types";
 import {
   DirectMessage,
   Profile,
@@ -14,13 +14,13 @@ import {
 } from "./message-manager-types";
 
 import MessageService, { MessageEvents } from "../common/helper/message-service";
-import { getProfileMetaData, getPrivateKey } from "../common/components/chats/utils";
+import { getProfileMetaData, getPrivateKey } from "../common/features/chats/utils";
 
 import { useMappedStore } from "../common/store/use-mapped-store";
-import { ChatContext } from "../common/components/chats/chat-context-provider";
+import { ChatContext } from "../common/features/chats/chat-context-provider";
 import { useTimeoutFn } from "react-use";
 import { usePrevious } from "../common/util/use-previous";
-import { useMessageServiceListener } from "../common/components/chats/hooks/use-message-service-listener";
+import { useMessageServiceListener } from "../common/features/chats/hooks/use-message-service-listener";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
diff --git a/yarn.lock b/yarn.lock
index 3e6ff0b4ac3..b9628cdd3b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1606,6 +1606,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^29.4.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -1699,6 +1708,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
   integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
+  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+
 "@jridgewell/set-array@^1.0.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
@@ -1714,6 +1728,19 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.18":
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811"
+  integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -1753,6 +1780,33 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@noble/ciphers@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-0.2.0.tgz#a12cda60f3cf1ab5d7c77068c3711d2366649ed7"
+  integrity sha512-6YBxJDAapHSdd3bLDv6x2wRPwq4QFMUaB3HvljNBUTThDd12eSm7/3F+2lnfzx2jvM+S6Nsy0jEt9QbPqSwqRw==
+
+"@noble/curves@1.1.0", "@noble/curves@~1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d"
+  integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==
+  dependencies:
+    "@noble/hashes" "1.3.1"
+
+"@noble/hashes@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
+  integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
+
+"@noble/secp256k1@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1843,6 +1897,33 @@
   resolved "https://registry.yarnpkg.com/@redis/time-series/-/time-series-1.0.4.tgz#af85eb080f6934580e4d3b58046026b6c2b18717"
   integrity sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==
 
+"@scure/base@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@scure/base@~1.1.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.3.tgz#8584115565228290a6c6c4961973e0903bb3df2f"
+  integrity sha512-/+SgoRjLq7Xlf0CWuLHq2LUZeL/w65kfzAPG5NH9pcmBhs+nunQTn4gvdwgMTIXnt9b2C/1SeL2XiysZEyIC9Q==
+
+"@scure/bip32@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.1.tgz#7248aea723667f98160f593d621c47e208ccbb10"
+  integrity sha512-osvveYtyzdEVbt3OfwwXFr4P2iVBL5u1Q3q4ONBfDY/UpOuXmOlbgwc1xECEboY8wIays8Yt6onaWMUdUbfl0A==
+  dependencies:
+    "@noble/curves" "~1.1.0"
+    "@noble/hashes" "~1.3.1"
+    "@scure/base" "~1.1.0"
+
+"@scure/bip39@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.1.tgz#5cee8978656b272a917b7871c981e0541ad6ac2a"
+  integrity sha512-Z3/Fsz1yr904dduJD0NpiyRHhRYHdcnyh73FZWiV+/qhWi83wNJ3NWolYqCEN+ZWsUz2TWwajJggcRE9r1zUYg==
+  dependencies:
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -2893,12 +2974,12 @@ assert-plus@^1.0.0:
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 assert@^1.1.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
-  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.1.tgz#038ab248e4ff078e7bc2485ba6e6388466c78f76"
+  integrity sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==
   dependencies:
-    object-assign "^4.1.1"
-    util "0.10.3"
+    object.assign "^4.1.4"
+    util "^0.10.4"
 
 assign-symbols@^1.0.0:
   version "1.0.0"
@@ -3233,9 +3314,9 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.8, bn.js@^4.11.9:
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
 body-parser@1.19.2:
   version "1.19.2"
@@ -3489,7 +3570,7 @@ builtin-modules@^1.1.1:
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+  integrity sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==
 
 bytebuffer@^5.0.1:
   version "5.0.1"
@@ -3750,7 +3831,7 @@ cheerio@^1.0.0-rc.11:
     parse5-htmlparser2-tree-adapter "^7.0.0"
     tslib "^2.4.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.4.1:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
   integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@@ -3784,7 +3865,7 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.5.3:
+chokidar@^3.4.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -4165,7 +4246,7 @@ console-browserify@^1.1.0:
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
+  integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==
 
 content-disposition@0.5.4:
   version "0.5.4"
@@ -4688,9 +4769,9 @@ custom-event@^1.0.1:
   integrity sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=
 
 cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.2.tgz#673b5f233bf34d8e602b949429f8171d9121bea3"
+  integrity sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==
 
 d@1, d@^1.0.1:
   version "1.0.1"
@@ -4780,6 +4861,15 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
+define-data-property@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -4787,6 +4877,15 @@ define-properties@^1.1.2, define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+define-properties@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -4838,9 +4937,9 @@ dependency-graph@^0.11.0:
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
 des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.1.0.tgz#1d37f5766f3bbff4ee9638e871a8768c173b81da"
+  integrity sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==
   dependencies:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
@@ -5890,7 +5989,7 @@ fresh@0.5.2:
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  integrity sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==
   dependencies:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
@@ -5988,6 +6087,16 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -6153,11 +6262,23 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6214,11 +6335,28 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -6523,7 +6661,7 @@ http-proxy@^1.17.0:
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+  integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
 
 https-proxy-agent@5.0.0, https-proxy-agent@^5.0.0:
   version "5.0.0"
@@ -6718,11 +6856,6 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, i
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
@@ -7203,6 +7336,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-ws@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
+  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -8369,6 +8507,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -8434,13 +8577,20 @@ mkdirp@1.x, mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
   dependencies:
     minimist "^1.2.5"
 
+mkdirp@^0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
 mockdate@^3.0.2:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
@@ -8768,6 +8918,28 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nostr-relaypool@^0.6.28:
+  version "0.6.28"
+  resolved "https://registry.yarnpkg.com/nostr-relaypool/-/nostr-relaypool-0.6.28.tgz#50f1dc21c11bda1fca2a6d785d78fd6f6ead9a57"
+  integrity sha512-kyLChBunf6IB2O3MSPHBe9iSokBGyqZHvAJXZ5+eh9C4znAu7iY8L/yh0V4Ta/P9TtzDna3QTEgFWVan4m0vBA==
+  dependencies:
+    "@jest/source-map" "^29.4.3"
+    isomorphic-ws "^5.0.0"
+    nostr-tools "^1.10.0"
+    safe-stable-stringify "^2.4.2"
+
+nostr-tools@^1.10.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.16.0.tgz#5867f1d8bd055a5a3b27aadb199457dceb244314"
+  integrity sha512-sx/aOl0gmkeHVoIVbyOhEQhzF88NsrBXMC8bsjhPASqA6oZ8uSOAyEGgRLMfC3SKgzQD5Gr6KvDoAahaD6xKcg==
+  dependencies:
+    "@noble/ciphers" "^0.2.0"
+    "@noble/curves" "1.1.0"
+    "@noble/hashes" "1.3.1"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.1"
+    "@scure/bip39" "1.2.1"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -8892,6 +9064,16 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
 object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
@@ -8997,7 +9179,7 @@ original@^1.0.0:
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+  integrity sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==
 
 os-locale@^3.0.0:
   version "3.1.0"
@@ -10031,7 +10213,7 @@ punycode@1.3.2:
 punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+  integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
@@ -10086,7 +10268,7 @@ query-string@^6.13.1:
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+  integrity sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==
 
 querystring@0.2.0:
   version "0.2.0"
@@ -10619,7 +10801,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -10632,6 +10814,19 @@ read-pkg@^5.2.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^2.0.0, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.0.6, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -11092,6 +11287,11 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
+safe-stable-stringify@^2.4.2:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -11335,7 +11535,7 @@ set-value@^2.0.0, set-value@^2.0.1:
 setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
 setprototypeof@1.1.0:
   version "1.1.0"
@@ -12365,7 +12565,7 @@ tmpl@1.0.x:
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+  integrity sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
@@ -12556,7 +12756,7 @@ tsutils@^3.9.1:
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
-  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
+  integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==
 
 tus-js-client@*, tus-js-client@^3.1.0:
   version "3.1.0"
@@ -12626,7 +12826,7 @@ typedarray-to-buffer@^3.1.5:
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
 typescript@4.1.6:
   version "4.1.6"
@@ -12852,14 +13052,7 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
-util@^0.10.3:
+util@^0.10.3, util@^0.10.4:
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
   integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==

From b766e13ffe67a71d90c514c2b7cdd885350b5547 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 18 Oct 2023 21:48:21 +0600
Subject: [PATCH 097/179] Chat: separated direct message component

---
 .../chats/chat-popup/chat-direct-message.tsx  | 24 +++++++
 .../chat-popup/chat-popup-direct-messages.tsx | 63 ++++++-------------
 .../features/chats/chat-popup/index.scss      | 47 ++------------
 .../features/chats/manage-chat-key/index.tsx  | 38 ++++++++---
 src/common/i18n/locales/en-US.json            |  2 +-
 5 files changed, 77 insertions(+), 97 deletions(-)
 create mode 100644 src/common/features/chats/chat-popup/chat-direct-message.tsx

diff --git a/src/common/features/chats/chat-popup/chat-direct-message.tsx b/src/common/features/chats/chat-popup/chat-direct-message.tsx
new file mode 100644
index 00000000000..60365fb3d90
--- /dev/null
+++ b/src/common/features/chats/chat-popup/chat-direct-message.tsx
@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import React from "react";
+import UserAvatar from "../../../components/user-avatar";
+
+interface Props {
+  username: string;
+  lastMessage: string;
+  userClicked: (username: string) => void;
+}
+
+export function ChatDirectMessage({ username, userClicked, lastMessage }: Props) {
+  return (
+    <div className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800">
+      <Link to={`/@${username}`}>
+        <UserAvatar username={username} size="medium" />
+      </Link>
+
+      <div onClick={() => userClicked(username)}>
+        <p className="font-semibold">{username}</p>
+        <p className="text-gray-600 text-sm">{lastMessage}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
index f4034a12ec6..ef412807fb9 100644
--- a/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
 import { _t } from "../../../i18n";
-import { Link } from "react-router-dom";
 import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
 import ImportChats from "../import-chats";
 import { Spinner } from "@ui/spinner";
@@ -8,7 +7,7 @@ import { Button } from "@ui/button";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { Channel } from "../../../../managers/message-manager-types";
-import UserAvatar from "../../../components/user-avatar";
+import { ChatDirectMessage } from "./chat-direct-message";
 
 interface Props {
   communityClicked: (v: string) => void;
@@ -39,30 +38,17 @@ export function ChatPopupDirectMessages({
         (chat.channels.length !== 0 && communities.length !== 0)) &&
       !showSpinner &&
       activeUserKeys?.priv ? (
-        <React.Fragment>
+        <>
           {chat.channels.length !== 0 && communities.length !== 0 && (
             <>
               <div className="community-header">{_t("chat.communities")}</div>
               {communities.map((channel) => (
-                <div key={channel.id} className="chat-content">
-                  <Link to={`/created/${channel.communityName}`}>
-                    <div className="user-img">
-                      <span>
-                        <UserAvatar username={channel.communityName!} size="medium" />
-                      </span>
-                    </div>
-                  </Link>
-
-                  <div
-                    className="user-title"
-                    onClick={() => communityClicked(channel.communityName!)}
-                  >
-                    <p className="username">{channel.name}</p>
-                    <p className="last-message">
-                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                    </p>
-                  </div>
-                </div>
+                <ChatDirectMessage
+                  key={channel.id}
+                  username={channel.communityName!!}
+                  lastMessage={getCommunityLastMessage(channel.id, chat.publicMessages)}
+                  userClicked={() => communityClicked(channel.communityName!)}
+                />
               ))}
               {chat.directContacts.length !== 0 && (
                 <div className="dm-header">{_t("chat.dms")}</div>
@@ -70,30 +56,17 @@ export function ChatPopupDirectMessages({
             </>
           )}
           {chat.directContacts.map((user) => (
-            <div key={user.pubkey} className="chat-content">
-              <Link to={`/@${user.name}`}>
-                <div className="user-img">
-                  <span>
-                    <UserAvatar username={user.name} size="medium" />
-                  </span>
-                </div>
-              </Link>
-
-              <div
-                className="user-title"
-                onClick={() => {
-                  userClicked(user.name);
-                  setReceiverPubKey(user.pubkey);
-                }}
-              >
-                <p className="username">{user.name}</p>
-                <p className="last-message">
-                  {getDirectLastMessage(user.pubkey, chat.directMessages)}
-                </p>
-              </div>
-            </div>
+            <ChatDirectMessage
+              username={user.name}
+              userClicked={(v) => {
+                setReceiverPubKey(user.pubkey);
+                userClicked(v);
+              }}
+              key={user.pubkey}
+              lastMessage={getDirectLastMessage(user.pubkey, chat.directMessages)}
+            />
           ))}
-        </React.Fragment>
+        </>
       ) : !activeUserKeys?.priv ? (
         <ImportChats />
       ) : showSpinner ? (
diff --git a/src/common/features/chats/chat-popup/index.scss b/src/common/features/chats/chat-popup/index.scss
index 00333fbfd3d..b1ee5b4d25e 100644
--- a/src/common/features/chats/chat-popup/index.scss
+++ b/src/common/features/chats/chat-popup/index.scss
@@ -5,7 +5,7 @@
   z-index: 99;
   right: 13rem;
   bottom: 0rem;
-  height: 53px;
+  height: 50px;
   width: 410px;
 
   border-top-right-radius: 16px;
@@ -133,45 +133,6 @@
       }
     }
 
-    .chat-content {
-      display: flex;
-      cursor: pointer;
-      border-bottom: 0.5px solid rgba(134, 150, 160, 0.15);
-
-      .user-img {
-        padding: 13px 16px;
-      }
-
-      .user-title {
-        padding-top: 6px;
-        width: -webkit-fill-available;
-
-        .username {
-          padding-top: 8px;
-          @include themify(day) {
-            @apply text-gray-charcoal;
-          }
-
-          @include themify(night) {
-            @apply text-light-200;
-          }
-
-          font-size: 18px;
-          font-weight: 700;
-          margin-bottom: 0.2rem !important;
-        }
-
-        .last-message {
-          max-width: 320px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-bottom: 0;
-          font-size: 14px;
-        }
-      }
-    }
-
     .chat-content:hover {
       @include themify(day) {
         background: #eeeeee;
@@ -228,10 +189,10 @@
     }
 
     .manage-chat-key {
+      @apply p-4;
+
       .private-key {
-        .form-group {
-          width: 90vw !important;
-        }
+        margin: 0;
       }
     }
   }
diff --git a/src/common/features/chats/manage-chat-key/index.tsx b/src/common/features/chats/manage-chat-key/index.tsx
index 7b8d18acde0..aa8cc86e9fa 100644
--- a/src/common/features/chats/manage-chat-key/index.tsx
+++ b/src/common/features/chats/manage-chat-key/index.tsx
@@ -1,36 +1,58 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { _t } from "../../../i18n";
 import { History } from "history";
 import { expandSideBar } from "../../../img/svg";
 import { ChatContext } from "../chat-context-provider";
 import "./index.scss";
 import { InputGroupCopyClipboard } from "@ui/input";
+import qrcode from "qrcode";
+import { classNameObject } from "../../../helper/class-name-object";
 
 interface Props {
   history: History;
 }
 
 export default function ManageChatKey({ history }: Props) {
-  const context = useContext(ChatContext);
-  const { chatPrivKey, windowWidth, setShowSideBar } = context;
+  const { chatPrivKey, windowWidth, setShowSideBar } = useContext(ChatContext);
+
+  const qrImgRef = useRef<HTMLImageElement | null>(null);
+  const [isQrShow, setIsQrShow] = useState(false);
+
+  useEffect(() => {
+    compileQR(chatPrivKey);
+  }, [chatPrivKey]);
+
+  const compileQR = async (key: string) => {
+    if (qrImgRef.current) {
+      qrImgRef.current.src = await qrcode.toDataURL(key, { width: 300 });
+      setIsQrShow(true);
+    }
+  };
 
   return (
     <>
       <div className="manage-chat-key">
-        <div className="private-key d-flex">
+        <div className="private-key flex">
           {windowWidth < 768 && history.location.pathname.includes("/chats") && (
-            <div className="expand-icon d-md-none">
+            <div className="expand-icon md:hidden">
               <p className="expand-svg" onClick={() => setShowSideBar(true)}>
                 {expandSideBar}
               </p>
             </div>
           )}
-          <div className="mb-4" style={{ width: "39vw" }}>
-            <div>{_t("chat.chat-priv-key")}</div>
+          <div className="flex gap-4 flex-col w-full">
+            <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
             <InputGroupCopyClipboard value={chatPrivKey} />
+            <img
+              ref={qrImgRef}
+              className={classNameObject({
+                "self-center border rounded-xl border-[--border-color]": true,
+                hidden: !isQrShow,
+                block: isQrShow
+              })}
+            />
           </div>
         </div>
-        {/* <OrDivider /> */}
       </div>
     </>
   );
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 9b27af3dd0f..291d0c587d7 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1872,7 +1872,7 @@
     "start-community-chat": "Start Community Chat",
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
-    "chat-priv-key": "Chat Private key",
+    "chat-priv-key": "Please, copy this key or save QR code to your device for joining to same account in another devices",
     "copy-priv-key": "Copy Private key",
     "extended-view": "Extended View",
     "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting."

From a34928f987647d3889746a699324a6ae62a2786c Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 19 Oct 2023 23:46:14 +0600
Subject: [PATCH 098/179] Chat: moved components to own directory

---
 src/common/app.tsx                            |  2 +-
 .../components/community-cover/index.tsx      |  2 +-
 .../{ => components}/chat-input/index.scss    |  4 +
 .../{ => components}/chat-input/index.tsx     | 97 +++++--------------
 .../chat-popup/chat-constants.ts              |  0
 .../chat-popup/chat-direct-message.tsx        |  9 +-
 .../chat-popup/chat-popup-direct-messages.tsx | 10 +-
 .../chat-popup/chat-popup-header.tsx          | 16 +--
 .../chat-popup/chat-popup-messages-list.tsx   |  8 +-
 .../chat-popup/chat-popup-search-user.tsx     |  8 +-
 .../{ => components}/chat-popup/index.scss    |  0
 .../{ => components}/chat-popup/index.tsx     | 28 +++---
 .../chats-channel-messages/index.scss         | 31 ++++++
 .../chats-channel-messages/index.tsx          | 22 ++---
 .../chats-community-dropdown-menu/index.scss  |  2 +
 .../chats-community-dropdown-menu/index.tsx   | 24 ++---
 .../chats-confirmation-modal/index.scss       |  1 +
 .../chats-confirmation-modal/index.tsx        |  7 +-
 .../chats-direct-messages/index.scss          | 24 +++++
 .../chats-direct-messages/index.tsx           | 18 ++--
 .../chats-dropdown-menu/index.tsx             |  6 +-
 .../chats-messages-box/index.scss             |  1 +
 .../chats-messages-box/index.tsx              | 16 +--
 .../chats-messages-header/index.scss          |  4 +
 .../chats-messages-header/index.tsx           | 14 +--
 .../chats-messages-view/index.scss            |  0
 .../chats-messages-view/index.tsx             | 23 +++--
 .../chats-profile-box/index.scss              |  5 +
 .../chats-profile-box/index.tsx               | 12 +--
 .../chats-scroller/index.scss                 |  0
 .../{ => components}/chats-scroller/index.tsx |  7 +-
 .../{ => components}/chats-sidebar/indes.tsx  | 27 +++---
 .../{ => components}/chats-sidebar/index.scss | 17 ++++
 .../{ => components}/import-chats/index.scss  |  0
 .../{ => components}/import-chats/index.tsx   | 18 ++--
 .../{ => components}/join-chat/index.tsx      |  4 +-
 .../join-community-chat-btn/index.tsx         | 12 +--
 .../manage-chat-key/index.scss                |  3 +
 .../manage-chat-key/index.tsx                 |  8 +-
 src/common/features/chats/mutations/index.ts  |  1 +
 src/common/features/chats/mutations/upload.ts | 66 +++++++++++++
 .../features/chats/utils/is-message-gif.ts    |  2 +-
 src/common/pages/chats/index.tsx              | 10 +-
 43 files changed, 346 insertions(+), 223 deletions(-)
 rename src/common/features/chats/{ => components}/chat-input/index.scss (99%)
 rename src/common/features/chats/{ => components}/chat-input/index.tsx (76%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-constants.ts (100%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-direct-message.tsx (65%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-popup-direct-messages.tsx (90%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-popup-header.tsx (91%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-popup-messages-list.tsx (86%)
 rename src/common/features/chats/{ => components}/chat-popup/chat-popup-search-user.tsx (89%)
 rename src/common/features/chats/{ => components}/chat-popup/index.scss (100%)
 rename src/common/features/chats/{ => components}/chat-popup/index.tsx (95%)
 rename src/common/features/chats/{ => components}/chats-channel-messages/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-channel-messages/index.tsx (97%)
 rename src/common/features/chats/{ => components}/chats-community-dropdown-menu/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-community-dropdown-menu/index.tsx (95%)
 rename src/common/features/chats/{ => components}/chats-confirmation-modal/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-confirmation-modal/index.tsx (91%)
 rename src/common/features/chats/{ => components}/chats-direct-messages/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-direct-messages/index.tsx (94%)
 rename src/common/features/chats/{ => components}/chats-dropdown-menu/index.tsx (82%)
 rename src/common/features/chats/{ => components}/chats-messages-box/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-messages-box/index.tsx (92%)
 rename src/common/features/chats/{ => components}/chats-messages-header/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-messages-header/index.tsx (83%)
 rename src/common/features/chats/{ => components}/chats-messages-view/index.scss (100%)
 rename src/common/features/chats/{ => components}/chats-messages-view/index.tsx (92%)
 rename src/common/features/chats/{ => components}/chats-profile-box/index.scss (99%)
 rename src/common/features/chats/{ => components}/chats-profile-box/index.tsx (91%)
 rename src/common/features/chats/{ => components}/chats-scroller/index.scss (100%)
 rename src/common/features/chats/{ => components}/chats-scroller/index.tsx (89%)
 rename src/common/features/chats/{ => components}/chats-sidebar/indes.tsx (92%)
 rename src/common/features/chats/{ => components}/chats-sidebar/index.scss (99%)
 rename src/common/features/chats/{ => components}/import-chats/index.scss (100%)
 rename src/common/features/chats/{ => components}/import-chats/index.tsx (85%)
 rename src/common/features/chats/{ => components}/join-chat/index.tsx (89%)
 rename src/common/features/chats/{ => components}/join-community-chat-btn/index.tsx (94%)
 rename src/common/features/chats/{ => components}/manage-chat-key/index.scss (99%)
 rename src/common/features/chats/{ => components}/manage-chat-key/index.tsx (88%)
 create mode 100644 src/common/features/chats/mutations/index.ts
 create mode 100644 src/common/features/chats/mutations/upload.ts

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 86ff6df6710..cd2686c37d6 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -30,7 +30,7 @@ import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
 import { ChatContextProvider } from "./features/chats/chat-context-provider";
-import { ChatPopUp } from "./features/chats/chat-popup";
+import { ChatPopUp } from "./features/chats/components/chat-popup";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 47fba56af53..856d20b6a5f 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -13,7 +13,7 @@ import { setProxyBase } from "@ecency/render-helper";
 import BaseComponent from "../base";
 import SubscriptionBtn from "../subscription-btn";
 import CommunityPostBtn from "../community-post-btn";
-import JoinCommunityChatBtn from "../../features/chats/join-community-chat-btn";
+import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
 import Tooltip from "../tooltip";
 import ImageUploadDialog from "../image-upload";
 
diff --git a/src/common/features/chats/chat-input/index.scss b/src/common/features/chats/components/chat-input/index.scss
similarity index 99%
rename from src/common/features/chats/chat-input/index.scss
rename to src/common/features/chats/components/chat-input/index.scss
index 896d8fd2441..c3eafef54c7 100644
--- a/src/common/features/chats/chat-input/index.scss
+++ b/src/common/features/chats/components/chat-input/index.scss
@@ -30,8 +30,10 @@
       }
     }
   }
+
   .chatbox-image {
     cursor: pointer;
+
     .chatbox-image-icon {
       margin: 7px 0 0 7px;
     }
@@ -51,12 +53,14 @@
         background: #cee2ff;
       }
     }
+
     .msg-svg {
       padding: 8px;
 
       &.active {
         cursor: pointer;
       }
+
       &.active:hover {
         background: rgba(29, 155, 240, 0.1);
         border-radius: 50%;
diff --git a/src/common/features/chats/chat-input/index.tsx b/src/common/features/chats/components/chat-input/index.tsx
similarity index 76%
rename from src/common/features/chats/chat-input/index.tsx
rename to src/common/features/chats/components/chat-input/index.tsx
index 8bd4dd7cf7e..c1b991d91fc 100644
--- a/src/common/features/chats/chat-input/index.tsx
+++ b/src/common/features/chats/components/chat-input/index.tsx
@@ -1,34 +1,29 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import axios from "axios";
-import { Channel } from "../../../../managers/message-manager-types";
-import { EmojiPickerStyleProps } from "../types";
-import ClickAwayListener from "../../../components/clickaway-listener";
-import EmojiPicker from "../../../components/emoji-picker/index-old";
+import { Channel } from "../../../../../managers/message-manager-types";
+import { EmojiPickerStyleProps } from "../../types";
+import ClickAwayListener from "../../../../components/clickaway-listener";
+import EmojiPicker from "../../../../components/emoji-picker/index-old";
 // import { EmojiPicker } from "../../emoji-picker";
-import GifPicker from "../../../components/gif-picker";
-import { error } from "../../../components/feedback";
-import Tooltip from "../../../components/tooltip";
+import GifPicker from "../../../../components/gif-picker";
+import { error } from "../../../../components/feedback";
+import Tooltip from "../../../../components/tooltip";
 
 import {
   chatBoxImageSvg,
   emoticonHappyOutlineSvg,
   gifIcon,
   messageSendSvg
-} from "../../../img/svg";
+} from "../../../../img/svg";
 import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
-import { classNameObject } from "../../../helper/class-name-object";
-
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { _t } from "../../../i18n";
-import { getAccessToken } from "../../../helper/user-token";
-import { uploadImage } from "../../../api/misc";
-import { addImage } from "../../../api/private-api";
-
+import { classNameObject } from "../../../../helper/class-name-object";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { _t } from "../../../../i18n";
 import "./index.scss";
-import { ChatContext } from "../chat-context-provider";
+import { ChatContext } from "../../chat-context-provider";
 import { Form } from "@ui/form";
 import { FormControl, InputGroup } from "@ui/input";
 import { Button } from "@ui/button";
+import { useChatFileUpload } from "../../mutations";
 
 interface Props {
   isCurrentUser: boolean;
@@ -40,26 +35,25 @@ interface Props {
   gifPickerStyle: EmojiPickerStyleProps;
 }
 
-export default function ChatInput(props: Props) {
+export default function ChatInput({
+  isCommunity,
+  isCurrentUser,
+  currentChannel,
+  currentUser,
+  isCurrentUserJoined,
+  emojiPickerStyles,
+  gifPickerStyle
+}: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const { global, activeUser, chat } = useMappedStore();
+  const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [message, setMessage] = useState("");
   const [shGif, setShGif] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
 
-  const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
-
-  const {
-    isCommunity,
-    isCurrentUser,
-    currentChannel,
-    currentUser,
-    isCurrentUserJoined,
-    emojiPickerStyles,
-    gifPickerStyle
-  } = props;
+  const { mutateAsync } = useChatFileUpload(setMessage, setIsMessageText);
 
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
@@ -123,52 +117,11 @@ export default function ChatInput(props: Props) {
       e.preventDefault();
     }
 
-    if (files.length > 1 && isElectron) {
-      let isWindows = process.platform === "win32";
-      if (isWindows) {
-        files = files.reverse();
-      }
-    }
-
-    files.forEach((file) => upload(file));
+    files.forEach((file) => mutateAsync(file));
 
     // reset input
     e.target.value = "";
   };
-  const upload = async (file: File) => {
-    const username = activeUser?.username!;
-
-    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
-
-    setMessage(tempImgTag);
-
-    let imageUrl: string;
-    try {
-      let token = getAccessToken(username);
-      if (token) {
-        const resp = await uploadImage(file, token);
-        imageUrl = resp.url;
-
-        if (global.usePrivate && imageUrl.length > 0) {
-          addImage(username, imageUrl).then();
-        }
-
-        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
-
-        imgTag && setMessage(imgTag);
-        setIsMessageText(true);
-      } else {
-        error(_t("editor-toolbar.image-error-cache"));
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e) && e.response?.status === 413) {
-        error(_t("editor-toolbar.image-error-size"));
-      } else {
-        error(_t("editor-toolbar.image-error"));
-      }
-      return;
-    }
-  };
 
   return (
     <>
diff --git a/src/common/features/chats/chat-popup/chat-constants.ts b/src/common/features/chats/components/chat-popup/chat-constants.ts
similarity index 100%
rename from src/common/features/chats/chat-popup/chat-constants.ts
rename to src/common/features/chats/components/chat-popup/chat-constants.ts
diff --git a/src/common/features/chats/chat-popup/chat-direct-message.tsx b/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
similarity index 65%
rename from src/common/features/chats/chat-popup/chat-direct-message.tsx
rename to src/common/features/chats/components/chat-popup/chat-direct-message.tsx
index 60365fb3d90..931cfc66c19 100644
--- a/src/common/features/chats/chat-popup/chat-direct-message.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import React from "react";
-import UserAvatar from "../../../components/user-avatar";
+import UserAvatar from "../../../../components/user-avatar";
 
 interface Props {
   username: string;
@@ -10,12 +10,15 @@ interface Props {
 
 export function ChatDirectMessage({ username, userClicked, lastMessage }: Props) {
   return (
-    <div className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800">
+    <div
+      className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800"
+      onClick={() => userClicked(username)}
+    >
       <Link to={`/@${username}`}>
         <UserAvatar username={username} size="medium" />
       </Link>
 
-      <div onClick={() => userClicked(username)}>
+      <div>
         <p className="font-semibold">{username}</p>
         <p className="text-gray-600 text-sm">{lastMessage}</p>
       </div>
diff --git a/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
similarity index 90%
rename from src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
rename to src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index ef412807fb9..df283f2a4d2 100644
--- a/src/common/features/chats/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
-import { _t } from "../../../i18n";
-import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../utils";
+import { _t } from "../../../../i18n";
+import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../../utils";
 import ImportChats from "../import-chats";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
-import { Channel } from "../../../../managers/message-manager-types";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { ChatContext } from "../../chat-context-provider";
+import { Channel } from "../../../../../managers/message-manager-types";
 import { ChatDirectMessage } from "./chat-direct-message";
 
 interface Props {
diff --git a/src/common/features/chats/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
similarity index 91%
rename from src/common/features/chats/chat-popup/chat-popup-header.tsx
rename to src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index f19de84d3c1..e1bfdc959c2 100644
--- a/src/common/features/chats/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -1,5 +1,5 @@
-import Tooltip from "../../../components/tooltip";
-import { _t } from "../../../i18n";
+import Tooltip from "../../../../components/tooltip";
+import { _t } from "../../../../i18n";
 import { Button } from "@ui/button";
 import {
   addMessageSvg,
@@ -7,15 +7,15 @@ import {
   duotoneRefreshSvg,
   expandArrow,
   extendedView
-} from "../../../img/svg";
+} from "../../../../img/svg";
 import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import { history } from "../../../store";
+import { history } from "../../../../store";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
-import { classNameObject } from "../../../helper/class-name-object";
+import { classNameObject } from "../../../../helper/class-name-object";
 import React, { useContext } from "react";
-import UserAvatar from "../../../components/user-avatar";
-import { Community } from "../../../store/communities";
-import { ChatContext } from "../chat-context-provider";
+import UserAvatar from "../../../../components/user-avatar";
+import { Community } from "../../../../store/communities";
+import { ChatContext } from "../../chat-context-provider";
 
 interface Props {
   currentUser: string;
diff --git a/src/common/features/chats/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
similarity index 86%
rename from src/common/features/chats/chat-popup/chat-popup-messages-list.tsx
rename to src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 2e5430f5754..840913851c6 100644
--- a/src/common/features/chats/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -2,11 +2,11 @@ import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chats-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
 import ChatsChannelMessages from "../chats-channel-messages";
-import { history } from "../../../store";
+import { history } from "../../../../store";
 import React, { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
-import { Community } from "../../../store/communities";
-import { DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
+import { ChatContext } from "../../chat-context-provider";
+import { Community } from "../../../../store/communities";
+import { DirectMessage, PublicMessage } from "../../../../../managers/message-manager-types";
 
 interface Props {
   isCurrentUser: boolean;
diff --git a/src/common/features/chats/chat-popup/chat-popup-search-user.tsx b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
similarity index 89%
rename from src/common/features/chats/chat-popup/chat-popup-search-user.tsx
rename to src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
index df7a16050f9..d4653c183aa 100644
--- a/src/common/features/chats/chat-popup/chat-popup-search-user.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
@@ -1,10 +1,10 @@
 import { FormControl, InputGroup } from "@ui/input";
-import { _t } from "../../../i18n";
-import accountReputation from "../../../helper/account-reputation";
+import { _t } from "../../../../i18n";
+import accountReputation from "../../../../helper/account-reputation";
 import React, { useState } from "react";
-import UserAvatar from "../../../components/user-avatar";
+import UserAvatar from "../../../../components/user-avatar";
 import useDebounce from "react-use/lib/useDebounce";
-import { useSearchUsersQuery } from "../queries";
+import { useSearchUsersQuery } from "../../queries";
 import { Spinner } from "@ui/spinner";
 
 interface Props {
diff --git a/src/common/features/chats/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
similarity index 100%
rename from src/common/features/chats/chat-popup/index.scss
rename to src/common/features/chats/components/chat-popup/index.scss
diff --git a/src/common/features/chats/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
similarity index 95%
rename from src/common/features/chats/chat-popup/index.tsx
rename to src/common/features/chats/components/chat-popup/index.tsx
index b9581fe24ae..b65e6b1f94d 100644
--- a/src/common/features/chats/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -1,30 +1,30 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
-import { history } from "../../../store";
-import { Community } from "../../../store/communities";
+import { history } from "../../../../store";
+import { Community } from "../../../../store/communities";
 import {
   ChannelUpdate,
   DirectMessage,
   PublicMessage
-} from "../../../../managers/message-manager-types";
-import Tooltip from "../../../components/tooltip";
-import LinearProgress from "../../../components/linear-progress";
-import { setNostrkeys } from "../../../../managers/message-manager";
+} from "../../../../../managers/message-manager-types";
+import Tooltip from "../../../../components/tooltip";
+import LinearProgress from "../../../../components/linear-progress";
+import { setNostrkeys } from "../../../../../managers/message-manager";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
-import { chevronDownSvgForSlider, chevronUpSvg } from "../../../img/svg";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
 import { EmojiPickerStyle, GifPickerStyle } from "./chat-constants";
-import { _t } from "../../../i18n";
-import { usePrevious } from "../../../util/use-previous";
-import { getCommunity } from "../../../api/bridge";
+import { _t } from "../../../../i18n";
+import { usePrevious } from "../../../../util/use-previous";
+import { getCommunity } from "../../../../api/bridge";
 import "./index.scss";
-import { fetchCommunityMessages, getPrivateKey, getUserChatPublicKey } from "../utils";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
+import { fetchCommunityMessages, getPrivateKey, getUserChatPublicKey } from "../../utils";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
-import { classNameObject } from "../../../helper/class-name-object";
+import { classNameObject } from "../../../../helper/class-name-object";
 import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
diff --git a/src/common/features/chats/chats-channel-messages/index.scss b/src/common/features/chats/components/chats-channel-messages/index.scss
similarity index 99%
rename from src/common/features/chats/chats-channel-messages/index.scss
rename to src/common/features/chats/components/chats-channel-messages/index.scss
index b5d08a1da9a..2f792bbba79 100644
--- a/src/common/features/chats/chats-channel-messages/index.scss
+++ b/src/common/features/chats/components/chats-channel-messages/index.scss
@@ -2,6 +2,7 @@
 
 .channel-messages {
   padding-bottom: 15px;
+
   .custom-divider {
     .custom-divider-text {
       margin-bottom: 1rem;
@@ -11,18 +12,23 @@
 
   .receiver {
     display: flex;
+
     .user-img {
       padding: 18px 8px 8px 16px;
     }
+
     .community-user-img {
       padding: 8px 8px 8px 16px;
+
       .user-avatar.medium {
         cursor: pointer;
       }
     }
+
     .user-info {
       padding-top: 8px;
       width: 100%;
+
       .user-msg-time {
         margin: 0;
         color: rgb(138, 141, 145);
@@ -30,10 +36,12 @@
         font-size: 12px;
         margin-left: 4px;
         margin-bottom: 2px;
+
         .username-community {
           margin-right: 8px;
         }
       }
+
       .receiver-message {
         display: flex;
 
@@ -74,6 +82,7 @@
           &.gif {
             background: none;
             padding: 0;
+
             img {
               max-width: 100%;
             }
@@ -82,6 +91,7 @@
           &.chat-image {
             background: none;
             padding: 0;
+
             img {
               max-width: 100%;
             }
@@ -92,12 +102,15 @@
             .receiver-message-wrapper {
               background: none;
             }
+
             .receiver-message-content {
               padding: 0;
+
               img {
                 padding-bottom: 10px;
               }
             }
+
             .receiver-msg-time {
               @include themify(day) {
                 color: rgb(138, 141, 145);
@@ -109,13 +122,16 @@
           }
         }
       }
+
       &.same-user-msg {
         margin-left: 4rem;
         padding-top: 1px;
+
         .receiver-message-wrapper {
           border-radius: 10px;
         }
       }
+
       &.date-changed {
         margin-left: 0;
         border-radius: 0px 10px 10px 0px;
@@ -136,6 +152,7 @@
       .resend-svg {
         margin: 5px 15px 0 0;
         cursor: pointer;
+
         svg {
           @include themify(day) {
             @apply fill-gray-600;
@@ -148,6 +165,7 @@
 
       .failed-svg {
         margin: 8px 0 0 5px;
+
         svg {
           width: 16px;
           height: 16px;
@@ -158,6 +176,7 @@
       &.sending {
         margin-right: 5px;
       }
+
       &.failed {
         margin-right: 7px;
       }
@@ -180,6 +199,7 @@
           background: none;
 
           padding: 0;
+
           img {
             max-width: 100%;
           }
@@ -188,6 +208,7 @@
         &.chat-image {
           background: none;
           padding: 0;
+
           img {
             max-width: 100%;
           }
@@ -198,8 +219,10 @@
           .sender-message-time {
             color: rgb(138, 141, 145);
           }
+
           .sender-message-content {
             padding: 10px 0 0 5px;
+
             img {
               padding-bottom: 10px;
             }
@@ -237,17 +260,21 @@
       }
     }
   }
+
   .hide-msg {
     margin-right: 15px;
     margin-top: 5px;
+
     svg {
       height: 14px;
       width: 14px;
     }
+
     .hide-msg-svg {
       cursor: pointer;
       margin-bottom: 0;
     }
+
     &.receiver {
       margin-top: 5px;
       margin-left: 10px;
@@ -257,20 +284,24 @@
 
 .profile-box {
   padding: 15px;
+
   .profile-box-content {
     .user-avatar.large {
       margin-bottom: 20px;
     }
+
     .profile-name {
       margin: 5px 0 10px 0;
       font-size: 18px;
       font-weight: 800;
     }
+
     .profile-box-buttons {
       padding: 0 5px;
     }
   }
 }
+
 .medium-zoom-overlay,
 .medium-zoom-image--opened {
   z-index: 999;
diff --git a/src/common/features/chats/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
similarity index 97%
rename from src/common/features/chats/chats-channel-messages/index.tsx
rename to src/common/features/chats/components/chats-channel-messages/index.tsx
index 2879349f771..936bb00f821 100644
--- a/src/common/features/chats/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -6,20 +6,20 @@ import {
   communityModerator,
   Profile,
   PublicMessage
-} from "../../../../managers/message-manager-types";
+} from "../../../../../managers/message-manager-types";
 import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import UserAvatar from "../../../components/user-avatar";
-import FollowControls from "../../../components/follow-controls";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import UserAvatar from "../../../../components/user-avatar";
+import FollowControls from "../../../../components/follow-controls";
 import usePrevious from "react-use/lib/usePrevious";
-import { _t } from "../../../i18n";
-import Tooltip from "../../../components/tooltip";
-import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../img/svg";
+import { _t } from "../../../../i18n";
+import Tooltip from "../../../../components/tooltip";
+import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../../img/svg";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { error } from "../../../components/feedback";
+import { error } from "../../../../components/feedback";
 import { CHATPAGE, COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
-import { Theme } from "../../../store/global/types";
+import { Theme } from "../../../../store/global/types";
 import {
   checkContiguousMessage,
   formatMessageDate,
@@ -27,8 +27,8 @@ import {
   formatMessageTime,
   isMessageGif,
   isMessageImage
-} from "../utils";
-import { ChatContext } from "../chat-context-provider";
+} from "../../utils";
+import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { Popover, PopoverContent } from "@ui/popover";
diff --git a/src/common/features/chats/chats-community-dropdown-menu/index.scss b/src/common/features/chats/components/chats-community-dropdown-menu/index.scss
similarity index 99%
rename from src/common/features/chats/chats-community-dropdown-menu/index.scss
rename to src/common/features/chats/components/chats-community-dropdown-menu/index.scss
index ec44864509c..fd409af6790 100644
--- a/src/common/features/chats/chats-community-dropdown-menu/index.scss
+++ b/src/common/features/chats/components/chats-community-dropdown-menu/index.scss
@@ -5,11 +5,13 @@
     .community-chat-role-edit-dialog-content {
       margin-top: 2rem;
     }
+
     .success-dialog-header {
       .success-dialog-titles {
         margin-top: 10px;
       }
     }
+
     .success-dialog-body {
       padding: 10px 20px 20px 10px;
     }
diff --git a/src/common/features/chats/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
similarity index 95%
rename from src/common/features/chats/chats-community-dropdown-menu/index.tsx
rename to src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
index 07d42ceb806..d0c7125e271 100644
--- a/src/common/features/chats/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../../components/dropdown";
+import DropDown, { MenuItem } from "../../../../components/dropdown";
 import useDebounce from "react-use/lib/useDebounce";
 
-import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../img/svg";
-import { _t } from "../../../i18n";
+import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../../img/svg";
+import { _t } from "../../../../i18n";
 import {
   ADDROLE,
   CHATPAGE,
@@ -13,17 +13,17 @@ import {
   NOSTRKEY,
   UNBLOCKUSER
 } from "../chat-popup/chat-constants";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../managers/message-manager-types";
-import { error, success } from "../../../components/feedback";
-import LinearProgress from "../../../components/linear-progress";
-import { ROLES } from "../../../store/communities";
-import UserAvatar from "../../../components/user-avatar";
-import { copyToClipboard } from "../utils";
-import { ChatContext } from "../chat-context-provider";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { Channel, communityModerator } from "../../../../../managers/message-manager-types";
+import { error, success } from "../../../../components/feedback";
+import LinearProgress from "../../../../components/linear-progress";
+import { ROLES } from "../../../../store/communities";
+import UserAvatar from "../../../../components/user-avatar";
+import { copyToClipboard } from "../../utils";
+import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
-import { getAccountFull } from "../../../api/hive";
+import { getAccountFull } from "../../../../api/hive";
 import { Button } from "@ui/button";
 import { FormControl, InputGroup } from "@ui/input";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
diff --git a/src/common/features/chats/chats-confirmation-modal/index.scss b/src/common/features/chats/components/chats-confirmation-modal/index.scss
similarity index 99%
rename from src/common/features/chats/chats-confirmation-modal/index.scss
rename to src/common/features/chats/components/chats-confirmation-modal/index.scss
index 167d69933b0..55c7e9b13c0 100644
--- a/src/common/features/chats/chats-confirmation-modal/index.scss
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.scss
@@ -4,6 +4,7 @@
   font-size: 18px;
   margin-top: 12px;
 }
+
 .join-community-confirm-buttons {
   text-align: right;
   margin-top: 2rem;
diff --git a/src/common/features/chats/chats-confirmation-modal/index.tsx b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
similarity index 91%
rename from src/common/features/chats/chats-confirmation-modal/index.tsx
rename to src/common/features/chats/components/chats-confirmation-modal/index.tsx
index 115c5ef99b3..a8bdd7306da 100644
--- a/src/common/features/chats/chats-confirmation-modal/index.tsx
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
-import { _t } from "../../../i18n";
-import LinearProgress from "../../../components/linear-progress";
-import { ChatContext } from "../chat-context-provider";
+import { _t } from "../../../../i18n";
+import LinearProgress from "../../../../components/linear-progress";
+import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { Button } from "@ui/button";
@@ -13,6 +13,7 @@ interface Props {
   onClose: () => void;
   onConfirm: () => void;
 }
+
 const ChatsConfirmationModal = (props: Props) => {
   const { onClose, onConfirm, content, actionType } = props;
   const { hasUserJoinedChat } = useContext(ChatContext);
diff --git a/src/common/features/chats/chats-direct-messages/index.scss b/src/common/features/chats/components/chats-direct-messages/index.scss
similarity index 99%
rename from src/common/features/chats/chats-direct-messages/index.scss
rename to src/common/features/chats/components/chats-direct-messages/index.scss
index 6a9451effbf..9a4d2fa0182 100644
--- a/src/common/features/chats/chats-direct-messages/index.scss
+++ b/src/common/features/chats/components/chats-direct-messages/index.scss
@@ -2,26 +2,33 @@
 
 .direct-messages {
   padding-bottom: 15px;
+
   .custom-divider {
     .custom-divider-text {
       margin-bottom: 1rem;
       font-size: 14px;
     }
   }
+
   .receiver {
     display: flex;
+
     .user-img {
       padding: 8px 8px 8px 16px;
     }
+
     .community-user-img {
       padding: 8px 8px 0px 16px;
+
       .user-avatar.medium {
         cursor: pointer;
       }
     }
+
     .user-info {
       padding-top: 20px;
       width: 100%;
+
       .user-msg-time {
         margin: 0;
         color: rgb(138, 141, 145);
@@ -29,10 +36,12 @@
         font-size: 12px;
         margin-left: 4px;
         margin-bottom: 2px;
+
         .username-community {
           margin-right: 8px;
         }
       }
+
       .receiver-messag {
         display: flex;
 
@@ -73,6 +82,7 @@
           &.gif {
             background: none;
             padding: 0;
+
             img {
               max-width: 100%;
             }
@@ -81,6 +91,7 @@
           &.chat-image {
             background: none;
             padding: 0;
+
             img {
               max-width: 100%;
             }
@@ -91,12 +102,15 @@
             .receiver-message-wrapper {
               background: none;
             }
+
             .receiver-message-content {
               padding: 0;
+
               img {
                 padding-bottom: 10px;
               }
             }
+
             .receiver-msg-time {
               @include themify(day) {
                 color: rgb(138, 141, 145);
@@ -108,9 +122,11 @@
           }
         }
       }
+
       &.same-user-msg {
         margin-left: 4rem;
         padding-top: 1px;
+
         .receiver-message-wrapper {
           border-radius: 10px;
         }
@@ -136,6 +152,7 @@
       .resend-svg {
         margin: 5px 15px 0 0;
         cursor: pointer;
+
         svg {
           @include themify(day) {
             @apply fill-gray-600;
@@ -148,6 +165,7 @@
 
       .failed-svg {
         margin: 8px 0 0 5px;
+
         svg {
           width: 16px;
           height: 16px;
@@ -158,6 +176,7 @@
       &.sending {
         margin-right: 5px;
       }
+
       &.failed {
         margin-right: 7px;
       }
@@ -180,6 +199,7 @@
           background: none;
 
           padding: 0;
+
           img {
             max-width: 100%;
           }
@@ -188,6 +208,7 @@
         &.chat-image {
           background: none;
           padding: 0;
+
           img {
             max-width: 100%;
           }
@@ -198,8 +219,10 @@
           .sender-message-time {
             color: rgb(138, 141, 145);
           }
+
           .sender-message-content {
             padding: 10px 0 0 5px;
+
             img {
               padding-bottom: 10px;
             }
@@ -213,6 +236,7 @@
           font-size: 16px;
           font-weight: 400;
           padding: 8px 8px 8px 12px;
+
           a {
             text-decoration: underline;
             color: white;
diff --git a/src/common/features/chats/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
similarity index 94%
rename from src/common/features/chats/chats-direct-messages/index.tsx
rename to src/common/features/chats/components/chats-direct-messages/index.tsx
index 2406948cae1..7f5cb845319 100644
--- a/src/common/features/chats/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -9,21 +9,21 @@ import {
   formatMessageTime,
   isMessageGif,
   isMessageImage
-} from "../utils";
+} from "../../utils";
 
-import { Theme } from "../../../store/global/types";
-import { DirectMessage } from "../../../../managers/message-manager-types";
+import { Theme } from "../../../../store/global/types";
+import { DirectMessage } from "../../../../../managers/message-manager-types";
 
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { useMappedStore } from "../../../../store/use-mapped-store";
 
-import UserAvatar from "../../../components/user-avatar";
-import Tooltip from "../../../components/tooltip";
-import { ChatContext } from "../chat-context-provider";
+import UserAvatar from "../../../../components/user-avatar";
+import Tooltip from "../../../../components/tooltip";
+import { ChatContext } from "../../chat-context-provider";
 
-import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
+import { failedMessageSvg, resendMessageSvg } from "../../../../img/svg";
 
 import { renderPostBody } from "@ecency/render-helper";
-import { _t } from "../../../i18n";
+import { _t } from "../../../../i18n";
 
 import "./index.scss";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
diff --git a/src/common/features/chats/chats-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-dropdown-menu/index.tsx
similarity index 82%
rename from src/common/features/chats/chats-dropdown-menu/index.tsx
rename to src/common/features/chats/components/chats-dropdown-menu/index.tsx
index 5a1ed185dd1..685008f4f5e 100644
--- a/src/common/features/chats/chats-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu/index.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../../components/dropdown";
-import { chatKeySvg, kebabMenuSvg } from "../../../img/svg";
-import { _t } from "../../../i18n";
+import DropDown, { MenuItem } from "../../../../components/dropdown";
+import { chatKeySvg, kebabMenuSvg } from "../../../../img/svg";
+import { _t } from "../../../../i18n";
 
 interface Props {
   history: History | null;
diff --git a/src/common/features/chats/chats-messages-box/index.scss b/src/common/features/chats/components/chats-messages-box/index.scss
similarity index 99%
rename from src/common/features/chats/chats-messages-box/index.scss
rename to src/common/features/chats/components/chats-messages-box/index.scss
index 7897210be42..1a40327eea0 100644
--- a/src/common/features/chats/chats-messages-box/index.scss
+++ b/src/common/features/chats/components/chats-messages-box/index.scss
@@ -23,6 +23,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     .start-chat-wrapper {
       .start-chat {
         @include themify(day) {
diff --git a/src/common/features/chats/chats-messages-box/index.tsx b/src/common/features/chats/components/chats-messages-box/index.tsx
similarity index 92%
rename from src/common/features/chats/chats-messages-box/index.tsx
rename to src/common/features/chats/components/chats-messages-box/index.tsx
index 40491912b07..689429cab48 100644
--- a/src/common/features/chats/chats-messages-box/index.tsx
+++ b/src/common/features/chats/components/chats-messages-box/index.tsx
@@ -1,17 +1,17 @@
 import React, { useContext, useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
-import { Account } from "../../../store/accounts/types";
-import { ToggleType, UI } from "../../../store/ui/types";
-import { User } from "../../../store/users/types";
+import { Account } from "../../../../store/accounts/types";
+import { ToggleType, UI } from "../../../../store/ui/types";
+import { User } from "../../../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
-import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
-import LinearProgress from "../../../components/linear-progress";
-import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { Channel, ChannelUpdate } from "../../../../../managers/message-manager-types";
+import LinearProgress from "../../../../components/linear-progress";
+import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../../utils";
+import { useMappedStore } from "../../../../store/use-mapped-store";
 import { CHANNEL } from "../chat-popup/chat-constants";
-import { ChatContext } from "../chat-context-provider";
+import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
 
 import "./index.scss";
diff --git a/src/common/features/chats/chats-messages-header/index.scss b/src/common/features/chats/components/chats-messages-header/index.scss
similarity index 99%
rename from src/common/features/chats/chats-messages-header/index.scss
rename to src/common/features/chats/components/chats-messages-header/index.scss
index 90f45cd07d8..e21f0ecc3d6 100644
--- a/src/common/features/chats/chats-messages-header/index.scss
+++ b/src/common/features/chats/components/chats-messages-header/index.scss
@@ -31,6 +31,7 @@
     .user-info-wrapper {
       .expand-icon {
         margin-top: 15px;
+
         .expand-svg {
           height: 35px;
           width: 35px;
@@ -67,6 +68,7 @@
           font-weight: 700;
           margin: 7px 0 0 12px;
         }
+
         &:hover {
           border-radius: 10px;
           @include themify(day) {
@@ -90,6 +92,7 @@
       margin-top: 14px;
       cursor: pointer;
       border-radius: 50%;
+
       svg {
         @include themify(day) {
           @apply text-gray-charcoal;
@@ -99,6 +102,7 @@
           @apply text-light-200;
         }
       }
+
       &:hover {
         @include themify(day) {
           background: rgba(29, 155, 240, 0.1);
diff --git a/src/common/features/chats/chats-messages-header/index.tsx b/src/common/features/chats/components/chats-messages-header/index.tsx
similarity index 83%
rename from src/common/features/chats/chats-messages-header/index.tsx
rename to src/common/features/chats/components/chats-messages-header/index.tsx
index 3822892eb5c..76d466c49c5 100644
--- a/src/common/features/chats/chats-messages-header/index.tsx
+++ b/src/common/features/chats/components/chats-messages-header/index.tsx
@@ -1,14 +1,14 @@
 import React, { useContext } from "react";
 import { History } from "history";
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { useMappedStore } from "../../../../store/use-mapped-store";
 import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import UserAvatar from "../../../components/user-avatar";
+import UserAvatar from "../../../../components/user-avatar";
 import { CHATPAGE } from "../chat-popup/chat-constants";
-import { Chat } from "../../../store/chat/types";
-import { formattedUserName } from "../utils";
-import Link from "../../../components/alink";
-import { expandSideBar } from "../../../img/svg";
-import { ChatContext } from "../chat-context-provider";
+import { Chat } from "../../../../store/chat/types";
+import { formattedUserName } from "../../utils";
+import Link from "../../../../components/alink";
+import { expandSideBar } from "../../../../img/svg";
+import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 
diff --git a/src/common/features/chats/chats-messages-view/index.scss b/src/common/features/chats/components/chats-messages-view/index.scss
similarity index 100%
rename from src/common/features/chats/chats-messages-view/index.scss
rename to src/common/features/chats/components/chats-messages-view/index.scss
diff --git a/src/common/features/chats/chats-messages-view/index.tsx b/src/common/features/chats/components/chats-messages-view/index.tsx
similarity index 92%
rename from src/common/features/chats/chats-messages-view/index.tsx
rename to src/common/features/chats/components/chats-messages-view/index.tsx
index 4084dca2f87..1eec8163a84 100644
--- a/src/common/features/chats/chats-messages-view/index.tsx
+++ b/src/common/features/chats/components/chats-messages-view/index.tsx
@@ -1,22 +1,26 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Channel, DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
-import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
+import {
+  Channel,
+  DirectMessage,
+  PublicMessage
+} from "../../../../../managers/message-manager-types";
+import { fetchCommunityMessages, fetchDirectMessages } from "../../utils";
 import { History } from "history";
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { useMappedStore } from "../../../../store/use-mapped-store";
 import ChatsProfileBox from "../chats-profile-box";
 import "./index.scss";
 import ChatsChannelMessages from "../chats-channel-messages";
 import ChatsDirectMessages from "../chats-direct-messages";
-import { Account } from "../../../store/accounts/types";
-import { ToggleType, UI } from "../../../store/ui/types";
-import { User } from "../../../store/users/types";
+import { Account } from "../../../../store/accounts/types";
+import { ToggleType, UI } from "../../../../store/ui/types";
+import { User } from "../../../../store/users/types";
 import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
-import { EmojiPickerStyleProps } from "../types";
-import { ChatContext } from "../chat-context-provider";
-import { classNameObject } from "../../../helper/class-name-object";
+import { EmojiPickerStyleProps } from "../../types";
+import { ChatContext } from "../../chat-context-provider";
+import { classNameObject } from "../../../../helper/class-name-object";
 
 const EmojiPickerStyle: EmojiPickerStyleProps = {
   width: "56.5%",
@@ -27,6 +31,7 @@ const EmojiPickerStyle: EmojiPickerStyleProps = {
   borderTopRightRadius: "8px",
   borderBottomLeftRadius: "0px"
 };
+
 interface Props {
   username: string;
   users: User[];
diff --git a/src/common/features/chats/chats-profile-box/index.scss b/src/common/features/chats/components/chats-profile-box/index.scss
similarity index 99%
rename from src/common/features/chats/chats-profile-box/index.scss
rename to src/common/features/chats/components/chats-profile-box/index.scss
index 3fed697a18d..54574a03468 100644
--- a/src/common/features/chats/chats-profile-box/index.scss
+++ b/src/common/features/chats/components/chats-profile-box/index.scss
@@ -23,6 +23,7 @@
       padding-top: 16px;
       cursor: pointer;
     }
+
     .user-name {
       font-size: 20px;
       font-weight: 700;
@@ -33,6 +34,7 @@
         color: $white;
       }
     }
+
     .about {
       text-align: center;
       padding: 4px 0;
@@ -43,9 +45,11 @@
         @apply text-white;
       }
     }
+
     .joining-info {
       justify-content: space-evenly;
     }
+
     .created-date {
       padding-top: 8px;
       font-size: 14px;
@@ -56,6 +60,7 @@
         @apply text-white;
       }
     }
+
     .followers {
       font-size: 14px;
       padding-top: 4px !important;
diff --git a/src/common/features/chats/chats-profile-box/index.tsx b/src/common/features/chats/components/chats-profile-box/index.tsx
similarity index 91%
rename from src/common/features/chats/chats-profile-box/index.tsx
rename to src/common/features/chats/components/chats-profile-box/index.tsx
index f537a0399a8..0d9f4020944 100644
--- a/src/common/features/chats/chats-profile-box/index.tsx
+++ b/src/common/features/chats/components/chats-profile-box/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import UserAvatar from "../../../components/user-avatar";
-import { dateToFormatted } from "../../../helper/parse-date";
-import { _t } from "../../../i18n";
-import { getAccountFull } from "../../../api/hive";
-import { formattedUserName } from "../utils";
-import { useCommunityCache } from "../../../core";
+import UserAvatar from "../../../../components/user-avatar";
+import { dateToFormatted } from "../../../../helper/parse-date";
+import { _t } from "../../../../i18n";
+import { getAccountFull } from "../../../../api/hive";
+import { formattedUserName } from "../../utils";
+import { useCommunityCache } from "../../../../core";
 
 import "./index.scss";
 
diff --git a/src/common/features/chats/chats-scroller/index.scss b/src/common/features/chats/components/chats-scroller/index.scss
similarity index 100%
rename from src/common/features/chats/chats-scroller/index.scss
rename to src/common/features/chats/components/chats-scroller/index.scss
diff --git a/src/common/features/chats/chats-scroller/index.tsx b/src/common/features/chats/components/chats-scroller/index.tsx
similarity index 89%
rename from src/common/features/chats/chats-scroller/index.tsx
rename to src/common/features/chats/components/chats-scroller/index.tsx
index 8ca89454d4e..8cec4b490d5 100644
--- a/src/common/features/chats/chats-scroller/index.tsx
+++ b/src/common/features/chats/components/chats-scroller/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import Tooltip from "../../../components/tooltip";
+import Tooltip from "../../../../components/tooltip";
 
-import { _t } from "../../../i18n";
-import { chevronDownSvgForSlider, chevronUpSvg } from "../../../img/svg";
+import { _t } from "../../../../i18n";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
 
 import "./index.scss";
 
@@ -12,6 +12,7 @@ interface Props {
   isScrollToBottom: boolean;
   marginRight: string;
 }
+
 export default function ChatsScroller(props: Props) {
   const { bodyRef, isScrollToTop, isScrollToBottom, marginRight } = props;
 
diff --git a/src/common/features/chats/chats-sidebar/indes.tsx b/src/common/features/chats/components/chats-sidebar/indes.tsx
similarity index 92%
rename from src/common/features/chats/chats-sidebar/indes.tsx
rename to src/common/features/chats/components/chats-sidebar/indes.tsx
index 450fdae899a..49eea945e66 100644
--- a/src/common/features/chats/chats-sidebar/indes.tsx
+++ b/src/common/features/chats/components/chats-sidebar/indes.tsx
@@ -2,28 +2,28 @@ import React, { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { History } from "history";
 import useDebounce from "react-use/lib/useDebounce";
-import { setNostrkeys } from "../../../../managers/message-manager";
-import { Channel } from "../../../../managers/message-manager-types";
-import { getAccountReputations } from "../../../api/hive";
-import accountReputation from "../../../helper/account-reputation";
+import { setNostrkeys } from "../../../../../managers/message-manager";
+import { Channel } from "../../../../../managers/message-manager-types";
+import { getAccountReputations } from "../../../../api/hive";
+import accountReputation from "../../../../helper/account-reputation";
 import {
   formattedUserName,
   getCommunityLastMessage,
   getDirectLastMessage,
   getJoinedCommunities,
   getUserChatPublicKey
-} from "../utils";
-import { _t } from "../../../i18n";
-import { arrowBackSvg, closeSvg, syncSvg } from "../../../img/svg";
+} from "../../utils";
+import { _t } from "../../../../i18n";
+import { arrowBackSvg, closeSvg, syncSvg } from "../../../../img/svg";
 import ChatsScroller from "../chats-scroller";
-import LinearProgress from "../../../components/linear-progress";
-import Tooltip from "../../../components/tooltip";
-import UserAvatar from "../../../components/user-avatar";
+import LinearProgress from "../../../../components/linear-progress";
+import Tooltip from "../../../../components/tooltip";
+import UserAvatar from "../../../../components/user-avatar";
 
 import ChatsDropdownMenu from "../chats-dropdown-menu";
-import { AccountWithReputation } from "../types";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
+import { AccountWithReputation } from "../../types";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { FormControl } from "@ui/input";
@@ -32,6 +32,7 @@ interface Props {
   username: string;
   history: History;
 }
+
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { chat, resetChat } = useMappedStore();
diff --git a/src/common/features/chats/chats-sidebar/index.scss b/src/common/features/chats/components/chats-sidebar/index.scss
similarity index 99%
rename from src/common/features/chats/chats-sidebar/index.scss
rename to src/common/features/chats/components/chats-sidebar/index.scss
index 9f214296045..3be4333425e 100644
--- a/src/common/features/chats/chats-sidebar/index.scss
+++ b/src/common/features/chats/components/chats-sidebar/index.scss
@@ -16,6 +16,7 @@
 
   .close-sidebar {
     margin: 10px 5px 0 0;
+
     svg {
       width: 30px;
       height: 30px;
@@ -64,6 +65,7 @@
     .chat-actions {
       .refresh-button {
         margin-top: 2px;
+
         .refresh-svg {
           width: 40px;
           height: 40px;
@@ -78,6 +80,7 @@
             height: 20px;
             width: 20px;
           }
+
           &:hover {
             @include themify(day) {
               background: rgba(29, 155, 240, 0.1);
@@ -88,6 +91,7 @@
           }
         }
       }
+
       .chat-menu {
         border: none;
         width: 40px;
@@ -98,6 +102,7 @@
         margin-top: 3px;
         cursor: pointer;
         border-radius: 50%;
+
         svg {
           @include themify(day) {
             @apply text-gray-charcoal;
@@ -107,6 +112,7 @@
             @apply text-light-200;
           }
         }
+
         &:hover {
           @include themify(day) {
             background: rgba(29, 155, 240, 0.1);
@@ -138,11 +144,13 @@
       cursor: pointer;
       padding: 15px 3px 15px 25px;
     }
+
     .user-name {
       font-size: 20px;
       font-weight: 700;
       margin: 7px 5px 0 15px;
     }
+
     .user-reputation {
       margin: 9px 5px 0 5px;
     }
@@ -186,6 +194,7 @@
         font-size: 18px;
         font-weight: 700;
       }
+
       .dm-last-message,
       .community-last-message {
         max-width: 255px;
@@ -197,6 +206,7 @@
         font-size: 13px;
       }
     }
+
     &.selected {
       @include themify(day) {
         background: #ecf3ff;
@@ -221,6 +231,7 @@
   .chats-list {
     height: calc(100vh - 220px);
     overflow: auto;
+
     a {
       color: inherit;
     }
@@ -234,27 +245,33 @@
     .chats-title {
       margin: 15px 0px 5px 5px;
     }
+
     .chats-search {
       padding: 0 5px 0 5px;
       margin-bottom: 0;
     }
+
     .chats-list {
       overflow-x: hidden;
+
       .community-title,
       .dm-title {
         font-size: 1rem;
         padding: 15px 0 10px 8px;
       }
+
       .community,
       .dm {
         margin: 0;
         padding: 9.5px 0px 9.5px 5px;
+
         .community-info,
         .dm-info {
           .community-name,
           .dm-name {
             padding: 3px 0 0 10px;
           }
+
           .community-last-message,
           .dm-last-message {
             padding: 4px 0 0 10px;
diff --git a/src/common/features/chats/import-chats/index.scss b/src/common/features/chats/components/import-chats/index.scss
similarity index 100%
rename from src/common/features/chats/import-chats/index.scss
rename to src/common/features/chats/components/import-chats/index.scss
diff --git a/src/common/features/chats/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
similarity index 85%
rename from src/common/features/chats/import-chats/index.tsx
rename to src/common/features/chats/components/import-chats/index.tsx
index 8cf512de746..31e1e174e52 100644
--- a/src/common/features/chats/import-chats/index.tsx
+++ b/src/common/features/chats/components/import-chats/index.tsx
@@ -1,15 +1,15 @@
 import React, { useContext, useEffect, useState } from "react";
-import { getPublicKey } from "../../../../lib/nostr-tools/keys";
-import { _t } from "../../../i18n";
-import { keySvg } from "../../../img/svg";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import OrDivider from "../../../components/or-divider";
-import * as ls from "../../../util/local-storage";
-import { ChatContext } from "../chat-context-provider";
-import { setNostrkeys } from "../../../../managers/message-manager";
+import { getPublicKey } from "../../../../../lib/nostr-tools/keys";
+import { _t } from "../../../../i18n";
+import { keySvg } from "../../../../img/svg";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import OrDivider from "../../../../components/or-divider";
+import * as ls from "../../../../util/local-storage";
+import { ChatContext } from "../../chat-context-provider";
+import { setNostrkeys } from "../../../../../managers/message-manager";
 
 import "./index.scss";
-import LinearProgress from "../../../components/linear-progress";
+import LinearProgress from "../../../../components/linear-progress";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
diff --git a/src/common/features/chats/join-chat/index.tsx b/src/common/features/chats/components/join-chat/index.tsx
similarity index 89%
rename from src/common/features/chats/join-chat/index.tsx
rename to src/common/features/chats/components/join-chat/index.tsx
index 47ba2890b8d..2c066698a72 100644
--- a/src/common/features/chats/join-chat/index.tsx
+++ b/src/common/features/chats/components/join-chat/index.tsx
@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from "react";
-import { ChatContext } from "../chat-context-provider";
+import { ChatContext } from "../../chat-context-provider";
 import { Button } from "@ui/button";
 import { Spinner } from "@ui/spinner";
-import { _t } from "../../../i18n";
+import { _t } from "../../../../i18n";
 
 export default function JoinChat() {
   const { messageServiceInstance, joinChat } = useContext(ChatContext);
diff --git a/src/common/features/chats/join-community-chat-btn/index.tsx b/src/common/features/chats/components/join-community-chat-btn/index.tsx
similarity index 94%
rename from src/common/features/chats/join-community-chat-btn/index.tsx
rename to src/common/features/chats/components/join-community-chat-btn/index.tsx
index 34342e34718..4299a3954d1 100644
--- a/src/common/features/chats/join-community-chat-btn/index.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn/index.tsx
@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
-import { Community, ROLES } from "../../../store/communities";
-import { _t } from "../../../i18n";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../managers/message-manager-types";
-import { ChatContext } from "../chat-context-provider";
+import { Community, ROLES } from "../../../../store/communities";
+import { _t } from "../../../../i18n";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { Channel, communityModerator } from "../../../../../managers/message-manager-types";
+import { ChatContext } from "../../chat-context-provider";
 import { CHANNEL, NOSTRKEY } from "../chat-popup/chat-constants";
-import { getProfileMetaData, setChannelMetaData } from "../utils";
+import { getProfileMetaData, setChannelMetaData } from "../../utils";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 
diff --git a/src/common/features/chats/manage-chat-key/index.scss b/src/common/features/chats/components/manage-chat-key/index.scss
similarity index 99%
rename from src/common/features/chats/manage-chat-key/index.scss
rename to src/common/features/chats/components/manage-chat-key/index.scss
index cea50e61b95..43861fbf647 100644
--- a/src/common/features/chats/manage-chat-key/index.scss
+++ b/src/common/features/chats/components/manage-chat-key/index.scss
@@ -8,6 +8,7 @@
 
     .expand-icon {
       margin: 13px 15px 0 0;
+
       .expand-svg {
         height: 35px;
         width: 35px;
@@ -27,12 +28,14 @@
       }
     }
   }
+
   .chat-priv-key {
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .copy-svg {
     margin-top: 3px;
     margin-left: 2px;
diff --git a/src/common/features/chats/manage-chat-key/index.tsx b/src/common/features/chats/components/manage-chat-key/index.tsx
similarity index 88%
rename from src/common/features/chats/manage-chat-key/index.tsx
rename to src/common/features/chats/components/manage-chat-key/index.tsx
index aa8cc86e9fa..3078b25dac9 100644
--- a/src/common/features/chats/manage-chat-key/index.tsx
+++ b/src/common/features/chats/components/manage-chat-key/index.tsx
@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { _t } from "../../../i18n";
+import { _t } from "../../../../i18n";
 import { History } from "history";
-import { expandSideBar } from "../../../img/svg";
-import { ChatContext } from "../chat-context-provider";
+import { expandSideBar } from "../../../../img/svg";
+import { ChatContext } from "../../chat-context-provider";
 import "./index.scss";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
-import { classNameObject } from "../../../helper/class-name-object";
+import { classNameObject } from "../../../../helper/class-name-object";
 
 interface Props {
   history: History;
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
new file mode 100644
index 00000000000..ab6125af0b0
--- /dev/null
+++ b/src/common/features/chats/mutations/index.ts
@@ -0,0 +1 @@
+export * from "./upload";
diff --git a/src/common/features/chats/mutations/upload.ts b/src/common/features/chats/mutations/upload.ts
new file mode 100644
index 00000000000..23cbe8e3e31
--- /dev/null
+++ b/src/common/features/chats/mutations/upload.ts
@@ -0,0 +1,66 @@
+import { useMutation } from "@tanstack/react-query";
+import { getAccessToken } from "../../../helper/user-token";
+import { uploadImage } from "../../../api/misc";
+import { addImage } from "../../../api/private-api";
+import { error } from "../../../components/feedback";
+import { _t } from "../../../i18n";
+import axios from "axios";
+import { useMappedStore } from "../../../store/use-mapped-store";
+
+class FileUploadingError {
+  constructor(public code: number, public message: string) {}
+}
+
+export function useChatFileUpload(
+  setMessage: (v: string) => void,
+  setIsMessageText: (v: boolean) => void
+) {
+  const { activeUser, global } = useMappedStore();
+
+  return useMutation(
+    ["chat-file-upload"],
+    async (file: File) => {
+      const username = activeUser?.username;
+
+      if (!username) {
+        throw new FileUploadingError(0, "[Chat][File uploading] No user");
+      }
+
+      const token = getAccessToken(username);
+
+      if (!token) {
+        throw new FileUploadingError(1, "[Chat][File uploading] No token");
+      }
+
+      const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
+      setMessage(tempImgTag);
+
+      let imageUrl: string;
+      const resp = await uploadImage(file, token);
+      imageUrl = resp.url;
+
+      if (global.usePrivate && imageUrl.length > 0) {
+        await addImage(username, imageUrl);
+      }
+
+      const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
+      if (imgTag) {
+        setMessage(imgTag);
+      }
+
+      setIsMessageText(true);
+    },
+    {
+      onError: (e) => {
+        if (axios.isAxiosError(e) && e.response?.status === 413) {
+          error(_t("editor-toolbar.image-error-size"));
+        } else if (e instanceof FileUploadingError) {
+          error(_t("editor-toolbar.image-error-cache"));
+          throw new Error(e.message);
+        } else {
+          error(_t("editor-toolbar.image-error"));
+        }
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/utils/is-message-gif.ts b/src/common/features/chats/utils/is-message-gif.ts
index e3e2ee5b823..77d8fda9817 100644
--- a/src/common/features/chats/utils/is-message-gif.ts
+++ b/src/common/features/chats/utils/is-message-gif.ts
@@ -1,4 +1,4 @@
-import { GIPHGY } from "../chat-popup/chat-constants";
+import { GIPHGY } from "../components/chat-popup/chat-constants";
 
 export const isMessageGif = (content: string) => {
   return content.includes(GIPHGY);
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
index 53f729c429e..58a8608571f 100644
--- a/src/common/pages/chats/index.tsx
+++ b/src/common/pages/chats/index.tsx
@@ -4,15 +4,15 @@ import { match } from "react-router";
 import NavBar from "../../components/navbar";
 import NavBarElectron from "../../../desktop/app/components/navbar";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
-import ChatsSideBar from "../../features/chats/chats-sidebar/indes";
-import ChatsMessagesBox from "../../features/chats/chats-messages-box";
+import ChatsSideBar from "../../features/chats/components/chats-sidebar/indes";
+import ChatsMessagesBox from "../../features/chats/components/chats-messages-box";
 
-import ManageChatKey from "../../features/chats/manage-chat-key";
+import ManageChatKey from "../../features/chats/components/manage-chat-key";
 import Feedback from "../../components/feedback";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { ChatContext } from "../../features/chats/chat-context-provider";
-import ImportChats from "../../features/chats/import-chats";
-import JoinChat from "../../features/chats/join-chat";
+import ImportChats from "../../features/chats/components/import-chats";
+import JoinChat from "../../features/chats/components/join-chat";
 
 import "./index.scss";
 import { Spinner } from "@ui/spinner";

From 9b2fc5f57ef04801b1a1d916285c07e14812acf8 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 20 Oct 2023 23:17:36 +0600
Subject: [PATCH 099/179] Chat: improved sidebar UI

---
 package.json                                  |   3 +-
 src/common/app.tsx                            |   1 +
 .../__snapshots__/index.spec.tsx.snap         |   2 +-
 .../components/community-settings/index.tsx   |   2 +-
 .../components/emoji-picker/_index.scss       |   1 -
 src/common/components/emoji-picker/index.tsx  |  17 +-
 .../components/entry-list-item/index.tsx      |   2 +-
 src/common/components/gif-picker/index.tsx    |  13 +-
 .../video-upload-threespeak/index.tsx         |   2 +-
 .../components/wallet-hive-engine/index.tsx   |   6 +-
 .../chats/components/chat-input/index.scss    |  70 ----
 .../chats/components/chat-input/index.tsx     | 275 +++++++---------
 .../chats/components/chat-popup/index.tsx     |  25 +-
 .../chats-channel-messages/index.tsx          |  14 +-
 .../chats-community-dropdown-menu/index.tsx   |  10 +-
 .../chats-direct-messages/index.tsx           |   2 +-
 .../chats-messages-header/index.tsx           |   4 +-
 .../components/chats-messages-view/index.tsx  |   1 -
 .../chat-sidebar-direct-contact.tsx           |  56 ++++
 .../chats-sidebar/chat-sidebar-header.tsx     |  67 ++++
 .../chat-sidebar-search-item.tsx              |  24 ++
 .../chats-sidebar/chat-sidebar-search.tsx     |  51 +++
 .../chats/components/chats-sidebar/indes.tsx  | 304 ------------------
 .../chats/components/chats-sidebar/index.scss | 284 ----------------
 .../chats/components/chats-sidebar/index.tsx  | 180 +++++++++++
 .../chats/components/import-chats/index.tsx   |   2 +-
 .../features/chats/utils/get-relative-date.ts |  20 ++
 src/common/features/chats/utils/index.ts      |   1 +
 .../utils/use-get-direct-last-message.ts      |   2 +-
 src/common/features/ui/button/props.ts        |   1 +
 src/common/features/ui/button/styles.ts       |   6 +-
 .../features/ui/dropdown/dropdown-item.tsx    |  15 +-
 .../features/ui/dropdown/dropdown-menu.tsx    |   6 +-
 src/common/features/ui/input/input-group.tsx  |  16 +-
 src/common/i18n/locales/en-US.json            |   2 +
 src/common/img/svg.tsx                        |  53 ++-
 src/common/pages/chats.tsx                    | 111 +++++++
 src/common/pages/chats/index.scss             |  27 --
 src/common/pages/chats/index.tsx              | 127 --------
 src/common/pages/onboard.tsx                  |   2 +-
 yarn.lock                                     |  19 ++
 41 files changed, 784 insertions(+), 1042 deletions(-)
 delete mode 100644 src/common/features/chats/components/chat-input/index.scss
 create mode 100644 src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
 create mode 100644 src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
 create mode 100644 src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
 create mode 100644 src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
 delete mode 100644 src/common/features/chats/components/chats-sidebar/indes.tsx
 delete mode 100644 src/common/features/chats/components/chats-sidebar/index.scss
 create mode 100644 src/common/features/chats/components/chats-sidebar/index.tsx
 create mode 100644 src/common/features/chats/utils/get-relative-date.ts
 create mode 100644 src/common/pages/chats.tsx
 delete mode 100644 src/common/pages/chats/index.scss
 delete mode 100644 src/common/pages/chats/index.tsx

diff --git a/package.json b/package.json
index 2b44729d520..9deee56246d 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "@hiveio/hivescript": "^1.2.7",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
-    "@popperjs/core": "^2.11.8",
     "@noble/secp256k1": "^1.7.1",
+    "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
     "@types/tus-js-client": "^2.1.0",
@@ -36,6 +36,7 @@
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
     "currency-symbol-map": "^4.0.4",
+    "date-fns": "^2.30.0",
     "debounce": "^1.2.1",
     "diff-match-patch": "^1.0.5",
     "emoji-mart": "^5.5.2",
diff --git a/src/common/app.tsx b/src/common/app.tsx
index cd2686c37d6..0af333a3be2 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -202,6 +202,7 @@ const App = (props: any) => {
       </ChatContextProvider>
       <div id="modal-overlay-container" />
       <div id="modal-dialog-container" />
+      <div id="popper-container" />
     </EntriesCacheManager>
   );
 };
diff --git a/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap b/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
index 9cdc67ec535..0a6d4d2f0b0 100644
--- a/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
@@ -666,7 +666,7 @@ Hate Speech is not allowed"
       </div>
     </div>
     <div
-      className="flex justify-content-end"
+      className="flex justify-end"
     >
       <button
         className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2.125rem] px-3 "
diff --git a/src/common/components/community-settings/index.tsx b/src/common/components/community-settings/index.tsx
index 1374417b57a..d19aa412e23 100644
--- a/src/common/components/community-settings/index.tsx
+++ b/src/common/components/community-settings/index.tsx
@@ -307,7 +307,7 @@ export class CommunitySettings extends BaseComponent<Props, State> {
               />
             </div>
           </div>
-          <div className="flex justify-content-end">
+          <div className="flex justify-end">
             <Button type="submit" disabled={inProgress}>
               {_t("g.save")}
             </Button>
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index fddfd5d5a44..9978e348bdd 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -3,7 +3,6 @@
 .emoji-picker-dialog {
   position: absolute;
   z-index: 201;
-  top: 100%;
 
   em-emoji-picker {
     width: 300px;
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index ae2895eaa87..cbba7cf3f0f 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -5,10 +5,12 @@ import { v4 } from "uuid";
 import Picker from "@emoji-mart/react";
 import { useMappedStore } from "../../store/use-mapped-store";
 import useClickAway from "react-use/lib/useClickAway";
+import { classNameObject } from "../../helper/class-name-object";
 
 interface Props {
-  anchor: HTMLElement | null;
+  anchor: Element | null;
   onSelect: (e: string) => void;
+  position?: "top" | "bottom";
 }
 
 /**
@@ -16,15 +18,16 @@ interface Props {
  *
  * @param {Props} anchor - The anchor element to position the picker relative to.
  * @param {function} onSelect - The callback function to be called when an emoji is selected.
+ * @param position
  * @return The rendered emoji picker dialog.
  */
-export function EmojiPicker({ anchor, onSelect }: Props) {
+export function EmojiPicker({ anchor, onSelect, position }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { global } = useMappedStore();
 
   const [show, setShow] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
+
   // Due to ability to hold multiple dialogs we have to identify them
   const dialogId = useMemo(() => v4(), []);
 
@@ -37,7 +40,7 @@ export function EmojiPicker({ anchor, onSelect }: Props) {
   useEffect(() => {
     if (anchor) {
       anchor.addEventListener("click", () => {
-        anchor.style.position = "relative !important";
+        (anchor as HTMLElement).style.position = "relative !important";
         setShow(true);
       });
     }
@@ -48,7 +51,11 @@ export function EmojiPicker({ anchor, onSelect }: Props) {
       ref={ref}
       id={dialogId}
       key={dialogId}
-      className="emoji-picker-dialog"
+      className={classNameObject({
+        "emoji-picker-dialog": true,
+        "top-[100%]": (position ?? "bottom") === "bottom",
+        "bottom-[100%] right-0": position === "top"
+      })}
       style={{
         display: show ? "block" : "none"
       }}
diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx
index 24b3d911cb5..ffa0bbc94ef 100644
--- a/src/common/components/entry-list-item/index.tsx
+++ b/src/common/components/entry-list-item/index.tsx
@@ -288,7 +288,7 @@ export function EntryListItem({
             </div>
             <div className="item-summary">
               <div className="item-nsfw">
-                <span className="nsfw-badge text-capitalize d-inline-flex align-items-center">
+                <span className="nsfw-badge text-capitalize d-inline-flex items-center">
                   <div className="mute-icon">{volumeOffSvg}</div> <div>{_t("g.muted")}</div>
                 </span>
               </div>
diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index 7d6b6fd7cdb..f590be2b771 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -6,6 +6,7 @@ import { insertOrReplace } from "../../util/input-util";
 import _ from "lodash";
 import { fetchGif } from "../../api/misc";
 import "./_index.scss";
+
 interface Props {
   fallback?: (e: string) => void;
   shGif: boolean;
@@ -60,6 +61,7 @@ export default class GifPicker extends BaseComponent<Props> {
       this.delayedSearchOnScroll(filter, limit, offset + 50);
     }
   };
+
   componentDidMount() {
     const gifWrapper = document.querySelector(".emoji-picker");
     gifWrapper?.addEventListener("scroll", this.handleScroll);
@@ -111,6 +113,9 @@ export default class GifPicker extends BaseComponent<Props> {
     };
     this.stateSet(_data);
   };
+
+  delayedSearch = _.debounce(this.getSearchedData, 2000);
+
   getSearchedDataOnScroll = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     if (_filter?.length) {
@@ -126,6 +131,8 @@ export default class GifPicker extends BaseComponent<Props> {
     }
   };
 
+  delayedSearchOnScroll = _.debounce(this.getSearchedDataOnScroll, 2000);
+
   getGifsData = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     let _data: State = {
@@ -138,6 +145,7 @@ export default class GifPicker extends BaseComponent<Props> {
     };
     this.stateSet(_data);
   };
+
   getGifsDataOnScroll = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     let _data: State = {
@@ -174,9 +182,6 @@ export default class GifPicker extends BaseComponent<Props> {
     this.props.changeState(!this.props.shGif);
   };
 
-  delayedSearch = _.debounce(this.getSearchedData, 2000);
-  delayedSearchOnScroll = _.debounce(this.getSearchedDataOnScroll, 2000);
-
   filterChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ filter: e.target.value });
     if (e.target.value === "") {
@@ -248,7 +253,7 @@ export default class GifPicker extends BaseComponent<Props> {
             );
           }
         })()}
-        <span className="flex justify-content-end">{_t("gif-picker.credits")}</span>
+        <span className="flex justify-end">{_t("gif-picker.credits")}</span>
       </div>
     );
   }
diff --git a/src/common/components/video-upload-threespeak/index.tsx b/src/common/components/video-upload-threespeak/index.tsx
index 30758c074ae..a273692f906 100644
--- a/src/common/components/video-upload-threespeak/index.tsx
+++ b/src/common/components/video-upload-threespeak/index.tsx
@@ -186,7 +186,7 @@ export const VideoUpload = (props: Props & React.HTMLAttributes<HTMLDivElement>)
           <source src={selectedFile} type="video/mp4" />
         </video>
       </div>
-      <div className="flex justify-content-end mt-3">
+      <div className="flex justify-end mt-3">
         <Button
           className="bg-dark"
           onClick={() => {
diff --git a/src/common/components/wallet-hive-engine/index.tsx b/src/common/components/wallet-hive-engine/index.tsx
index fff49bc5602..7430f6627cd 100644
--- a/src/common/components/wallet-hive-engine/index.tsx
+++ b/src/common/components/wallet-hive-engine/index.tsx
@@ -470,7 +470,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               return (
                                 <span
                                   key={i}
-                                  className={`flex justify-content-end ${
+                                  className={`flex justify-end ${
                                     changeValue < 0 ? "text-red" : "text-green"
                                   }`}
                                 >
@@ -546,7 +546,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               {b.stakingEnabled && (
                                 <div className="mr-1">
                                   <Tooltip content="Stake">
-                                    <div className="flex items-center flex-justify-center align-center">
+                                    <div className="flex items-center flex-justify-center items-center">
                                       <span
                                         onClick={() =>
                                           this.openTransferDialog("stake", b.symbol, b.balance)
@@ -562,7 +562,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               {b.stake > 0 && (
                                 <div className="mr-1">
                                   <Tooltip content="Unstake">
-                                    <div className="flex items-center flex-justify-center align-center">
+                                    <div className="flex items-center flex-justify-center items-center">
                                       <span
                                         onClick={() =>
                                           this.openTransferDialog(
diff --git a/src/common/features/chats/components/chat-input/index.scss b/src/common/features/chats/components/chat-input/index.scss
deleted file mode 100644
index c3eafef54c7..00000000000
--- a/src/common/features/chats/components/chat-input/index.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chat {
-  grid-row: span 1;
-  display: flex;
-  margin: 4px 8px;
-  padding: 4px;
-  min-height: 45px;
-  border-radius: 20px;
-  @include themify(day) {
-    background: #e4e6eb;
-  }
-  @include themify(night) {
-    background: #cee2ff;
-  }
-
-  &.disable {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .chatbox-emoji-picker {
-    .chatbox-emoji {
-      margin: 8px 0 0 7px;
-      cursor: pointer;
-
-      svg {
-        height: 22px;
-        fill: rgb(60, 68, 73);
-      }
-    }
-  }
-
-  .chatbox-image {
-    cursor: pointer;
-
-    .chatbox-image-icon {
-      margin: 7px 0 0 7px;
-    }
-  }
-
-  .chat-input-group {
-    .chat-input {
-      padding-top: 10px;
-      border: none;
-      max-width: 100%;
-      overflow-wrap: break-word;
-
-      @include themify(day) {
-        background: #e4e6eb;
-      }
-      @include themify(night) {
-        background: #cee2ff;
-      }
-    }
-
-    .msg-svg {
-      padding: 8px;
-
-      &.active {
-        cursor: pointer;
-      }
-
-      &.active:hover {
-        background: rgba(29, 155, 240, 0.1);
-        border-radius: 50%;
-      }
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chat-input/index.tsx b/src/common/features/chats/components/chat-input/index.tsx
index c1b991d91fc..a75a1320ff0 100644
--- a/src/common/features/chats/components/chat-input/index.tsx
+++ b/src/common/features/chats/components/chat-input/index.tsx
@@ -1,29 +1,26 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Channel } from "../../../../../managers/message-manager-types";
 import { EmojiPickerStyleProps } from "../../types";
-import ClickAwayListener from "../../../../components/clickaway-listener";
-import EmojiPicker from "../../../../components/emoji-picker/index-old";
-// import { EmojiPicker } from "../../emoji-picker";
-import GifPicker from "../../../../components/gif-picker";
+import { EmojiPicker } from "../../../../components/emoji-picker";
 import { error } from "../../../../components/feedback";
-import Tooltip from "../../../../components/tooltip";
 
 import {
+  attachFileSvg,
   chatBoxImageSvg,
   emoticonHappyOutlineSvg,
   gifIcon,
   messageSendSvg
 } from "../../../../img/svg";
 import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
-import { classNameObject } from "../../../../helper/class-name-object";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { _t } from "../../../../i18n";
-import "./index.scss";
 import { ChatContext } from "../../chat-context-provider";
 import { Form } from "@ui/form";
-import { FormControl, InputGroup } from "@ui/input";
+import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
 import { useChatFileUpload } from "../../mutations";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import GifPicker from "../../../../components/gif-picker";
 
 interface Props {
   isCurrentUser: boolean;
@@ -31,7 +28,6 @@ interface Props {
   currentChannel: Channel;
   currentUser: string;
   isCurrentUserJoined: boolean;
-  emojiPickerStyles: EmojiPickerStyleProps;
   gifPickerStyle: EmojiPickerStyleProps;
 }
 
@@ -41,43 +37,31 @@ export default function ChatInput({
   currentChannel,
   currentUser,
   isCurrentUserJoined,
-  emojiPickerStyles,
   gifPickerStyle
 }: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
+
   const { global, activeUser, chat } = useMappedStore();
   const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [message, setMessage] = useState("");
-  const [shGif, setShGif] = useState(false);
+  const [showGifPicker, setShowGifPicker] = useState(false);
   const [isMessageText, setIsMessageText] = useState(false);
 
   const { mutateAsync } = useChatFileUpload(setMessage, setIsMessageText);
 
+  const isDisabled = useMemo(
+    () => (isCurrentUser && !receiverPubKey) || isActveUserRemoved,
+    [isCurrentUser, receiverPubKey, isActveUserRemoved]
+  );
+
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
     }
   }, [isCommunity, isCurrentUser]);
 
-  const handleEmojiSelection = (emoji: string) => {
-    setMessage((prevMessage) => prevMessage + emoji);
-  };
-
-  const toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
-    if (e) {
-      e.stopPropagation();
-    }
-    setShGif(!shGif);
-  };
-
-  const handleGifSelection = (gif: string) => {
-    isCurrentUser
-      ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, gif)
-      : messageServiceInstance?.sendPublicMessage(currentChannel, gif, [], "");
-  };
-
   const sendMessage = () => {
     if (message.length !== 0 && !message.includes(UPLOADING)) {
       if (isCommunity) {
@@ -110,8 +94,6 @@ export default function ChatInput({
   const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
     let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
 
-    const { isElectron } = global;
-
     if (files.length > 0) {
       e.stopPropagation();
       e.preventDefault();
@@ -124,137 +106,110 @@ export default function ChatInput({
   };
 
   return (
-    <>
-      <div
-        className={`chat ${
-          isActveUserRemoved || !isCurrentUserJoined || (isCurrentUser && !receiverPubKey)
-            ? "disable"
-            : ""
-        }`}
+    <div>
+      {/*{message.length === 0 && (*/}
+      {/*  <React.Fragment>*/}
+
+      {/*    <Tooltip content="Image">*/}
+      {/*      <div*/}
+      {/*        className="chatbox-image"*/}
+      {/*        onClick={(e: React.MouseEvent<HTMLElement>) => {*/}
+      {/*          e.stopPropagation();*/}
+      {/*          const el = fileInputRef.current;*/}
+      {/*          if (el) el.click();*/}
+      {/*        }}*/}
+      {/*      >*/}
+      {/*        <div className="chatbox-image-icon">{chatBoxImageSvg}</div>*/}
+      {/*      </div>*/}
+      {/*    </Tooltip>*/}
+
+      {/*    <input*/}
+      {/*      onChange={fileInputChanged}*/}
+      {/*      className="file-input d-none"*/}
+      {/*      ref={fileInputRef}*/}
+      {/*      type="file"*/}
+      {/*      accept="image/*"*/}
+      {/*      multiple={true}*/}
+      {/*    />*/}
+      {/*  </React.Fragment>*/}
+      {/*)}*/}
+
+      <Form
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          e.stopPropagation();
+          sendMessage();
+        }}
+        className="w-full flex items-center gap-2"
       >
-        <ClickAwayListener onClickAway={() => showEmojiPicker && setShowEmojiPicker(false)}>
-          <div className="chatbox-emoji-picker">
-            <div className="chatbox-emoji">
-              <Tooltip content={_t("editor-toolbar.emoji")}>
-                <div className="emoji-icon" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
-                  {emoticonHappyOutlineSvg}
-                </div>
-              </Tooltip>
-              {showEmojiPicker && (
-                <EmojiPicker
-                  style={emojiPickerStyles}
-                  fallback={(e) => {
-                    handleEmojiSelection(e);
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        </ClickAwayListener>
-
-        {/* <div className="chatbox-emoji-picker" id="chatbox-emoji-picker" role="none">
-          <div className="chatbox-emoji">
-            <Tooltip content={_t("editor-toolbar.emoji")}>
-              <div className="emoji-icon">{emoticonHappyOutlineSvg}</div>
-            </Tooltip>
-            {showEmojiPicker && isMounted && (
-              <EmojiPicker
-                anchor={document.querySelector("#chatbox-emoji-picker")!!}
-                onSelect={(e) => handleEmojiSelection(e)}
-              />
-            )}
-          </div>
-        </div> */}
-        {message.length === 0 && (
-          <React.Fragment>
-            <ClickAwayListener onClickAway={() => shGif && setShGif(false)}>
-              <div className="chatbox-emoji-picker">
-                <div className="chatbox-emoji">
-                  <Tooltip content={_t("Gif")}>
-                    <div className="emoji-icon" onClick={toggleGif}>
-                      {" "}
-                      {gifIcon}
-                    </div>
-                  </Tooltip>
-                  {shGif && (
-                    <GifPicker
-                      style={gifPickerStyle}
-                      gifImagesStyle={GifImagesStyle}
-                      shGif={true}
-                      changeState={(gifState) => {
-                        setShGif(gifState!);
-                      }}
-                      fallback={(e) => {
-                        handleGifSelection(e);
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            </ClickAwayListener>
-
-            <Tooltip content={"Image"}>
-              <div
-                className="chatbox-image"
-                onClick={(e: React.MouseEvent<HTMLElement>) => {
-                  e.stopPropagation();
-                  const el = fileInputRef.current;
-                  if (el) el.click();
-                }}
-              >
-                <div className="chatbox-image-icon">{chatBoxImageSvg}</div>
-              </div>
-            </Tooltip>
-
-            <input
-              onChange={fileInputChanged}
-              className="file-input d-none"
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              multiple={true}
+        <Dropdown>
+          <DropdownToggle>
+            <Button className="mr-2" noPadding={true} icon={attachFileSvg} appearance="gray-link" />
+          </DropdownToggle>
+          <DropdownMenu align="top">
+            <DropdownItemWithIcon
+              icon={gifIcon}
+              label="GIF"
+              onClick={() => setShowGifPicker(true)}
             />
-          </React.Fragment>
-        )}
-
-        <Form
-          onSubmit={(e: React.FormEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            sendMessage();
+            <DropdownItemWithIcon
+              icon={chatBoxImageSvg}
+              label="Image"
+              onClick={() => fileInputRef.current?.click()}
+            />
+          </DropdownMenu>
+        </Dropdown>
+        <FormControl
+          value={message}
+          autoFocus={true}
+          onChange={(e) => {
+            setMessage(e.target.value);
+            setIsMessageText(e.target.value.length !== 0);
           }}
-          className="w-full"
-        >
-          <InputGroup
-            className="chat-input-group"
-            append={
-              <Button
-                className={classNameObject({
-                  "msg-svg": true,
-                  active: isMessageText || message.length !== 0
-                })}
-                icon={messageSendSvg}
-                onClick={sendMessage}
-              />
-            }
-          >
-            <FormControl
-              value={message}
-              autoFocus={true}
-              onChange={(e) => {
-                setMessage(e.target.value);
-                setIsMessageText(e.target.value.length !== 0);
-              }}
-              required={true}
-              type="text"
-              placeholder={_t("chat.start-chat-placeholder")}
-              autoComplete="off"
-              className="chat-input"
-              disabled={(isCurrentUser && !receiverPubKey) || isActveUserRemoved}
+          required={true}
+          type="text"
+          placeholder={_t("chat.start-chat-placeholder")}
+          autoComplete="off"
+          disabled={isDisabled}
+        />
+        <div className="flex items-center px-2 h-full gap-3">
+          <div className="relative">
+            <Button
+              ref={emojiButtonRef}
+              noPadding={true}
+              appearance="gray-link"
+              disabled={isDisabled}
+              icon={emoticonHappyOutlineSvg}
             />
-          </InputGroup>
-        </Form>
-      </div>
-    </>
+            <EmojiPicker
+              position="top"
+              anchor={emojiButtonRef.current}
+              onSelect={(e: string) => setMessage((prevMessage) => prevMessage + e)}
+            />
+          </div>
+          <Button
+            noPadding={true}
+            appearance="gray-link"
+            icon={messageSendSvg}
+            disabled={isDisabled}
+            onClick={sendMessage}
+          />
+        </div>
+      </Form>
+
+      {showGifPicker && (
+        <GifPicker
+          style={gifPickerStyle}
+          gifImagesStyle={GifImagesStyle}
+          shGif={true}
+          changeState={(gifState) => setShowGifPicker(gifState!)}
+          fallback={(e) =>
+            isCurrentUser
+              ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, e)
+              : messageServiceInstance?.sendPublicMessage(currentChannel, e, [], "")
+          }
+        />
+      )}
+    </div>
   );
 }
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index b65e6b1f94d..808146eb91b 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -13,7 +13,7 @@ import { setNostrkeys } from "../../../../../managers/message-manager";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
 import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
-import { EmojiPickerStyle, GifPickerStyle } from "./chat-constants";
+import { GifPickerStyle } from "./chat-constants";
 import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import { getCommunity } from "../../../../api/bridge";
@@ -472,17 +472,18 @@ export const ChatPopUp = () => {
               </Tooltip>
             )}
           </div>
-          {(isCurrentUser || isCommunity) && (
-            <ChatInput
-              isCurrentUser={isCurrentUser}
-              isCommunity={isCommunity}
-              currentUser={currentUser}
-              currentChannel={currentChannel!}
-              isCurrentUserJoined={isCurrentUserJoined}
-              emojiPickerStyles={EmojiPickerStyle}
-              gifPickerStyle={GifPickerStyle}
-            />
-          )}
+          <div className="px-3">
+            {(isCurrentUser || isCommunity) && (
+              <ChatInput
+                isCurrentUser={isCurrentUser}
+                isCommunity={isCommunity}
+                currentUser={currentUser}
+                currentChannel={currentChannel!}
+                isCurrentUserJoined={isCurrentUserJoined}
+                gifPickerStyle={GifPickerStyle}
+              />
+            )}
+          </div>
         </div>
       )}
     </>
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 936bb00f821..ff7803cf804 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -312,17 +312,17 @@ export default function ChatsChannelMessages(props: Props) {
                 <PopoverContent>
                   <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
                     <div className="profile-box-content">
-                      <div className="profile-box-logo d-flex justify-content-center">
+                      <div className="profile-box-logo flex justify-center">
                         <UserAvatar username={name!} size="large" />
                       </div>
 
-                      <p className="d-flex justify-content-center profile-name">{`@${name!}`}</p>
+                      <p className="flex justify-center profile-name">{`@${name!}`}</p>
                       <div
-                        className={`d-flex mb-3 ${
+                        className={`flex mb-3 ${
                           communityAdmins.includes(activeUser?.username!) &&
                           name !== currentChannel.communityName
-                            ? "justify-content-between"
-                            : "justify-content-center"
+                            ? "justify-between"
+                            : "justify-center"
                         }  profile-box-buttons`}
                       >
                         <FollowControls
@@ -394,7 +394,7 @@ export default function ChatsChannelMessages(props: Props) {
               <React.Fragment key={pMsg.id}>
                 {dayAndMonth && (
                   <div className="custom-divider">
-                    <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+                    <span className="flex justify-center items-center mt-3 custom-divider-text">
                       {dayAndMonth}
                     </span>
                   </div>
@@ -570,7 +570,7 @@ export default function ChatsChannelMessages(props: Props) {
             );
           })}
         {isActveUserRemoved && (
-          <span className="d-flex justify-content-center align-items-center mt-3">
+          <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
           </span>
         )}
diff --git a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
index d0c7125e271..522be38a54b 100644
--- a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
@@ -293,7 +293,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                 </FormControl>
               </div>
             </div>
-            <div className="d-flex justify-content-end">
+            <div className="flex justify-end">
               <Button
                 type="button"
                 onClick={() => handleChannelUpdate(ADDROLE)}
@@ -318,7 +318,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                       return (
                         <tr key={i}>
                           <td>
-                            <span className="d-flex user">
+                            <span className="flex user">
                               <UserAvatar username={moderator.name} size="medium" />{" "}
                               <span className="mt-2 ml-2 username">@{moderator.name}</span>
                             </span>
@@ -380,7 +380,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
                     return (
                       <tr key={i}>
                         <td>
-                          <span className="d-flex user">
+                          <span className="flex user">
                             <UserAvatar username={user.name} size="medium" />{" "}
                             <span className="username" style={{ margin: "10px 0 0 10px" }}>
                               @{user.name}
@@ -417,7 +417,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const successModal = (message: string) => {
     return (
       <>
-        <div className="success-dialog-header d-flex border-bottom">
+        <div className="success-dialog-header flex border-bottom">
           <div className="step-no">2</div>
           <div className="success-dialog-titles">
             <div className="success-main-title">{_t("manage-authorities.success-title")}</div>
@@ -428,7 +428,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
           <div className="success-dialog-content text-center">
             <span>{message === UNBLOCKUSER ? "User unblock successfully" : ""}</span>
           </div>
-          <div className="d-flex justify-content-center mt-3">
+          <div className="flex justify-center mt-3">
             <span className="hr-6px-btn-spacer" />
             <Button onClick={finish}>{_t("g.finish")}</Button>
           </div>
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 7f5cb845319..ef56e9e9c02 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -116,7 +116,7 @@ export default function ChatsDirectMessages(props: Props) {
                   <React.Fragment key={msg.id}>
                     {dayAndMonth && (
                       <div className="custom-divider">
-                        <span className="d-flex justify-content-center align-items-center mt-3 custom-divider-text">
+                        <span className="flex justify-center items-center mt-3 custom-divider-text">
                           {dayAndMonth}
                         </span>
                       </div>
diff --git a/src/common/features/chats/components/chats-messages-header/index.tsx b/src/common/features/chats/components/chats-messages-header/index.tsx
index 76d466c49c5..f75b021b311 100644
--- a/src/common/features/chats/components/chats-messages-header/index.tsx
+++ b/src/common/features/chats/components/chats-messages-header/index.tsx
@@ -41,8 +41,8 @@ export default function ChatsMessagesHeader(props: Props) {
 
   return (
     <div className="chats-messages-header">
-      <div className="d-flex justify-content-between header-content">
-        <div className="d-flex user-info-wrapper">
+      <div className="flex justify-between header-content">
+        <div className="flex user-info-wrapper">
           <div className="expand-icon d-md-none">
             <p className="expand-svg" onClick={() => setShowSideBar(true)}>
               {expandSideBar}
diff --git a/src/common/features/chats/components/chats-messages-view/index.tsx b/src/common/features/chats/components/chats-messages-view/index.tsx
index 1eec8163a84..8cee37ae185 100644
--- a/src/common/features/chats/components/chats-messages-view/index.tsx
+++ b/src/common/features/chats/components/chats-messages-view/index.tsx
@@ -221,7 +221,6 @@ export default function ChatsMessagesView(props: Props) {
         )}
       </div>
       <ChatInput
-        emojiPickerStyles={EmojiPickerStyle}
         gifPickerStyle={EmojiPickerStyle}
         isCurrentUser={!!directUser}
         isCommunity={!!communityName}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
new file mode 100644
index 00000000000..efc68002edf
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -0,0 +1,56 @@
+import { getDirectLastMessage, getRelativeDate } from "../../utils";
+import { Link } from "react-router-dom";
+import React, { useContext, useMemo } from "react";
+import { DirectContact } from "../../../../../managers/message-manager-types";
+import { ChatContext } from "../../chat-context-provider";
+import UserAvatar from "../../../../components/user-avatar";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { classNameObject } from "../../../../helper/class-name-object";
+
+interface Props {
+  contact: DirectContact;
+  username: string;
+  handleRevealPrivKey: () => void;
+  handleSideBar: () => void;
+}
+
+export function ChatSidebarDirectContact({
+  contact,
+  username,
+  handleRevealPrivKey,
+  handleSideBar
+}: Props) {
+  const { setReceiverPubKey } = useContext(ChatContext);
+  const { chat } = useMappedStore();
+
+  const lastMessage = useMemo(
+    () => getDirectLastMessage(contact.pubkey, chat.directMessages),
+    [chat, contact]
+  );
+  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
+
+  return (
+    <Link
+      className={classNameObject({
+        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+          true,
+        "bg-gray-100 dark:bg-gray-800": username === `@${contact.name}`
+      })}
+      to={`/chats/@${contact.name}`}
+      onClick={() => {
+        setReceiverPubKey(contact.pubkey);
+        handleSideBar();
+        handleRevealPrivKey();
+      }}
+    >
+      <UserAvatar username={contact.name} size="medium" />
+      <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
+        <div className="flex justify-between w-full items-center">
+          <div className="font-semibold truncate">{contact.name}</div>
+          <div className="text-xs text-gray-500">{lastMessageDate}</div>
+        </div>
+        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
new file mode 100644
index 00000000000..ea55f820405
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -0,0 +1,67 @@
+import { Button } from "@ui/button";
+import { arrowBackSvg, closeSvg, syncSvg } from "../../../../img/svg";
+import Tooltip from "../../../../components/tooltip";
+import { _t } from "../../../../i18n";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import React, { useContext } from "react";
+import { ChatContext } from "../../chat-context-provider";
+import { setNostrkeys } from "../../../../../managers/message-manager";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { History } from "history";
+
+interface Props {
+  history: History;
+}
+
+export function ChatSidebarHeader({ history }: Props) {
+  const { resetChat } = useMappedStore();
+  const {
+    activeUserKeys,
+    setShowSpinner,
+    revealPrivKey,
+    chatPrivKey,
+    windowWidth,
+    setShowSideBar,
+    setRevealPrivKey
+  } = useContext(ChatContext);
+
+  const handleRefreshChat = () => {
+    resetChat();
+    setNostrkeys(activeUserKeys!);
+    setShowSpinner(true);
+  };
+
+  return (
+    <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] p-3 gap-4">
+      <div className="flex items-center gap-3">
+        {windowWidth < 768 && (
+          <Button appearance="link" icon={closeSvg} onClick={() => setShowSideBar(false)} />
+        )}
+        {revealPrivKey && windowWidth > 768 && (
+          <Tooltip content={_t("chat.back")}>
+            <Button appearance="link" icon={arrowBackSvg} onClick={() => setRevealPrivKey(false)} />
+          </Tooltip>
+        )}
+        <div className="font-semibold text-gray-600 text-sm">{_t("chat.title")}</div>
+      </div>
+      <div className="flex items-center">
+        <Tooltip content={_t("chat.refresh")}>
+          <Button icon={syncSvg} appearance="link" onClick={handleRefreshChat} />
+        </Tooltip>
+        {chatPrivKey && (
+          <div className="chat-menu">
+            <ChatsDropdownMenu
+              onManageChatKey={() => {
+                setRevealPrivKey(!revealPrivKey);
+                if (windowWidth < 768) {
+                  setShowSideBar(false);
+                }
+              }}
+              history={history}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
new file mode 100644
index 00000000000..70a9181f14e
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -0,0 +1,24 @@
+import accountReputation from "../../../../helper/account-reputation";
+import { Link } from "react-router-dom";
+import React from "react";
+import { AccountWithReputation } from "../../types";
+import UserAvatar from "../../../../components/user-avatar";
+
+interface Props {
+  user: AccountWithReputation;
+  onClick: () => void;
+}
+
+export function ChatSidebarSearchItem({ user, onClick }: Props) {
+  return (
+    <Link
+      to={`/chats/@${user.account}`}
+      className="flex items-center gap-3 p-3 border-b border[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800"
+      onClick={onClick}
+    >
+      <UserAvatar username={user.account} size="medium" />
+      <span className="user-name">{user.account}</span>
+      <span className="user-reputation">({accountReputation(user.reputation)})</span>
+    </Link>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
new file mode 100644
index 00000000000..428339c0d1f
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -0,0 +1,51 @@
+import { FormControl } from "@ui/input";
+import { _t } from "../../../../i18n";
+import React, { useState } from "react";
+import useDebounce from "react-use/lib/useDebounce";
+import { getAccountReputations } from "../../../../api/hive";
+import { AccountWithReputation } from "../../types";
+import LinearProgress from "../../../../components/linear-progress";
+
+interface Props {
+  searchQuery: string;
+  setSearchQuery: (v: string) => void;
+  setUserList: (v: AccountWithReputation[]) => void;
+}
+
+export function ChatSidebarSearch({ setUserList, searchQuery, setSearchQuery }: Props) {
+  const [searchInProgress, setSearchInProgress] = useState(false);
+
+  useDebounce(
+    async () => {
+      if (searchQuery.length !== 0) {
+        const resp = await getAccountReputations(searchQuery, 30);
+        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
+        setUserList(sortedByReputation);
+        setSearchInProgress(false);
+      }
+    },
+    500,
+    [searchQuery]
+  );
+
+  return (
+    <>
+      <div className="bg-gray-100 p-3 border-b border-[--border-color]">
+        <FormControl
+          type="text"
+          placeholder={_t("chat.search")}
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setSearchInProgress(true);
+            if (e.target.value.length === 0) {
+              setSearchInProgress(false);
+              setUserList([]);
+            }
+          }}
+        />
+      </div>
+      {searchInProgress && <LinearProgress />}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/indes.tsx b/src/common/features/chats/components/chats-sidebar/indes.tsx
deleted file mode 100644
index 49eea945e66..00000000000
--- a/src/common/features/chats/components/chats-sidebar/indes.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { History } from "history";
-import useDebounce from "react-use/lib/useDebounce";
-import { setNostrkeys } from "../../../../../managers/message-manager";
-import { Channel } from "../../../../../managers/message-manager-types";
-import { getAccountReputations } from "../../../../api/hive";
-import accountReputation from "../../../../helper/account-reputation";
-import {
-  formattedUserName,
-  getCommunityLastMessage,
-  getDirectLastMessage,
-  getJoinedCommunities,
-  getUserChatPublicKey
-} from "../../utils";
-import { _t } from "../../../../i18n";
-import { arrowBackSvg, closeSvg, syncSvg } from "../../../../img/svg";
-import ChatsScroller from "../chats-scroller";
-import LinearProgress from "../../../../components/linear-progress";
-import Tooltip from "../../../../components/tooltip";
-import UserAvatar from "../../../../components/user-avatar";
-
-import ChatsDropdownMenu from "../chats-dropdown-menu";
-import { AccountWithReputation } from "../../types";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import { ChatContext } from "../../chat-context-provider";
-
-import "./index.scss";
-import { FormControl } from "@ui/input";
-
-interface Props {
-  username: string;
-  history: History;
-}
-
-export default function ChatsSideBar(props: Props) {
-  const { username } = props;
-  const { chat, resetChat } = useMappedStore();
-  const chatContext = useContext(ChatContext);
-  const { channels, directContacts, leftChannelsList } = chat;
-
-  const {
-    activeUserKeys,
-    revealPrivKey,
-    chatPrivKey,
-    showSideBar,
-    windowWidth,
-    setShowSideBar,
-    setShowSpinner,
-    setRevealPrivKey,
-    setReceiverPubKey
-  } = chatContext;
-
-  const chatsSideBarRef = React.createRef<HTMLDivElement>();
-
-  const [showDivider, setShowDivider] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [searchInProgress, setSearchInProgress] = useState(false);
-  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
-  const [isScrollToTop, setIsScrollToTop] = useState(false);
-  const [communities, setCommunities] = useState<Channel[]>([]);
-
-  useDebounce(
-    async () => {
-      if (searchText.length !== 0) {
-        const resp = await getAccountReputations(searchText, 30);
-        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
-        setUserList(sortedByReputation);
-        setSearchInProgress(false);
-      }
-    },
-    500,
-    [searchText]
-  );
-
-  useEffect(() => {
-    if (username) {
-      if (username.startsWith("@")) {
-        getReceiverPubKey(formattedUserName(username));
-      }
-    }
-  }, [username]);
-
-  useEffect(() => {
-    const communities = getJoinedCommunities(channels, leftChannelsList);
-    setCommunities(communities);
-  }, [channels, leftChannelsList]);
-
-  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    var element = event.currentTarget;
-    if (element.scrollTop > 2) {
-      setShowDivider(true);
-    } else {
-      if (showDivider) {
-        setShowDivider(false);
-      }
-    }
-    let srollHeight: number = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = element.scrollTop >= srollHeight;
-    setIsScrollToTop(isScrollToTop);
-  };
-
-  const handleRefreshChat = () => {
-    resetChat();
-    setNostrkeys(activeUserKeys!);
-    setShowSpinner(true);
-  };
-
-  const handleRevealPrivKey = () => {
-    if (revealPrivKey) {
-      setRevealPrivKey(false);
-    }
-  };
-
-  const getReceiverPubKey = async (username: string) => {
-    const peer = directContacts.find((x) => x.name === username)?.pubkey ?? "";
-    if (peer) {
-      setReceiverPubKey(peer);
-    } else {
-      const pubkey = await getUserChatPublicKey(username);
-      if (pubkey === undefined) {
-        setReceiverPubKey("");
-      } else {
-        setReceiverPubKey(pubkey);
-      }
-    }
-  };
-
-  const handleSideBar = () => {
-    if (windowWidth < 768 && showSideBar) {
-      setShowSideBar(false);
-    }
-  };
-
-  return (
-    <>
-      {showSideBar && (
-        <div className="chats-sidebar">
-          {windowWidth < 768 && (
-            <div
-              className="close-sidebar d-flex justify-content-end"
-              onClick={() => setShowSideBar(false)}
-            >
-              {closeSvg}
-            </div>
-          )}
-
-          <div className="d-flex justify-content-between chats-title">
-            <div className="d-flex chats-content">
-              {revealPrivKey && windowWidth > 768 && (
-                <Tooltip content={_t("chat.back")}>
-                  <div
-                    className="back-arrow-image d-flex justify-content-center align-items-center"
-                    onClick={() => setRevealPrivKey(false)}
-                  >
-                    <span className="back-arrow-svg"> {arrowBackSvg}</span>
-                  </div>
-                </Tooltip>
-              )}
-
-              <p className="chats">Chats</p>
-            </div>
-
-            <div className="chat-actions d-flex">
-              <div className="refresh-button">
-                <Tooltip content={_t("chat.refresh")}>
-                  <p className="refresh-svg" onClick={handleRefreshChat}>
-                    {syncSvg}
-                  </p>
-                </Tooltip>
-              </div>
-              {chatPrivKey && (
-                <div className="chat-menu">
-                  <ChatsDropdownMenu
-                    onManageChatKey={() => {
-                      setRevealPrivKey(!revealPrivKey);
-                      if (windowWidth < 768) {
-                        setShowSideBar(false);
-                      }
-                    }}
-                    {...props}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="chats-search">
-            <div className="w-full mb-4">
-              <FormControl
-                type="text"
-                placeholder={_t("chat.search")}
-                value={searchText}
-                onChange={(e) => {
-                  setSearchText(e.target.value);
-                  setSearchInProgress(true);
-                  if (e.target.value.length === 0) {
-                    setSearchInProgress(false);
-                    setUserList([]);
-                  }
-                }}
-              />
-            </div>
-          </div>
-          {showDivider && <div className="divider" />}
-          {searchInProgress && <LinearProgress />}
-          <div className="chats-list" onScroll={handleScroll} ref={chatsSideBarRef}>
-            {searchText ? (
-              <div className="searched-users">
-                {userList.map((user) => (
-                  <Link
-                    to={`/chats/@${user.account}`}
-                    onClick={() => {
-                      setSearchText("");
-                      setSearchInProgress(false);
-                    }}
-                    key={user.account}
-                  >
-                    <div
-                      className="d-flex user-info"
-                      key={user.account}
-                      onClick={() => {
-                        setRevealPrivKey(false);
-                        getReceiverPubKey(user.account);
-                        handleSideBar();
-                      }}
-                    >
-                      <span>
-                        <UserAvatar username={user.account} size="medium" />
-                      </span>
-                      <span className="user-name">{user.account}</span>
-                      <span className="user-reputation">
-                        ({accountReputation(user.reputation)})
-                      </span>
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            ) : (
-              <>
-                {communities.length !== 0 && <p className="community-title">Communities</p>}
-                {communities.map((channel) => (
-                  <Link to={`/chats/${channel.communityName}`} key={channel.id}>
-                    <div
-                      className={`community ${
-                        username === channel.communityName ? "selected" : ""
-                      }`}
-                      key={channel.id}
-                      onClick={() => {
-                        setRevealPrivKey(false);
-                        handleSideBar();
-                      }}
-                    >
-                      <UserAvatar username={channel.communityName!} size="medium" />
-                      <div className="community-info">
-                        <p className="community-name">{channel.name}</p>
-                        <p className="community-last-message">
-                          {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                        </p>
-                      </div>
-                    </div>
-                  </Link>
-                ))}
-                {directContacts.length !== 0 && <p className="dm-title">DMs</p>}
-                {directContacts.map((contact) => (
-                  <Link
-                    to={`/chats/@${contact.name}`}
-                    key={contact.pubkey}
-                    onClick={() => {
-                      setReceiverPubKey(contact.pubkey);
-                      handleSideBar();
-                    }}
-                  >
-                    <div
-                      className={`dm ${
-                        username && username === `@${contact.name}` ? "selected" : ""
-                      }`}
-                      onClick={handleRevealPrivKey}
-                    >
-                      <UserAvatar username={contact.name} size="medium" />
-                      <div className="dm-info">
-                        <p className="dm-name">{contact.name}</p>
-                        <p className="dm-last-message">
-                          {getDirectLastMessage(contact.pubkey, chat.directMessages)}
-                        </p>
-                      </div>
-                    </div>
-                  </Link>
-                ))}
-              </>
-            )}
-          </div>
-          {isScrollToTop && (
-            <ChatsScroller
-              bodyRef={chatsSideBarRef}
-              isScrollToTop={isScrollToTop}
-              isScrollToBottom={false}
-              marginRight={"5%"}
-            />
-          )}
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/common/features/chats/components/chats-sidebar/index.scss b/src/common/features/chats/components/chats-sidebar/index.scss
deleted file mode 100644
index 3be4333425e..00000000000
--- a/src/common/features/chats/components/chats-sidebar/index.scss
+++ /dev/null
@@ -1,284 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chats-sidebar {
-  @include themify(day) {
-    @apply bg-light-200;
-    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
-  }
-  @include themify(night) {
-    @apply bg-dark-200;
-    box-shadow: 0px -5px 5px rgb(60, 68, 58);
-  }
-  z-index: 10;
-  min-width: 330px;
-  height: 100%;
-  margin-top: 10px;
-
-  .close-sidebar {
-    margin: 10px 5px 0 0;
-
-    svg {
-      width: 30px;
-      height: 30px;
-      @apply text-gray-steel;
-      cursor: pointer;
-    }
-  }
-
-  .chats-title {
-    margin: 30px 16px 12px 16px;
-
-    .chats-content {
-      .back-arrow-image {
-        cursor: pointer;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        margin-top: 1px;
-
-        &:hover {
-          @include themify(day) {
-            background: rgba(29, 155, 240, 0.1);
-          }
-          @include themify(night) {
-            @apply bg-blue-dark-grey;
-          }
-        }
-      }
-    }
-
-    .chats {
-      @include themify(day) {
-        color: #050505;
-      }
-      @include themify(night) {
-        @apply text-white;
-      }
-
-      color: #050505;
-      font-weight: 700;
-      font-size: 24px;
-      padding-top: 8px;
-      margin-left: 6px;
-    }
-
-    .chat-actions {
-      .refresh-button {
-        margin-top: 2px;
-
-        .refresh-svg {
-          width: 40px;
-          height: 40px;
-          justify-content: center;
-          text-align: center;
-          border-radius: 50%;
-          padding-top: 10px;
-          display: flex;
-          cursor: pointer;
-
-          svg {
-            height: 20px;
-            width: 20px;
-          }
-
-          &:hover {
-            @include themify(day) {
-              background: rgba(29, 155, 240, 0.1);
-            }
-            @include themify(night) {
-              @apply bg-blue-dark-grey
-            }
-          }
-        }
-      }
-
-      .chat-menu {
-        border: none;
-        width: 40px;
-        height: 40px;
-        justify-content: center;
-        text-align: center;
-        display: flex;
-        margin-top: 3px;
-        cursor: pointer;
-        border-radius: 50%;
-
-        svg {
-          @include themify(day) {
-            @apply text-gray-charcoal;
-          }
-
-          @include themify(night) {
-            @apply text-light-200;
-          }
-        }
-
-        &:hover {
-          @include themify(day) {
-            background: rgba(29, 155, 240, 0.1);
-          }
-          @include themify(night) {
-            @apply bg-blue-dark-grey;
-          }
-        }
-      }
-    }
-  }
-
-  .chats-search {
-    padding: 0 8px 0 15px;
-    margin-bottom: 20px;
-  }
-
-  .divider {
-    @include themify(day) {
-      border-bottom: 1px solid #ced0d4;
-    }
-    @include themify(night) {
-      @apply border-b border-gray-charcoal
-    }
-  }
-
-  .searched-users {
-    .user-info {
-      cursor: pointer;
-      padding: 15px 3px 15px 25px;
-    }
-
-    .user-name {
-      font-size: 20px;
-      font-weight: 700;
-      margin: 7px 5px 0 15px;
-    }
-
-    .user-reputation {
-      margin: 9px 5px 0 5px;
-    }
-  }
-
-  .community-title,
-  .dm-title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    font-family: Faktum, sans-serif;
-    margin-bottom: 0;
-    padding: 15px 0 10px 15px;
-  }
-
-  .community:hover,
-  .dm:hover,
-  .user-info:hover {
-    @include themify(day) {
-      background: #eeeeee;
-    }
-
-    @include themify(night) {
-      @apply bg-blue-dusky;
-    }
-  }
-
-  .community,
-  .dm {
-    display: flex;
-    padding: 12.5px 5px 12.5px 13px;
-    cursor: pointer;
-    border-radius: 8px;
-    margin: 0px 10px;
-
-    .community-info,
-    .dm-info {
-      .community-name,
-      .dm-name {
-        padding: 3px 0 0 25px;
-        margin-bottom: 0;
-        font-size: 18px;
-        font-weight: 700;
-      }
-
-      .dm-last-message,
-      .community-last-message {
-        max-width: 255px;
-        padding: 4px 0 0 25px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-bottom: 0;
-        font-size: 13px;
-      }
-    }
-
-    &.selected {
-      @include themify(day) {
-        background: #ecf3ff;
-      }
-
-      @include themify(night) {
-        @apply border-gray-charcoal;
-      }
-
-      &:hover {
-        @include themify(day) {
-          background: #ecf3ff;
-        }
-
-        @include themify(night) {
-          @apply bg-gray-charcoal
-        }
-      }
-    }
-  }
-
-  .chats-list {
-    height: calc(100vh - 220px);
-    overflow: auto;
-
-    a {
-      color: inherit;
-    }
-  }
-}
-
-@media (max-width: 320px) {
-  .chats-sidebar {
-    min-width: 260px;
-
-    .chats-title {
-      margin: 15px 0px 5px 5px;
-    }
-
-    .chats-search {
-      padding: 0 5px 0 5px;
-      margin-bottom: 0;
-    }
-
-    .chats-list {
-      overflow-x: hidden;
-
-      .community-title,
-      .dm-title {
-        font-size: 1rem;
-        padding: 15px 0 10px 8px;
-      }
-
-      .community,
-      .dm {
-        margin: 0;
-        padding: 9.5px 0px 9.5px 5px;
-
-        .community-info,
-        .dm-info {
-          .community-name,
-          .dm-name {
-            padding: 3px 0 0 10px;
-          }
-
-          .community-last-message,
-          .dm-last-message {
-            padding: 4px 0 0 10px;
-            max-width: 35vw;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
new file mode 100644
index 00000000000..e1825dc4fd6
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -0,0 +1,180 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { History } from "history";
+import { Channel } from "../../../../../managers/message-manager-types";
+import {
+  formattedUserName,
+  getCommunityLastMessage,
+  getJoinedCommunities,
+  getUserChatPublicKey
+} from "../../utils";
+import ChatsScroller from "../chats-scroller";
+import UserAvatar from "../../../../components/user-avatar";
+import { AccountWithReputation } from "../../types";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { ChatContext } from "../../chat-context-provider";
+import { ChatSidebarHeader } from "./chat-sidebar-header";
+import { ChatSidebarSearch } from "./chat-sidebar-search";
+import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
+import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
+import { _t } from "../../../../i18n";
+
+interface Props {
+  username: string;
+  history: History;
+}
+
+export default function ChatsSideBar(props: Props) {
+  const { username } = props;
+  const { chat } = useMappedStore();
+  const {
+    revealPrivKey,
+    showSideBar,
+    windowWidth,
+    setShowSideBar,
+    setRevealPrivKey,
+    setReceiverPubKey
+  } = useContext(ChatContext);
+  const { channels, directContacts, leftChannelsList } = chat;
+
+  const chatsSideBarRef = React.createRef<HTMLDivElement>();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showDivider, setShowDivider] = useState(false);
+  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
+  const [isScrollToTop, setIsScrollToTop] = useState(false);
+  const [communities, setCommunities] = useState<Channel[]>([]);
+
+  useEffect(() => {
+    if (username) {
+      if (username.startsWith("@")) {
+        getReceiverPubKey(formattedUserName(username));
+      }
+    }
+  }, [username]);
+
+  useEffect(() => {
+    const communities = getJoinedCommunities(channels, leftChannelsList);
+    setCommunities(communities);
+  }, [channels, leftChannelsList]);
+
+  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
+    var element = event.currentTarget;
+    if (element.scrollTop > 2) {
+      setShowDivider(true);
+    } else {
+      if (showDivider) {
+        setShowDivider(false);
+      }
+    }
+    let srollHeight: number = (element.scrollHeight / 100) * 25;
+    const isScrollToTop = element.scrollTop >= srollHeight;
+    setIsScrollToTop(isScrollToTop);
+  };
+
+  const handleRevealPrivKey = () => {
+    if (revealPrivKey) {
+      setRevealPrivKey(false);
+    }
+  };
+
+  const getReceiverPubKey = async (username: string) => {
+    const peer = directContacts.find((x) => x.name === username)?.pubkey ?? "";
+    if (peer) {
+      setReceiverPubKey(peer);
+    } else {
+      const pubkey = await getUserChatPublicKey(username);
+      if (pubkey === undefined) {
+        setReceiverPubKey("");
+      } else {
+        setReceiverPubKey(pubkey);
+      }
+    }
+  };
+
+  const handleSideBar = () => {
+    if (windowWidth < 768 && showSideBar) {
+      setShowSideBar(false);
+    }
+  };
+
+  return (
+    <>
+      {showSideBar && (
+        <div className="flex flex-col">
+          <ChatSidebarHeader history={props.history} />
+          <ChatSidebarSearch
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            setUserList={setUserList}
+          />
+          {showDivider && <div className="divider" />}
+          <div className="flex flex-col" onScroll={handleScroll} ref={chatsSideBarRef}>
+            {searchQuery ? (
+              userList.map((user) => (
+                <ChatSidebarSearchItem
+                  user={user}
+                  onClick={() => {
+                    setSearchQuery("");
+                    setRevealPrivKey(false);
+                    getReceiverPubKey(user.account);
+                    handleSideBar();
+                  }}
+                  key={user.account}
+                />
+              ))
+            ) : (
+              <>
+                {communities.length !== 0 && <p className="community-title">Communities</p>}
+                {communities.map((channel) => (
+                  <Link to={`/chats/${channel.communityName}`} key={channel.id}>
+                    <div
+                      className={`community ${
+                        username === channel.communityName ? "selected" : ""
+                      }`}
+                      key={channel.id}
+                      onClick={() => {
+                        setRevealPrivKey(false);
+                        handleSideBar();
+                      }}
+                    >
+                      <UserAvatar username={channel.communityName!} size="medium" />
+                      <div className="community-info">
+                        <p className="community-name">{channel.name}</p>
+                        <p className="community-last-message">
+                          {getCommunityLastMessage(channel.id, chat.publicMessages)}
+                        </p>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+                {directContacts.length !== 0 && (
+                  <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
+                    {_t("chat.direct-messages")}
+                  </div>
+                )}
+                {directContacts.map((contact) => (
+                  <ChatSidebarDirectContact
+                    key={contact.pubkey}
+                    contact={contact}
+                    username={username}
+                    handleRevealPrivKey={handleRevealPrivKey}
+                    handleSideBar={handleSideBar}
+                  />
+                ))}
+              </>
+            )}
+          </div>
+          {isScrollToTop && (
+            <ChatsScroller
+              bodyRef={chatsSideBarRef}
+              isScrollToTop={isScrollToTop}
+              isScrollToBottom={false}
+              marginRight={"5%"}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
index 31e1e174e52..924a91cd144 100644
--- a/src/common/features/chats/components/import-chats/index.tsx
+++ b/src/common/features/chats/components/import-chats/index.tsx
@@ -62,7 +62,7 @@ export default function ImportChats() {
     <>
       <div className="import-chats">
         <div className="import-chats-container">
-          <div className="d-flex justify-content-center import-chat-btn">
+          <div className="flex justify-center import-chat-btn">
             <Button onClick={() => setImportPrivKey(!importPrivKey)}>
               {_t("chat.import-chat")}
             </Button>
diff --git a/src/common/features/chats/utils/get-relative-date.ts b/src/common/features/chats/utils/get-relative-date.ts
new file mode 100644
index 00000000000..aff85dce892
--- /dev/null
+++ b/src/common/features/chats/utils/get-relative-date.ts
@@ -0,0 +1,20 @@
+import { differenceInDays, differenceInHours, differenceInYears, format, getDay } from "date-fns";
+
+export function getRelativeDate(timestamp?: number) {
+  if (!timestamp) {
+    return "";
+  }
+
+  const date = new Date(timestamp * 1000);
+  const now = new Date();
+
+  if (getDay(now) === getDay(date) && differenceInHours(now, date) <= 24) {
+    return format(date, "HH:mm");
+  } else if (differenceInDays(now, date) <= 7) {
+    return format(date, "EEE");
+  } else if (differenceInYears(now, date) === 0) {
+    return format(date, "dd.MM");
+  } else {
+    return format(date, "dd.MM.yyyy");
+  }
+}
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index f24962a55f2..84476493cac 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -17,3 +17,4 @@ export * from "./copy-to-clipboard";
 export * from "./use-fetch-direct-messages";
 export * from "./check-contiguous-message";
 export * from "./format-message-date-and-day";
+export * from "./get-relative-date";
diff --git a/src/common/features/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
index 0dc34b20514..26cbbde59a8 100644
--- a/src/common/features/chats/utils/use-get-direct-last-message.ts
+++ b/src/common/features/chats/utils/use-get-direct-last-message.ts
@@ -4,7 +4,7 @@ export const getDirectLastMessage = (pubkey: string, directMessages: directMessa
   const msgsList = fetchDirectMessages(pubkey, directMessages);
   const messages = msgsList.sort((a, b) => a.created - b.created);
   const lastMessage = messages.slice(-1);
-  return lastMessage[0]?.content;
+  return lastMessage[0];
 };
 
 const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
diff --git a/src/common/features/ui/button/props.ts b/src/common/features/ui/button/props.ts
index ee2ddeb616a..c0574cc24be 100644
--- a/src/common/features/ui/button/props.ts
+++ b/src/common/features/ui/button/props.ts
@@ -3,6 +3,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
 export type ButtonAppearance =
   | "primary"
   | "secondary"
+  | "gray-link"
   | "link"
   | "danger"
   | "success"
diff --git a/src/common/features/ui/button/styles.ts b/src/common/features/ui/button/styles.ts
index 8b48accace2..ea9dece6776 100644
--- a/src/common/features/ui/button/styles.ts
+++ b/src/common/features/ui/button/styles.ts
@@ -8,7 +8,8 @@ export const BUTTON_STYLES: Record<ButtonAppearance, string> = {
   danger: "bg-red hover:bg-red-020 focus:bg-red-030 text-white",
   success: "",
   warning: "",
-  info: "bg-info-default hover:info-hover focus:bg-info-focus text-white disabled:opacity-50 disabled:hover:bg-info-default disabled:focus:bg-info-default"
+  info: "bg-info-default hover:info-hover focus:bg-info-focus text-white disabled:opacity-50 disabled:hover:bg-info-default disabled:focus:bg-info-default",
+  "gray-link": "text-gray-500 hover:text-blue-dark-sky focus:text-blue-dark-sky-active"
 };
 
 export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
@@ -21,7 +22,8 @@ export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
     "border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030",
   success: "",
   warning: "",
-  info: "border-info-default hover:border-info-hover focus:border-info-focus text-info-default hover:text-info-hover focus:text-info-focus"
+  info: "border-info-default hover:border-info-hover focus:border-info-focus text-info-default hover:text-info-hover focus:text-info-focus",
+  "gray-link": ""
 };
 
 export const BUTTON_SIZES: Record<ButtonSize, string> = {
diff --git a/src/common/features/ui/dropdown/dropdown-item.tsx b/src/common/features/ui/dropdown/dropdown-item.tsx
index b806d9b4c72..4860a353299 100644
--- a/src/common/features/ui/dropdown/dropdown-item.tsx
+++ b/src/common/features/ui/dropdown/dropdown-item.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLProps, useContext } from "react";
+import React, { HTMLProps, ReactNode, useContext } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
 import { DropdownContext } from "@ui/dropdown/dropdown-context";
 
@@ -20,3 +20,16 @@ export function DropdownItem(props: HTMLProps<HTMLDivElement>) {
     />
   );
 }
+
+export function DropdownItemWithIcon(
+  props: HTMLProps<HTMLDivElement> & { icon: ReactNode; label: ReactNode }
+) {
+  return (
+    <DropdownItem>
+      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky">
+        <div>{props.icon}</div>
+        <div className="text-sm font-semibold">{props.label}</div>
+      </div>
+    </DropdownItem>
+  );
+}
diff --git a/src/common/features/ui/dropdown/dropdown-menu.tsx b/src/common/features/ui/dropdown/dropdown-menu.tsx
index 2bdf5242e5f..36fb331b0f1 100644
--- a/src/common/features/ui/dropdown/dropdown-menu.tsx
+++ b/src/common/features/ui/dropdown/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import { DropdownContext } from "@ui/dropdown/dropdown-context";
 import { useFilteredProps } from "../../../util/props-filter";
 
 interface Props {
-  align?: "left" | "right";
+  align?: "left" | "right" | "top" | "bottom";
 }
 
 export function DropdownMenu(props: HTMLProps<HTMLDivElement> & Props) {
@@ -16,9 +16,11 @@ export function DropdownMenu(props: HTMLProps<HTMLDivElement> & Props) {
     <div
       {...nativeProps}
       className={classNameObject({
-        "z-[1000] absolute top-[100%] flex flex-col items-start border min-w-[200px] py-2 gap-2 pr-3 rounded-xl bg-white":
+        "z-[1000] absolute flex flex-col items-start border min-w-[200px] py-2 gap-2 pr-3 rounded-xl bg-white":
           true,
         "right-0": props.align === "right",
+        "top-[100%]": (props.align ?? "bottom") === "bottom",
+        "bottom-[100%]": props.align === "top",
         [props.className ?? ""]: !!props.className
       })}
     />
diff --git a/src/common/features/ui/input/input-group.tsx b/src/common/features/ui/input/input-group.tsx
index 968dbea2db6..e6d0dccec22 100644
--- a/src/common/features/ui/input/input-group.tsx
+++ b/src/common/features/ui/input/input-group.tsx
@@ -11,6 +11,8 @@ interface Props {
   prepend?: ReactNode;
   onPrependClick?: () => void;
   className?: string;
+  transparentPrepend?: boolean;
+  transparentAppend?: boolean;
 }
 
 // TODO: Make styles for childrens: buttons
@@ -22,7 +24,9 @@ export function InputGroup({
   className,
   onPrependClick,
   onAppendClick,
-  onClick
+  onClick,
+  transparentPrepend,
+  transparentAppend
 }: PropsWithChildren<Props> & HTMLAttributes<HTMLElement>) {
   return (
     <div
@@ -37,13 +41,14 @@ export function InputGroup({
       {prepend ? (
         <div
           className={classNameObject({
-            "ecency-input-group-part ecency-input-group-prepend flex items-center justify-center border-r-0 rounded-tl-full rounded-bl-full bg-gray-200 dark:bg-gray-600 dark:border-gray-600":
+            "ecency-input-group-part ecency-input-group-prepend flex items-center justify-center border-r-0 rounded-tl-full rounded-bl-full dark:border-gray-600":
               true,
             "px-2.5": typeof prepend === "string" || (prepend as ReactElement)?.type === Spinner,
             "[&>.ecency-spinner]:w-3.5 [&>.ecency-spinner]:h-3.5":
               (prepend as ReactElement)?.type === Spinner,
             "[&>svg]:w-4 [&>svg]:h-4 px-2": true,
-            "border-2": (prepend as ReactElement)?.type !== Button
+            "border-2": (prepend as ReactElement)?.type !== Button,
+            "bg-gray-200 dark:bg-gray-600": !transparentPrepend ?? true
           })}
           onClick={() => onPrependClick?.()}
         >
@@ -56,13 +61,14 @@ export function InputGroup({
       {append ? (
         <div
           className={classNameObject({
-            "ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full bg-gray-200 dark:bg-gray-600 dark:border-gray-600":
+            "ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full dark:border-gray-600":
               true,
             "flex items-center justify-center px-2.5":
               typeof append === "string" || (prepend as ReactElement)?.type === Spinner,
             "[&>.ecency-spinner]:w-3.5 [&>.ecency-spinner]:h-3.5":
               (prepend as ReactElement)?.type === Spinner,
-            "border-2": (append as ReactElement)?.type !== Button
+            "border-2": (append as ReactElement)?.type !== Button,
+            "bg-gray-200 dark:bg-gray-600": !transparentAppend ?? true
           })}
           onClick={() => onAppendClick?.()}
         >
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 291d0c587d7..07aa032b40d 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1827,8 +1827,10 @@
     "update-success-message": "Your Recovery email has been updated successfully"
   },
   "chat": {
+    "title": "Chats",
     "messages": "Messages",
     "new-message": "New Message",
+    "direct-messages": "Direct messages",
     "collapse": "Collapse",
     "expand": "Expand",
     "scroll-to-bottom": "scroll to Bottom",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 2d4806f80c6..35dd141f34a 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2084,12 +2084,11 @@ export const arrowBackSvg = (
 export const messageSendSvg = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    className="icon icon-tabler icon-tabler-send"
     width="24"
     height="24"
     viewBox="0 0 24 24"
     strokeWidth="2"
-    stroke="#3c4449"
+    stroke="currentColor"
     fill="none"
     strokeLinecap="round"
     strokeLinejoin="round"
@@ -2101,15 +2100,22 @@ export const messageSendSvg = (
 );
 
 export const chatBoxImageSvg = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="22px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="#3c4449"
-  >
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z" />
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M21.6809 16.9601L18.5509 9.65013C17.4909 7.17013 15.5409 7.07013 14.2309 9.43013L12.3409 12.8401C11.3809 14.5701 9.5909 14.7201 8.3509 13.1701L8.1309 12.8901C6.8409 11.2701 5.0209 11.4701 4.0909 13.3201L2.3709 16.7701C1.1609 19.1701 2.9109 22.0001 5.5909 22.0001H18.3509C20.9509 22.0001 22.7009 19.3501 21.6809 16.9601Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M6.9707 8C8.62756 8 9.9707 6.65685 9.9707 5C9.9707 3.34315 8.62756 2 6.9707 2C5.31385 2 3.9707 3.34315 3.9707 5C3.9707 6.65685 5.31385 8 6.9707 8Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -2405,3 +2411,28 @@ export const duotoneRefreshSvg = (
     />
   </svg>
 );
+
+export const attachFileSvg = (
+  <svg
+    style={{ minWidth: "24px" }}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.2009 11.8002L10.7908 13.2102C10.0108 13.9902 10.0108 15.2602 10.7908 16.0402C11.5708 16.8202 12.8408 16.8202 13.6208 16.0402L15.8409 13.8202C17.4009 12.2602 17.4009 9.73023 15.8409 8.16023C14.2809 6.60023 11.7508 6.60023 10.1808 8.16023L7.76086 10.5802C6.42086 11.9202 6.42086 14.0902 7.76086 15.4302"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      opacity="0.4"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/src/common/pages/chats.tsx b/src/common/pages/chats.tsx
new file mode 100644
index 00000000000..0c070062ab4
--- /dev/null
+++ b/src/common/pages/chats.tsx
@@ -0,0 +1,111 @@
+import React, { useContext, useEffect, useMemo } from "react";
+import { connect } from "react-redux";
+import { match } from "react-router";
+import NavBar from "../components/navbar";
+import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
+import ChatsSideBar from "../features/chats/components/chats-sidebar";
+import ChatsMessagesBox from "../features/chats/components/chats-messages-box";
+import ManageChatKey from "../features/chats/components/manage-chat-key";
+import Feedback from "../components/feedback";
+import { useMappedStore } from "../store/use-mapped-store";
+import { ChatContext } from "../features/chats/chat-context-provider";
+import ImportChats from "../features/chats/components/import-chats";
+import { Spinner } from "@ui/spinner";
+
+interface Props extends PageProps {
+  match: match<{
+    filter: string;
+    name: string;
+    path: string;
+    url: string;
+    username: string;
+  }>;
+}
+
+export const Chats = (props: Props) => {
+  const { activeUser, global } = useMappedStore();
+  const { match, history } = props;
+
+  const username = match.params.username;
+
+  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey, windowWidth } =
+    useContext(ChatContext);
+
+  const isReady = useMemo(
+    () => activeUser && activeUserKeys?.pub && chatPrivKey,
+    [activeUserKeys, activeUserKeys, chatPrivKey]
+  );
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+  return (
+    <div className="bg-blue-duck-egg dark:bg-transparent pt-[4.5rem] min-h-[100vh]">
+      <Feedback activeUser={activeUser} />
+      <NavBar history={props.history} />
+
+      <div className="container mx-auto py-6">
+        <div className="grid grid-cols-12 overflow-hidden rounded-2xl bg-white border border-[--border-color]">
+          <div className="col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
+            {isReady ? <ChatsSideBar history={history} username={username} /> : <></>}
+          </div>
+          <div className="col-span-12 sm:col-span-6 lg:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto">
+            {isReady ? (
+              revealPrivKey ? (
+                <div
+                  className="chats-manage-key"
+                  style={{ position: windowWidth < 768 ? "absolute" : "static" }}
+                >
+                  <ManageChatKey history={history} />
+                </div>
+              ) : (
+                <div className="import-chat">
+                  <ImportChats />
+                </div>
+              )
+            ) : (
+              <ChatsMessagesBox {...props} />
+            )}
+            {showSpinner ? (
+              <div className="flex justify-center items-center full-page">
+                <Spinner />
+                <p className="mt-3 ml-2" style={{ fontSize: "26px" }}>
+                  Loading...
+                </p>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+          {/*{activeUser ? (): (*/}
+          {/*  <>*/}
+          {/*    {activeUserKeys?.pub ? (*/}
+          {/*      chatPrivKey ? (*/}
+          {/*        <></>*/}
+          {/*      ) : (*/}
+          {/*        <>*/}
+
+          {/*        </>*/}
+          {/*      )*/}
+          {/*    ) : (*/}
+          {/*      <div className="flex justify-center items-center full-page">*/}
+          {/*        <JoinChat />*/}
+          {/*      </div>*/}
+          {/*    )}*/}
+          {/*  </>*/}
+          {/*  )*/}
+          {/*  ) : (*/}
+          {/*  <h4 className="flex justify-center items-center full-page text-center">*/}
+          {/*  Please login to continue the chat*/}
+          {/*  </h4>*/}
+          {/*  )}*/}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/pages/chats/index.scss b/src/common/pages/chats/index.scss
deleted file mode 100644
index 3fdad1cf095..00000000000
--- a/src/common/pages/chats/index.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../../../style/vars_mixins";
-
-.chats-page {
-  display: flex;
-  margin-top: 3.5rem;
-
-  .full-page {
-    width: 100vw;
-    height: 100vh;
-  }
-  .chats-manage-key {
-    .private-key {
-      margin-top: 4.5rem;
-      @include media-breakpoint-down(md) {
-        width: 95vw;
-      }
-      .form-group {
-        width: 100% !important;
-      }
-    }
-  }
-  .import-chat {
-    width: 100%;
-    height: 100%;
-    margin-top: 10%;
-  }
-}
diff --git a/src/common/pages/chats/index.tsx b/src/common/pages/chats/index.tsx
deleted file mode 100644
index 58a8608571f..00000000000
--- a/src/common/pages/chats/index.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { match } from "react-router";
-import NavBar from "../../components/navbar";
-import NavBarElectron from "../../../desktop/app/components/navbar";
-import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../common";
-import ChatsSideBar from "../../features/chats/components/chats-sidebar/indes";
-import ChatsMessagesBox from "../../features/chats/components/chats-messages-box";
-
-import ManageChatKey from "../../features/chats/components/manage-chat-key";
-import Feedback from "../../components/feedback";
-import { useMappedStore } from "../../store/use-mapped-store";
-import { ChatContext } from "../../features/chats/chat-context-provider";
-import ImportChats from "../../features/chats/components/import-chats";
-import JoinChat from "../../features/chats/components/join-chat";
-
-import "./index.scss";
-import { Spinner } from "@ui/spinner";
-
-interface MatchParams {
-  filter: string;
-  name: string;
-  path: string;
-  url: string;
-  username: string;
-}
-
-interface Props extends PageProps {
-  match: match<MatchParams>;
-}
-
-export const Chats = (props: Props) => {
-  const { activeUser, global } = useMappedStore();
-  const { match, history } = props;
-  const [marginTop, setMarginTop] = useState(0);
-
-  const username = match.params.username;
-
-  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey, windowWidth } =
-    useContext(ChatContext);
-
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, []);
-
-  useEffect(() => {
-    handleResize();
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  const handleResize = () => {
-    const parentElemet = document.getElementById("sticky-container")?.getBoundingClientRect();
-    if (parentElemet) {
-      setMarginTop(parentElemet?.y + parentElemet?.height - 30);
-    }
-  };
-
-  return (
-    <>
-      <Feedback activeUser={activeUser} />
-      {global.isElectron ? <NavBarElectron {...props} /> : <NavBar history={props.history} />}
-
-      <div
-        style={{ marginTop: marginTop }}
-        className={props.global.isElectron ? "chats-page mb-lg-0 pt-6" : "chats-page mb-lg-0"}
-      >
-        {activeUser ? (
-          showSpinner ? (
-            <div className="d-flex justify-content-center align-items-center full-page">
-              <Spinner />
-              <p className="mt-3 ml-2" style={{ fontSize: "26px" }}>
-                Loading...
-              </p>
-            </div>
-          ) : (
-            <>
-              {activeUserKeys?.pub ? (
-                chatPrivKey ? (
-                  <>
-                    <ChatsSideBar history={history} username={username} />
-                    {revealPrivKey ? (
-                      <div
-                        className="chats-manage-key"
-                        style={{ position: windowWidth < 768 ? "absolute" : "static" }}
-                      >
-                        <ManageChatKey history={history} />
-                      </div>
-                    ) : (
-                      <>
-                        <ChatsMessagesBox {...props} />
-                      </>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <div className="import-chat">
-                      <ImportChats />
-                    </div>
-                  </>
-                )
-              ) : (
-                <div className="d-flex justify-content-center align-items-center full-page">
-                  <JoinChat />
-                </div>
-              )}
-            </>
-          )
-        ) : (
-          <h4 className="d-flex justify-content-center align-items-center full-page text-center">
-            Please login to continue the chat
-          </h4>
-        )}
-      </div>
-    </>
-  );
-};
-export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/pages/onboard.tsx b/src/common/pages/onboard.tsx
index b8144f31c48..27f523e7a97 100644
--- a/src/common/pages/onboard.tsx
+++ b/src/common/pages/onboard.tsx
@@ -530,7 +530,7 @@ const Onboard = (props: Props) => {
                 </span>
               </div>
               <span className="mt-3">{_t("onboard.copy-key")}</span>
-              <div className="mt-3 flex flex-col align-center">
+              <div className="mt-3 flex flex-col items-center">
                 <div className="flex">
                   <span className="mr-3 mt-1">
                     {innerWidth <= 768 ? shortPassword + "..." : masterPassword}
diff --git a/yarn.lock b/yarn.lock
index b9628cdd3b5..3239b1be276 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1216,6 +1216,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.2":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@@ -4790,6 +4797,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -10920,6 +10934,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"

From 9d011a318c8e71c73fb80ba26f99f1d6b11f49f9 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 20 Oct 2023 23:28:03 +0600
Subject: [PATCH 100/179] Chat: improved manage private key UI

---
 .../chats/components/chat-popup/index.tsx     |  4 +-
 .../chats-sidebar/chat-sidebar-header.tsx     | 13 +++--
 .../components/manage-chat-key/index.scss     | 53 -------------------
 .../components/manage-chat-key/index.tsx      | 48 +++++------------
 src/common/pages/chats.tsx                    |  9 ++--
 5 files changed, 31 insertions(+), 96 deletions(-)
 delete mode 100644 src/common/features/chats/components/manage-chat-key/index.scss

diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 808146eb91b..7ced4c88993 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -443,7 +443,9 @@ export const ChatPopUp = () => {
                 )}
               </>
             ) : revealPrivKey ? (
-              <ManageChatKey history={history!} />
+              <div className="p-4">
+                <ManageChatKey />
+              </div>
             ) : (
               <Button
                 className="join-chat-btn"
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index ea55f820405..9c1a0ccbf43 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -33,16 +33,23 @@ export function ChatSidebarHeader({ history }: Props) {
 
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] p-3 gap-4">
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
         {windowWidth < 768 && (
           <Button appearance="link" icon={closeSvg} onClick={() => setShowSideBar(false)} />
         )}
         {revealPrivKey && windowWidth > 768 && (
           <Tooltip content={_t("chat.back")}>
-            <Button appearance="link" icon={arrowBackSvg} onClick={() => setRevealPrivKey(false)} />
+            <Button
+              noPadding={true}
+              appearance="gray-link"
+              icon={arrowBackSvg}
+              onClick={() => setRevealPrivKey(false)}
+            />
           </Tooltip>
         )}
-        <div className="font-semibold text-gray-600 text-sm">{_t("chat.title")}</div>
+        <div className="font-semibold text-gray-600 text-sm">
+          {revealPrivKey ? _t("chat.manage-chat-key") : _t("chat.title")}
+        </div>
       </div>
       <div className="flex items-center">
         <Tooltip content={_t("chat.refresh")}>
diff --git a/src/common/features/chats/components/manage-chat-key/index.scss b/src/common/features/chats/components/manage-chat-key/index.scss
deleted file mode 100644
index 43861fbf647..00000000000
--- a/src/common/features/chats/components/manage-chat-key/index.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import "src/style/vars_mixins";
-
-.manage-chat-key {
-  .private-key {
-    margin-top: 2.5rem;
-    margin-left: 14px;
-    margin-right: 7px;
-
-    .expand-icon {
-      margin: 13px 15px 0 0;
-
-      .expand-svg {
-        height: 35px;
-        width: 35px;
-        background: #e4e6eb;
-        margin-left: 10px;
-        border-radius: 10px;
-        cursor: pointer;
-
-        svg {
-          width: 35px;
-          height: 35px;
-        }
-
-        &:hover {
-          background: #ecf3ff;
-        }
-      }
-    }
-  }
-
-  .chat-priv-key {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .copy-svg {
-    margin-top: 3px;
-    margin-left: 2px;
-    cursor: pointer;
-
-    svg {
-      @include themify(day) {
-        color: #a1a1a1;
-      }
-      @include themify(night) {
-        @apply text-light-200;
-      }
-    }
-  }
-}
diff --git a/src/common/features/chats/components/manage-chat-key/index.tsx b/src/common/features/chats/components/manage-chat-key/index.tsx
index 3078b25dac9..80339807eeb 100644
--- a/src/common/features/chats/components/manage-chat-key/index.tsx
+++ b/src/common/features/chats/components/manage-chat-key/index.tsx
@@ -1,19 +1,12 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { _t } from "../../../../i18n";
-import { History } from "history";
-import { expandSideBar } from "../../../../img/svg";
 import { ChatContext } from "../../chat-context-provider";
-import "./index.scss";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
 import { classNameObject } from "../../../../helper/class-name-object";
 
-interface Props {
-  history: History;
-}
-
-export default function ManageChatKey({ history }: Props) {
-  const { chatPrivKey, windowWidth, setShowSideBar } = useContext(ChatContext);
+export default function ManageChatKey() {
+  const { chatPrivKey } = useContext(ChatContext);
 
   const qrImgRef = useRef<HTMLImageElement | null>(null);
   const [isQrShow, setIsQrShow] = useState(false);
@@ -30,30 +23,17 @@ export default function ManageChatKey({ history }: Props) {
   };
 
   return (
-    <>
-      <div className="manage-chat-key">
-        <div className="private-key flex">
-          {windowWidth < 768 && history.location.pathname.includes("/chats") && (
-            <div className="expand-icon md:hidden">
-              <p className="expand-svg" onClick={() => setShowSideBar(true)}>
-                {expandSideBar}
-              </p>
-            </div>
-          )}
-          <div className="flex gap-4 flex-col w-full">
-            <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
-            <InputGroupCopyClipboard value={chatPrivKey} />
-            <img
-              ref={qrImgRef}
-              className={classNameObject({
-                "self-center border rounded-xl border-[--border-color]": true,
-                hidden: !isQrShow,
-                block: isQrShow
-              })}
-            />
-          </div>
-        </div>
-      </div>
-    </>
+    <div className="flex gap-4 flex-col w-full">
+      <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
+      <InputGroupCopyClipboard value={chatPrivKey} />
+      <img
+        ref={qrImgRef}
+        className={classNameObject({
+          "self-center border rounded-xl border-[--border-color]": true,
+          hidden: !isQrShow,
+          block: isQrShow
+        })}
+      />
+    </div>
   );
 }
diff --git a/src/common/pages/chats.tsx b/src/common/pages/chats.tsx
index 0c070062ab4..5ac80ab4a4e 100644
--- a/src/common/pages/chats.tsx
+++ b/src/common/pages/chats.tsx
@@ -56,11 +56,10 @@ export const Chats = (props: Props) => {
           <div className="col-span-12 sm:col-span-6 lg:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto">
             {isReady ? (
               revealPrivKey ? (
-                <div
-                  className="chats-manage-key"
-                  style={{ position: windowWidth < 768 ? "absolute" : "static" }}
-                >
-                  <ManageChatKey history={history} />
+                <div className="flex h-full items-center justify-center">
+                  <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color]">
+                    <ManageChatKey />
+                  </div>
                 </div>
               ) : (
                 <div className="import-chat">

From aa755743a8c846d9a8cd1aa96a514a65bb99eec9 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 23 Oct 2023 13:40:10 +0600
Subject: [PATCH 101/179] Chat: fixed message box component UI

---
 src/common/app.tsx                            |   2 +-
 .../components/chats-messages-box/index.scss  |  43 -------
 .../components/chats-messages-box/index.tsx   |  21 +---
 .../chats-messages-header/index.scss          | 116 ------------------
 .../chats-messages-header/index.tsx           |  53 ++++----
 .../components/chats-messages-view/index.scss |  12 --
 .../components/chats-messages-view/index.tsx  |  66 +++++-----
 .../components/chats-profile-box/index.scss   |  70 -----------
 .../components/chats-profile-box/index.tsx    |  56 ++++-----
 .../chats/screens}/chats.tsx                  |  61 +++++----
 src/common/features/chats/screens/index.ts    |   1 +
 11 files changed, 112 insertions(+), 389 deletions(-)
 delete mode 100644 src/common/features/chats/components/chats-messages-box/index.scss
 delete mode 100644 src/common/features/chats/components/chats-messages-header/index.scss
 delete mode 100644 src/common/features/chats/components/chats-messages-view/index.scss
 delete mode 100644 src/common/features/chats/components/chats-profile-box/index.scss
 rename src/common/{pages => features/chats/screens}/chats.tsx (63%)
 create mode 100644 src/common/features/chats/screens/index.ts

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 0af333a3be2..98c6fad7254 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -51,7 +51,7 @@ const AuthPage = (props: any) => <AuthContainer {...props} />;
 const SubmitContainer = loadable(() => import("./pages/submit"));
 const SubmitPage = (props: any) => <SubmitContainer {...props} />;
 
-const ChatsContainer = loadable(() => import("./pages/chats"));
+const ChatsContainer = loadable(() => import("./features/chats/screens/chats"));
 const ChatsPage = (props: any) => <ChatsContainer {...props} />;
 
 const OnboardContainer = loadable(() => import("./pages/onboard"));
diff --git a/src/common/features/chats/components/chats-messages-box/index.scss b/src/common/features/chats/components/chats-messages-box/index.scss
deleted file mode 100644
index 1a40327eea0..00000000000
--- a/src/common/features/chats/components/chats-messages-box/index.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chats-messages-box {
-  margin-top: 10px;
-
-  display: grid;
-  grid-template-rows: repeat(18, 1fr);
-  grid-template-columns: repeat(1, 1fr);
-
-  @include themify(day) {
-    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
-  }
-
-  @include themify(night) {
-    box-shadow: 0px -5px 5px rgb(60, 68, 73);
-  }
-  width: 100%;
-
-  .no-chat-select {
-    height: calc(100vh - 70px);
-    font-size: 22px;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .start-chat-wrapper {
-      .start-chat {
-        @include themify(day) {
-          color: #65676b;
-        }
-        @include themify(night) {
-          @apply text-white;
-        }
-      }
-    }
-
-    .info-message {
-      font-size: 16px;
-      // font-weight: 100;
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chats-messages-box/index.tsx b/src/common/features/chats/components/chats-messages-box/index.tsx
index 689429cab48..cf2293329e6 100644
--- a/src/common/features/chats/components/chats-messages-box/index.tsx
+++ b/src/common/features/chats/components/chats-messages-box/index.tsx
@@ -1,9 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
-import { Account } from "../../../../store/accounts/types";
-import { ToggleType, UI } from "../../../../store/ui/types";
-import { User } from "../../../../store/users/types";
 import ChatsMessagesHeader from "../chats-messages-header";
 import ChatsMessagesView from "../chats-messages-view";
 import { Channel, ChannelUpdate } from "../../../../../managers/message-manager-types";
@@ -13,8 +10,6 @@ import { useMappedStore } from "../../../../store/use-mapped-store";
 import { CHANNEL } from "../chat-popup/chat-constants";
 import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
-
-import "./index.scss";
 import { Button } from "@ui/button";
 
 interface MatchParams {
@@ -27,13 +22,7 @@ interface MatchParams {
 
 interface Props {
   match: match<MatchParams>;
-  users: User[];
   history: History;
-  ui: UI;
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  toggleUIProp: (what: ToggleType) => void;
 }
 
 export default function ChatsMessagesBox(props: Props) {
@@ -143,13 +132,7 @@ export default function ChatsMessagesBox(props: Props) {
   };
 
   return (
-    <div
-      className="chats-messages-box"
-      style={{
-        maxHeight: maxHeight,
-        position: windowWidth < 768 ? "absolute" : "static"
-      }}
-    >
+    <div className="h-full">
       {match.url === "/chats" ? (
         <div className="no-chat-select">
           <div className="start-chat-wrapper text-center ">
@@ -164,7 +147,7 @@ export default function ChatsMessagesBox(props: Props) {
               <ChatsMessagesHeader username={username} history={props.history} />
               {inProgress && <LinearProgress />}
               <ChatsMessagesView
-                {...props}
+                history={props.history}
                 username={username}
                 currentChannel={currentChannel!}
                 inProgress={inProgress}
diff --git a/src/common/features/chats/components/chats-messages-header/index.scss b/src/common/features/chats/components/chats-messages-header/index.scss
deleted file mode 100644
index e21f0ecc3d6..00000000000
--- a/src/common/features/chats/components/chats-messages-header/index.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chats-messages-header {
-  grid-row: span 1;
-  width: 100%;
-  height: 67px;
-  @apply border-b;
-
-  @include themify(day) {
-    border-color: #e7e7e7;
-  }
-  @include themify(night) {
-    @apply border-gray-charcoal;
-  }
-
-  a {
-    @include themify(day) {
-      @apply text-gray-600;
-    }
-
-    @include themify(night) {
-      @apply text-light-200;
-    }
-  }
-
-  a::after {
-    display: none;
-  }
-
-  .header-content {
-    .user-info-wrapper {
-      .expand-icon {
-        margin-top: 15px;
-
-        .expand-svg {
-          height: 35px;
-          width: 35px;
-          margin-left: 10px;
-          border-radius: 10px;
-          cursor: pointer;
-
-          svg {
-            width: 35px;
-            height: 35px;
-          }
-
-          &:hover {
-            @include themify(day) {
-              background: #f4f4f4;
-            }
-
-            @include themify(night) {
-              @apply bg-blue-dusky;
-            }
-          }
-        }
-      }
-
-      .user-info {
-        display: inline-flex;
-        padding: 8px 10px;
-        margin: 5px 0 0 5px;
-        cursor: pointer;
-
-        .username {
-          font-size: 21px;
-          font-family: Helvetica, Arial, sans-serif;
-          font-weight: 700;
-          margin: 7px 0 0 12px;
-        }
-
-        &:hover {
-          border-radius: 10px;
-          @include themify(day) {
-            background: #f4f4f4;
-          }
-
-          @include themify(night) {
-            @apply bg-blue-dusky;
-          }
-        }
-      }
-    }
-
-    .community-menu {
-      border: none;
-      width: 40px;
-      height: 40px;
-      justify-content: center;
-      text-align: center;
-      display: flex;
-      margin-top: 14px;
-      cursor: pointer;
-      border-radius: 50%;
-
-      svg {
-        @include themify(day) {
-          @apply text-gray-charcoal;
-        }
-
-        @include themify(night) {
-          @apply text-light-200;
-        }
-      }
-
-      &:hover {
-        @include themify(day) {
-          background: rgba(29, 155, 240, 0.1);
-        }
-        @include themify(night) {
-          @apply bg-blue-dark-grey;
-        }
-      }
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chats-messages-header/index.tsx b/src/common/features/chats/components/chats-messages-header/index.tsx
index f75b021b311..aabbad330be 100644
--- a/src/common/features/chats/components/chats-messages-header/index.tsx
+++ b/src/common/features/chats/components/chats-messages-header/index.tsx
@@ -9,8 +9,7 @@ import { formattedUserName } from "../../utils";
 import Link from "../../../../components/alink";
 import { expandSideBar } from "../../../../img/svg";
 import { ChatContext } from "../../chat-context-provider";
-
-import "./index.scss";
+import { Button } from "@ui/button";
 
 interface Props {
   username: string;
@@ -40,36 +39,28 @@ export default function ChatsMessagesHeader(props: Props) {
   };
 
   return (
-    <div className="chats-messages-header">
-      <div className="flex justify-between header-content">
-        <div className="flex user-info-wrapper">
-          <div className="expand-icon d-md-none">
-            <p className="expand-svg" onClick={() => setShowSideBar(true)}>
-              {expandSideBar}
-            </p>
-          </div>
-          <Link
-            to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
-            target="_blank"
-            style={{ textDecoration: "none" }}
-          >
-            <div className="user-info">
-              <UserAvatar username={formattedUserName(username)} size="medium" />
-              <p className="username">{formattedName(username, chat)}</p>
-            </div>
-          </Link>
-        </div>
-
-        {isChannel(username) && (
-          <div className="community-menu">
-            <ChatsCommunityDropdownMenu
-              from={CHATPAGE}
-              history={props.history}
-              username={props.username}
-            />
-          </div>
-        )}
+    <div className="flex sticky top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[60px]">
+      <div className="flex items-center gap-4">
+        <Button className="md:hidden" icon={expandSideBar} onClick={() => setShowSideBar(true)} />
+        <Link
+          className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800"
+          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+          target="_blank"
+        >
+          <UserAvatar username={formattedUserName(username)} size="medium" />
+          <div>{formattedName(username, chat)}</div>
+        </Link>
       </div>
+
+      {isChannel(username) && (
+        <div className="community-menu">
+          <ChatsCommunityDropdownMenu
+            from={CHATPAGE}
+            history={props.history}
+            username={props.username}
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/common/features/chats/components/chats-messages-view/index.scss b/src/common/features/chats/components/chats-messages-view/index.scss
deleted file mode 100644
index 0c3fe3489eb..00000000000
--- a/src/common/features/chats/components/chats-messages-view/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.chats-messages-view {
-  grid-row: span 16;
-  overflow: scroll;
-  overflow-x: hidden;
-  a::after {
-    display: none;
-  }
-
-  &.no-scroll {
-    overflow: hidden;
-  }
-}
diff --git a/src/common/features/chats/components/chats-messages-view/index.tsx b/src/common/features/chats/components/chats-messages-view/index.tsx
index 8cee37ae185..fd0e2a613e3 100644
--- a/src/common/features/chats/components/chats-messages-view/index.tsx
+++ b/src/common/features/chats/components/chats-messages-view/index.tsx
@@ -9,47 +9,31 @@ import { fetchCommunityMessages, fetchDirectMessages } from "../../utils";
 import { History } from "history";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import ChatsProfileBox from "../chats-profile-box";
-import "./index.scss";
 import ChatsChannelMessages from "../chats-channel-messages";
 import ChatsDirectMessages from "../chats-direct-messages";
-import { Account } from "../../../../store/accounts/types";
-import { ToggleType, UI } from "../../../../store/ui/types";
-import { User } from "../../../../store/users/types";
 import ChatInput from "../chat-input";
 import ChatsScroller from "../chats-scroller";
 import { CHATPAGE } from "../chat-popup/chat-constants";
-import { EmojiPickerStyleProps } from "../../types";
 import { ChatContext } from "../../chat-context-provider";
 import { classNameObject } from "../../../../helper/class-name-object";
 
-const EmojiPickerStyle: EmojiPickerStyleProps = {
-  width: "56.5%",
-  bottom: "58px",
-  left: "340px",
-  marginLeft: "14px",
-  borderTopLeftRadius: "8px",
-  borderTopRightRadius: "8px",
-  borderBottomLeftRadius: "0px"
-};
-
 interface Props {
   username: string;
-  users: User[];
   history: History;
-  ui: UI;
   currentChannel: Channel;
   inProgress: boolean;
-  setActiveUser: (username: string | null) => void;
-  updateActiveUser: (data?: Account) => void;
-  deleteUser: (username: string) => void;
-  toggleUIProp: (what: ToggleType) => void;
   currentChannelSetter: (channel: Channel) => void;
   setInProgress: (d: boolean) => void;
 }
 
-export default function ChatsMessagesView(props: Props) {
-  const { username, currentChannel, inProgress, currentChannelSetter, setInProgress } = props;
-
+export default function ChatsMessagesView({
+  username,
+  currentChannel,
+  inProgress,
+  currentChannelSetter,
+  setInProgress,
+  history
+}: Props) {
   const { messageServiceInstance } = useContext(ChatContext);
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
@@ -176,13 +160,14 @@ export default function ChatsMessagesView(props: Props) {
     <>
       <div
         className={classNameObject({
-          "chats-messages-view border-b border-[--border-color]": true,
+          "h-full": true,
           "no-scroll": isTop && hasMore
         })}
         ref={messagesBoxRef}
         onScroll={handleScroll}
       >
         <Link
+          className="after:!hidden"
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
           target="_blank"
         >
@@ -191,7 +176,8 @@ export default function ChatsMessagesView(props: Props) {
         {communityName.length !== 0 ? (
           <>
             <ChatsChannelMessages
-              {...props}
+              username={username}
+              history={history}
               publicMessages={publicMessages}
               currentChannel={currentChannel!}
               isScrollToBottom={isScrollToBottom}
@@ -203,7 +189,6 @@ export default function ChatsMessagesView(props: Props) {
           </>
         ) : (
           <ChatsDirectMessages
-            {...props}
             directMessages={directMessages && directMessages}
             currentUser={directUser!}
             isScrolled={isScrolled}
@@ -220,14 +205,25 @@ export default function ChatsMessagesView(props: Props) {
           />
         )}
       </div>
-      <ChatInput
-        gifPickerStyle={EmojiPickerStyle}
-        isCurrentUser={!!directUser}
-        isCommunity={!!communityName}
-        currentUser={directUser}
-        currentChannel={currentChannel!}
-        isCurrentUserJoined={true}
-      />
+
+      <div className="sticky bottom-0 p-2 border-t border-[--border-color] bg-white">
+        <ChatInput
+          gifPickerStyle={{
+            width: "56.5%",
+            bottom: "58px",
+            left: "340px",
+            marginLeft: "14px",
+            borderTopLeftRadius: "8px",
+            borderTopRightRadius: "8px",
+            borderBottomLeftRadius: "0px"
+          }}
+          isCurrentUser={!!directUser}
+          isCommunity={!!communityName}
+          currentUser={directUser}
+          currentChannel={currentChannel!}
+          isCurrentUserJoined={true}
+        />
+      </div>
     </>
   );
 }
diff --git a/src/common/features/chats/components/chats-profile-box/index.scss b/src/common/features/chats/components/chats-profile-box/index.scss
deleted file mode 100644
index 54574a03468..00000000000
--- a/src/common/features/chats/components/chats-profile-box/index.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chats-profile-box {
-  .user-profile {
-    border-bottom-right-radius: 20px;
-    border-bottom-left-radius: 20px;
-    min-height: 266px;
-
-    @include themify(day) {
-      @apply bg-light-300;
-    }
-    @include themify(night) {
-      background: #172b44;
-    }
-
-    padding: 0 16px 16px 16px;
-    margin: 0 16px 16px 16px;
-
-    .user-logo {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-top: 16px;
-      cursor: pointer;
-    }
-
-    .user-name {
-      font-size: 20px;
-      font-weight: 700;
-      @include themify(day) {
-        @apply text-gray-charcoal;
-      }
-      @include themify(night) {
-        color: $white;
-      }
-    }
-
-    .about {
-      text-align: center;
-      padding: 4px 0;
-      @include themify(day) {
-        @apply text-gray-charcoal;
-      }
-      @include themify(night) {
-        @apply text-white;
-      }
-    }
-
-    .joining-info {
-      justify-content: space-evenly;
-    }
-
-    .created-date {
-      padding-top: 8px;
-      font-size: 14px;
-      @include themify(day) {
-        @apply text-gray-charcoal;
-      }
-      @include themify(night) {
-        @apply text-white;
-      }
-    }
-
-    .followers {
-      font-size: 14px;
-      padding-top: 4px !important;
-      font-family: New Century Schoolbook;
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chats-profile-box/index.tsx b/src/common/features/chats/components/chats-profile-box/index.tsx
index 0d9f4020944..25e5222e956 100644
--- a/src/common/features/chats/components/chats-profile-box/index.tsx
+++ b/src/common/features/chats/components/chats-profile-box/index.tsx
@@ -6,14 +6,11 @@ import { getAccountFull } from "../../../../api/hive";
 import { formattedUserName } from "../../utils";
 import { useCommunityCache } from "../../../../core";
 
-import "./index.scss";
-
 export interface profileData {
   joiningData: string;
   about: string | undefined;
   followers: number | undefined;
   name: string;
-  subscribers: string;
   username: string;
 }
 
@@ -25,9 +22,13 @@ interface Props {
   currentUser?: string;
 }
 
-export default function ChatsProfileBox(props: Props) {
-  const { username, isCommunity, isCurrentUser, communityName, currentUser } = props;
-
+export default function ChatsProfileBox({
+  username,
+  isCommunity,
+  isCurrentUser,
+  communityName,
+  currentUser
+}: Props) {
   const [profileData, setProfileData] = useState<profileData>();
 
   const { data: community } = useCommunityCache(username ? username! : communityName!);
@@ -56,7 +57,6 @@ export default function ChatsProfileBox(props: Props) {
           about: response.profile?.about,
           followers: response.follow_stats?.follower_count,
           name: response.name,
-          subscribers: _t("chat.followers"),
           username: response.name
         });
       } else {
@@ -65,7 +65,6 @@ export default function ChatsProfileBox(props: Props) {
           about: community?.about,
           followers: community?.subscribers,
           name: community?.title!,
-          subscribers: _t("chat.subscribers"),
           username: community?.name!
         });
       }
@@ -86,39 +85,34 @@ export default function ChatsProfileBox(props: Props) {
           about: community?.about,
           followers: community?.subscribers,
           name: community?.title!,
-          subscribers: _t("chat.subscribers"),
           username: community?.name!
         });
       }
     }
   };
 
-  return (
-    <div className="chats-profile-box">
-      <div className="user-profile">
-        {profileData?.joiningData && (
-          <div className="user-profile-data">
-            <span className="user-logo">
-              <UserAvatar username={profileData.username} size="large" />
-            </span>
-            <h4 className="user-name user-logo ">{profileData.name}</h4>
-            {profileData.about?.length !== 0 && (
-              <p className="about user-logo ">{profileData.about}</p>
-            )}
+  return profileData?.joiningData ? (
+    <div className="flex items-center justify-center p-4">
+      <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-800">
+        <UserAvatar username={profileData.username} size="large" />
+        <div className="text-gray-800 mt-2 font-semibold">{profileData.name}</div>
+        {profileData.about?.length !== 0 && <div>{profileData.about}</div>}
 
-            <div className="created-date user-logo joining-info">
-              <p>
-                {" "}
-                {_t("chat.joined")} {dateToFormatted(profileData!.joiningData, "LL")}
-              </p>
-              <p className="followers">
-                {" "}
-                {formatFollowers(profileData!.followers)} {profileData.subscribers}
-              </p>
+        <div className="grid grid-cols-2 text-center justify-center pt-4 gap-3 text-gray-600">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm">{_t("chat.joined")}</div>
+            <div className="text-blue-dark-sky">
+              {dateToFormatted(profileData!.joiningData, "LL")}
             </div>
           </div>
-        )}
+          <div className="flex flex-col gap-2">
+            <div className="text-sm">{_t("chat.subscribers")}</div>
+            <div className="text-blue-dark-sky">{formatFollowers(profileData!.followers)}</div>
+          </div>
+        </div>
       </div>
     </div>
+  ) : (
+    <></>
   );
 }
diff --git a/src/common/pages/chats.tsx b/src/common/features/chats/screens/chats.tsx
similarity index 63%
rename from src/common/pages/chats.tsx
rename to src/common/features/chats/screens/chats.tsx
index 5ac80ab4a4e..c88ca9c81e4 100644
--- a/src/common/pages/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -1,16 +1,16 @@
 import React, { useContext, useEffect, useMemo } from "react";
 import { connect } from "react-redux";
 import { match } from "react-router";
-import NavBar from "../components/navbar";
-import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
-import ChatsSideBar from "../features/chats/components/chats-sidebar";
-import ChatsMessagesBox from "../features/chats/components/chats-messages-box";
-import ManageChatKey from "../features/chats/components/manage-chat-key";
-import Feedback from "../components/feedback";
-import { useMappedStore } from "../store/use-mapped-store";
-import { ChatContext } from "../features/chats/chat-context-provider";
-import ImportChats from "../features/chats/components/import-chats";
+import NavBar from "../../../components/navbar";
+import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../../../pages/common";
+import ChatsSideBar from "../components/chats-sidebar";
+import ManageChatKey from "../components/manage-chat-key";
+import Feedback from "../../../components/feedback";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
+import ImportChats from "../components/import-chats";
+import ChatsMessagesBox from "../components/chats-messages-box";
 
 interface Props extends PageProps {
   match: match<{
@@ -28,7 +28,7 @@ export const Chats = (props: Props) => {
 
   const username = match.params.username;
 
-  const { showSpinner, activeUserKeys, revealPrivKey, chatPrivKey, windowWidth } =
+  const { receiverPubKey, showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } =
     useContext(ChatContext);
 
   const isReady = useMemo(
@@ -54,31 +54,30 @@ export const Chats = (props: Props) => {
             {isReady ? <ChatsSideBar history={history} username={username} /> : <></>}
           </div>
           <div className="col-span-12 sm:col-span-6 lg:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto">
-            {isReady ? (
-              revealPrivKey ? (
-                <div className="flex h-full items-center justify-center">
-                  <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color]">
-                    <ManageChatKey />
-                  </div>
+            {isReady && revealPrivKey && (
+              <div className="flex h-full items-center justify-center">
+                <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color]">
+                  <ManageChatKey />
                 </div>
-              ) : (
-                <div className="import-chat">
-                  <ImportChats />
-                </div>
-              )
-            ) : (
-              <ChatsMessagesBox {...props} />
+              </div>
             )}
-            {showSpinner ? (
-              <div className="flex justify-center items-center full-page">
-                <Spinner />
-                <p className="mt-3 ml-2" style={{ fontSize: "26px" }}>
-                  Loading...
-                </p>
+            {showSpinner && (
+              <div className="flex justify-center items-center h-full w-full">
+                <Spinner className="w-6 h-6" />
               </div>
-            ) : (
-              <></>
             )}
+            {!isReady && !showSpinner && (
+              <div className="h-full w-full flex items-center justify-center">
+                <ImportChats />
+              </div>
+            )}
+            {isReady && !showSpinner && receiverPubKey && (
+              <ChatsMessagesBox match={match} history={history} />
+            )}
+            {/*{isReady ? (*/}
+            {/*  revealPrivKey ? (*/}
+            {/*  <ChatsMessagesBox {...props} />*/}
+            {/*)}*/}
           </div>
           {/*{activeUser ? (): (*/}
           {/*  <>*/}
diff --git a/src/common/features/chats/screens/index.ts b/src/common/features/chats/screens/index.ts
new file mode 100644
index 00000000000..9a6ff3c6d09
--- /dev/null
+++ b/src/common/features/chats/screens/index.ts
@@ -0,0 +1 @@
+export * from "./chats";

From 3e6ac6585ca9a927f1a1eaaed41b20040bc3caed Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 25 Oct 2023 23:02:31 +0600
Subject: [PATCH 102/179] Chat: fixed message box component UI

---
 .../chat-popup/chat-popup-direct-messages.tsx |  2 +-
 .../components/chats-profile-box/index.tsx    |  1 -
 src/common/features/chats/screens/chats.tsx   | 24 ++++++++++++++-----
 .../chats/utils/upload-chat-public-key.ts     |  1 -
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index df283f2a4d2..2c87ae1fa4d 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -63,7 +63,7 @@ export function ChatPopupDirectMessages({
                 userClicked(v);
               }}
               key={user.pubkey}
-              lastMessage={getDirectLastMessage(user.pubkey, chat.directMessages)}
+              lastMessage={getDirectLastMessage(user.pubkey, chat.directMessages)?.content}
             />
           ))}
         </>
diff --git a/src/common/features/chats/components/chats-profile-box/index.tsx b/src/common/features/chats/components/chats-profile-box/index.tsx
index 25e5222e956..66824a1a34b 100644
--- a/src/common/features/chats/components/chats-profile-box/index.tsx
+++ b/src/common/features/chats/components/chats-profile-box/index.tsx
@@ -76,7 +76,6 @@ export default function ChatsProfileBox({
           about: response.profile?.about,
           followers: response.follow_stats?.follower_count,
           name: response.name,
-          subscribers: _t("chat.followers"),
           username: response.name
         });
       } else {
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index c88ca9c81e4..a3b05deff6d 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -11,6 +11,7 @@ import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
 import ImportChats from "../components/import-chats";
 import ChatsMessagesBox from "../components/chats-messages-box";
+import JoinChat from "../components/join-chat";
 
 interface Props extends PageProps {
   match: match<{
@@ -32,10 +33,12 @@ export const Chats = (props: Props) => {
     useContext(ChatContext);
 
   const isReady = useMemo(
-    () => activeUser && activeUserKeys?.pub && chatPrivKey,
+    () => !!(activeUser && activeUserKeys?.pub && chatPrivKey),
     [activeUserKeys, activeUserKeys, chatPrivKey]
   );
 
+  console.log(isReady);
+
   useEffect(() => {
     document.body.style.overflow = "hidden";
 
@@ -71,13 +74,22 @@ export const Chats = (props: Props) => {
                 <ImportChats />
               </div>
             )}
-            {isReady && !showSpinner && receiverPubKey && (
+            {isReady && !showSpinner && receiverPubKey && !revealPrivKey && (
               <ChatsMessagesBox match={match} history={history} />
             )}
-            {/*{isReady ? (*/}
-            {/*  revealPrivKey ? (*/}
-            {/*  <ChatsMessagesBox {...props} />*/}
-            {/*)}*/}
+            {isReady && !receiverPubKey && !revealPrivKey && !showSpinner && (
+              <div className="flex flex-col justify-center items-center w-full h-full">
+                <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
+                  Hello, @{activeUser?.username}
+                </div>
+                <div>Search a person or community and start messaging</div>
+              </div>
+            )}
+            {!isReady && (
+              <div className="flex justify-center items-center full-page">
+                <JoinChat />
+              </div>
+            )}
           </div>
           {/*{activeUser ? (): (*/}
           {/*  <>*/}
diff --git a/src/common/features/chats/utils/upload-chat-public-key.ts b/src/common/features/chats/utils/upload-chat-public-key.ts
index 31154282d9c..c96ae2d1e82 100644
--- a/src/common/features/chats/utils/upload-chat-public-key.ts
+++ b/src/common/features/chats/utils/upload-chat-public-key.ts
@@ -5,7 +5,6 @@ import { ActiveUser } from "../../../store/active-user/types";
 export const uploadChatPublicKey = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
   const response = await getAccountFull(activeUser?.username!);
 
-  debugger;
   return await updateProfile(response, {
     ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}"),
     nsKey: noStrPubKey

From afc8b6453f86652655223517cf028668618000e2 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 25 Oct 2023 23:49:07 +0600
Subject: [PATCH 103/179] Chat: re-arranged components

---
 .../features/chats/chat-context-provider.tsx  |  22 +--
 .../{chat-input/index.tsx => chat-input.tsx}  |  23 ++-
 .../index.tsx => chat-message-box.tsx}        |  22 +--
 .../index.tsx => chat-messages-header.tsx}    |  28 ++--
 .../index.tsx => chat-messages-view.tsx}      |  26 ++--
 .../chat-popup/chat-popup-messages-list.tsx   |   2 +-
 .../index.tsx => chat-profile-box.tsx}        |  12 +-
 .../index.tsx => chats-dropdown-menu.tsx}     |   6 +-
 .../chats-sidebar/chat-sidebar-header.tsx     |   9 +-
 .../chats/components/chats-sidebar/index.tsx  | 142 +++++++++---------
 .../{join-chat/index.tsx => join-chat.tsx}    |   4 +-
 .../index.tsx => join-community-chat-btn.tsx} |  14 +-
 .../index.tsx => manage-chat-key.tsx}         |   6 +-
 src/common/features/chats/screens/chats.tsx   |  50 +++---
 14 files changed, 172 insertions(+), 194 deletions(-)
 rename src/common/features/chats/components/{chat-input/index.tsx => chat-input.tsx} (91%)
 rename src/common/features/chats/components/{chats-messages-box/index.tsx => chat-message-box.tsx} (89%)
 rename src/common/features/chats/components/{chats-messages-header/index.tsx => chat-messages-header.tsx} (66%)
 rename src/common/features/chats/components/{chats-messages-view/index.tsx => chat-messages-view.tsx} (90%)
 rename src/common/features/chats/components/{chats-profile-box/index.tsx => chat-profile-box.tsx} (91%)
 rename src/common/features/chats/components/{chats-dropdown-menu/index.tsx => chats-dropdown-menu.tsx} (82%)
 rename src/common/features/chats/components/{join-chat/index.tsx => join-chat.tsx} (89%)
 rename src/common/features/chats/components/{join-community-chat-btn/index.tsx => join-community-chat-btn.tsx} (93%)
 rename src/common/features/chats/components/{manage-chat-key/index.tsx => manage-chat-key.tsx} (85%)

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 90a65488047..1cfa6ad591d 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -23,11 +23,11 @@ interface Context {
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   currentChannel: Channel | null;
-  showSideBar: boolean;
+  showMobileMessageBox: boolean;
   windowWidth: number;
   maxHeight: number;
   isActveUserRemoved: boolean;
-  setShowSideBar: (d: boolean) => void;
+  setShowMobileMessageBox: (d: boolean) => void;
   setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
@@ -52,11 +52,11 @@ export const ChatContext = React.createContext<Context>({
   messageServiceInstance: null,
   hasUserJoinedChat: false,
   currentChannel: null,
-  showSideBar: true,
+  showMobileMessageBox: true,
   windowWidth: 0,
   maxHeight: 0,
   isActveUserRemoved: false,
-  setShowSideBar: () => {},
+  setShowMobileMessageBox: () => {},
   setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
@@ -80,7 +80,7 @@ export const ChatContextProvider = (props: Props) => {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
-  const [showSideBar, setShowSideBar] = useState(true);
+  const [showMobileMessageBox, setShowMobileMessageBox] = useState(true);
   const [windowWidth, setWindowWidth] = useState(0);
   const [maxHeight, setMaxHeight] = useState(0);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
@@ -140,13 +140,7 @@ export const ChatContextProvider = (props: Props) => {
 
   useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
 
-  const handleShowSideBar = () => {
-    if (window.innerWidth < 768) {
-      setShowSideBar(false);
-    } else {
-      setShowSideBar(true);
-    }
-  };
+  const handleShowSideBar = () => setShowMobileMessageBox(window.innerWidth < 768);
 
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
@@ -193,11 +187,11 @@ export const ChatContextProvider = (props: Props) => {
         messageServiceInstance,
         hasUserJoinedChat,
         currentChannel,
-        showSideBar,
+        showMobileMessageBox,
         windowWidth,
         maxHeight,
         isActveUserRemoved,
-        setShowSideBar,
+        setShowMobileMessageBox,
         setCurrentChannel,
         setRevealPrivKey,
         setShowSpinner,
diff --git a/src/common/features/chats/components/chat-input/index.tsx b/src/common/features/chats/components/chat-input.tsx
similarity index 91%
rename from src/common/features/chats/components/chat-input/index.tsx
rename to src/common/features/chats/components/chat-input.tsx
index a75a1320ff0..5feb5a39c70 100644
--- a/src/common/features/chats/components/chat-input/index.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -1,26 +1,25 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Channel } from "../../../../../managers/message-manager-types";
-import { EmojiPickerStyleProps } from "../../types";
-import { EmojiPicker } from "../../../../components/emoji-picker";
-import { error } from "../../../../components/feedback";
-
+import { Channel } from "../../../../managers/message-manager-types";
+import { EmojiPickerStyleProps } from "../types";
+import { EmojiPicker } from "../../../components/emoji-picker";
+import { error } from "../../../components/feedback";
 import {
   attachFileSvg,
   chatBoxImageSvg,
   emoticonHappyOutlineSvg,
   gifIcon,
   messageSendSvg
-} from "../../../../img/svg";
-import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "../chat-popup/chat-constants";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import { _t } from "../../../../i18n";
-import { ChatContext } from "../../chat-context-provider";
+} from "../../../img/svg";
+import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "./chat-popup/chat-constants";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+import { ChatContext } from "../chat-context-provider";
 import { Form } from "@ui/form";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
-import { useChatFileUpload } from "../../mutations";
+import { useChatFileUpload } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
-import GifPicker from "../../../../components/gif-picker";
+import GifPicker from "../../../components/gif-picker";
 
 interface Props {
   isCurrentUser: boolean;
diff --git a/src/common/features/chats/components/chats-messages-box/index.tsx b/src/common/features/chats/components/chat-message-box.tsx
similarity index 89%
rename from src/common/features/chats/components/chats-messages-box/index.tsx
rename to src/common/features/chats/components/chat-message-box.tsx
index cf2293329e6..808def62598 100644
--- a/src/common/features/chats/components/chats-messages-box/index.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -1,14 +1,14 @@
 import React, { useContext, useEffect, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
-import ChatsMessagesHeader from "../chats-messages-header";
-import ChatsMessagesView from "../chats-messages-view";
-import { Channel, ChannelUpdate } from "../../../../../managers/message-manager-types";
-import LinearProgress from "../../../../components/linear-progress";
-import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../../utils";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import { CHANNEL } from "../chat-popup/chat-constants";
-import { ChatContext } from "../../chat-context-provider";
+import ChatsMessagesHeader from "./chat-messages-header";
+import ChatsMessagesView from "./chat-messages-view";
+import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
+import LinearProgress from "../../../components/linear-progress";
+import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { CHANNEL } from "./chat-popup/chat-constants";
+import { ChatContext } from "../chat-context-provider";
 import { useMount } from "react-use";
 import { Button } from "@ui/button";
 
@@ -34,7 +34,7 @@ export default function ChatsMessagesBox(props: Props) {
     windowWidth,
     maxHeight,
     setCurrentChannel,
-    setShowSideBar
+    setShowMobileMessageBox
   } = useContext(ChatContext);
 
   const { channels, updatedChannel } = chat;
@@ -137,7 +137,9 @@ export default function ChatsMessagesBox(props: Props) {
         <div className="no-chat-select">
           <div className="start-chat-wrapper text-center ">
             <p className="start-chat ">Select a chat or start a new conversation</p>
-            {windowWidth < 768 && <Button onClick={() => setShowSideBar(true)}>Start Chat</Button>}
+            {windowWidth < 768 && (
+              <Button onClick={() => setShowMobileMessageBox(true)}>Start Chat</Button>
+            )}
           </div>
         </div>
       ) : (
diff --git a/src/common/features/chats/components/chats-messages-header/index.tsx b/src/common/features/chats/components/chat-messages-header.tsx
similarity index 66%
rename from src/common/features/chats/components/chats-messages-header/index.tsx
rename to src/common/features/chats/components/chat-messages-header.tsx
index aabbad330be..72c00b4bd3f 100644
--- a/src/common/features/chats/components/chats-messages-header/index.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -1,14 +1,14 @@
 import React, { useContext } from "react";
 import { History } from "history";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
-import UserAvatar from "../../../../components/user-avatar";
-import { CHATPAGE } from "../chat-popup/chat-constants";
-import { Chat } from "../../../../store/chat/types";
-import { formattedUserName } from "../../utils";
-import Link from "../../../../components/alink";
-import { expandSideBar } from "../../../../img/svg";
-import { ChatContext } from "../../chat-context-provider";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import ChatsCommunityDropdownMenu from "./chats-community-dropdown-menu";
+import UserAvatar from "../../../components/user-avatar";
+import { CHATPAGE } from "./chat-popup/chat-constants";
+import { Chat } from "../../../store/chat/types";
+import { formattedUserName } from "../utils";
+import Link from "../../../components/alink";
+import { expandSideBar } from "../../../img/svg";
+import { ChatContext } from "../chat-context-provider";
 import { Button } from "@ui/button";
 
 interface Props {
@@ -19,7 +19,7 @@ interface Props {
 export default function ChatsMessagesHeader(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
-  const { setShowSideBar } = useContext(ChatContext);
+  const { setShowMobileMessageBox } = useContext(ChatContext);
 
   const isChannel = (username: string) => {
     if (username.startsWith("@")) {
@@ -41,7 +41,13 @@ export default function ChatsMessagesHeader(props: Props) {
   return (
     <div className="flex sticky top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[60px]">
       <div className="flex items-center gap-4">
-        <Button className="md:hidden" icon={expandSideBar} onClick={() => setShowSideBar(true)} />
+        <Button
+          appearance="gray-link"
+          className="md:hidden"
+          noPadding={true}
+          icon={expandSideBar}
+          onClick={() => setShowMobileMessageBox(!setShowMobileMessageBox)}
+        />
         <Link
           className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800"
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
diff --git a/src/common/features/chats/components/chats-messages-view/index.tsx b/src/common/features/chats/components/chat-messages-view.tsx
similarity index 90%
rename from src/common/features/chats/components/chats-messages-view/index.tsx
rename to src/common/features/chats/components/chat-messages-view.tsx
index fd0e2a613e3..a119221decc 100644
--- a/src/common/features/chats/components/chats-messages-view/index.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,21 +1,17 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import {
-  Channel,
-  DirectMessage,
-  PublicMessage
-} from "../../../../../managers/message-manager-types";
-import { fetchCommunityMessages, fetchDirectMessages } from "../../utils";
+import { Channel, DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
+import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
 import { History } from "history";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import ChatsProfileBox from "../chats-profile-box";
-import ChatsChannelMessages from "../chats-channel-messages";
-import ChatsDirectMessages from "../chats-direct-messages";
-import ChatInput from "../chat-input";
-import ChatsScroller from "../chats-scroller";
-import { CHATPAGE } from "../chat-popup/chat-constants";
-import { ChatContext } from "../../chat-context-provider";
-import { classNameObject } from "../../../../helper/class-name-object";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import ChatsProfileBox from "./chat-profile-box";
+import ChatsChannelMessages from "./chats-channel-messages";
+import ChatsDirectMessages from "./chats-direct-messages";
+import ChatInput from "./chat-input";
+import ChatsScroller from "./chats-scroller";
+import { CHATPAGE } from "./chat-popup/chat-constants";
+import { ChatContext } from "../chat-context-provider";
+import { classNameObject } from "../../../helper/class-name-object";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 840913851c6..c7c5625aee8 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import ChatsProfileBox from "../chats-profile-box";
+import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
 import ChatsChannelMessages from "../chats-channel-messages";
 import { history } from "../../../../store";
diff --git a/src/common/features/chats/components/chats-profile-box/index.tsx b/src/common/features/chats/components/chat-profile-box.tsx
similarity index 91%
rename from src/common/features/chats/components/chats-profile-box/index.tsx
rename to src/common/features/chats/components/chat-profile-box.tsx
index 66824a1a34b..ac052ed8162 100644
--- a/src/common/features/chats/components/chats-profile-box/index.tsx
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import UserAvatar from "../../../../components/user-avatar";
-import { dateToFormatted } from "../../../../helper/parse-date";
-import { _t } from "../../../../i18n";
-import { getAccountFull } from "../../../../api/hive";
-import { formattedUserName } from "../../utils";
-import { useCommunityCache } from "../../../../core";
+import UserAvatar from "../../../components/user-avatar";
+import { dateToFormatted } from "../../../helper/parse-date";
+import { _t } from "../../../i18n";
+import { getAccountFull } from "../../../api/hive";
+import { formattedUserName } from "../utils";
+import { useCommunityCache } from "../../../core";
 
 export interface profileData {
   joiningData: string;
diff --git a/src/common/features/chats/components/chats-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
similarity index 82%
rename from src/common/features/chats/components/chats-dropdown-menu/index.tsx
rename to src/common/features/chats/components/chats-dropdown-menu.tsx
index 685008f4f5e..5a1ed185dd1 100644
--- a/src/common/features/chats/components/chats-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../../../components/dropdown";
-import { chatKeySvg, kebabMenuSvg } from "../../../../img/svg";
-import { _t } from "../../../../i18n";
+import DropDown, { MenuItem } from "../../../components/dropdown";
+import { chatKeySvg, kebabMenuSvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
 
 interface Props {
   history: History | null;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index 9c1a0ccbf43..cfd6ed2c760 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@ui/button";
-import { arrowBackSvg, closeSvg, syncSvg } from "../../../../img/svg";
+import { arrowBackSvg, syncSvg } from "../../../../img/svg";
 import Tooltip from "../../../../components/tooltip";
 import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
@@ -21,7 +21,7 @@ export function ChatSidebarHeader({ history }: Props) {
     revealPrivKey,
     chatPrivKey,
     windowWidth,
-    setShowSideBar,
+    setShowMobileMessageBox,
     setRevealPrivKey
   } = useContext(ChatContext);
 
@@ -34,9 +34,6 @@ export function ChatSidebarHeader({ history }: Props) {
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] p-3 gap-4">
       <div className="flex items-center gap-2">
-        {windowWidth < 768 && (
-          <Button appearance="link" icon={closeSvg} onClick={() => setShowSideBar(false)} />
-        )}
         {revealPrivKey && windowWidth > 768 && (
           <Tooltip content={_t("chat.back")}>
             <Button
@@ -61,7 +58,7 @@ export function ChatSidebarHeader({ history }: Props) {
               onManageChatKey={() => {
                 setRevealPrivKey(!revealPrivKey);
                 if (windowWidth < 768) {
-                  setShowSideBar(false);
+                  setShowMobileMessageBox(false);
                 }
               }}
               history={history}
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index e1825dc4fd6..e17c386af6b 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -29,9 +29,9 @@ export default function ChatsSideBar(props: Props) {
   const { chat } = useMappedStore();
   const {
     revealPrivKey,
-    showSideBar,
+    showMobileMessageBox,
     windowWidth,
-    setShowSideBar,
+    setShowMobileMessageBox,
     setRevealPrivKey,
     setReceiverPubKey
   } = useContext(ChatContext);
@@ -93,88 +93,82 @@ export default function ChatsSideBar(props: Props) {
   };
 
   const handleSideBar = () => {
-    if (windowWidth < 768 && showSideBar) {
-      setShowSideBar(false);
+    if (windowWidth < 768 && showMobileMessageBox) {
+      setShowMobileMessageBox(false);
     }
   };
 
   return (
-    <>
-      {showSideBar && (
-        <div className="flex flex-col">
-          <ChatSidebarHeader history={props.history} />
-          <ChatSidebarSearch
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-            setUserList={setUserList}
-          />
-          {showDivider && <div className="divider" />}
-          <div className="flex flex-col" onScroll={handleScroll} ref={chatsSideBarRef}>
-            {searchQuery ? (
-              userList.map((user) => (
-                <ChatSidebarSearchItem
-                  user={user}
+    <div className="flex flex-col">
+      <ChatSidebarHeader history={props.history} />
+      <ChatSidebarSearch
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        setUserList={setUserList}
+      />
+      {showDivider && <div className="divider" />}
+      <div className="flex flex-col" onScroll={handleScroll} ref={chatsSideBarRef}>
+        {searchQuery ? (
+          userList.map((user) => (
+            <ChatSidebarSearchItem
+              user={user}
+              onClick={() => {
+                setSearchQuery("");
+                setRevealPrivKey(false);
+                getReceiverPubKey(user.account);
+                handleSideBar();
+              }}
+              key={user.account}
+            />
+          ))
+        ) : (
+          <>
+            {communities.length !== 0 && <p className="community-title">Communities</p>}
+            {communities.map((channel) => (
+              <Link to={`/chats/${channel.communityName}`} key={channel.id}>
+                <div
+                  className={`community ${username === channel.communityName ? "selected" : ""}`}
+                  key={channel.id}
                   onClick={() => {
-                    setSearchQuery("");
                     setRevealPrivKey(false);
-                    getReceiverPubKey(user.account);
                     handleSideBar();
                   }}
-                  key={user.account}
-                />
-              ))
-            ) : (
-              <>
-                {communities.length !== 0 && <p className="community-title">Communities</p>}
-                {communities.map((channel) => (
-                  <Link to={`/chats/${channel.communityName}`} key={channel.id}>
-                    <div
-                      className={`community ${
-                        username === channel.communityName ? "selected" : ""
-                      }`}
-                      key={channel.id}
-                      onClick={() => {
-                        setRevealPrivKey(false);
-                        handleSideBar();
-                      }}
-                    >
-                      <UserAvatar username={channel.communityName!} size="medium" />
-                      <div className="community-info">
-                        <p className="community-name">{channel.name}</p>
-                        <p className="community-last-message">
-                          {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                        </p>
-                      </div>
-                    </div>
-                  </Link>
-                ))}
-                {directContacts.length !== 0 && (
-                  <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
-                    {_t("chat.direct-messages")}
+                >
+                  <UserAvatar username={channel.communityName!} size="medium" />
+                  <div className="community-info">
+                    <p className="community-name">{channel.name}</p>
+                    <p className="community-last-message">
+                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
+                    </p>
                   </div>
-                )}
-                {directContacts.map((contact) => (
-                  <ChatSidebarDirectContact
-                    key={contact.pubkey}
-                    contact={contact}
-                    username={username}
-                    handleRevealPrivKey={handleRevealPrivKey}
-                    handleSideBar={handleSideBar}
-                  />
-                ))}
-              </>
+                </div>
+              </Link>
+            ))}
+            {directContacts.length !== 0 && (
+              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
+                {_t("chat.direct-messages")}
+              </div>
             )}
-          </div>
-          {isScrollToTop && (
-            <ChatsScroller
-              bodyRef={chatsSideBarRef}
-              isScrollToTop={isScrollToTop}
-              isScrollToBottom={false}
-              marginRight={"5%"}
-            />
-          )}
-        </div>
+            {directContacts.map((contact) => (
+              <ChatSidebarDirectContact
+                key={contact.pubkey}
+                contact={contact}
+                username={username}
+                handleRevealPrivKey={handleRevealPrivKey}
+                handleSideBar={handleSideBar}
+              />
+            ))}
+          </>
+        )}
+      </div>
+      {isScrollToTop && (
+        <ChatsScroller
+          bodyRef={chatsSideBarRef}
+          isScrollToTop={isScrollToTop}
+          isScrollToBottom={false}
+          marginRight={"5%"}
+        />
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/common/features/chats/components/join-chat/index.tsx b/src/common/features/chats/components/join-chat.tsx
similarity index 89%
rename from src/common/features/chats/components/join-chat/index.tsx
rename to src/common/features/chats/components/join-chat.tsx
index 2c066698a72..47ba2890b8d 100644
--- a/src/common/features/chats/components/join-chat/index.tsx
+++ b/src/common/features/chats/components/join-chat.tsx
@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from "react";
-import { ChatContext } from "../../chat-context-provider";
+import { ChatContext } from "../chat-context-provider";
 import { Button } from "@ui/button";
 import { Spinner } from "@ui/spinner";
-import { _t } from "../../../../i18n";
+import { _t } from "../../../i18n";
 
 export default function JoinChat() {
   const { messageServiceInstance, joinChat } = useContext(ChatContext);
diff --git a/src/common/features/chats/components/join-community-chat-btn/index.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
similarity index 93%
rename from src/common/features/chats/components/join-community-chat-btn/index.tsx
rename to src/common/features/chats/components/join-community-chat-btn.tsx
index 4299a3954d1..a9130723f37 100644
--- a/src/common/features/chats/components/join-community-chat-btn/index.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
-import { Community, ROLES } from "../../../../store/communities";
-import { _t } from "../../../../i18n";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../../managers/message-manager-types";
-import { ChatContext } from "../../chat-context-provider";
-import { CHANNEL, NOSTRKEY } from "../chat-popup/chat-constants";
-import { getProfileMetaData, setChannelMetaData } from "../../utils";
+import { Community, ROLES } from "../../../store/communities";
+import { _t } from "../../../i18n";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { Channel, communityModerator } from "../../../../managers/message-manager-types";
+import { ChatContext } from "../chat-context-provider";
+import { CHANNEL, NOSTRKEY } from "./chat-popup/chat-constants";
+import { getProfileMetaData, setChannelMetaData } from "../utils";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 
diff --git a/src/common/features/chats/components/manage-chat-key/index.tsx b/src/common/features/chats/components/manage-chat-key.tsx
similarity index 85%
rename from src/common/features/chats/components/manage-chat-key/index.tsx
rename to src/common/features/chats/components/manage-chat-key.tsx
index 80339807eeb..30c0e8c37b4 100644
--- a/src/common/features/chats/components/manage-chat-key/index.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { _t } from "../../../../i18n";
-import { ChatContext } from "../../chat-context-provider";
+import { _t } from "../../../i18n";
+import { ChatContext } from "../chat-context-provider";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
-import { classNameObject } from "../../../../helper/class-name-object";
+import { classNameObject } from "../../../helper/class-name-object";
 
 export default function ManageChatKey() {
   const { chatPrivKey } = useContext(ChatContext);
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index a3b05deff6d..9e8851ffe55 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -10,8 +10,9 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
 import ImportChats from "../components/import-chats";
-import ChatsMessagesBox from "../components/chats-messages-box";
+import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
+import { classNameObject } from "../../../helper/class-name-object";
 
 interface Props extends PageProps {
   match: match<{
@@ -29,16 +30,20 @@ export const Chats = (props: Props) => {
 
   const username = match.params.username;
 
-  const { receiverPubKey, showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } =
-    useContext(ChatContext);
+  const {
+    receiverPubKey,
+    showSpinner,
+    activeUserKeys,
+    revealPrivKey,
+    chatPrivKey,
+    showMobileMessageBox
+  } = useContext(ChatContext);
 
   const isReady = useMemo(
     () => !!(activeUser && activeUserKeys?.pub && chatPrivKey),
     [activeUserKeys, activeUserKeys, chatPrivKey]
   );
 
-  console.log(isReady);
-
   useEffect(() => {
     document.body.style.overflow = "hidden";
 
@@ -52,11 +57,18 @@ export const Chats = (props: Props) => {
       <NavBar history={props.history} />
 
       <div className="container mx-auto py-6">
-        <div className="grid grid-cols-12 overflow-hidden rounded-2xl bg-white border border-[--border-color]">
-          <div className="col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
+        <div className="grid grid-cols-12 overflow-hidden rounded-2xl bg-white border border-[--border-color] relative">
+          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
             {isReady ? <ChatsSideBar history={history} username={username} /> : <></>}
           </div>
-          <div className="col-span-12 sm:col-span-6 lg:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto">
+          <div
+            className={classNameObject({
+              "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+                true,
+              "left-0": showMobileMessageBox,
+              "left-[100%]": showMobileMessageBox
+            })}
+          >
             {isReady && revealPrivKey && (
               <div className="flex h-full items-center justify-center">
                 <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color]">
@@ -91,28 +103,6 @@ export const Chats = (props: Props) => {
               </div>
             )}
           </div>
-          {/*{activeUser ? (): (*/}
-          {/*  <>*/}
-          {/*    {activeUserKeys?.pub ? (*/}
-          {/*      chatPrivKey ? (*/}
-          {/*        <></>*/}
-          {/*      ) : (*/}
-          {/*        <>*/}
-
-          {/*        </>*/}
-          {/*      )*/}
-          {/*    ) : (*/}
-          {/*      <div className="flex justify-center items-center full-page">*/}
-          {/*        <JoinChat />*/}
-          {/*      </div>*/}
-          {/*    )}*/}
-          {/*  </>*/}
-          {/*  )*/}
-          {/*  ) : (*/}
-          {/*  <h4 className="flex justify-center items-center full-page text-center">*/}
-          {/*  Please login to continue the chat*/}
-          {/*  </h4>*/}
-          {/*  )}*/}
         </div>
       </div>
     </div>

From 034cff96d5ccd4b7d96e939cdbfe9f1ed18e3240 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 26 Oct 2023 22:28:46 +0600
Subject: [PATCH 104/179] Chat: improved mobile UI

---
 .../features/chats/chat-context-provider.tsx  | 17 --------
 .../features/chats/components/chat-input.tsx  |  3 +-
 .../chats/components/chat-message-box.tsx     | 13 +-----
 .../chats/components/chat-messages-header.tsx | 14 +++---
 .../chats-sidebar/chat-sidebar-header.tsx     | 10 +----
 src/common/features/chats/screens/chats.tsx   | 43 ++++++++++---------
 src/common/features/ui/button/index.tsx       |  8 +++-
 src/common/features/ui/button/props.ts        | 16 ++++++-
 8 files changed, 55 insertions(+), 69 deletions(-)

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 1cfa6ad591d..fdde6e2c48b 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -23,11 +23,9 @@ interface Context {
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   currentChannel: Channel | null;
-  showMobileMessageBox: boolean;
   windowWidth: number;
   maxHeight: number;
   isActveUserRemoved: boolean;
-  setShowMobileMessageBox: (d: boolean) => void;
   setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
@@ -52,11 +50,9 @@ export const ChatContext = React.createContext<Context>({
   messageServiceInstance: null,
   hasUserJoinedChat: false,
   currentChannel: null,
-  showMobileMessageBox: true,
   windowWidth: 0,
   maxHeight: 0,
   isActveUserRemoved: false,
-  setShowMobileMessageBox: () => {},
   setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
@@ -80,14 +76,12 @@ export const ChatContextProvider = (props: Props) => {
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
-  const [showMobileMessageBox, setShowMobileMessageBox] = useState(true);
   const [windowWidth, setWindowWidth] = useState(0);
   const [maxHeight, setMaxHeight] = useState(0);
   const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
   useMount(() => {
     getActiveUserKeys();
-    handleShowSideBar();
     setWindowWidth(window.innerWidth);
     setMaxHeight(window.innerHeight - 66);
   });
@@ -121,13 +115,6 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [messageServiceInstance, chat.profiles]);
 
-  useEffect(() => {
-    window.addEventListener("resize", handleShowSideBar);
-    return () => {
-      window.removeEventListener("resize", handleShowSideBar);
-    };
-  }, []);
-
   useEffect(() => {
     if (shouldUpdateProfile && messageServiceInstance) {
       messageServiceInstance.updateProfile({
@@ -140,8 +127,6 @@ export const ChatContextProvider = (props: Props) => {
 
   useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
 
-  const handleShowSideBar = () => setShowMobileMessageBox(window.innerWidth < 768);
-
   const getActiveUserKeys = async () => {
     const pubKey = await getUserChatPublicKey(activeUser?.username!);
     const privKey = getPrivateKey(activeUser?.username!);
@@ -187,11 +172,9 @@ export const ChatContextProvider = (props: Props) => {
         messageServiceInstance,
         hasUserJoinedChat,
         currentChannel,
-        showMobileMessageBox,
         windowWidth,
         maxHeight,
         isActveUserRemoved,
-        setShowMobileMessageBox,
         setCurrentChannel,
         setRevealPrivKey,
         setShowSpinner,
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 5feb5a39c70..7ad2f3f306a 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -35,13 +35,12 @@ export default function ChatInput({
   isCurrentUser,
   currentChannel,
   currentUser,
-  isCurrentUserJoined,
   gifPickerStyle
 }: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const { global, activeUser, chat } = useMappedStore();
+  const { chat } = useMappedStore();
   const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 808def62598..113a8ca8de9 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -28,14 +28,8 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
 
-  const {
-    messageServiceInstance,
-    currentChannel,
-    windowWidth,
-    maxHeight,
-    setCurrentChannel,
-    setShowMobileMessageBox
-  } = useContext(ChatContext);
+  const { messageServiceInstance, currentChannel, windowWidth, setCurrentChannel } =
+    useContext(ChatContext);
 
   const { channels, updatedChannel } = chat;
   const { match } = props;
@@ -137,9 +131,6 @@ export default function ChatsMessagesBox(props: Props) {
         <div className="no-chat-select">
           <div className="start-chat-wrapper text-center ">
             <p className="start-chat ">Select a chat or start a new conversation</p>
-            {windowWidth < 768 && (
-              <Button onClick={() => setShowMobileMessageBox(true)}>Start Chat</Button>
-            )}
           </div>
         </div>
       ) : (
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 72c00b4bd3f..4ddfcbd1095 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -8,8 +8,8 @@ import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
 import Link from "../../../components/alink";
 import { expandSideBar } from "../../../img/svg";
-import { ChatContext } from "../chat-context-provider";
 import { Button } from "@ui/button";
+import { ChatContext } from "../chat-context-provider";
 
 interface Props {
   username: string;
@@ -18,15 +18,10 @@ interface Props {
 
 export default function ChatsMessagesHeader(props: Props) {
   const { username } = props;
+  const { setReceiverPubKey } = useContext(ChatContext);
   const { chat } = useMappedStore();
-  const { setShowMobileMessageBox } = useContext(ChatContext);
 
-  const isChannel = (username: string) => {
-    if (username.startsWith("@")) {
-      return false;
-    }
-    return true;
-  };
+  const isChannel = (username: string) => !username.startsWith("@");
 
   const formattedName = (username: string, chat: Chat) => {
     if (username && !username.startsWith("@")) {
@@ -46,7 +41,8 @@ export default function ChatsMessagesHeader(props: Props) {
           className="md:hidden"
           noPadding={true}
           icon={expandSideBar}
-          onClick={() => setShowMobileMessageBox(!setShowMobileMessageBox)}
+          to="/chats"
+          onClick={() => setReceiverPubKey("")}
         />
         <Link
           className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800"
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index cfd6ed2c760..19fc1a8d283 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -21,7 +21,6 @@ export function ChatSidebarHeader({ history }: Props) {
     revealPrivKey,
     chatPrivKey,
     windowWidth,
-    setShowMobileMessageBox,
     setRevealPrivKey
   } = useContext(ChatContext);
 
@@ -32,7 +31,7 @@ export function ChatSidebarHeader({ history }: Props) {
   };
 
   return (
-    <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] p-3 gap-4">
+    <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
       <div className="flex items-center gap-2">
         {revealPrivKey && windowWidth > 768 && (
           <Tooltip content={_t("chat.back")}>
@@ -55,12 +54,7 @@ export function ChatSidebarHeader({ history }: Props) {
         {chatPrivKey && (
           <div className="chat-menu">
             <ChatsDropdownMenu
-              onManageChatKey={() => {
-                setRevealPrivKey(!revealPrivKey);
-                if (windowWidth < 768) {
-                  setShowMobileMessageBox(false);
-                }
-              }}
+              onManageChatKey={() => setRevealPrivKey(!revealPrivKey)}
               history={history}
             />
           </div>
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 9e8851ffe55..7930230356a 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -30,19 +30,23 @@ export const Chats = (props: Props) => {
 
   const username = match.params.username;
 
-  const {
-    receiverPubKey,
-    showSpinner,
-    activeUserKeys,
-    revealPrivKey,
-    chatPrivKey,
-    showMobileMessageBox
-  } = useContext(ChatContext);
+  const { receiverPubKey, showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } =
+    useContext(ChatContext);
 
   const isReady = useMemo(
     () => !!(activeUser && activeUserKeys?.pub && chatPrivKey),
     [activeUserKeys, activeUserKeys, chatPrivKey]
   );
+  const isShowManageKey = useMemo(() => isReady && revealPrivKey, [isReady, revealPrivKey]);
+  const isShowChatRoom = useMemo(
+    () => isReady && !showSpinner && !!receiverPubKey && !revealPrivKey,
+    [isReady, showSpinner, receiverPubKey, revealPrivKey]
+  );
+  const isShowDefaultScreen = useMemo(
+    () => isReady && !receiverPubKey && !revealPrivKey && !showSpinner,
+    [isReady, receiverPubKey, revealPrivKey, showSpinner]
+  );
+  const isShowImportChats = useMemo(() => !isReady && !showSpinner, [isReady, showSpinner]);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -51,13 +55,14 @@ export const Chats = (props: Props) => {
       document.body.style.overflow = "auto";
     };
   }, []);
+
   return (
-    <div className="bg-blue-duck-egg dark:bg-transparent pt-[4.5rem] min-h-[100vh]">
+    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
       <Feedback activeUser={activeUser} />
       <NavBar history={props.history} />
 
-      <div className="container mx-auto py-6">
-        <div className="grid grid-cols-12 overflow-hidden rounded-2xl bg-white border border-[--border-color] relative">
+      <div className="container mx-auto md:py-6">
+        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
           <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
             {isReady ? <ChatsSideBar history={history} username={username} /> : <></>}
           </div>
@@ -65,13 +70,13 @@ export const Chats = (props: Props) => {
             className={classNameObject({
               "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
                 true,
-              "left-0": showMobileMessageBox,
-              "left-[100%]": showMobileMessageBox
+              "left-0": isShowChatRoom || isShowManageKey,
+              "left-[100%]": !isShowChatRoom && !isShowManageKey
             })}
           >
-            {isReady && revealPrivKey && (
+            {isShowManageKey && (
               <div className="flex h-full items-center justify-center">
-                <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color]">
+                <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color] p-4">
                   <ManageChatKey />
                 </div>
               </div>
@@ -81,15 +86,13 @@ export const Chats = (props: Props) => {
                 <Spinner className="w-6 h-6" />
               </div>
             )}
-            {!isReady && !showSpinner && (
+            {isShowImportChats && (
               <div className="h-full w-full flex items-center justify-center">
                 <ImportChats />
               </div>
             )}
-            {isReady && !showSpinner && receiverPubKey && !revealPrivKey && (
-              <ChatsMessagesBox match={match} history={history} />
-            )}
-            {isReady && !receiverPubKey && !revealPrivKey && !showSpinner && (
+            {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
+            {isShowDefaultScreen && (
               <div className="flex flex-col justify-center items-center w-full h-full">
                 <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
                   Hello, @{activeUser?.username}
diff --git a/src/common/features/ui/button/index.tsx b/src/common/features/ui/button/index.tsx
index d0134ffacaf..7caf859f61e 100644
--- a/src/common/features/ui/button/index.tsx
+++ b/src/common/features/ui/button/index.tsx
@@ -3,10 +3,11 @@ import { ButtonProps } from "./props";
 import { classNameObject } from "../../../helper/class-name-object";
 import { BUTTON_OUTLINE_STYLES, BUTTON_SIZES, BUTTON_STYLES } from "./styles";
 import { useFilteredProps } from "../../../util/props-filter";
+import { Link, NavLinkProps } from "react-router-dom";
 
 export * from "./props";
 
-export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement | NavLinkProps, ButtonProps>(
   (props, ref) => {
     const nativeProps = useFilteredProps<typeof props, Required<ButtonProps>>(props, [
       "appearance",
@@ -49,6 +50,11 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         {children}
         {icon}
       </a>
+    ) : "to" in props ? (
+      <Link to={(props as NavLinkProps).to} {...nativeProps} className={className} ref={ref as any}>
+        {children}
+        {icon}
+      </Link>
     ) : (
       <button
         {...nativeProps}
diff --git a/src/common/features/ui/button/props.ts b/src/common/features/ui/button/props.ts
index c0574cc24be..f6cbebf7d01 100644
--- a/src/common/features/ui/button/props.ts
+++ b/src/common/features/ui/button/props.ts
@@ -1,4 +1,5 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { LinkProps } from "react-router-dom";
 
 export type ButtonAppearance =
   | "primary"
@@ -38,4 +39,17 @@ interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   noPadding?: boolean;
 }
 
-export type ButtonProps = RegularButtonProps | LinkButtonProps;
+interface NavLinkButtonProps extends LinkProps {
+  appearance?: ButtonAppearance;
+  size?: ButtonSize;
+  outline?: boolean;
+  className?: string;
+  disabled?: boolean;
+  full?: boolean;
+  icon?: ReactNode;
+  iconPlacement?: "left" | "right";
+  iconClassName?: string;
+  noPadding?: boolean;
+}
+
+export type ButtonProps = RegularButtonProps | LinkButtonProps | NavLinkButtonProps;

From f05d26147e8e37576a448a49e54dae8453bcde24 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 27 Oct 2023 21:00:48 +0600
Subject: [PATCH 105/179] Chat: improved gif picker UI

---
 src/common/components/gif-picker/index.tsx    | 15 ++++++-
 .../features/chats/components/chat-input.tsx  | 42 ++++++++++---------
 .../chats/components/chat-messages-view.tsx   | 11 +----
 .../chats/components/chat-popup/index.tsx     |  2 -
 .../chat-sidebar-direct-contact.tsx           |  9 +---
 .../chats/components/chats-sidebar/index.tsx  | 23 ++--------
 src/common/features/chats/screens/_chats.scss | 24 +++++++++++
 src/common/features/chats/screens/chats.tsx   |  1 +
 .../features/ui/dropdown/dropdown-item.tsx    |  2 +-
 9 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 src/common/features/chats/screens/_chats.scss

diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index f590be2b771..e0c3510f059 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import BaseComponent from "../base";
 import SearchBox from "../search-box";
 import { _t } from "../../i18n";
@@ -6,11 +6,13 @@ import { insertOrReplace } from "../../util/input-util";
 import _ from "lodash";
 import { fetchGif } from "../../api/misc";
 import "./_index.scss";
+import { classNameObject } from "../../helper/class-name-object";
 
 interface Props {
   fallback?: (e: string) => void;
   shGif: boolean;
   changeState: (gifState?: boolean) => void;
+  pureStyle?: boolean;
   style?: {
     width: string;
     bottom: string;
@@ -23,6 +25,7 @@ interface Props {
   gifImagesStyle?: {
     width: string;
   };
+  rootRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
 interface State {
@@ -224,7 +227,15 @@ export default class GifPicker extends BaseComponent<Props> {
     };
 
     return (
-      <div className="emoji-picker gif" style={gifPickerStyle} onScroll={this.handleScroll}>
+      <div
+        ref={this.props.rootRef}
+        className={classNameObject({
+          "gif-picker": true,
+          "emoji-picker gif": !this.props.pureStyle
+        })}
+        style={gifPickerStyle}
+        onScroll={this.handleScroll}
+      >
         <SearchBox
           autoComplete="off"
           autoCorrect="off"
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 7ad2f3f306a..e33c838b11b 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Channel } from "../../../../managers/message-manager-types";
-import { EmojiPickerStyleProps } from "../types";
 import { EmojiPicker } from "../../../components/emoji-picker";
 import { error } from "../../../components/feedback";
 import {
@@ -20,6 +19,7 @@ import { Button } from "@ui/button";
 import { useChatFileUpload } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import GifPicker from "../../../components/gif-picker";
+import useClickAway from "react-use/lib/useClickAway";
 
 interface Props {
   isCurrentUser: boolean;
@@ -27,18 +27,17 @@ interface Props {
   currentChannel: Channel;
   currentUser: string;
   isCurrentUserJoined: boolean;
-  gifPickerStyle: EmojiPickerStyleProps;
 }
 
 export default function ChatInput({
   isCommunity,
   isCurrentUser,
   currentChannel,
-  currentUser,
-  gifPickerStyle
+  currentUser
 }: Props) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
+  const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
   const { chat } = useMappedStore();
   const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
@@ -54,6 +53,8 @@ export default function ChatInput({
     [isCurrentUser, receiverPubKey, isActveUserRemoved]
   );
 
+  useClickAway(gifPickerRef, () => setShowGifPicker(false));
+
   useEffect(() => {
     if (!isCurrentUser && !isCommunity) {
       setMessage("");
@@ -104,7 +105,7 @@ export default function ChatInput({
   };
 
   return (
-    <div>
+    <div className="chat-input">
       {/*{message.length === 0 && (*/}
       {/*  <React.Fragment>*/}
 
@@ -132,13 +133,28 @@ export default function ChatInput({
       {/*  </React.Fragment>*/}
       {/*)}*/}
 
+      {showGifPicker && (
+        <GifPicker
+          rootRef={gifPickerRef}
+          pureStyle={true}
+          gifImagesStyle={GifImagesStyle}
+          shGif={true}
+          changeState={(gifState) => setShowGifPicker(gifState!)}
+          fallback={(e) =>
+            isCurrentUser
+              ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, e)
+              : messageServiceInstance?.sendPublicMessage(currentChannel, e, [], "")
+          }
+        />
+      )}
+
       <Form
         onSubmit={(e: React.FormEvent) => {
           e.preventDefault();
           e.stopPropagation();
           sendMessage();
         }}
-        className="w-full flex items-center gap-2"
+        className="w-full flex items-center gap-2 p-2"
       >
         <Dropdown>
           <DropdownToggle>
@@ -194,20 +210,6 @@ export default function ChatInput({
           />
         </div>
       </Form>
-
-      {showGifPicker && (
-        <GifPicker
-          style={gifPickerStyle}
-          gifImagesStyle={GifImagesStyle}
-          shGif={true}
-          changeState={(gifState) => setShowGifPicker(gifState!)}
-          fallback={(e) =>
-            isCurrentUser
-              ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, e)
-              : messageServiceInstance?.sendPublicMessage(currentChannel, e, [], "")
-          }
-        />
-      )}
     </div>
   );
 }
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index a119221decc..6f45013e0a8 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -202,17 +202,8 @@ export default function ChatsMessagesView({
         )}
       </div>
 
-      <div className="sticky bottom-0 p-2 border-t border-[--border-color] bg-white">
+      <div className="sticky bottom-0 border-t border-[--border-color] bg-white">
         <ChatInput
-          gifPickerStyle={{
-            width: "56.5%",
-            bottom: "58px",
-            left: "340px",
-            marginLeft: "14px",
-            borderTopLeftRadius: "8px",
-            borderTopRightRadius: "8px",
-            borderBottomLeftRadius: "0px"
-          }}
           isCurrentUser={!!directUser}
           isCommunity={!!communityName}
           currentUser={directUser}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 7ced4c88993..35adcb4836c 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -13,7 +13,6 @@ import { setNostrkeys } from "../../../../../managers/message-manager";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
 import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
-import { GifPickerStyle } from "./chat-constants";
 import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import { getCommunity } from "../../../../api/bridge";
@@ -482,7 +481,6 @@ export const ChatPopUp = () => {
                 currentUser={currentUser}
                 currentChannel={currentChannel!}
                 isCurrentUserJoined={isCurrentUserJoined}
-                gifPickerStyle={GifPickerStyle}
               />
             )}
           </div>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index efc68002edf..2d0d7805b47 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -11,15 +11,9 @@ interface Props {
   contact: DirectContact;
   username: string;
   handleRevealPrivKey: () => void;
-  handleSideBar: () => void;
 }
 
-export function ChatSidebarDirectContact({
-  contact,
-  username,
-  handleRevealPrivKey,
-  handleSideBar
-}: Props) {
+export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKey }: Props) {
   const { setReceiverPubKey } = useContext(ChatContext);
   const { chat } = useMappedStore();
 
@@ -39,7 +33,6 @@ export function ChatSidebarDirectContact({
       to={`/chats/@${contact.name}`}
       onClick={() => {
         setReceiverPubKey(contact.pubkey);
-        handleSideBar();
         handleRevealPrivKey();
       }}
     >
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index e17c386af6b..c7ee9f45778 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -27,14 +27,8 @@ interface Props {
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
-  const {
-    revealPrivKey,
-    showMobileMessageBox,
-    windowWidth,
-    setShowMobileMessageBox,
-    setRevealPrivKey,
-    setReceiverPubKey
-  } = useContext(ChatContext);
+  const { revealPrivKey, windowWidth, setRevealPrivKey, setReceiverPubKey } =
+    useContext(ChatContext);
   const { channels, directContacts, leftChannelsList } = chat;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
@@ -92,12 +86,6 @@ export default function ChatsSideBar(props: Props) {
     }
   };
 
-  const handleSideBar = () => {
-    if (windowWidth < 768 && showMobileMessageBox) {
-      setShowMobileMessageBox(false);
-    }
-  };
-
   return (
     <div className="flex flex-col">
       <ChatSidebarHeader history={props.history} />
@@ -116,7 +104,6 @@ export default function ChatsSideBar(props: Props) {
                 setSearchQuery("");
                 setRevealPrivKey(false);
                 getReceiverPubKey(user.account);
-                handleSideBar();
               }}
               key={user.account}
             />
@@ -129,10 +116,7 @@ export default function ChatsSideBar(props: Props) {
                 <div
                   className={`community ${username === channel.communityName ? "selected" : ""}`}
                   key={channel.id}
-                  onClick={() => {
-                    setRevealPrivKey(false);
-                    handleSideBar();
-                  }}
+                  onClick={() => setRevealPrivKey(false)}
                 >
                   <UserAvatar username={channel.communityName!} size="medium" />
                   <div className="community-info">
@@ -155,7 +139,6 @@ export default function ChatsSideBar(props: Props) {
                 contact={contact}
                 username={username}
                 handleRevealPrivKey={handleRevealPrivKey}
-                handleSideBar={handleSideBar}
               />
             ))}
           </>
diff --git a/src/common/features/chats/screens/_chats.scss b/src/common/features/chats/screens/_chats.scss
new file mode 100644
index 00000000000..1b8d2d69980
--- /dev/null
+++ b/src/common/features/chats/screens/_chats.scss
@@ -0,0 +1,24 @@
+.chat-input {
+  .gif-picker {
+    max-height: 300px;
+    overflow-y: auto;
+    @apply bg-white border-b border-[--border-color] w-full flex flex-col gap-3 mb-4;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .gif-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      @apply p-3;
+    }
+
+    .search-box {
+      position: sticky;
+      top: 0;
+      @apply bg-white border-b border-[--border-color] p-3;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 7930230356a..ab8f55aa4c7 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -13,6 +13,7 @@ import ImportChats from "../components/import-chats";
 import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
+import "./_chats.scss";
 
 interface Props extends PageProps {
   match: match<{
diff --git a/src/common/features/ui/dropdown/dropdown-item.tsx b/src/common/features/ui/dropdown/dropdown-item.tsx
index 4860a353299..06e8bbf0aef 100644
--- a/src/common/features/ui/dropdown/dropdown-item.tsx
+++ b/src/common/features/ui/dropdown/dropdown-item.tsx
@@ -25,7 +25,7 @@ export function DropdownItemWithIcon(
   props: HTMLProps<HTMLDivElement> & { icon: ReactNode; label: ReactNode }
 ) {
   return (
-    <DropdownItem>
+    <DropdownItem {...props}>
       <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky">
         <div>{props.icon}</div>
         <div className="text-sm font-semibold">{props.label}</div>

From 8fcef1f18cf66715e8a58f988c7860d1c3e01ea0 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 28 Oct 2023 21:09:37 +0600
Subject: [PATCH 106/179] Tailwind migration: moved message manager to feature

---
 src/common/app.tsx                            |  2 +-
 src/common/components/login/index.tsx         |  2 +-
 src/common/components/navbar/index.tsx        |  2 +-
 .../features/chats/chat-context-provider.tsx  | 18 +++-----
 .../features/chats/components/chat-input.tsx  | 45 ++++++-------------
 .../chats/components/chat-message-box.tsx     | 10 +++--
 .../chats/components/chat-popup/index.scss    |  2 +-
 .../chats/components/chat-popup/index.tsx     | 12 ++---
 .../chats-channel-messages/index.scss         |  2 +-
 .../chats-channel-messages/index.tsx          | 14 +++---
 .../chats-direct-messages/index.tsx           | 16 +++----
 .../chat-sidebar-direct-contact.tsx           |  2 +-
 .../chats-sidebar/chat-sidebar-header.tsx     | 15 +++----
 .../chats-sidebar/chat-sidebar-search.tsx     |  2 +-
 .../chats/components/chats-sidebar/index.tsx  |  3 +-
 .../chats/components/import-chats/index.tsx   |  3 +-
 .../chats}/managers/message-manager-types.ts  |  0
 .../chats}/managers/message-manager.tsx       | 29 ++++++------
 src/common/features/chats/screens/chats.tsx   |  2 +-
 19 files changed, 69 insertions(+), 112 deletions(-)
 rename src/{ => common/features/chats}/managers/message-manager-types.ts (100%)
 rename src/{ => common/features/chats}/managers/message-manager.tsx (95%)

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 98c6fad7254..3ef80c2f0df 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Route, Switch } from "react-router-dom";
 import EntryIndexContainer from "./pages/index";
-import MessageManager from "../managers/message-manager";
+import MessageManager from "./features/chats/managers/message-manager";
 import { EntryScreen } from "./pages/entry";
 import { SearchMorePageContainer, SearchPageContainer } from "./pages/search";
 import { ProposalDetailContainer, ProposalsIndexContainer } from "./pages/proposals";
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 0db85268759..1feb93b7f2e 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -28,7 +28,6 @@ import { getPrivateKey, getProfileMetaData } from "../../features/chats/utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 import { addAccountAuthority, signBuffer } from "../../helper/keychain";
-import { setNostrkeys } from "../../../managers/message-manager";
 import { _t } from "../../i18n";
 import _c from "../../util/fix-class-names";
 import { deleteForeverSvg } from "../../img/svg";
@@ -40,6 +39,7 @@ import { Spinner } from "@ui/spinner";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
+import { setNostrkeys } from "../../features/chats/managers/message-manager";
 
 declare var window: AppWindow;
 
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index 5d38a2c5143..9db2d9848b9 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -122,7 +122,7 @@ export function Navbar({ match, history, setStepOne, setStepTwo, step }: Props)
 
   return (
     <div
-      className="fixed z-10 top-0 left-0 right-0 flex flex-col justify-start"
+      className="fixed z-20 top-0 left-0 right-0 flex flex-col justify-start"
       id="sticky-container"
     >
       <NavbarMobile
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index fdde6e2c48b..2dd383d4b8f 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Channel, Keys } from "../../../managers/message-manager-types";
+import { Channel, Keys } from "./managers/message-manager-types";
 import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
@@ -11,8 +11,8 @@ import {
   uploadChatPublicKey
 } from "./utils";
 import * as ls from "../../util/local-storage";
-import { setNostrkeys } from "../../../managers/message-manager";
 import { useMount } from "react-use";
+import { setNostrkeys } from "./managers/message-manager";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -24,8 +24,7 @@ interface Context {
   hasUserJoinedChat: boolean;
   currentChannel: Channel | null;
   windowWidth: number;
-  maxHeight: number;
-  isActveUserRemoved: boolean;
+  isActiveUserRemoved: boolean;
   setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
@@ -51,8 +50,7 @@ export const ChatContext = React.createContext<Context>({
   hasUserJoinedChat: false,
   currentChannel: null,
   windowWidth: 0,
-  maxHeight: 0,
-  isActveUserRemoved: false,
+  isActiveUserRemoved: false,
   setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
@@ -77,13 +75,11 @@ export const ChatContextProvider = (props: Props) => {
   const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
   const [windowWidth, setWindowWidth] = useState(0);
-  const [maxHeight, setMaxHeight] = useState(0);
-  const [isActveUserRemoved, setIsActiveUserRemoved] = useState(false);
+  const [isActiveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
   useMount(() => {
     getActiveUserKeys();
     setWindowWidth(window.innerWidth);
-    setMaxHeight(window.innerHeight - 66);
   });
 
   useEffect(() => {
@@ -95,7 +91,6 @@ export const ChatContextProvider = (props: Props) => {
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
-      setMaxHeight(window.innerHeight - 66);
     };
 
     window.addEventListener("resize", handleResize);
@@ -173,8 +168,7 @@ export const ChatContextProvider = (props: Props) => {
         hasUserJoinedChat,
         currentChannel,
         windowWidth,
-        maxHeight,
-        isActveUserRemoved,
+        isActiveUserRemoved,
         setCurrentChannel,
         setRevealPrivKey,
         setShowSpinner,
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index e33c838b11b..8f94975d01e 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -40,7 +40,7 @@ export default function ChatInput({
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
   const { chat } = useMappedStore();
-  const { messageServiceInstance, isActveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
   const [showGifPicker, setShowGifPicker] = useState(false);
@@ -49,8 +49,8 @@ export default function ChatInput({
   const { mutateAsync } = useChatFileUpload(setMessage, setIsMessageText);
 
   const isDisabled = useMemo(
-    () => (isCurrentUser && !receiverPubKey) || isActveUserRemoved,
-    [isCurrentUser, receiverPubKey, isActveUserRemoved]
+    () => (isCurrentUser && !receiverPubKey) || isActiveUserRemoved,
+    [isCurrentUser, receiverPubKey, isActiveUserRemoved]
   );
 
   useClickAway(gifPickerRef, () => setShowGifPicker(false));
@@ -64,7 +64,7 @@ export default function ChatInput({
   const sendMessage = () => {
     if (message.length !== 0 && !message.includes(UPLOADING)) {
       if (isCommunity) {
-        if (!isActveUserRemoved) {
+        if (!isActiveUserRemoved) {
           messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
         } else {
           error(_t("chat.message-warning"));
@@ -106,33 +106,6 @@ export default function ChatInput({
 
   return (
     <div className="chat-input">
-      {/*{message.length === 0 && (*/}
-      {/*  <React.Fragment>*/}
-
-      {/*    <Tooltip content="Image">*/}
-      {/*      <div*/}
-      {/*        className="chatbox-image"*/}
-      {/*        onClick={(e: React.MouseEvent<HTMLElement>) => {*/}
-      {/*          e.stopPropagation();*/}
-      {/*          const el = fileInputRef.current;*/}
-      {/*          if (el) el.click();*/}
-      {/*        }}*/}
-      {/*      >*/}
-      {/*        <div className="chatbox-image-icon">{chatBoxImageSvg}</div>*/}
-      {/*      </div>*/}
-      {/*    </Tooltip>*/}
-
-      {/*    <input*/}
-      {/*      onChange={fileInputChanged}*/}
-      {/*      className="file-input d-none"*/}
-      {/*      ref={fileInputRef}*/}
-      {/*      type="file"*/}
-      {/*      accept="image/*"*/}
-      {/*      multiple={true}*/}
-      {/*    />*/}
-      {/*  </React.Fragment>*/}
-      {/*)}*/}
-
       {showGifPicker && (
         <GifPicker
           rootRef={gifPickerRef}
@@ -147,6 +120,14 @@ export default function ChatInput({
           }
         />
       )}
+      <input
+        onChange={fileInputChanged}
+        className="hidden"
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple={true}
+      />
 
       <Form
         onSubmit={(e: React.FormEvent) => {
@@ -168,7 +149,7 @@ export default function ChatInput({
             />
             <DropdownItemWithIcon
               icon={chatBoxImageSvg}
-              label="Image"
+              label="Upload image"
               onClick={() => fileInputRef.current?.click()}
             />
           </DropdownMenu>
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 113a8ca8de9..75a4c3a2570 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -28,8 +28,7 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
 
-  const { messageServiceInstance, currentChannel, windowWidth, setCurrentChannel } =
-    useContext(ChatContext);
+  const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
 
   const { channels, updatedChannel } = chat;
   const { match } = props;
@@ -126,7 +125,12 @@ export default function ChatsMessagesBox(props: Props) {
   };
 
   return (
-    <div className="h-full">
+    <div
+      className="grid min-h-full"
+      style={{
+        gridTemplateRows: "min-content 1fr min-content"
+      }}
+    >
       {match.url === "/chats" ? (
         <div className="no-chat-select">
           <div className="start-chat-wrapper text-center ">
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
index b1ee5b4d25e..39514dff971 100644
--- a/src/common/features/chats/components/chat-popup/index.scss
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -197,7 +197,7 @@
     }
   }
 
-  &.small-screen {
+  @media screen and (max-width: 768px) {
     right: 0;
     width: 100vw;
     display: grid;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 35adcb4836c..35de4aa8c73 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -2,14 +2,9 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
 import { history } from "../../../../store";
 import { Community } from "../../../../store/communities";
-import {
-  ChannelUpdate,
-  DirectMessage,
-  PublicMessage
-} from "../../../../../managers/message-manager-types";
+import { ChannelUpdate, DirectMessage, PublicMessage } from "../../managers/message-manager-types";
 import Tooltip from "../../../../components/tooltip";
 import LinearProgress from "../../../../components/linear-progress";
-import { setNostrkeys } from "../../../../../managers/message-manager";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
 import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
@@ -28,6 +23,7 @@ import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
+import { setNostrkeys } from "../../managers/message-manager";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -39,7 +35,6 @@ export const ChatPopUp = () => {
     showSpinner,
     hasUserJoinedChat,
     currentChannel,
-    windowWidth,
     setCurrentChannel,
     setRevealPrivKey,
     setShowSpinner,
@@ -389,8 +384,7 @@ export const ChatPopUp = () => {
         <div
           className={classNameObject({
             "chatbox-container": true,
-            expanded,
-            smallScreen: windowWidth <= 666
+            expanded
           })}
         >
           <ChatPopupHeader
diff --git a/src/common/features/chats/components/chats-channel-messages/index.scss b/src/common/features/chats/components/chats-channel-messages/index.scss
index 2f792bbba79..4de1752e65c 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.scss
+++ b/src/common/features/chats/components/chats-channel-messages/index.scss
@@ -184,7 +184,7 @@
       .sender-message-wrapper {
         box-sizing: content-box;
         border-radius: 10px 0px 10px 10px;
-        max-width: 70%;
+        max-width: 300px;
         word-wrap: break-word;
 
         @include themify(day) {
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index ff7803cf804..400862147a9 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -74,7 +74,7 @@ export default function ChatsChannelMessages(props: Props) {
     toggleUIProp
   } = useMappedStore();
 
-  const { messageServiceInstance, activeUserKeys, windowWidth, isActveUserRemoved } =
+  const { messageServiceInstance, activeUserKeys, windowWidth, isActiveUserRemoved } =
     useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
@@ -463,9 +463,7 @@ export default function ChatsChannelMessages(props: Props) {
                               }`}
                               dangerouslySetInnerHTML={{ __html: renderedPreview }}
                             />
-                            {windowWidth <= 768 && (
-                              <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
-                            )}
+                            <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
                           </div>
                         </Tooltip>
                         {hoveredMessageId === pMsg.id &&
@@ -501,7 +499,7 @@ export default function ChatsChannelMessages(props: Props) {
                       }`}
                       onClick={() => handelMessageActions(pMsg.id)}
                     >
-                      {hoveredMessageId === pMsg.id && !isActveUserRemoved && (
+                      {hoveredMessageId === pMsg.id && !isActiveUserRemoved && (
                         <Tooltip content={"Hide Message"}>
                           <div className="hide-msg">
                             <p
@@ -547,9 +545,7 @@ export default function ChatsChannelMessages(props: Props) {
                             className="sender-message-content"
                             dangerouslySetInnerHTML={{ __html: renderedPreview }}
                           />
-                          {windowWidth <= 768 && (
-                            <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
-                          )}
+                          <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
                         </div>
                       </Tooltip>
 
@@ -569,7 +565,7 @@ export default function ChatsChannelMessages(props: Props) {
               </React.Fragment>
             );
           })}
-        {isActveUserRemoved && (
+        {isActiveUserRemoved && (
           <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
           </span>
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index ef56e9e9c02..61ffe703d37 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -163,11 +163,9 @@ export default function ChatsDirectMessages(props: Props) {
                                   }`}
                                   dangerouslySetInnerHTML={{ __html: renderedPreview }}
                                 />
-                                {windowWidth <= 768 && (
-                                  <p className="receiver-msg-time">
-                                    {formatMessageTime(msg.created)}
-                                  </p>
-                                )}
+                                <p className="receiver-msg-time">
+                                  {formatMessageTime(msg.created)}
+                                </p>
                               </div>
                             </Tooltip>
                           </div>
@@ -209,11 +207,9 @@ export default function ChatsDirectMessages(props: Props) {
                                 className="sender-message-content"
                                 dangerouslySetInnerHTML={{ __html: renderedPreview }}
                               />
-                              {windowWidth <= 768 && (
-                                <p className="sender-message-time">
-                                  {formatMessageTime(msg.created)}
-                                </p>
-                              )}
+                              <p className="sender-message-time">
+                                {formatMessageTime(msg.created)}
+                              </p>
                             </div>
                           </Tooltip>
                           {msg.sent === 0 && (
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 2d0d7805b47..ced21fd20bb 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -39,7 +39,7 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
       <UserAvatar username={contact.name} size="medium" />
       <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
         <div className="flex justify-between w-full items-center">
-          <div className="font-semibold truncate">{contact.name}</div>
+          <div className="font-semibold truncate dark:text-white">{contact.name}</div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
         <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index 19fc1a8d283..aa11eceb420 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -5,9 +5,9 @@ import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
-import { setNostrkeys } from "../../../../../managers/message-manager";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { History } from "history";
+import { setNostrkeys } from "../../managers/message-manager";
 
 interface Props {
   history: History;
@@ -15,14 +15,8 @@ interface Props {
 
 export function ChatSidebarHeader({ history }: Props) {
   const { resetChat } = useMappedStore();
-  const {
-    activeUserKeys,
-    setShowSpinner,
-    revealPrivKey,
-    chatPrivKey,
-    windowWidth,
-    setRevealPrivKey
-  } = useContext(ChatContext);
+  const { activeUserKeys, setShowSpinner, revealPrivKey, chatPrivKey, setRevealPrivKey } =
+    useContext(ChatContext);
 
   const handleRefreshChat = () => {
     resetChat();
@@ -33,9 +27,10 @@ export function ChatSidebarHeader({ history }: Props) {
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
       <div className="flex items-center gap-2">
-        {revealPrivKey && windowWidth > 768 && (
+        {revealPrivKey && (
           <Tooltip content={_t("chat.back")}>
             <Button
+              className="hidden md:flex"
               noPadding={true}
               appearance="gray-link"
               icon={arrowBackSvg}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
index 428339c0d1f..e525f3c8b10 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -30,7 +30,7 @@ export function ChatSidebarSearch({ setUserList, searchQuery, setSearchQuery }:
 
   return (
     <>
-      <div className="bg-gray-100 p-3 border-b border-[--border-color]">
+      <div className="bg-gray-100 dark:bg-gray-900 p-3 border-b border-[--border-color]">
         <FormControl
           type="text"
           placeholder={_t("chat.search")}
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index c7ee9f45778..f480341fa67 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -27,8 +27,7 @@ interface Props {
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
-  const { revealPrivKey, windowWidth, setRevealPrivKey, setReceiverPubKey } =
-    useContext(ChatContext);
+  const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
   const { channels, directContacts, leftChannelsList } = chat;
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
diff --git a/src/common/features/chats/components/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
index 924a91cd144..4b8454e0c3e 100644
--- a/src/common/features/chats/components/import-chats/index.tsx
+++ b/src/common/features/chats/components/import-chats/index.tsx
@@ -6,14 +6,13 @@ import { useMappedStore } from "../../../../store/use-mapped-store";
 import OrDivider from "../../../../components/or-divider";
 import * as ls from "../../../../util/local-storage";
 import { ChatContext } from "../../chat-context-provider";
-import { setNostrkeys } from "../../../../../managers/message-manager";
-
 import "./index.scss";
 import LinearProgress from "../../../../components/linear-progress";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
 import { FormControl, InputGroup } from "@ui/input";
+import { setNostrkeys } from "../../managers/message-manager";
 
 export default function ImportChats() {
   const { activeUser } = useMappedStore();
diff --git a/src/managers/message-manager-types.ts b/src/common/features/chats/managers/message-manager-types.ts
similarity index 100%
rename from src/managers/message-manager-types.ts
rename to src/common/features/chats/managers/message-manager-types.ts
diff --git a/src/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
similarity index 95%
rename from src/managers/message-manager.tsx
rename to src/common/features/chats/managers/message-manager.tsx
index f44cb723c73..10d642edb64 100644
--- a/src/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -1,26 +1,25 @@
 import React, { useContext, useEffect, useState } from "react";
 
-import { ActiveUser } from "../common/store/active-user/types";
-import { NostrKeysType } from "../common/features/chats/types";
+import { ActiveUser } from "../../../store/active-user/types";
+import { NostrKeysType } from "../types";
 import {
-  DirectMessage,
-  Profile,
-  Keys,
-  DirectContact,
   Channel,
-  PublicMessage,
   ChannelUpdate,
-  MessagesObject
+  DirectContact,
+  DirectMessage,
+  Keys,
+  MessagesObject,
+  Profile,
+  PublicMessage
 } from "./message-manager-types";
 
-import MessageService, { MessageEvents } from "../common/helper/message-service";
-import { getProfileMetaData, getPrivateKey } from "../common/features/chats/utils";
+import MessageService, { MessageEvents } from "../../../helper/message-service";
+import { getPrivateKey, getProfileMetaData } from "../utils";
 
-import { useMappedStore } from "../common/store/use-mapped-store";
-import { ChatContext } from "../common/features/chats/chat-context-provider";
-import { useTimeoutFn } from "react-use";
-import { usePrevious } from "../common/util/use-previous";
-import { useMessageServiceListener } from "../common/features/chats/hooks/use-message-service-listener";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatContext } from "../chat-context-provider";
+import { usePrevious } from "../../../util/use-previous";
+import { useMessageServiceListener } from "../hooks/use-message-service-listener";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index ab8f55aa4c7..ba9308e82f6 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -77,7 +77,7 @@ export const Chats = (props: Props) => {
           >
             {isShowManageKey && (
               <div className="flex h-full items-center justify-center">
-                <div className="max-w-[400px] bg-gray-100 w-full p-4 rounded-2xl border border-[--border-color] p-4">
+                <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full p-4 rounded-2xl border border-[--border-color] p-4">
                   <ManageChatKey />
                 </div>
               </div>

From ee3d64e6da7cbe6af6e1a7aa0d3aae7f403679ef Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 29 Oct 2023 00:03:58 +0600
Subject: [PATCH 107/179] Tailwind migration: moved CRUD logic to queries and
 mutations

---
 .../features/chats/chat-context-provider.tsx  |  63 ++---
 .../chats/components/chat-popup/index.tsx     |  17 +-
 .../chats-direct-messages/index.tsx           | 229 +++++++++---------
 .../chats/components/import-chats/index.tsx   |   8 +-
 .../features/chats/components/join-chat.tsx   |  14 +-
 .../components/join-community-chat-btn.tsx    |   8 +-
 .../chats/managers/message-manager.tsx        |   5 +-
 .../features/chats/mutations/join-chat.ts     |  44 ++++
 .../features/chats/queries/keys-query.ts      |  66 +++++
 src/common/features/chats/queries/queries.ts  |   4 +-
 .../chats/utils/get-chat-private-key.ts       |   4 +-
 .../chats/utils/get-user-chat-public-key.ts   |   2 +-
 src/common/pages/community-functional.tsx     |   7 +-
 13 files changed, 280 insertions(+), 191 deletions(-)
 create mode 100644 src/common/features/chats/mutations/join-chat.ts
 create mode 100644 src/common/features/chats/queries/keys-query.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 2dd383d4b8f..cf35c5af1ee 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -4,15 +4,9 @@ import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
-import {
-  createNoStrAccount,
-  getPrivateKey,
-  getUserChatPublicKey,
-  uploadChatPublicKey
-} from "./utils";
-import * as ls from "../../util/local-storage";
 import { useMount } from "react-use";
-import { setNostrkeys } from "./managers/message-manager";
+import { useKeysQuery } from "./queries/keys-query";
+import { useJoinChat } from "./mutations/join-chat";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -33,7 +27,6 @@ interface Context {
   setReceiverPubKey: (key: string) => void;
   setMessageServiceInstance: (instance: MessageService | null) => void;
   initMessageServiceInstance: (keys: Keys) => MessageService | null;
-  joinChat: () => void;
 }
 
 interface Props {
@@ -58,14 +51,13 @@ export const ChatContext = React.createContext<Context>({
   setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
   setMessageServiceInstance: () => {},
-  initMessageServiceInstance: () => (({} as MessageService) || null),
-  joinChat: () => {}
+  initMessageServiceInstance: () => (({} as MessageService) || null)
 });
 
 export const ChatContextProvider = (props: Props) => {
   const { activeUser, chat, resetChat } = useMappedStore();
 
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: " ", priv: "" });
+  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: "", priv: "" });
   const [showSpinner, setShowSpinner] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
@@ -77,11 +69,29 @@ export const ChatContextProvider = (props: Props) => {
   const [windowWidth, setWindowWidth] = useState(0);
   const [isActiveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
+  const { privateKey, publicKey, refetch } = useKeysQuery(activeUserKeys, setActiveUserKeys);
+
+  useJoinChat(() => {
+    setHasUserJoinedChat(true);
+    setShouldUpdateProfile(true);
+  });
+
+  useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
+
   useMount(() => {
-    getActiveUserKeys();
     setWindowWidth(window.innerWidth);
   });
 
+  useEffect(() => {
+    setHasUserJoinedChat(!!publicKey);
+  }, [publicKey]);
+
+  useEffect(() => {
+    if (privateKey) {
+      setChatPrivKey(privateKey);
+    }
+  }, [privateKey]);
+
   useEffect(() => {
     if (currentChannel && currentChannel.removedUserIds) {
       setIsActiveUserRemoved(currentChannel.removedUserIds?.includes(activeUserKeys?.pub!));
@@ -101,7 +111,7 @@ export const ChatContextProvider = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    getActiveUserKeys();
+    refetch();
     if (
       messageServiceInstance &&
       chat.profiles.some((profile) => profile.name === activeUser?.username)
@@ -120,16 +130,6 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [shouldUpdateProfile, messageServiceInstance]);
 
-  useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
-
-  const getActiveUserKeys = async () => {
-    const pubKey = await getUserChatPublicKey(activeUser?.username!);
-    const privKey = getPrivateKey(activeUser?.username!);
-    setHasUserJoinedChat(!!pubKey);
-    setChatPrivKey(privKey);
-    setActiveUserKeys({ pub: pubKey, priv: privKey });
-  };
-
   const initMessageServiceInstance = (keys: Keys) => {
     if (messageServiceInstance) {
       messageServiceInstance.close();
@@ -144,18 +144,6 @@ export const ChatContextProvider = (props: Props) => {
     return newMessageService;
   };
 
-  const joinChat = async () => {
-    resetChat();
-    const keys = createNoStrAccount();
-    ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-    await uploadChatPublicKey(activeUser, keys.pub);
-    setHasUserJoinedChat(true);
-    setNostrkeys(keys);
-    setChatPrivKey(keys.priv);
-    setShouldUpdateProfile(true);
-    setActiveUserKeys(keys);
-  };
-
   return (
     <ChatContext.Provider
       value={{
@@ -176,8 +164,7 @@ export const ChatContextProvider = (props: Props) => {
         setActiveUserKeys,
         setReceiverPubKey,
         setMessageServiceInstance,
-        initMessageServiceInstance,
-        joinChat
+        initMessageServiceInstance
       }}
     >
       {props.children}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 35de4aa8c73..bec4ac7c13c 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -24,6 +24,7 @@ import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
+import { useJoinChat } from "../../mutations/join-chat";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -37,9 +38,9 @@ export const ChatPopUp = () => {
     currentChannel,
     setCurrentChannel,
     setRevealPrivKey,
-    setShowSpinner,
-    joinChat
+    setShowSpinner
   } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -339,7 +340,7 @@ export const ChatPopUp = () => {
       setShowSpinner(true);
       const keys = {
         pub: activeUserKeys?.pub!,
-        priv: getPrivateKey(activeUser?.username!)
+        priv: getPrivateKey(activeUser?.username!)!!
       };
       setNostrkeys(keys);
       if (isCommunity && communityName) {
@@ -348,11 +349,6 @@ export const ChatPopUp = () => {
     }
   };
 
-  const handleJoinChat = async () => {
-    setIsSpinner(true);
-    joinChat();
-  };
-
   const communityClicked = (community: string) => {
     setIsCommunity(true);
     setCommunityName(community);
@@ -442,7 +438,10 @@ export const ChatPopUp = () => {
             ) : (
               <Button
                 className="join-chat-btn"
-                onClick={() => handleJoinChat()}
+                onClick={() => {
+                  setIsSpinner(true);
+                  joinChat();
+                }}
                 icon={isSpinner ? <Spinner style={{ marginRight: "6px" }} /> : undefined}
                 iconPlacement="left"
               >
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 61ffe703d37..0f00b999a58 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -10,24 +10,18 @@ import {
   isMessageGif,
   isMessageImage
 } from "../../utils";
-
 import { Theme } from "../../../../store/global/types";
-import { DirectMessage } from "../../../../../managers/message-manager-types";
-
 import { useMappedStore } from "../../../../store/use-mapped-store";
-
 import UserAvatar from "../../../../components/user-avatar";
 import Tooltip from "../../../../components/tooltip";
 import { ChatContext } from "../../chat-context-provider";
-
 import { failedMessageSvg, resendMessageSvg } from "../../../../img/svg";
-
 import { renderPostBody } from "@ecency/render-helper";
 import { _t } from "../../../../i18n";
-
 import "./index.scss";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { Spinner } from "@ui/spinner";
+import { DirectMessage } from "../../managers/message-manager-types";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -98,99 +92,54 @@ export default function ChatsDirectMessages(props: Props) {
       <div className="direct-messages">
         {receiverPubKey ? (
           <>
-            {directMessages &&
-              directMessages.map((msg, i) => {
-                const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
-                let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
-
-                renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-                renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-                const isGif = isMessageGif(msg.content);
-
-                const isImage = isMessageImage(msg.content);
-
-                const isSameUser = checkContiguousMessage(msg, i, directMessages);
-
-                return (
-                  <React.Fragment key={msg.id}>
-                    {dayAndMonth && (
-                      <div className="custom-divider">
-                        <span className="flex justify-center items-center mt-3 custom-divider-text">
-                          {dayAndMonth}
-                        </span>
-                      </div>
-                    )}
-                    {msg.creator !== activeUserKeys?.pub ? (
-                      <div key={msg.id} className="receiver">
-                        {!isSameUser || (isSameUser && dayAndMonth) ? (
-                          <div className="user-img">
-                            <Link to={`/@${currentUser}`}>
-                              <span>
-                                <UserAvatar username={currentUser} size="medium" />
-                              </span>
-                            </Link>
-                          </div>
-                        ) : (
-                          <></>
-                        )}
-
-                        <div
-                          className={`user-info ${
-                            isSameUser && !dayAndMonth
-                              ? "same-user-msg"
-                              : dayAndMonth
-                              ? "date-changed"
-                              : ""
-                          }`}
-                        >
-                          <div className="receiver-messag">
-                            <Tooltip
-                              content={
-                                formatMessageDate(msg.created).split(",")[1] +
-                                " " +
-                                formatMessageTime(msg.created)
-                              }
-                            >
-                              <div
-                                className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
-                                  isImage ? "chat-image" : ""
-                                }`}
-                              >
-                                <div
-                                  className={`receiver-message-content  ${isGif ? "gif" : ""} ${
-                                    isImage ? "chat-image" : ""
-                                  }`}
-                                  dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                                />
-                                <p className="receiver-msg-time">
-                                  {formatMessageTime(msg.created)}
-                                </p>
-                              </div>
-                            </Tooltip>
-                          </div>
+            {directMessages?.map((msg, i) => {
+              console.log(activeUserKeys);
+              console.log(`${msg.creator}/${activeUserKeys?.pub}`);
+              const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
+              let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
+
+              renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
+              renderedPreview = renderedPreview.replace(/<\/p>/g, "");
+
+              const isGif = isMessageGif(msg.content);
+
+              const isImage = isMessageImage(msg.content);
+
+              const isSameUser = checkContiguousMessage(msg, i, directMessages);
+
+              return (
+                <React.Fragment key={msg.id}>
+                  {dayAndMonth && (
+                    <div className="custom-divider">
+                      <span className="flex justify-center items-center mt-3 custom-divider-text">
+                        {dayAndMonth}
+                      </span>
+                    </div>
+                  )}
+                  {msg.creator !== activeUserKeys?.pub ? (
+                    <div key={msg.id} className="receiver">
+                      {!isSameUser || (isSameUser && dayAndMonth) ? (
+                        <div className="user-img">
+                          <Link to={`/@${currentUser}`}>
+                            <span>
+                              <UserAvatar username={currentUser} size="medium" />
+                            </span>
+                          </Link>
                         </div>
-                      </div>
-                    ) : (
-                      <div key={msg.id} className="sender">
-                        <div
-                          className={`sender-message ${
-                            msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                          }`}
-                        >
-                          {msg.sent === 2 && (
-                            <Tooltip content={"Resend"}>
-                              <span
-                                className="resend-svg"
-                                onClick={() => {
-                                  setStep(1);
-                                  setResendMessage(msg);
-                                }}
-                              >
-                                {resendMessageSvg}
-                              </span>
-                            </Tooltip>
-                          )}
+                      ) : (
+                        <></>
+                      )}
+
+                      <div
+                        className={`user-info ${
+                          isSameUser && !dayAndMonth
+                            ? "same-user-msg"
+                            : dayAndMonth
+                            ? "date-changed"
+                            : ""
+                        }`}
+                      >
+                        <div className="receiver-messag">
                           <Tooltip
                             content={
                               formatMessageDate(msg.created).split(",")[1] +
@@ -199,35 +148,77 @@ export default function ChatsDirectMessages(props: Props) {
                             }
                           >
                             <div
-                              className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
-                                isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
+                              className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
+                                isImage ? "chat-image" : ""
                               }`}
                             >
                               <div
-                                className="sender-message-content"
+                                className={`receiver-message-content  ${isGif ? "gif" : ""} ${
+                                  isImage ? "chat-image" : ""
+                                }`}
                                 dangerouslySetInnerHTML={{ __html: renderedPreview }}
                               />
-                              <p className="sender-message-time">
-                                {formatMessageTime(msg.created)}
-                              </p>
+                              <p className="receiver-msg-time">{formatMessageTime(msg.created)}</p>
                             </div>
                           </Tooltip>
-                          {msg.sent === 0 && (
-                            <span style={{ margin: "10px 0 0 5px" }}>
-                              <Spinner />
-                            </span>
-                          )}
-                          {msg.sent === 2 && (
-                            <Tooltip content={"Failed"}>
-                              <span className="failed-svg">{failedMessageSvg}</span>
-                            </Tooltip>
-                          )}
                         </div>
                       </div>
-                    )}
-                  </React.Fragment>
-                );
-              })}
+                    </div>
+                  ) : (
+                    <div key={msg.id} className="sender">
+                      <div
+                        className={`sender-message ${
+                          msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
+                        }`}
+                      >
+                        {msg.sent === 2 && (
+                          <Tooltip content={"Resend"}>
+                            <span
+                              className="resend-svg"
+                              onClick={() => {
+                                setStep(1);
+                                setResendMessage(msg);
+                              }}
+                            >
+                              {resendMessageSvg}
+                            </span>
+                          </Tooltip>
+                        )}
+                        <Tooltip
+                          content={
+                            formatMessageDate(msg.created).split(",")[1] +
+                            " " +
+                            formatMessageTime(msg.created)
+                          }
+                        >
+                          <div
+                            className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
+                              isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
+                            }`}
+                          >
+                            <div
+                              className="sender-message-content"
+                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
+                            />
+                            <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
+                          </div>
+                        </Tooltip>
+                        {msg.sent === 0 && (
+                          <span style={{ margin: "10px 0 0 5px" }}>
+                            <Spinner />
+                          </span>
+                        )}
+                        {msg.sent === 2 && (
+                          <Tooltip content={"Failed"}>
+                            <span className="failed-svg">{failedMessageSvg}</span>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </React.Fragment>
+              );
+            })}
           </>
         ) : (
           <p className="not-joined">{_t("chat.not-joined")}</p>
diff --git a/src/common/features/chats/components/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
index 4b8454e0c3e..b23772231d8 100644
--- a/src/common/features/chats/components/import-chats/index.tsx
+++ b/src/common/features/chats/components/import-chats/index.tsx
@@ -13,6 +13,7 @@ import { Button } from "@ui/button";
 import { Form } from "@ui/form";
 import { FormControl, InputGroup } from "@ui/input";
 import { setNostrkeys } from "../../managers/message-manager";
+import { useJoinChat } from "../../mutations/join-chat";
 
 export default function ImportChats() {
   const { activeUser } = useMappedStore();
@@ -23,7 +24,8 @@ export default function ImportChats() {
   const [privKey, setPrivKey] = useState("");
   const [step, setStep] = useState(0);
 
-  const { activeUserKeys, hasUserJoinedChat, setChatPrivKey, joinChat } = useContext(ChatContext);
+  const { activeUserKeys, hasUserJoinedChat, setChatPrivKey } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
 
   const handleImportChatSubmit = () => {
     try {
@@ -100,9 +102,7 @@ export default function ImportChats() {
           onClose={() => {
             setStep(0);
           }}
-          onConfirm={() => {
-            joinChat();
-          }}
+          onConfirm={() => joinChat()}
         />
       )}
     </>
diff --git a/src/common/features/chats/components/join-chat.tsx b/src/common/features/chats/components/join-chat.tsx
index 47ba2890b8d..182665021a0 100644
--- a/src/common/features/chats/components/join-chat.tsx
+++ b/src/common/features/chats/components/join-chat.tsx
@@ -3,9 +3,11 @@ import { ChatContext } from "../chat-context-provider";
 import { Button } from "@ui/button";
 import { Spinner } from "@ui/spinner";
 import { _t } from "../../../i18n";
+import { useJoinChat } from "../mutations/join-chat";
 
 export default function JoinChat() {
-  const { messageServiceInstance, joinChat } = useContext(ChatContext);
+  const { messageServiceInstance } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
 
   const [showSpinner, setShowSpinner] = useState(false);
 
@@ -15,16 +17,14 @@ export default function JoinChat() {
     }
   }, [messageServiceInstance]);
 
-  const handleJoinChat = async () => {
-    setShowSpinner(true);
-    joinChat();
-  };
-
   return (
     <div className="no-chat text-center">
       <p>{_t("chat.you-haven-t-joined")}</p>
       <Button
-        onClick={handleJoinChat}
+        onClick={() => {
+          setShowSpinner(true);
+          joinChat();
+        }}
         icon={showSpinner ? <Spinner /> : <></>}
         iconPlacement="left"
       >
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index a9130723f37..3758e4ce6ff 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -3,12 +3,13 @@ import { History } from "history";
 import { Community, ROLES } from "../../../store/communities";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../managers/message-manager-types";
 import { ChatContext } from "../chat-context-provider";
 import { CHANNEL, NOSTRKEY } from "./chat-popup/chat-constants";
 import { getProfileMetaData, setChannelMetaData } from "../utils";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
+import { Channel, communityModerator } from "../managers/message-manager-types";
+import { useJoinChat } from "../mutations/join-chat";
 
 interface Props {
   history: History;
@@ -16,9 +17,10 @@ interface Props {
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
-  const { messageServiceInstance, activeUserKeys, hasUserJoinedChat, joinChat } =
-    useContext(ChatContext);
+  const { messageServiceInstance, activeUserKeys, hasUserJoinedChat } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
   const { chat, activeUser } = useMappedStore();
+
   const [inProgress, setInProgress] = useState(false);
   const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
   const [isChatEnabled, setIsChatEnabled] = useState(false);
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index 10d642edb64..6b73e7bd18f 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from "react";
-
 import { ActiveUser } from "../../../store/active-user/types";
 import { NostrKeysType } from "../types";
 import {
@@ -12,10 +11,8 @@ import {
   Profile,
   PublicMessage
 } from "./message-manager-types";
-
 import MessageService, { MessageEvents } from "../../../helper/message-service";
 import { getPrivateKey, getProfileMetaData } from "../utils";
-
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { usePrevious } from "../../../util/use-previous";
@@ -113,7 +110,7 @@ const MessageManager = () => {
     const noStrPrivKey = getPrivateKey(activeUser.username);
     const keys = {
       pub: profile?.nsKey,
-      priv: noStrPrivKey
+      priv: noStrPrivKey!!
     };
     setKeys(keys);
   };
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
new file mode 100644
index 00000000000..8f9de56e85b
--- /dev/null
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -0,0 +1,44 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createNoStrAccount, uploadChatPublicKey } from "../utils";
+import * as ls from "../../../util/local-storage";
+import { setNostrkeys } from "../managers/message-manager";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { ChatQueries } from "../queries";
+
+/**
+ * Custom React hook for joining a chat with some side effects.
+ *
+ * This hook manages the process of joining a chat, resetting chat state, and uploading
+ * a public key for secure communication.
+ *
+ * @param onSuccess - A callback function to be called upon successful completion of chat join.
+ *
+ * @returns A function from the `useMutation` hook, which can be used to initiate the chat join process.
+ */
+export function useJoinChat(onSuccess?: () => void) {
+  const { activeUser, chat, resetChat } = useMappedStore();
+  const { mutateAsync: uploadPublicKey } = useMutation(["chat-upload-public-key"], (key: string) =>
+    uploadChatPublicKey(activeUser, key)
+  );
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    ["chat-join-chat"],
+    async () => {
+      resetChat();
+      return createNoStrAccount();
+    },
+    {
+      onSuccess: async (keys: ReturnType<typeof createNoStrAccount>) => {
+        ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+        await uploadPublicKey(keys.pub);
+
+        setNostrkeys(keys);
+        queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
+        queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
+
+        onSuccess?.();
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
new file mode 100644
index 00000000000..67c2bfd1352
--- /dev/null
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -0,0 +1,66 @@
+import { useQueries } from "@tanstack/react-query";
+import { ChatQueries } from "./queries";
+import { getPrivateKey, getUserChatPublicKey } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { NostrKeysType } from "../types";
+
+/**
+ * Custom React hook for managing queries related to a user's public and private keys in a chat application.
+ *
+ * This hook handles querying and managing the user's public and private keys, as well as providing a
+ * method for manual data refetch.
+ *
+ * @returns An object containing the user's public and private keys, along with a refetch method.
+ *   - publicKey: The user's public key for secure communication.
+ *   - privateKey: The user's private key for secure communication.
+ *   - refetch: A function to manually trigger a refetch of the public and private keys.
+ */
+export function useKeysQuery(
+  activeUserKeys: NostrKeysType,
+  setActiveUserKeys: (keys: NostrKeysType) => void
+) {
+  const { activeUser } = useMappedStore();
+
+  const [
+    { data: publicKey, refetch: refetchPublicKey },
+    { data: privateKey, refetch: refetchPrivateKey }
+  ] = useQueries({
+    queries: [
+      {
+        queryKey: [ChatQueries.PUBLIC_KEY],
+        queryFn: () => getUserChatPublicKey(activeUser?.username!),
+        onSuccess: (key: string | null) => {
+          if (key) {
+            console.log("key is : ", key);
+            setActiveUserKeys({
+              ...activeUserKeys,
+              pub: key
+            });
+          }
+        }
+      },
+      {
+        queryKey: [ChatQueries.PRIVATE_KEY],
+        queryFn: () => getPrivateKey(activeUser?.username!),
+        onSuccess: (key: string | null) => {
+          if (key) {
+            console.log("private is ", key);
+            setActiveUserKeys({
+              ...activeUserKeys,
+              priv: key
+            });
+          }
+        }
+      }
+    ]
+  });
+
+  return {
+    publicKey,
+    privateKey,
+    refetch: () => {
+      refetchPublicKey();
+      refetchPrivateKey();
+    }
+  };
+}
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 1ccc0df4abc..7ee0eb9b99f 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -1,3 +1,5 @@
 export enum ChatQueries {
-  SEARCH_USER = "search-user"
+  SEARCH_USER = "search-user",
+  PUBLIC_KEY = "public-key",
+  PRIVATE_KEY = "private-key"
 }
diff --git a/src/common/features/chats/utils/get-chat-private-key.ts b/src/common/features/chats/utils/get-chat-private-key.ts
index c5b04fa691c..c0f74216745 100644
--- a/src/common/features/chats/utils/get-chat-private-key.ts
+++ b/src/common/features/chats/utils/get-chat-private-key.ts
@@ -1,5 +1,5 @@
 import * as ls from "../../../util/local-storage";
 
-export const getPrivateKey = (username: string) => {
-  return ls.get(`${username}_nsPrivKey`);
+export const getPrivateKey = (username: string): string | null => {
+  return ls.get(`${username}_nsPrivKey`) ?? null;
 };
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index 3dc9ae8cf7f..3e6aa39eddd 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -1,6 +1,6 @@
 import { getAccountFull } from "../../../api/hive";
 
-export const getUserChatPublicKey = async (username: string) => {
+export const getUserChatPublicKey = async (username: string): Promise<string | null> => {
   const response = await getAccountFull(username);
   if (response && response.posting_json_metadata) {
     const { posting_json_metadata } = response;
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 6a22d6b70b0..55538c9aaf4 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -4,7 +4,7 @@ import React, { Fragment, useContext, useEffect, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
-import { Channel } from "../../managers/message-manager-types";
+import { Channel } from "../features/chats/managers/message-manager-types";
 import { usePrevious } from "../util/use-previous";
 
 import { getJoinedCommunities } from "../features/chats/utils";
@@ -44,6 +44,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { ChatContext } from "../features/chats/chat-context-provider";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { useJoinChat } from "../features/chats/mutations/join-chat";
 
 interface MatchParams {
   filter: string;
@@ -82,8 +83,8 @@ export const CommunityPage = (props: Props) => {
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
-  const chatContext = useContext(ChatContext);
-  const { messageServiceInstance, hasUserJoinedChat, joinChat } = chatContext;
+  const { messageServiceInstance, hasUserJoinedChat } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
 
   useEffect(() => {
     const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);

From 55fafdbebe2bba6dd7d5ce59cf273d6d0c13b026 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 30 Oct 2023 21:32:41 +0600
Subject: [PATCH 108/179] Chats: Retrieving direct contacts from query instead
 of direct event listener calling

---
 src/common/components/login/index.tsx         |  2 +-
 .../features/chats/chat-context-provider.tsx  | 51 ++++++------
 .../features/chats/components/chat-input.tsx  |  8 +-
 .../chats/components/chat-message-box.tsx     |  2 +-
 .../chats/components/chat-messages-view.tsx   |  8 +-
 .../chat-popup/chat-popup-direct-messages.tsx | 14 ++--
 .../chat-popup/chat-popup-messages-list.tsx   |  2 +-
 .../chats/components/chat-popup/index.tsx     |  8 +-
 .../chats-channel-messages/index.tsx          |  2 +-
 .../chats-community-dropdown-menu/index.tsx   |  2 +-
 .../chats-direct-messages/index.tsx           |  2 -
 .../chat-sidebar-direct-contact.tsx           |  4 +-
 .../chats/components/chats-sidebar/index.tsx  | 18 +++--
 .../hooks/use-message-service-listener.tsx    | 13 +--
 .../chats/managers/message-manager.tsx        | 36 ++-------
 .../chats/queries/direct-contacts-query.ts    | 26 ++++++
 src/common/features/chats/queries/index.ts    |  2 +
 .../features/chats/queries/keys-query.ts      |  2 -
 .../chats/queries/message-listener-query.tsx  | 80 +++++++++++++++++++
 src/common/features/chats/queries/queries.ts  |  3 +-
 .../chats/utils/check-contiguous-message.ts   |  2 +-
 .../chats/utils/delete-chat-public-key.ts     |  1 -
 .../utils/format-message-date-and-day.ts      |  3 +-
 .../chats/utils/get-joined-communities.ts     |  2 +-
 .../chats/utils/upload-channel-data.ts        |  2 +-
 .../utils/use-fetch-community-messages.ts     |  2 +-
 src/common/helper/message-service.ts          |  2 +-
 src/common/store/chat/index.ts                | 30 +++----
 src/common/store/chat/types.ts                |  4 +-
 29 files changed, 211 insertions(+), 122 deletions(-)
 create mode 100644 src/common/features/chats/queries/direct-contacts-query.ts
 create mode 100644 src/common/features/chats/queries/message-listener-query.tsx

diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 1feb93b7f2e..d506b5a4922 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -773,7 +773,7 @@ class LoginDialog extends Component<Props> {
       if (profile && profile.nsKey && getPrivateKey(account.name)) {
         const keys = {
           pub: profile.nsKey,
-          priv: getPrivateKey(account.name)
+          priv: getPrivateKey(account.name)!!
         };
         setNostrkeys(keys);
       }
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index cf35c5af1ee..8b601bd7af7 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -7,6 +7,7 @@ import { NostrKeysType } from "./types";
 import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
 import { useJoinChat } from "./mutations/join-chat";
+import { MessageListenerQueriesProvider } from "./queries";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -145,29 +146,31 @@ export const ChatContextProvider = (props: Props) => {
   };
 
   return (
-    <ChatContext.Provider
-      value={{
-        activeUserKeys,
-        showSpinner,
-        revealPrivKey,
-        receiverPubKey,
-        chatPrivKey,
-        messageServiceInstance,
-        hasUserJoinedChat,
-        currentChannel,
-        windowWidth,
-        isActiveUserRemoved,
-        setCurrentChannel,
-        setRevealPrivKey,
-        setShowSpinner,
-        setChatPrivKey,
-        setActiveUserKeys,
-        setReceiverPubKey,
-        setMessageServiceInstance,
-        initMessageServiceInstance
-      }}
-    >
-      {props.children}
-    </ChatContext.Provider>
+    <MessageListenerQueriesProvider>
+      <ChatContext.Provider
+        value={{
+          activeUserKeys,
+          showSpinner,
+          revealPrivKey,
+          receiverPubKey,
+          chatPrivKey,
+          messageServiceInstance,
+          hasUserJoinedChat,
+          currentChannel,
+          windowWidth,
+          isActiveUserRemoved,
+          setCurrentChannel,
+          setRevealPrivKey,
+          setShowSpinner,
+          setChatPrivKey,
+          setActiveUserKeys,
+          setReceiverPubKey,
+          setMessageServiceInstance,
+          initMessageServiceInstance
+        }}
+      >
+        {props.children}
+      </ChatContext.Provider>
+    </MessageListenerQueriesProvider>
   );
 };
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 8f94975d01e..f4d5b0e00f6 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Channel } from "../../../../managers/message-manager-types";
 import { EmojiPicker } from "../../../components/emoji-picker";
 import { error } from "../../../components/feedback";
 import {
@@ -10,7 +9,6 @@ import {
   messageSendSvg
 } from "../../../img/svg";
 import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "./chat-popup/chat-constants";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
 import { ChatContext } from "../chat-context-provider";
 import { Form } from "@ui/form";
@@ -20,6 +18,8 @@ import { useChatFileUpload } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import GifPicker from "../../../components/gif-picker";
 import useClickAway from "react-use/lib/useClickAway";
+import { useDirectContactsQuery } from "../queries";
+import { Channel } from "../managers/message-manager-types";
 
 interface Props {
   isCurrentUser: boolean;
@@ -39,7 +39,7 @@ export default function ChatInput({
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
-  const { chat } = useMappedStore();
+  const { data: directContacts } = useDirectContactsQuery();
   const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
@@ -78,7 +78,7 @@ export default function ChatInput({
     }
     if (
       receiverPubKey &&
-      !chat.directContacts.some((contact) => contact.name === currentUser) &&
+      !directContacts?.some((contact) => contact.name === currentUser) &&
       isCurrentUser
     ) {
       messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 75a4c3a2570..13041102606 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -3,7 +3,6 @@ import { match } from "react-router";
 import { History } from "history";
 import ChatsMessagesHeader from "./chat-messages-header";
 import ChatsMessagesView from "./chat-messages-view";
-import { Channel, ChannelUpdate } from "../../../../managers/message-manager-types";
 import LinearProgress from "../../../components/linear-progress";
 import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -11,6 +10,7 @@ import { CHANNEL } from "./chat-popup/chat-constants";
 import { ChatContext } from "../chat-context-provider";
 import { useMount } from "react-use";
 import { Button } from "@ui/button";
+import { Channel, ChannelUpdate } from "../managers/message-manager-types";
 
 interface MatchParams {
   filter: string;
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 6f45013e0a8..3b9e67d3fb3 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { Channel, DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
 import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
 import { History } from "history";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -12,6 +11,8 @@ import ChatsScroller from "./chats-scroller";
 import { CHATPAGE } from "./chat-popup/chat-constants";
 import { ChatContext } from "../chat-context-provider";
 import { classNameObject } from "../../../helper/class-name-object";
+import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
+import { useDirectContactsQuery } from "../queries";
 
 interface Props {
   username: string;
@@ -31,6 +32,7 @@ export default function ChatsMessagesView({
   history
 }: Props) {
   const { messageServiceInstance } = useContext(ChatContext);
+  const { data: directContacts } = useDirectContactsQuery();
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
@@ -123,7 +125,7 @@ export default function ChatsMessagesView({
   };
 
   const getDirectMessages = () => {
-    const user = chat.directContacts.find((item) => item.name === directUser);
+    const user = directContacts?.find((item) => item.name === directUser);
     const messages = user && fetchDirectMessages(user?.pubkey, chat.directMessages);
     const directMessages = messages?.sort((a, b) => a.created - b.created);
     setDirectMessages(directMessages!);
@@ -185,7 +187,7 @@ export default function ChatsMessagesView({
           </>
         ) : (
           <ChatsDirectMessages
-            directMessages={directMessages && directMessages}
+            directMessages={directMessages}
             currentUser={directUser!}
             isScrolled={isScrolled}
             isScrollToBottom={isScrollToBottom}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index 2c87ae1fa4d..d00a348f9a6 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -6,8 +6,9 @@ import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
-import { Channel } from "../../../../../managers/message-manager-types";
 import { ChatDirectMessage } from "./chat-direct-message";
+import { useDirectContactsQuery } from "../../queries";
+import { Channel } from "../../managers/message-manager-types";
 
 interface Props {
   communityClicked: (v: string) => void;
@@ -25,6 +26,8 @@ export function ChatPopupDirectMessages({
   const { chat } = useMappedStore();
   const { activeUserKeys, showSpinner } = useContext(ChatContext);
 
+  const { data: directContacts } = useDirectContactsQuery();
+
   const [communities, setCommunities] = useState<Channel[]>([]);
 
   useEffect(() => {
@@ -34,8 +37,7 @@ export function ChatPopupDirectMessages({
 
   return (
     <>
-      {(chat.directContacts.length !== 0 ||
-        (chat.channels.length !== 0 && communities.length !== 0)) &&
+      {(directContacts?.length !== 0 || (chat.channels.length !== 0 && communities.length !== 0)) &&
       !showSpinner &&
       activeUserKeys?.priv ? (
         <>
@@ -50,12 +52,10 @@ export function ChatPopupDirectMessages({
                   userClicked={() => communityClicked(channel.communityName!)}
                 />
               ))}
-              {chat.directContacts.length !== 0 && (
-                <div className="dm-header">{_t("chat.dms")}</div>
-              )}
+              {directContacts?.length !== 0 && <div className="dm-header">{_t("chat.dms")}</div>}
             </>
           )}
-          {chat.directContacts.map((user) => (
+          {directContacts?.map((user) => (
             <ChatDirectMessage
               username={user.name}
               userClicked={(v) => {
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index c7c5625aee8..f4948ea990a 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -6,7 +6,7 @@ import { history } from "../../../../store";
 import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import { Community } from "../../../../store/communities";
-import { DirectMessage, PublicMessage } from "../../../../../managers/message-manager-types";
+import { DirectMessage, PublicMessage } from "../../managers/message-manager-types";
 
 interface Props {
   isCurrentUser: boolean;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index bec4ac7c13c..c8cf079f546 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -25,6 +25,7 @@ import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
 import { useJoinChat } from "../../mutations/join-chat";
+import { useDirectContactsQuery } from "../../queries";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -41,6 +42,7 @@ export const ChatPopUp = () => {
     setShowSpinner
   } = useContext(ChatContext);
   const { mutateAsync: joinChat } = useJoinChat();
+  const { data: directContacts } = useDirectContactsQuery();
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -195,9 +197,7 @@ export const ChatPopUp = () => {
 
   useEffect(() => {
     if (currentUser) {
-      const isCurrentUserFound = chat.directContacts.find(
-        (contact) => contact.name === currentUser
-      );
+      const isCurrentUserFound = directContacts?.find((contact) => contact.name === currentUser);
       if (isCurrentUserFound) {
         setReceiverPubKey(isCurrentUserFound.pubkey);
         setIsCurrentUserJoined(true);
@@ -206,7 +206,7 @@ export const ChatPopUp = () => {
         fetchCurrentUserData();
       }
 
-      const peer = chat.directContacts.find((x) => x.name === currentUser)?.pubkey ?? "";
+      const peer = directContacts?.find((x) => x.name === currentUser)?.pubkey ?? "";
       const msgsList = fetchDirectMessages(peer!);
       const messages = msgsList.sort((a, b) => a.created - b.created);
       setDirectMessagesList(messages);
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 400862147a9..6577d7b6b5f 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -6,7 +6,7 @@ import {
   communityModerator,
   Profile,
   PublicMessage
-} from "../../../../../managers/message-manager-types";
+} from "../../managers/message-manager-types";
 import { History } from "history";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../../store/use-mapped-store";
diff --git a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
index 522be38a54b..29d32ed9e24 100644
--- a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
@@ -14,7 +14,6 @@ import {
   UNBLOCKUSER
 } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import { Channel, communityModerator } from "../../../../../managers/message-manager-types";
 import { error, success } from "../../../../components/feedback";
 import LinearProgress from "../../../../components/linear-progress";
 import { ROLES } from "../../../../store/communities";
@@ -27,6 +26,7 @@ import { getAccountFull } from "../../../../api/hive";
 import { Button } from "@ui/button";
 import { FormControl, InputGroup } from "@ui/input";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { Channel, communityModerator } from "../../managers/message-manager-types";
 
 interface Props {
   history: History;
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 0f00b999a58..b5f6d29fc94 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -93,8 +93,6 @@ export default function ChatsDirectMessages(props: Props) {
         {receiverPubKey ? (
           <>
             {directMessages?.map((msg, i) => {
-              console.log(activeUserKeys);
-              console.log(`${msg.creator}/${activeUserKeys?.pub}`);
               const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
               let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
 
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index ced21fd20bb..b06fc8bc447 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -1,11 +1,11 @@
 import { getDirectLastMessage, getRelativeDate } from "../../utils";
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
-import { DirectContact } from "../../../../../managers/message-manager-types";
 import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { classNameObject } from "../../../../helper/class-name-object";
+import { DirectContact } from "../../managers/message-manager-types";
 
 interface Props {
   contact: DirectContact;
@@ -19,7 +19,7 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
 
   const lastMessage = useMemo(
     () => getDirectLastMessage(contact.pubkey, chat.directMessages),
-    [chat, contact]
+    [chat.directMessages, contact]
   );
   const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index f480341fa67..e2501dae8a3 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { History } from "history";
-import { Channel } from "../../../../../managers/message-manager-types";
 import {
   formattedUserName,
   getCommunityLastMessage,
@@ -18,6 +17,8 @@ import { ChatSidebarSearch } from "./chat-sidebar-search";
 import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
 import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
+import { useDirectContactsQuery } from "../../queries";
+import { Channel } from "../../managers/message-manager-types";
 
 interface Props {
   username: string;
@@ -28,7 +29,8 @@ export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
   const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
-  const { channels, directContacts, leftChannelsList } = chat;
+  const { channels, leftChannelsList } = chat;
+  const { data: directContacts } = useDirectContactsQuery();
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
 
@@ -72,15 +74,15 @@ export default function ChatsSideBar(props: Props) {
   };
 
   const getReceiverPubKey = async (username: string) => {
-    const peer = directContacts.find((x) => x.name === username)?.pubkey ?? "";
+    const peer = directContacts?.find((x) => x.name === username)?.pubkey ?? "";
     if (peer) {
       setReceiverPubKey(peer);
     } else {
       const pubkey = await getUserChatPublicKey(username);
-      if (pubkey === undefined) {
-        setReceiverPubKey("");
-      } else {
+      if (pubkey) {
         setReceiverPubKey(pubkey);
+      } else {
+        setReceiverPubKey("");
       }
     }
   };
@@ -127,12 +129,12 @@ export default function ChatsSideBar(props: Props) {
                 </div>
               </Link>
             ))}
-            {directContacts.length !== 0 && (
+            {directContacts?.length !== 0 && (
               <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
                 {_t("chat.direct-messages")}
               </div>
             )}
-            {directContacts.map((contact) => (
+            {directContacts?.map((contact) => (
               <ChatSidebarDirectContact
                 key={contact.pubkey}
                 contact={contact}
diff --git a/src/common/features/chats/hooks/use-message-service-listener.tsx b/src/common/features/chats/hooks/use-message-service-listener.tsx
index 3c85a776bce..2d49950939b 100644
--- a/src/common/features/chats/hooks/use-message-service-listener.tsx
+++ b/src/common/features/chats/hooks/use-message-service-listener.tsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from "react";
-import { Channel } from "../../../../managers/message-manager-types";
 import MessageService from "../../../helper/message-service";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 export const useMessageServiceListener = (
   messageServiceReady: boolean,
-  messageService: MessageService | undefined,
-  chatChannels: Channel[]
+  messageService: MessageService | undefined
 ) => {
+  const {
+    chat: { channels }
+  } = useMappedStore();
+
   const [since, setSince] = useState(0);
 
   useEffect(() => {
@@ -15,7 +18,7 @@ export const useMessageServiceListener = (
     const timer = setTimeout(
       () => {
         messageService?.listen(
-          chatChannels.map((x) => x.id),
+          channels.map((x) => x.id),
           Math.floor((since || Date.now()) / 1000)
         );
         setSince(Date.now());
@@ -26,5 +29,5 @@ export const useMessageServiceListener = (
     return () => {
       clearTimeout(timer);
     };
-  }, [since, messageServiceReady, messageService, chatChannels]);
+  }, [since, messageServiceReady, messageService, channels]);
 };
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index 6b73e7bd18f..e63b6f2db3e 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -4,7 +4,6 @@ import { NostrKeysType } from "../types";
 import {
   Channel,
   ChannelUpdate,
-  DirectContact,
   DirectMessage,
   Keys,
   MessagesObject,
@@ -17,6 +16,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { usePrevious } from "../../../util/use-previous";
 import { useMessageServiceListener } from "../hooks/use-message-service-listener";
+import { useDirectContactsQuery } from "../queries";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -32,7 +32,6 @@ const MessageManager = () => {
     activeUser,
     chat,
     addDirectMessages,
-    addDirectContacts,
     addPublicMessage,
     addChannels,
     addProfile,
@@ -45,6 +44,7 @@ const MessageManager = () => {
     addPreviousPublicMessages,
     resetChat
   } = useMappedStore();
+  const { data: directContacts } = useDirectContactsQuery();
 
   const prevActiveUser = usePrevious(activeUser);
 
@@ -116,7 +116,7 @@ const MessageManager = () => {
   };
 
   //Listen for events in an interval.
-  useMessageServiceListener(messageServiceReady, messageService, chat.channels);
+  useMessageServiceListener(messageServiceReady, messageService);
 
   // // Ready state handler
   const handleReadyState = () => {
@@ -145,32 +145,7 @@ const MessageManager = () => {
     };
   }, [messageService, chat.profiles]);
 
-  //Direct contact handler
-  const handleDirectContact = (data: DirectContact[]) => {
-    const result = [...chat.directContacts];
-    data.forEach(({ name, pubkey }) => {
-      const isPresent = chat.directContacts.some(
-        (obj) => obj.name === name && obj.pubkey === pubkey
-      );
-      if (!isPresent) {
-        result.push({ name, pubkey });
-      }
-    });
-    if (result.length !== 0) {
-      addDirectContacts(result);
-    }
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
-    messageService?.addListener(MessageEvents.DirectContact, handleDirectContact);
-    return () => {
-      messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
-    };
-  }, [messageService]);
-
   //Direct message ahandle before sent
-
   const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
     data.map((m) => {
       const { peer, id } = m;
@@ -238,10 +213,10 @@ const MessageManager = () => {
   };
 
   useEffect(() => {
-    if (chat.directContacts.length !== 0) {
+    if (directContacts?.length !== 0) {
       setDirectMessages();
     }
-  }, [chat.directContacts, directMessageBuffer]);
+  }, [directContacts, directMessageBuffer]);
 
   useEffect(() => {
     messageService?.removeListener(
@@ -433,7 +408,6 @@ const MessageManager = () => {
       messageService?.removeListener(MessageEvents.Ready, handleReadyState);
       messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
       messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
-      messageService?.removeListener(MessageEvents.DirectContact, handleDirectContact);
       messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
       messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
       messageService?.removeListener(
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
new file mode 100644
index 00000000000..ea88342a7fa
--- /dev/null
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -0,0 +1,26 @@
+import { ChatQueries } from "./queries";
+import { MessageEvents } from "../../../helper/message-service";
+import { DirectContact } from "../managers/message-manager-types";
+import { useMessageListenerQuery } from "./message-listener-query";
+
+export function useDirectContactsQuery() {
+  return useMessageListenerQuery<DirectContact[], ChatQueries[]>(
+    [ChatQueries.DIRECT_CONTACTS],
+    MessageEvents.DirectContact,
+    (data, directContacts, resolver) => {
+      const result = [...data];
+      directContacts.forEach(({ name, pubkey }) => {
+        const isPresent = data.some((obj) => obj.name === name && obj.pubkey === pubkey);
+        if (!isPresent) {
+          result.push({ name, pubkey });
+        }
+      });
+      if (result.length !== 0) {
+        resolver(result);
+      }
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index abb89894ef7..3173dc55d02 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -1,2 +1,4 @@
 export * from "./search-users-query";
 export * from "./queries";
+export * from "./direct-contacts-query";
+export * from "./message-listener-query";
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 67c2bfd1352..90809aabbe7 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -31,7 +31,6 @@ export function useKeysQuery(
         queryFn: () => getUserChatPublicKey(activeUser?.username!),
         onSuccess: (key: string | null) => {
           if (key) {
-            console.log("key is : ", key);
             setActiveUserKeys({
               ...activeUserKeys,
               pub: key
@@ -44,7 +43,6 @@ export function useKeysQuery(
         queryFn: () => getPrivateKey(activeUser?.username!),
         onSuccess: (key: string | null) => {
           if (key) {
-            console.log("private is ", key);
             setActiveUserKeys({
               ...activeUserKeys,
               priv: key
diff --git a/src/common/features/chats/queries/message-listener-query.tsx b/src/common/features/chats/queries/message-listener-query.tsx
new file mode 100644
index 00000000000..ac15bfba565
--- /dev/null
+++ b/src/common/features/chats/queries/message-listener-query.tsx
@@ -0,0 +1,80 @@
+import {
+  QueryKey,
+  QueryObserverResult,
+  QueryOptions,
+  useQuery,
+  useQueryClient
+} from "@tanstack/react-query";
+import React, { createContext, PropsWithChildren, useContext, useMemo } from "react";
+import { ChatContext } from "../chat-context-provider";
+import { MessageEvents } from "../../../helper/message-service";
+import useMap from "react-use/lib/useMap";
+import useDebounce from "react-use/lib/useDebounce";
+
+export const MessageListenerQueriesContext = createContext<{
+  subscribers: Record<string, boolean>;
+  set: (key: string, value: boolean) => void;
+  get: (key: string) => boolean;
+}>({
+  subscribers: {},
+  set: () => {},
+  get: () => false
+});
+
+export function MessageListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
+  const [subscribers, { set, get }] = useMap<Record<string, boolean>>();
+
+  return (
+    <MessageListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
+  );
+}
+
+/**
+ * Custom hook for listening to messages and updating a query with new data.
+ *
+ * @template TQData - The data type returned by the query.
+ * @template TQKey - The key used to identify the query.
+ * @param {TQKey} key - The key that identifies the query.
+ * @param {MessageEvents} event - The message event to listen for.
+ * @param {(data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void} queryFn - The function that processes the received data and updates the query.
+ * @param {QueryOptions<TQData>} [queryOptions] - Additional query options.
+ * @returns {QueryObserverResult<TQData, unknown>} - The result of the query, including data and query status.
+ */
+export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
+  key: TQKey,
+  event: MessageEvents,
+  queryFn: (data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void,
+  queryOptions?: QueryOptions<TQData>
+): QueryObserverResult<TQData> {
+  const { messageServiceInstance } = useContext(ChatContext);
+  const { set, get } = useContext(MessageListenerQueriesContext);
+  const queryClient = useQueryClient();
+
+  const query = useQuery<TQData>(key, () => queryClient.getQueryData<TQData>(key)!!, queryOptions);
+
+  const joinedKey = useMemo(() => key.join(""), [key]);
+
+  const listener = (nextData: TQData) => {
+    const resolver = (data: TQData) => queryClient.setQueryData(key, data);
+    queryFn(query.data!!, nextData, resolver);
+  };
+
+  useDebounce(
+    () => {
+      if (messageServiceInstance) {
+        if (get(joinedKey)) {
+          return;
+        }
+
+        console.log("fetching");
+
+        messageServiceInstance.addListener(event, listener as any); // todo fix typings
+        set(joinedKey, true);
+      }
+    },
+    100,
+    [messageServiceInstance]
+  );
+
+  return query;
+}
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 7ee0eb9b99f..0a3002cccf9 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -1,5 +1,6 @@
 export enum ChatQueries {
   SEARCH_USER = "search-user",
   PUBLIC_KEY = "public-key",
-  PRIVATE_KEY = "private-key"
+  PRIVATE_KEY = "private-key",
+  DIRECT_CONTACTS = "direct-contacts"
 }
diff --git a/src/common/features/chats/utils/check-contiguous-message.ts b/src/common/features/chats/utils/check-contiguous-message.ts
index 95dee746833..ae055d7ca62 100644
--- a/src/common/features/chats/utils/check-contiguous-message.ts
+++ b/src/common/features/chats/utils/check-contiguous-message.ts
@@ -1,4 +1,4 @@
-import { DirectMessage, PublicMessage } from "../../../../managers/message-manager-types";
+import { DirectMessage, PublicMessage } from "../managers/message-manager-types";
 
 export const checkContiguousMessage = (
   msg: PublicMessage | DirectMessage,
diff --git a/src/common/features/chats/utils/delete-chat-public-key.ts b/src/common/features/chats/utils/delete-chat-public-key.ts
index 66ad862a979..714e21d93af 100644
--- a/src/common/features/chats/utils/delete-chat-public-key.ts
+++ b/src/common/features/chats/utils/delete-chat-public-key.ts
@@ -13,7 +13,6 @@ export const deleteChatPublicKey = (activeUser: ActiveUser | null) => {
       ls.remove(`${activeUser?.username}_nsPrivKey`);
       const response = await getAccountFull(activeUser?.username!);
       const updatedProfile = await updateProfile(response, { ...profile });
-      console.log("Updated profile", updatedProfile);
       resolve(updatedProfile);
     } catch (error) {
       reject(error);
diff --git a/src/common/features/chats/utils/format-message-date-and-day.ts b/src/common/features/chats/utils/format-message-date-and-day.ts
index d76b1c51152..a02a1e0dbd8 100644
--- a/src/common/features/chats/utils/format-message-date-and-day.ts
+++ b/src/common/features/chats/utils/format-message-date-and-day.ts
@@ -1,6 +1,5 @@
-import { PublicMessage } from "../../../../managers/message-manager-types";
-import { DirectMessage } from "../../../../managers/message-manager-types";
 import { formatMessageDate } from "./format-message-time";
+import { DirectMessage, PublicMessage } from "../managers/message-manager-types";
 
 export const formatMessageDateAndDay = (
   msg: DirectMessage | PublicMessage,
diff --git a/src/common/features/chats/utils/get-joined-communities.ts b/src/common/features/chats/utils/get-joined-communities.ts
index c04b2b20567..d533d7c1491 100644
--- a/src/common/features/chats/utils/get-joined-communities.ts
+++ b/src/common/features/chats/utils/get-joined-communities.ts
@@ -1,4 +1,4 @@
-import { Channel } from "../../../../managers/message-manager-types";
+import { Channel } from "../managers/message-manager-types";
 
 export const getJoinedCommunities = (channels: Channel[], leftChannels: string[]) => {
   return channels.filter((item) => !leftChannels.includes(item.id));
diff --git a/src/common/features/chats/utils/upload-channel-data.ts b/src/common/features/chats/utils/upload-channel-data.ts
index 0eb3562df2a..45458239bab 100644
--- a/src/common/features/chats/utils/upload-channel-data.ts
+++ b/src/common/features/chats/utils/upload-channel-data.ts
@@ -1,6 +1,6 @@
-import { Channel } from "../../../../managers/message-manager-types";
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
+import { Channel } from "../managers/message-manager-types";
 
 export const setChannelMetaData = async (username: string, channel: Channel) => {
   try {
diff --git a/src/common/features/chats/utils/use-fetch-community-messages.ts b/src/common/features/chats/utils/use-fetch-community-messages.ts
index 4dae981e7ff..cbfd3f477aa 100644
--- a/src/common/features/chats/utils/use-fetch-community-messages.ts
+++ b/src/common/features/chats/utils/use-fetch-community-messages.ts
@@ -1,5 +1,5 @@
-import { Channel } from "../../../../managers/message-manager-types";
 import { publicMessagesList } from "../../../store/chat/types";
+import { Channel } from "../managers/message-manager-types";
 
 export const fetchCommunityMessages = (
   publicMessages: publicMessagesList[],
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 10ad7a01976..7f9656b8512 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -11,7 +11,7 @@ import {
   Metadata,
   Profile,
   PublicMessage
-} from "../../managers/message-manager-types";
+} from "../features/chats/managers/message-manager-types";
 import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
 import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 6bbcb79a15c..3d9b6232c81 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -1,33 +1,33 @@
 import {
   Channel,
+  ChannelUpdate,
   DirectMessage,
-  PublicMessage,
+  MessagesObject,
   Profile,
-  ChannelUpdate,
-  MessagesObject
-} from "../../../managers/message-manager-types";
+  PublicMessage
+} from "../../features/chats/managers/message-manager-types";
 import { Dispatch } from "redux";
 
 import {
-  Chat,
   Actions,
   ActionTypes,
+  AddChannelsAction,
+  AddPreviousPublicMessagesAction,
+  Chat,
+  DeleteDirectMessagesAction,
+  DeletePublicMessagesAction,
   DirectContactsAction,
   DirectContactsType,
   DirectMessagesAction,
-  ResetChatAction,
-  AddChannelsAction,
-  PublicMessagesAction,
-  ProfilesAction,
   LeftChannelsAction,
-  UpdateChannelAction,
-  ReplacePublicMessagesAction,
-  VerifyPublicMessageSendingAction,
+  ProfilesAction,
+  PublicMessagesAction,
   ReplaceDirectMessagesAction,
+  ReplacePublicMessagesAction,
+  ResetChatAction,
+  UpdateChannelAction,
   VerifyDirectMessageSendingAction,
-  DeletePublicMessagesAction,
-  DeleteDirectMessagesAction,
-  AddPreviousPublicMessagesAction
+  VerifyPublicMessageSendingAction
 } from "./types";
 
 export const initialState: Chat = {
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 2d9629331ae..a60f15b7f1d 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -5,7 +5,7 @@ import {
   MessagesObject,
   Profile,
   PublicMessage
-} from "../../../managers/message-manager-types";
+} from "../../features/chats/managers/message-manager-types";
 
 export interface DirectContactsType {
   name: string;
@@ -80,6 +80,7 @@ export interface ProfilesAction {
   type: ActionTypes.PROFILES;
   data: Profile[];
 }
+
 export interface LeftChannelsAction {
   type: ActionTypes.LEFTCHANNELLIST;
   data: string[];
@@ -113,6 +114,7 @@ export interface VerifyDirectMessageSendingAction {
   data: DirectMessage;
   peer: string;
 }
+
 export interface DeletePublicMessagesAction {
   type: ActionTypes.DELETEPUBLICMESSAGE;
   msgId: string;

From 7d9a16c7bb62eac4ad8be0fe259113ef6f9e00da Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 1 Nov 2023 01:31:20 +0600
Subject: [PATCH 109/179] Chats: Retrieving direct and public messages via
 query instead of store and manager

---
 src/common/app.tsx                            |   3 +-
 .../chat-sidebar-direct-contact.tsx           |   7 +-
 .../chats/managers/message-manager.tsx        |  97 +----------
 .../chats/queries/chat-profiles-query.ts      |  18 ++
 .../chats/queries/direct-messages-query.ts    | 164 ++++++++++++++++++
 src/common/features/chats/queries/index.ts    |   2 +
 .../chats/queries/message-listener-query.tsx  |  15 +-
 src/common/features/chats/queries/queries.ts  |   9 +-
 .../utils/use-get-direct-last-message.ts      |  16 +-
 src/common/store/actions.ts                   |  23 ++-
 src/common/store/chat/index.ts                |  31 ----
 src/common/store/chat/types.ts                |   1 -
 12 files changed, 217 insertions(+), 169 deletions(-)
 create mode 100644 src/common/features/chats/queries/chat-profiles-query.ts
 create mode 100644 src/common/features/chats/queries/direct-messages-query.ts

diff --git a/src/common/app.tsx b/src/common/app.tsx
index 3ef80c2f0df..fa301c026fe 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -31,6 +31,7 @@ import { EntriesCacheManager } from "./core";
 import { UserActivityRecorder } from "./components/user-activity-recorder";
 import { ChatContextProvider } from "./features/chats/chat-context-provider";
 import { ChatPopUp } from "./features/chats/components/chat-popup";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -100,7 +101,7 @@ const App = (props: any) => {
   return (
     <EntriesCacheManager>
       {/*Excluded from production*/}
-      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
+      <ReactQueryDevtools initialIsOpen={false} />
       <Tracker />
       <UserActivityRecorder />
       <ChatContextProvider>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index b06fc8bc447..71c0e3301b6 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -6,6 +6,7 @@ import UserAvatar from "../../../../components/user-avatar";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { DirectContact } from "../../managers/message-manager-types";
+import { useDirectMessagesQuery } from "../../queries";
 
 interface Props {
   contact: DirectContact;
@@ -17,9 +18,11 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
   const { setReceiverPubKey } = useContext(ChatContext);
   const { chat } = useMappedStore();
 
+  const { data: directMessages } = useDirectMessagesQuery(contact.name);
+
   const lastMessage = useMemo(
-    () => getDirectLastMessage(contact.pubkey, chat.directMessages),
-    [chat.directMessages, contact]
+    () => getDirectLastMessage(directMessages),
+    [directMessages, contact]
   );
   const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index e63b6f2db3e..2f68df50b83 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -145,94 +145,6 @@ const MessageManager = () => {
     };
   }, [messageService, chat.profiles]);
 
-  //Direct message ahandle before sent
-  const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
-    data.map((m) => {
-      const { peer, id } = m;
-      setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-      addDirectMessages(peer, m);
-      checkDirectMessageSending(peer, m);
-    });
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(
-      MessageEvents.DirectMessageBeforeSent,
-      handleDirectMessageBeforeSent
-    );
-    messageService?.addListener(
-      MessageEvents.DirectMessageBeforeSent,
-      handleDirectMessageBeforeSent
-    );
-
-    return () => {
-      messageService?.removeListener(
-        MessageEvents.DirectMessageBeforeSent,
-        handleDirectMessageBeforeSent
-      );
-    };
-  }, [messageService, chat.directMessages]);
-
-  const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
-    setTimeout(() => {
-      verifyDirectMessageSending(peer, data);
-    }, 20000);
-  };
-
-  // Direct message handler after sent
-  const handleDirectMessageAfterSent = (data: DirectMessage[]) => {
-    if (isDirectChatCreated) {
-      data.forEach((message) => {
-        const { peer, id } = message;
-        if (replacedDirectMessagesBuffer.includes(id)) {
-          setReplacedDirectMessagesBuffer((prevBuffer) =>
-            prevBuffer.filter((messageId) => messageId !== id)
-          );
-          replaceDirectMessage(peer, message);
-        } else {
-          addDirectMessages(peer, message);
-        }
-      });
-    } else {
-      setDirectMessageBuffer((directMessageBuffer) => [...directMessageBuffer!, ...data]);
-    }
-    messageService?.checkProfiles(data.map((x) => x.peer));
-  };
-
-  const setDirectMessages = () => {
-    directMessageBuffer.forEach((obj) => {
-      const { peer } = obj;
-      const matchingStateItem = chat.directMessages.find((stateItem) => stateItem.peer === peer);
-      if (matchingStateItem) {
-        addDirectMessages(peer, obj);
-        setDirectMessageBuffer((prevMessageBuffer) =>
-          prevMessageBuffer.filter((message) => message.id !== obj.id)
-        );
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (directContacts?.length !== 0) {
-      setDirectMessages();
-    }
-  }, [directContacts, directMessageBuffer]);
-
-  useEffect(() => {
-    messageService?.removeListener(
-      MessageEvents.DirectMessageAfterSent,
-      handleDirectMessageAfterSent
-    );
-    messageService?.addListener(MessageEvents.DirectMessageAfterSent, handleDirectMessageAfterSent);
-
-    return () => {
-      messageService?.removeListener(
-        MessageEvents.DirectMessageAfterSent,
-        handleDirectMessageAfterSent
-      );
-    };
-  }, [messageService, chat.directMessages]);
-
   // Channel creation handler
   const handleChannelCreation = (data: Channel[]) => {
     addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
@@ -298,6 +210,7 @@ const MessageManager = () => {
 
   //Public Message handler after sent
   const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
+    console.log("data", data);
     if (isCommunityCreated) {
       data.forEach((message) => {
         const { root, id } = message;
@@ -422,14 +335,6 @@ const MessageManager = () => {
         MessageEvents.PublicMessageAfterSent,
         handlePublicMessageAfterSent
       );
-      messageService?.removeListener(
-        MessageEvents.DirectMessageBeforeSent,
-        handleDirectMessageBeforeSent
-      );
-      messageService?.removeListener(
-        MessageEvents.DirectMessageAfterSent,
-        handleDirectMessageAfterSent
-      );
     };
   }, [messageService]);
 
diff --git a/src/common/features/chats/queries/chat-profiles-query.ts b/src/common/features/chats/queries/chat-profiles-query.ts
new file mode 100644
index 00000000000..ea7fe71cd6a
--- /dev/null
+++ b/src/common/features/chats/queries/chat-profiles-query.ts
@@ -0,0 +1,18 @@
+import { useMessageListenerQuery } from "./message-listener-query";
+import { ChatQueries } from "./queries";
+import { MessageEvents } from "../../../helper/message-service";
+import { Profile } from "../managers/message-manager-types";
+
+export function useChatProfilesQuery() {
+  return useMessageListenerQuery<Profile[], ChatQueries[]>(
+    [ChatQueries.PROFILES],
+    MessageEvents.ProfileUpdate,
+    (_, nextData, resolver) => {
+      resolver(nextData);
+    },
+    {
+      initialData: [],
+      queryFn: () => []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/direct-messages-query.ts b/src/common/features/chats/queries/direct-messages-query.ts
new file mode 100644
index 00000000000..13287ea4cc0
--- /dev/null
+++ b/src/common/features/chats/queries/direct-messages-query.ts
@@ -0,0 +1,164 @@
+import { useContext, useMemo } from "react";
+import { ChatContext } from "../chat-context-provider";
+import { MessageEvents } from "../../../helper/message-service";
+import { useMessageListenerQuery } from "./message-listener-query";
+import { ChatQueries } from "./queries";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { DirectMessage, Message, PublicMessage } from "../managers/message-manager-types";
+import { useDirectContactsQuery } from "./direct-contacts-query";
+import isCommunity from "../../../helper/is-community";
+import { useChatProfilesQuery } from "./chat-profiles-query";
+
+export function useDirectMessagesQuery(username?: string) {
+  const { messageServiceInstance } = useContext(ChatContext);
+  const queryClient = useQueryClient();
+
+  const { data: directContacts } = useDirectContactsQuery();
+  const { data: profiles } = useChatProfilesQuery();
+
+  const contact = useMemo(
+    () => directContacts?.find((i) => i.name === username),
+    [directContacts, username]
+  );
+  const isPublic = useMemo(() => isCommunity(username ?? ""), [username]);
+
+  // const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
+  //   setTimeout(() => {
+  //     verifyDirectMessageSending(peer, data);
+  //   }, 20000);
+  // };
+  //
+  // const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
+  //   data.map((m) => {
+  //     const { peer, id } = m;
+  //     setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+  //     addDirectMessages(peer, m);
+  //     checkDirectMessageSending(peer, m);
+  //   });
+  // };
+  // });
+  // const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
+  //     data.map((m) => {
+  //       const { id, root } = m;
+  //       setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+  //       addPublicMessage(root, m);
+  //       checkPublicMessageSending(root, m);
+  //     });
+  //   };
+
+  // TODO: CONCACT MESSAGES AND CHECK FOR DUPLICATES
+  const onBeforeSent = (nextData: Message[] | undefined) => {
+    const nextMessages = [
+      ...(queryClient.getQueryData<Message[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? []),
+      ...(nextData?.filter((i) =>
+        !isPublic && "peer" in i ? i.peer === contact?.pubkey : i.root === contact?.pubkey
+      ) ?? [])
+    ];
+    queryClient.setQueryData([ChatQueries.DIRECT_MESSAGES, username], nextMessages);
+    queryClient.invalidateQueries([ChatQueries.DIRECT_MESSAGES, username]);
+  };
+
+  const onAfterSent = (nextData: Message[]) => {
+    const nextMessages = [
+      ...(queryClient.getQueryData<Message[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? []),
+      ...(nextData?.filter((i) =>
+        !isPublic && "peer" in i ? i.peer === contact?.pubkey : i.root === contact?.pubkey
+      ) ?? [])
+    ];
+    queryClient.setQueryData([ChatQueries.DIRECT_MESSAGES, username], nextMessages);
+    queryClient.invalidateQueries([ChatQueries.DIRECT_MESSAGES, username]);
+  };
+
+  useMessageListenerQuery<Message[], ChatQueries[]>(
+    [ChatQueries.BEFORE_DIRECT_MESSAGES_TEMP],
+    MessageEvents.DirectMessageBeforeSent,
+    (_, nextData, resolver) => {
+      onBeforeSent(nextData);
+      resolver(nextData);
+    },
+    {
+      queryFn: () => [],
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<DirectMessage[], ChatQueries[]>(
+    [ChatQueries.AFTER_DIRECT_MESSAGES_TEMP],
+    MessageEvents.DirectMessageAfterSent,
+    (_, nextData, resolver) => {
+      onAfterSent(nextData);
+      resolver(nextData);
+
+      messageServiceInstance?.checkProfiles(nextData.map((x) => x.peer));
+    },
+    {
+      queryFn: () => [],
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+    [ChatQueries.BEFORE_PUBLIC_MESSAGES_TEMP],
+    MessageEvents.PublicMessageBeforeSent,
+    (_, nextData, resolver) => {
+      onBeforeSent(nextData);
+      resolver(nextData);
+    },
+    {
+      queryFn: () => [],
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+    [ChatQueries.AFTER_PUBLIC_MESSAGES_TEMP],
+    MessageEvents.PublicMessageAfterSent,
+    (_, nextData, resolver) => {
+      onAfterSent(nextData);
+      resolver(nextData);
+
+      const uniqueUsers = nextData
+        .filter((message) => profiles?.find((profile) => profile.creator !== message.creator))
+        .reduce<Set<string>>((acc, next) => acc.add(next.creator), new Set());
+      messageServiceInstance?.loadProfiles(Array.from(uniqueUsers.values()));
+    },
+    {
+      queryFn: () => [],
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+    [ChatQueries.PREVIOUS_PUBLIC_MESSAGES],
+    MessageEvents.PreviousPublicMessages,
+    (_, nextData, resolver) => {
+      queryClient.setQueryData(
+        [ChatQueries.DIRECT_MESSAGES, username],
+        [
+          ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.DIRECT_MESSAGES]) ?? []),
+          ...(nextData ?? [])
+        ]
+      );
+
+      resolver(nextData);
+    },
+    {
+      queryFn: () => [],
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+
+  return useQuery<Message[]>(
+    [ChatQueries.DIRECT_MESSAGES, username],
+    () => queryClient.getQueryData<DirectMessage[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? [],
+    {
+      enabled: !!contact,
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 3173dc55d02..5f8a6323947 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -2,3 +2,5 @@ export * from "./search-users-query";
 export * from "./queries";
 export * from "./direct-contacts-query";
 export * from "./message-listener-query";
+export * from "./direct-messages-query";
+export * from "./chat-profiles-query";
diff --git a/src/common/features/chats/queries/message-listener-query.tsx b/src/common/features/chats/queries/message-listener-query.tsx
index ac15bfba565..2e2d5db22e7 100644
--- a/src/common/features/chats/queries/message-listener-query.tsx
+++ b/src/common/features/chats/queries/message-listener-query.tsx
@@ -1,15 +1,10 @@
-import {
-  QueryKey,
-  QueryObserverResult,
-  QueryOptions,
-  useQuery,
-  useQueryClient
-} from "@tanstack/react-query";
+import { QueryKey, QueryObserverResult, useQuery, useQueryClient } from "@tanstack/react-query";
 import React, { createContext, PropsWithChildren, useContext, useMemo } from "react";
 import { ChatContext } from "../chat-context-provider";
 import { MessageEvents } from "../../../helper/message-service";
 import useMap from "react-use/lib/useMap";
 import useDebounce from "react-use/lib/useDebounce";
+import { UseQueryOptions } from "@tanstack/react-query/src/types";
 
 export const MessageListenerQueriesContext = createContext<{
   subscribers: Record<string, boolean>;
@@ -37,14 +32,14 @@ export function MessageListenerQueriesProvider({ children }: PropsWithChildren<u
  * @param {TQKey} key - The key that identifies the query.
  * @param {MessageEvents} event - The message event to listen for.
  * @param {(data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void} queryFn - The function that processes the received data and updates the query.
- * @param {QueryOptions<TQData>} [queryOptions] - Additional query options.
+ * @param {UseQueryOptions<TQData>} [queryOptions] - Additional query options.
  * @returns {QueryObserverResult<TQData, unknown>} - The result of the query, including data and query status.
  */
 export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
   key: TQKey,
   event: MessageEvents,
   queryFn: (data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void,
-  queryOptions?: QueryOptions<TQData>
+  queryOptions?: UseQueryOptions<TQData>
 ): QueryObserverResult<TQData> {
   const { messageServiceInstance } = useContext(ChatContext);
   const { set, get } = useContext(MessageListenerQueriesContext);
@@ -66,8 +61,6 @@ export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
           return;
         }
 
-        console.log("fetching");
-
         messageServiceInstance.addListener(event, listener as any); // todo fix typings
         set(joinedKey, true);
       }
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 0a3002cccf9..b024aaebc56 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -2,5 +2,12 @@ export enum ChatQueries {
   SEARCH_USER = "search-user",
   PUBLIC_KEY = "public-key",
   PRIVATE_KEY = "private-key",
-  DIRECT_CONTACTS = "direct-contacts"
+  DIRECT_CONTACTS = "direct-contacts",
+  DIRECT_MESSAGES = "direct-messages",
+  BEFORE_DIRECT_MESSAGES_TEMP = "before-direct-messages-temp",
+  AFTER_DIRECT_MESSAGES_TEMP = "after-direct-messages-temp",
+  BEFORE_PUBLIC_MESSAGES_TEMP = "before-public-messages-temp",
+  AFTER_PUBLIC_MESSAGES_TEMP = "after-public-messages-temp",
+  PREVIOUS_PUBLIC_MESSAGES = "previous-public-messages",
+  PROFILES = "profiles"
 }
diff --git a/src/common/features/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
index 26cbbde59a8..3b74429c298 100644
--- a/src/common/features/chats/utils/use-get-direct-last-message.ts
+++ b/src/common/features/chats/utils/use-get-direct-last-message.ts
@@ -1,17 +1,7 @@
-import { directMessagesList } from "../../../store/chat/types";
+import { Message } from "../managers/message-manager-types";
 
-export const getDirectLastMessage = (pubkey: string, directMessages: directMessagesList[]) => {
-  const msgsList = fetchDirectMessages(pubkey, directMessages);
-  const messages = msgsList.sort((a, b) => a.created - b.created);
+export const getDirectLastMessage = (directMessages: Message[]) => {
+  const messages = directMessages.sort((a, b) => a.created - b.created);
   const lastMessage = messages.slice(-1);
   return lastMessage[0];
 };
-
-const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
-  for (const item of directMessages) {
-    if (item.peer === peer) {
-      return Object.values(item.chat);
-    }
-  }
-  return [];
-};
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index 01059ac2484..3df5282d855 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -38,23 +38,21 @@ import {
   updateNotificationsSettings
 } from "./notifications";
 import { setSigningKey } from "./signing-key";
-import { savePageScroll } from "./persistent-page-scroll";
 import {
-  addDirectContacts,
-  addDirectMessages,
-  resetChat,
   addChannels,
-  addPublicMessage,
-  addProfile,
+  addDirectMessages,
   addleftChannels,
-  UpdateChannels,
-  replacePublicMessage,
-  verifyPublicMessageSending,
+  addPreviousPublicMessages,
+  addProfile,
+  addPublicMessage,
+  deleteDirectMessage,
+  deletePublicMessage,
   replaceDirectMessage,
+  replacePublicMessage,
+  resetChat,
+  UpdateChannels,
   verifyDirectMessageSending,
-  deletePublicMessage,
-  deleteDirectMessage,
-  addPreviousPublicMessages
+  verifyPublicMessageSending
 } from "./chat";
 
 // @note Do not use it directly
@@ -101,7 +99,6 @@ export const ACTIONS = {
   updateNotificationsSettings,
   fetchNotificationsSettings,
   setNotificationsSettingsItem,
-  addDirectContacts,
   addDirectMessages,
   resetChat,
   addChannels,
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 3d9b6232c81..3bf18b2a776 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -16,8 +16,6 @@ import {
   Chat,
   DeleteDirectMessagesAction,
   DeletePublicMessagesAction,
-  DirectContactsAction,
-  DirectContactsType,
   DirectMessagesAction,
   LeftChannelsAction,
   ProfilesAction,
@@ -31,7 +29,6 @@ import {
 } from "./types";
 
 export const initialState: Chat = {
-  directContacts: [],
   directMessages: [],
   channels: [],
   publicMessages: [],
@@ -42,23 +39,6 @@ export const initialState: Chat = {
 
 export default (state: Chat = initialState, action: Actions): Chat => {
   switch (action.type) {
-    case ActionTypes.DIRECTCONTACTS: {
-      const { data } = action;
-      const uniqueDirectContacts = data.filter((contact) => {
-        return !state.directContacts.some((existingContact) => {
-          return existingContact.name === contact.name && existingContact.pubkey === contact.pubkey;
-        });
-      });
-
-      return {
-        ...state,
-        directContacts: [...state.directContacts, ...uniqueDirectContacts],
-        directMessages: [
-          ...state.directMessages,
-          ...uniqueDirectContacts.map((contact) => ({ chat: {}, peer: contact.pubkey }))
-        ]
-      };
-    }
     case ActionTypes.DIRECTMESSAGES: {
       const { peer, data } = action;
       return {
@@ -278,10 +258,6 @@ export default (state: Chat = initialState, action: Actions): Chat => {
 };
 
 /* Actions */
-export const addDirectContacts = (data: DirectContactsType[]) => (dispatch: Dispatch) => {
-  dispatch(addDirectContactsAct(data));
-};
-
 export const addDirectMessages = (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
   dispatch(addDirectMessagesAct(peer, data));
 };
@@ -345,13 +321,6 @@ export const addPreviousPublicMessages =
 
 /* Action Creators */
 
-export const addDirectContactsAct = (data: DirectContactsType[]): DirectContactsAction => {
-  return {
-    type: ActionTypes.DIRECTCONTACTS,
-    data
-  };
-};
-
 export const addDirectMessagesAct = (peer: string, data: DirectMessage): DirectMessagesAction => {
   return {
     type: ActionTypes.DIRECTMESSAGES,
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index a60f15b7f1d..ee30d127a19 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -23,7 +23,6 @@ export interface publicMessagesList {
 }
 
 export interface Chat {
-  directContacts: DirectContactsType[];
   directMessages: directMessagesList[];
   channels: Channel[];
   publicMessages: publicMessagesList[];

From 700231303eccaa54c02970d69d089b0001d03788 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 3 Nov 2023 22:10:07 +0600
Subject: [PATCH 110/179] Chats: updated queries for messages and last messages
 query

---
 .../features/chats/components/chat-input.tsx  |  1 -
 .../chats/components/chat-messages-view.tsx   | 40 ++++------
 .../components/chat-popup/chat-constants.ts   | 20 -----
 .../chat-popup/chat-popup-direct-messages.tsx |  7 +-
 .../chat-popup/chat-popup-messages-list.tsx   | 12 ++-
 .../chat-popup/chat-popup-search-user.tsx     |  8 +-
 .../chats/components/chat-popup/index.tsx     | 71 ++++-------------
 .../chat-sidebar-direct-contact.tsx           | 23 +++---
 src/common/features/chats/queries/Roadmap.md  | 23 ++++++
 .../chats/queries/direct-contacts-query.ts    | 34 +++++++-
 src/common/features/chats/queries/index.ts    |  2 +-
 .../features/chats/queries/keys-query.ts      | 16 ++--
 .../chats/queries/message-listener-query.tsx  |  1 +
 ...ct-messages-query.ts => messages-query.ts} | 77 +++++++++----------
 src/common/features/chats/queries/queries.ts  | 23 +++---
 15 files changed, 167 insertions(+), 191 deletions(-)
 create mode 100644 src/common/features/chats/queries/Roadmap.md
 rename src/common/features/chats/queries/{direct-messages-query.ts => messages-query.ts} (66%)

diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index f4d5b0e00f6..f35a4d1328d 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -26,7 +26,6 @@ interface Props {
   isCommunity: boolean;
   currentChannel: Channel;
   currentUser: string;
-  isCurrentUserJoined: boolean;
 }
 
 export default function ChatInput({
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 3b9e67d3fb3..55fb8f72a19 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { fetchCommunityMessages, fetchDirectMessages } from "../utils";
+import { fetchCommunityMessages } from "../utils";
 import { History } from "history";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsProfileBox from "./chat-profile-box";
@@ -12,7 +12,7 @@ import { CHATPAGE } from "./chat-popup/chat-constants";
 import { ChatContext } from "../chat-context-provider";
 import { classNameObject } from "../../../helper/class-name-object";
 import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
-import { useDirectContactsQuery } from "../queries";
+import { useMessagesQuery } from "../queries";
 
 interface Props {
   username: string;
@@ -32,14 +32,12 @@ export default function ChatsMessagesView({
   history
 }: Props) {
   const { messageServiceInstance } = useContext(ChatContext);
-  const { data: directContacts } = useDirectContactsQuery();
+  const { data: messages } = useMessagesQuery(username.replace("@", ""));
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
   const { chat } = useMappedStore();
   const [directUser, setDirectUser] = useState("");
-  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
-  const [directMessages, setDirectMessages] = useState<DirectMessage[]>([]);
   const [communityName, setCommunityName] = useState("");
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [isTop, setIsTop] = useState(false);
@@ -51,10 +49,10 @@ export default function ChatsMessagesView({
   }, []);
 
   useEffect(() => {
-    if (publicMessages.length < 25) {
+    if (messages.length < 25) {
       setHasMore(false);
     }
-  }, [publicMessages]);
+  }, [messages]);
 
   useEffect(() => {
     isDirectUserOrCommunity();
@@ -66,7 +64,7 @@ export default function ChatsMessagesView({
 
   useEffect(() => {
     if (directUser) {
-      getDirectMessages();
+      // getDirectMessages();
     } else if (communityName && currentChannel) {
       getChannelMessages();
     }
@@ -90,7 +88,7 @@ export default function ChatsMessagesView({
 
     setInProgress(true);
     messageServiceInstance
-      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
+      ?.fetchPrevMessages(currentChannel!.id, messages[0].created)
       .then((num) => {
         if (num < 25) {
           setHasMore(false);
@@ -120,17 +118,10 @@ export default function ChatsMessagesView({
         currentChannel.hiddenMessageIds
       );
       const messages = publicMessages.sort((a, b) => a.created - b.created);
-      setPublicMessages(messages);
+      // setPublicMessages(messages);
     }
   };
 
-  const getDirectMessages = () => {
-    const user = directContacts?.find((item) => item.name === directUser);
-    const messages = user && fetchDirectMessages(user?.pubkey, chat.directMessages);
-    const directMessages = messages?.sort((a, b) => a.created - b.created);
-    setDirectMessages(directMessages!);
-  };
-
   const scrollToBottom = () => {
     messagesBoxRef &&
       messagesBoxRef?.current?.scroll({
@@ -140,18 +131,14 @@ export default function ChatsMessagesView({
   };
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    var element = event.currentTarget;
+    const element = event.currentTarget;
     const isScrollToBottom =
       element.scrollTop + messagesBoxRef?.current?.clientHeight! < element.scrollHeight - 200;
     setIsScrollToBottom(isScrollToBottom);
     const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
     setIsScrolled(isScrolled);
-    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
-    if (communityName && scrollerTop) {
-      setIsTop(true);
-    } else {
-      setIsTop(false);
-    }
+    const scrollerTop = element.scrollTop <= 600 && messages.length > 25;
+    setIsTop(!!communityName && scrollerTop);
   };
 
   return (
@@ -176,7 +163,7 @@ export default function ChatsMessagesView({
             <ChatsChannelMessages
               username={username}
               history={history}
-              publicMessages={publicMessages}
+              publicMessages={messages as PublicMessage[]}
               currentChannel={currentChannel!}
               isScrollToBottom={isScrollToBottom}
               from={CHATPAGE}
@@ -187,7 +174,7 @@ export default function ChatsMessagesView({
           </>
         ) : (
           <ChatsDirectMessages
-            directMessages={directMessages}
+            directMessages={messages as DirectMessage[]}
             currentUser={directUser!}
             isScrolled={isScrolled}
             isScrollToBottom={isScrollToBottom}
@@ -210,7 +197,6 @@ export default function ChatsMessagesView({
           isCommunity={!!communityName}
           currentUser={directUser}
           currentChannel={currentChannel!}
-          isCurrentUserJoined={true}
         />
       </div>
     </>
diff --git a/src/common/features/chats/components/chat-popup/chat-constants.ts b/src/common/features/chats/components/chat-popup/chat-constants.ts
index 2e0ff4d8312..987d0902838 100644
--- a/src/common/features/chats/components/chat-popup/chat-constants.ts
+++ b/src/common/features/chats/components/chat-popup/chat-constants.ts
@@ -1,23 +1,3 @@
-export const EmojiPickerStyle = {
-  width: "94%",
-  bottom: "58px",
-  left: "0px",
-  marginLeft: "14px",
-  borderTopLeftRadius: "8px",
-  borderTopRightRadius: "8px",
-  borderBottomLeftRadius: "0px"
-};
-
-export const GifPickerStyle = {
-  width: "94%",
-  bottom: "49px",
-  left: 0,
-  marginLeft: "14px",
-  borderTopLeftRadius: "8px",
-  borderTopRightRadius: "8px",
-  borderBottomLeftRadius: "0px"
-};
-
 export const DropDownStyle = {
   width: "35px",
   height: "35px"
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index d00a348f9a6..71bfb68c06c 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -1,13 +1,13 @@
 import React, { useContext, useEffect, useState } from "react";
 import { _t } from "../../../../i18n";
-import { getCommunityLastMessage, getDirectLastMessage, getJoinedCommunities } from "../../utils";
+import { getCommunityLastMessage, getJoinedCommunities } from "../../utils";
 import ImportChats from "../import-chats";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectMessage } from "./chat-direct-message";
-import { useDirectContactsQuery } from "../../queries";
+import { useDirectContactsLastMessagesQuery, useDirectContactsQuery } from "../../queries";
 import { Channel } from "../../managers/message-manager-types";
 
 interface Props {
@@ -27,6 +27,7 @@ export function ChatPopupDirectMessages({
   const { activeUserKeys, showSpinner } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
+  const { data: directContactsLastMessages } = useDirectContactsLastMessagesQuery();
 
   const [communities, setCommunities] = useState<Channel[]>([]);
 
@@ -63,7 +64,7 @@ export function ChatPopupDirectMessages({
                 userClicked(v);
               }}
               key={user.pubkey}
-              lastMessage={getDirectLastMessage(user.pubkey, chat.directMessages)?.content}
+              lastMessage={directContactsLastMessages[user.name]?.content}
             />
           ))}
         </>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index f4948ea990a..b6ae2f437b1 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -7,6 +7,7 @@ import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import { Community } from "../../../../store/communities";
 import { DirectMessage, PublicMessage } from "../../managers/message-manager-types";
+import { useMessagesQuery } from "../../queries";
 
 interface Props {
   isCurrentUser: boolean;
@@ -14,8 +15,6 @@ interface Props {
   isCommunity: boolean;
   communityName: string;
   currentCommunity?: Community;
-  directMessagesList: DirectMessage[];
-  publicMessages: PublicMessage[];
 }
 
 export function ChatPopupMessagesList({
@@ -23,11 +22,10 @@ export function ChatPopupMessagesList({
   currentUser,
   isCurrentUser,
   currentCommunity,
-  communityName,
-  directMessagesList,
-  publicMessages
+  communityName
 }: Props) {
   const { currentChannel, setCurrentChannel } = useContext(ChatContext);
+  const { data: messages } = useMessagesQuery(currentUser);
 
   return (
     <div className="chats">
@@ -50,7 +48,7 @@ export function ChatPopupMessagesList({
       </Link>
       {isCurrentUser ? (
         <ChatsDirectMessages
-          directMessages={directMessagesList}
+          directMessages={messages as DirectMessage[]}
           currentUser={currentUser}
           isScrollToBottom={false}
         />
@@ -58,7 +56,7 @@ export function ChatPopupMessagesList({
         <ChatsChannelMessages
           history={history!}
           username={communityName}
-          publicMessages={publicMessages}
+          publicMessages={messages as PublicMessage[]}
           currentChannel={currentChannel!}
           isScrollToBottom={false}
           currentChannelSetter={setCurrentChannel}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
index d4653c183aa..4a49339dedb 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
@@ -9,10 +9,9 @@ import { Spinner } from "@ui/spinner";
 
 interface Props {
   setCurrentUser: (v: string) => void;
-  setIsCurrentUser: (v: boolean) => void;
 }
 
-export function ChatPopupSearchUser({ setCurrentUser, setIsCurrentUser }: Props) {
+export function ChatPopupSearchUser({ setCurrentUser }: Props) {
   const [search, setSearch] = useState("");
   const { data, isLoading, refetch } = useSearchUsersQuery(search);
 
@@ -39,10 +38,7 @@ export function ChatPopupSearchUser({ setCurrentUser, setIsCurrentUser }: Props)
             <div
               key={index}
               className="search-content"
-              onClick={() => {
-                setCurrentUser(user.account);
-                setIsCurrentUser(true);
-              }}
+              onClick={() => setCurrentUser(user.account)}
             >
               <div className="search-user-img">
                 <span>
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index c8cf079f546..8ce72861240 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -41,7 +41,7 @@ export const ChatPopUp = () => {
     setRevealPrivKey,
     setShowSpinner
   } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
+  const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
   const { data: directContacts } = useDirectContactsQuery();
 
   const routerLocation = useLocation();
@@ -50,25 +50,22 @@ export const ChatPopUp = () => {
 
   const [expanded, setExpanded] = useState(false);
   const [currentUser, setCurrentUser] = useState("");
-  const [isCurrentUser, setIsCurrentUser] = useState(false);
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [isSpinner, setIsSpinner] = useState(false);
   const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
-  const [isCurrentUserJoined, setIsCurrentUserJoined] = useState(true);
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
   const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  const [isChatPage, setIsChatPage] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
   const canSendMessage = useMemo(
     () =>
       !currentUser && hasUserJoinedChat && !!activeUserKeys?.priv && !isCommunity && !revealPrivKey,
@@ -76,10 +73,15 @@ export const ChatPopUp = () => {
   );
 
   useMount(() => {
-    // deleteChatPublicKey(activeUser);
-    setShow(!!activeUser?.username && !isChatPage);
+    setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   });
 
+  // Show or hide the popup if current pathname was changed or user changed
+  useEffect(() => {
+    setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
+  }, [routerLocation, activeUser]);
+
+  // todo: ??
   useEffect(() => {
     if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
       setIsCommunity(false);
@@ -87,16 +89,7 @@ export const ChatPopUp = () => {
     }
   }, [chat.leftChannelsList]);
 
-  useEffect(() => {
-    handleRouterChange();
-  }, [routerLocation]);
-
-  useEffect(() => {
-    if (isChatPage) {
-      setShow(false);
-    }
-  }, [isChatPage]);
-
+  // todo ???
   useEffect(() => {
     const updated: ChannelUpdate = chat.updatedChannel
       .filter((x) => x.channelId === currentChannel?.id!)
@@ -125,18 +118,13 @@ export const ChatPopUp = () => {
     }
   }, [chat.updatedChannel]);
 
+  // Fetching previous messages when scrol achieved top
   useEffect(() => {
     if (isTop) {
       fetchPrevMessages();
     }
   }, [isTop]);
 
-  useEffect(() => {
-    if (messageServiceInstance) {
-      setIsSpinner(false);
-    }
-  }, [messageServiceInstance]);
-
   useEffect(() => {
     const msgsList = fetchDirectMessages(receiverPubKey!);
     const messages = msgsList.sort((a, b) => a.created - b.created);
@@ -146,7 +134,6 @@ export const ChatPopUp = () => {
   useEffect(() => {
     if (prevActiveUser?.username !== activeUser?.username) {
       setIsCommunity(false);
-      setIsCurrentUser(false);
       setCurrentUser("");
       setCommunityName("");
     }
@@ -200,7 +187,6 @@ export const ChatPopUp = () => {
       const isCurrentUserFound = directContacts?.find((contact) => contact.name === currentUser);
       if (isCurrentUserFound) {
         setReceiverPubKey(isCurrentUserFound.pubkey);
-        setIsCurrentUserJoined(true);
       } else {
         setInProgress(true);
         fetchCurrentUserData();
@@ -214,20 +200,10 @@ export const ChatPopUp = () => {
         setNostrkeys(activeUserKeys!);
       }
     } else {
-      setIsCurrentUserJoined(true);
       setInProgress(false);
     }
   }, [currentUser]);
 
-  const handleRouterChange = () => {
-    if (routerLocation.pathname.match("/chats")) {
-      setShow(false);
-      setIsChatPage(true);
-    } else {
-      setShow(!!activeUser?.username);
-    }
-  };
-
   const fetchCommunity = async () => {
     const community = await getCommunity(communityName, activeUser?.username);
     setCurrentCommunity(community!);
@@ -275,19 +251,14 @@ export const ChatPopUp = () => {
     } else {
       setReceiverPubKey("");
     }
-    setIsCurrentUserJoined(!!nsKey);
     setInProgress(false);
   };
 
-  const userClicked = (username: string) => {
-    setIsCurrentUser(true);
-    setCurrentUser(username);
-  };
-
   const fetchPrevMessages = () => {
     if (!hasMore || inProgress) return;
 
     setInProgress(true);
+    // todo: make it infinite query
     messageServiceInstance
       ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
       .then((num) => {
@@ -356,7 +327,6 @@ export const ChatPopUp = () => {
 
   const handleBackArrowSvg = () => {
     setCurrentUser("");
-    setIsCurrentUser(false);
     setCommunityName("");
     setIsCommunity(false);
     setShowSearchUser(false);
@@ -414,20 +384,15 @@ export const ChatPopUp = () => {
                     currentUser={currentUser}
                     isCommunity={isCommunity}
                     communityName={communityName}
-                    directMessagesList={directMessagesList}
-                    publicMessages={publicMessages}
                   />
                 ) : showSearchUser ? (
-                  <ChatPopupSearchUser
-                    setCurrentUser={setCurrentUser}
-                    setIsCurrentUser={setIsCurrentUser}
-                  />
+                  <ChatPopupSearchUser setCurrentUser={setCurrentUser} />
                 ) : (
                   <ChatPopupDirectMessages
                     communityClicked={communityClicked}
                     setReceiverPubKey={setReceiverPubKey}
                     setShowSearchUser={setShowSearchUser}
-                    userClicked={userClicked}
+                    userClicked={(username) => setCurrentUser(username)}
                   />
                 )}
               </>
@@ -438,11 +403,8 @@ export const ChatPopUp = () => {
             ) : (
               <Button
                 className="join-chat-btn"
-                onClick={() => {
-                  setIsSpinner(true);
-                  joinChat();
-                }}
-                icon={isSpinner ? <Spinner style={{ marginRight: "6px" }} /> : undefined}
+                onClick={() => joinChat()}
+                icon={isJoinChatLoading && <Spinner className="w-3.5 h-3.5" />}
                 iconPlacement="left"
               >
                 {_t("chat.join-chat")}
@@ -473,7 +435,6 @@ export const ChatPopUp = () => {
                 isCommunity={isCommunity}
                 currentUser={currentUser}
                 currentChannel={currentChannel!}
-                isCurrentUserJoined={isCurrentUserJoined}
               />
             )}
           </div>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 71c0e3301b6..c8bbcf180b4 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -1,12 +1,11 @@
-import { getDirectLastMessage, getRelativeDate } from "../../utils";
+import { getRelativeDate } from "../../utils";
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
-import { useMappedStore } from "../../../../store/use-mapped-store";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { DirectContact } from "../../managers/message-manager-types";
-import { useDirectMessagesQuery } from "../../queries";
+import { useDirectContactsLastMessagesQuery } from "../../queries";
 
 interface Props {
   contact: DirectContact;
@@ -16,22 +15,20 @@ interface Props {
 
 export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKey }: Props) {
   const { setReceiverPubKey } = useContext(ChatContext);
-  const { chat } = useMappedStore();
 
-  const { data: directMessages } = useDirectMessagesQuery(contact.name);
-
-  const lastMessage = useMemo(
-    () => getDirectLastMessage(directMessages),
-    [directMessages, contact]
+  const { data: directMessagesLastMessages } = useDirectContactsLastMessagesQuery();
+  const rawUsername = useMemo(() => username.replace("@", ""), [username]);
+  const lastMessageDate = useMemo(
+    () => getRelativeDate(directMessagesLastMessages[contact.name]?.created),
+    [directMessagesLastMessages]
   );
-  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
   return (
     <Link
       className={classNameObject({
         "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
           true,
-        "bg-gray-100 dark:bg-gray-800": username === `@${contact.name}`
+        "bg-gray-100 dark:bg-gray-800": rawUsername === contact.name
       })}
       to={`/chats/@${contact.name}`}
       onClick={() => {
@@ -45,7 +42,9 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
           <div className="font-semibold truncate dark:text-white">{contact.name}</div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
-        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
+        <div className="text-sm text-gray-600 truncate">
+          {directMessagesLastMessages[contact.name]?.content}
+        </div>
       </div>
     </Link>
   );
diff --git a/src/common/features/chats/queries/Roadmap.md b/src/common/features/chats/queries/Roadmap.md
new file mode 100644
index 00000000000..5d7993238f2
--- /dev/null
+++ b/src/common/features/chats/queries/Roadmap.md
@@ -0,0 +1,23 @@
+# How Chat queries and mutations works
+
+## Queries
+
+### General
+
+- **Fetching the key pairs from stores properly**
+
+  It will allow us to start all queries based on the chat authorization
+
+  This query opens next ones:
+
+  1. **Fetching direct contacts**
+
+     It will allow us to fetch their last
+
+  2. **Fetching last messages**
+     1. Fetching direct contacts last messages
+     2. Aggregate messages by users and fetching them by username properly
+
+- **Searching users**
+
+  This query doesn't require keys because it will search over Ecency
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index ea88342a7fa..aeed2244ae7 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -1,9 +1,16 @@
 import { ChatQueries } from "./queries";
 import { MessageEvents } from "../../../helper/message-service";
-import { DirectContact } from "../managers/message-manager-types";
+import { DirectContact, Message } from "../managers/message-manager-types";
 import { useMessageListenerQuery } from "./message-listener-query";
+import { useQuery } from "@tanstack/react-query";
+import isCommunity from "../../../helper/is-community";
+import { useMessagesQuery } from "./messages-query";
+import { getDirectLastMessage } from "../utils";
+import { useKeysQuery } from "./keys-query";
 
 export function useDirectContactsQuery() {
+  const { hasKeys } = useKeysQuery();
+
   return useMessageListenerQuery<DirectContact[], ChatQueries[]>(
     [ChatQueries.DIRECT_CONTACTS],
     MessageEvents.DirectContact,
@@ -20,7 +27,30 @@ export function useDirectContactsQuery() {
       }
     },
     {
-      initialData: []
+      initialData: [],
+      enabled: hasKeys
+    }
+  );
+}
+
+export function useDirectContactsLastMessagesQuery() {
+  const { data: contacts } = useDirectContactsQuery();
+  const { data: messages } = useMessagesQuery("all");
+
+  return useQuery<Record<string, Message>>(
+    [ChatQueries.DIRECT_CONTACTS_LAST_MESSAGES],
+    async () =>
+      (contacts ?? []).reduce<Record<string, Message>>((acc, current) => {
+        const currentMessages = messages.filter((i) =>
+          !isCommunity(current.name) && "peer" in i
+            ? i.peer === current?.pubkey
+            : i.root === current?.pubkey
+        );
+        return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
+      }, {}),
+    {
+      initialData: {},
+      enabled: (contacts?.length ?? 0) > 0 && messages.length > 0
     }
   );
 }
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 5f8a6323947..99b8b717386 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -2,5 +2,5 @@ export * from "./search-users-query";
 export * from "./queries";
 export * from "./direct-contacts-query";
 export * from "./message-listener-query";
-export * from "./direct-messages-query";
+export * from "./messages-query";
 export * from "./chat-profiles-query";
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 90809aabbe7..5f47708b24d 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -3,6 +3,7 @@ import { ChatQueries } from "./queries";
 import { getPrivateKey, getUserChatPublicKey } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { NostrKeysType } from "../types";
+import { useMemo } from "react";
 
 /**
  * Custom React hook for managing queries related to a user's public and private keys in a chat application.
@@ -16,8 +17,8 @@ import { NostrKeysType } from "../types";
  *   - refetch: A function to manually trigger a refetch of the public and private keys.
  */
 export function useKeysQuery(
-  activeUserKeys: NostrKeysType,
-  setActiveUserKeys: (keys: NostrKeysType) => void
+  activeUserKeys?: NostrKeysType,
+  setActiveUserKeys?: (keys: Partial<NostrKeysType>) => void
 ) {
   const { activeUser } = useMappedStore();
 
@@ -31,8 +32,8 @@ export function useKeysQuery(
         queryFn: () => getUserChatPublicKey(activeUser?.username!),
         onSuccess: (key: string | null) => {
           if (key) {
-            setActiveUserKeys({
-              ...activeUserKeys,
+            setActiveUserKeys?.({
+              ...(activeUserKeys ?? {}),
               pub: key
             });
           }
@@ -43,8 +44,8 @@ export function useKeysQuery(
         queryFn: () => getPrivateKey(activeUser?.username!),
         onSuccess: (key: string | null) => {
           if (key) {
-            setActiveUserKeys({
-              ...activeUserKeys,
+            setActiveUserKeys?.({
+              ...(activeUserKeys ?? {}),
               priv: key
             });
           }
@@ -53,9 +54,12 @@ export function useKeysQuery(
     ]
   });
 
+  const hasKeys = useMemo(() => !!publicKey && !!privateKey, [publicKey, privateKey]);
+
   return {
     publicKey,
     privateKey,
+    hasKeys,
     refetch: () => {
       refetchPublicKey();
       refetchPrivateKey();
diff --git a/src/common/features/chats/queries/message-listener-query.tsx b/src/common/features/chats/queries/message-listener-query.tsx
index 2e2d5db22e7..5712c3205c5 100644
--- a/src/common/features/chats/queries/message-listener-query.tsx
+++ b/src/common/features/chats/queries/message-listener-query.tsx
@@ -51,6 +51,7 @@ export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
 
   const listener = (nextData: TQData) => {
     const resolver = (data: TQData) => queryClient.setQueryData(key, data);
+    queryClient.invalidateQueries(key);
     queryFn(query.data!!, nextData, resolver);
   };
 
diff --git a/src/common/features/chats/queries/direct-messages-query.ts b/src/common/features/chats/queries/messages-query.ts
similarity index 66%
rename from src/common/features/chats/queries/direct-messages-query.ts
rename to src/common/features/chats/queries/messages-query.ts
index 13287ea4cc0..21d3e02a1cc 100644
--- a/src/common/features/chats/queries/direct-messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -9,18 +9,14 @@ import { useDirectContactsQuery } from "./direct-contacts-query";
 import isCommunity from "../../../helper/is-community";
 import { useChatProfilesQuery } from "./chat-profiles-query";
 
-export function useDirectMessagesQuery(username?: string) {
+export function useMessagesQuery(username?: string) {
   const { messageServiceInstance } = useContext(ChatContext);
   const queryClient = useQueryClient();
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: profiles } = useChatProfilesQuery();
 
-  const contact = useMemo(
-    () => directContacts?.find((i) => i.name === username),
-    [directContacts, username]
-  );
-  const isPublic = useMemo(() => isCommunity(username ?? ""), [username]);
+  const hasContacts = useMemo(() => (directContacts?.length ?? 0) > 0, [directContacts]);
 
   // const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
   //   setTimeout(() => {
@@ -46,39 +42,38 @@ export function useDirectMessagesQuery(username?: string) {
   //     });
   //   };
 
-  // TODO: CONCACT MESSAGES AND CHECK FOR DUPLICATES
-  const onBeforeSent = (nextData: Message[] | undefined) => {
-    const nextMessages = [
-      ...(queryClient.getQueryData<Message[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? []),
-      ...(nextData?.filter((i) =>
-        !isPublic && "peer" in i ? i.peer === contact?.pubkey : i.root === contact?.pubkey
-      ) ?? [])
+  const updateQueries = (nextData: Message[] | undefined) => {
+    let nextMessages: Message[] = [
+      ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.MESSAGES]) ?? []),
+      ...(nextData ?? [])
     ];
-    queryClient.setQueryData([ChatQueries.DIRECT_MESSAGES, username], nextMessages);
-    queryClient.invalidateQueries([ChatQueries.DIRECT_MESSAGES, username]);
-  };
 
-  const onAfterSent = (nextData: Message[]) => {
-    const nextMessages = [
-      ...(queryClient.getQueryData<Message[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? []),
-      ...(nextData?.filter((i) =>
-        !isPublic && "peer" in i ? i.peer === contact?.pubkey : i.root === contact?.pubkey
-      ) ?? [])
-    ];
-    queryClient.setQueryData([ChatQueries.DIRECT_MESSAGES, username], nextMessages);
-    queryClient.invalidateQueries([ChatQueries.DIRECT_MESSAGES, username]);
+    directContacts?.forEach((contact) => {
+      queryClient.setQueryData(
+        [ChatQueries.MESSAGES, contact.name],
+        nextMessages.filter((i) =>
+          !isCommunity(contact.name) && "peer" in i
+            ? i.peer === contact?.pubkey
+            : i.root === contact?.pubkey
+        ) ?? []
+      );
+      queryClient.invalidateQueries([ChatQueries.MESSAGES, contact.name]);
+    });
+
+    queryClient.setQueryData([ChatQueries.MESSAGES, "all"], nextMessages);
+    queryClient.invalidateQueries([ChatQueries.MESSAGES, "all"]);
   };
 
   useMessageListenerQuery<Message[], ChatQueries[]>(
     [ChatQueries.BEFORE_DIRECT_MESSAGES_TEMP],
     MessageEvents.DirectMessageBeforeSent,
     (_, nextData, resolver) => {
-      onBeforeSent(nextData);
+      updateQueries(nextData);
       resolver(nextData);
     },
     {
       queryFn: () => [],
-      enabled: !!contact,
+      enabled: hasContacts,
       initialData: []
     }
   );
@@ -87,14 +82,14 @@ export function useDirectMessagesQuery(username?: string) {
     [ChatQueries.AFTER_DIRECT_MESSAGES_TEMP],
     MessageEvents.DirectMessageAfterSent,
     (_, nextData, resolver) => {
-      onAfterSent(nextData);
+      updateQueries(nextData);
       resolver(nextData);
 
       messageServiceInstance?.checkProfiles(nextData.map((x) => x.peer));
     },
     {
       queryFn: () => [],
-      enabled: !!contact,
+      enabled: hasContacts,
       initialData: []
     }
   );
@@ -103,12 +98,12 @@ export function useDirectMessagesQuery(username?: string) {
     [ChatQueries.BEFORE_PUBLIC_MESSAGES_TEMP],
     MessageEvents.PublicMessageBeforeSent,
     (_, nextData, resolver) => {
-      onBeforeSent(nextData);
+      updateQueries(nextData);
       resolver(nextData);
     },
     {
       queryFn: () => [],
-      enabled: !!contact,
+      enabled: hasContacts,
       initialData: []
     }
   );
@@ -117,7 +112,7 @@ export function useDirectMessagesQuery(username?: string) {
     [ChatQueries.AFTER_PUBLIC_MESSAGES_TEMP],
     MessageEvents.PublicMessageAfterSent,
     (_, nextData, resolver) => {
-      onAfterSent(nextData);
+      updateQueries(nextData);
       resolver(nextData);
 
       const uniqueUsers = nextData
@@ -127,7 +122,7 @@ export function useDirectMessagesQuery(username?: string) {
     },
     {
       queryFn: () => [],
-      enabled: !!contact,
+      enabled: hasContacts,
       initialData: []
     }
   );
@@ -137,28 +132,30 @@ export function useDirectMessagesQuery(username?: string) {
     MessageEvents.PreviousPublicMessages,
     (_, nextData, resolver) => {
       queryClient.setQueryData(
-        [ChatQueries.DIRECT_MESSAGES, username],
+        [ChatQueries.MESSAGES, username],
         [
-          ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.DIRECT_MESSAGES]) ?? []),
+          ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.MESSAGES, username]) ?? []),
           ...(nextData ?? [])
         ]
       );
+      queryClient.invalidateQueries([ChatQueries.MESSAGES, username]);
 
       resolver(nextData);
     },
     {
       queryFn: () => [],
-      enabled: !!contact,
+      enabled: hasContacts,
       initialData: []
     }
   );
 
   return useQuery<Message[]>(
-    [ChatQueries.DIRECT_MESSAGES, username],
-    () => queryClient.getQueryData<DirectMessage[]>([ChatQueries.DIRECT_MESSAGES, username]) ?? [],
+    [ChatQueries.MESSAGES, username],
+    () => queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? [],
     {
-      enabled: !!contact,
-      initialData: []
+      enabled: hasContacts,
+      initialData: [],
+      select: (data) => [...data]?.sort((a, b) => a.created - b.created)
     }
   );
 }
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index b024aaebc56..9f5460ef791 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -1,13 +1,14 @@
 export enum ChatQueries {
-  SEARCH_USER = "search-user",
-  PUBLIC_KEY = "public-key",
-  PRIVATE_KEY = "private-key",
-  DIRECT_CONTACTS = "direct-contacts",
-  DIRECT_MESSAGES = "direct-messages",
-  BEFORE_DIRECT_MESSAGES_TEMP = "before-direct-messages-temp",
-  AFTER_DIRECT_MESSAGES_TEMP = "after-direct-messages-temp",
-  BEFORE_PUBLIC_MESSAGES_TEMP = "before-public-messages-temp",
-  AFTER_PUBLIC_MESSAGES_TEMP = "after-public-messages-temp",
-  PREVIOUS_PUBLIC_MESSAGES = "previous-public-messages",
-  PROFILES = "profiles"
+  SEARCH_USER = "chats/search-user",
+  PUBLIC_KEY = "chats/public-key",
+  PRIVATE_KEY = "chats/private-key",
+  DIRECT_CONTACTS = "chats/direct-contacts",
+  DIRECT_CONTACTS_LAST_MESSAGES = "chats/direct-contacts-last-messages",
+  MESSAGES = "chats/messages",
+  BEFORE_DIRECT_MESSAGES_TEMP = "chats/before-direct-messages-temp",
+  AFTER_DIRECT_MESSAGES_TEMP = "chats/after-direct-messages-temp",
+  BEFORE_PUBLIC_MESSAGES_TEMP = "chats/before-public-messages-temp",
+  AFTER_PUBLIC_MESSAGES_TEMP = "chats/after-public-messages-temp",
+  PREVIOUS_PUBLIC_MESSAGES = "chats/previous-public-messages",
+  PROFILES = "chats/profiles"
 }

From 1b83d9280650832dd86bc20211612c2879cd9efd Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 5 Nov 2023 23:30:54 +0600
Subject: [PATCH 111/179] Chats: added channels query

---
 .../features/chats/components/chat-input.tsx  |  58 ++--
 .../chats/components/chat-message-box.tsx     |   1 +
 .../chats/components/chat-message-item.tsx    |  87 ++++++
 .../chats/components/chat-popup/index.tsx     |   4 +-
 .../chats-channel-messages/index.tsx          | 173 +-----------
 .../chats-direct-messages/index.scss          | 253 +-----------------
 .../chats-direct-messages/index.tsx           | 130 +--------
 .../chat-sidebar-direct-contact.tsx           |   2 +-
 .../chats/managers/message-manager.tsx        |  47 ----
 src/common/features/chats/mutations/index.ts  |   2 +
 .../features/chats/mutations/join-chat.ts     |   2 +-
 .../features/chats/mutations/send-message.ts  |  48 ++++
 src/common/features/chats/mutations/upload.ts |   9 +-
 .../features/chats/queries/channels-query.ts  |  44 +++
 src/common/features/chats/queries/index.ts    |   1 +
 src/common/features/chats/queries/queries.ts  |   3 +-
 src/common/i18n/locales/en-US.json            |   4 +-
 17 files changed, 228 insertions(+), 640 deletions(-)
 create mode 100644 src/common/features/chats/components/chat-message-item.tsx
 create mode 100644 src/common/features/chats/mutations/send-message.ts
 create mode 100644 src/common/features/chats/queries/channels-query.ts

diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index f35a4d1328d..044d140a7f6 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { EmojiPicker } from "../../../components/emoji-picker";
-import { error } from "../../../components/feedback";
 import {
   attachFileSvg,
   chatBoxImageSvg,
@@ -8,18 +7,19 @@ import {
   gifIcon,
   messageSendSvg
 } from "../../../img/svg";
-import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle, UPLOADING } from "./chat-popup/chat-constants";
+import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle } from "./chat-popup/chat-constants";
 import { _t } from "../../../i18n";
 import { ChatContext } from "../chat-context-provider";
 import { Form } from "@ui/form";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
-import { useChatFileUpload } from "../mutations";
+import { useChatFileUpload, useSendMessage } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import GifPicker from "../../../components/gif-picker";
 import useClickAway from "react-use/lib/useClickAway";
-import { useDirectContactsQuery } from "../queries";
 import { Channel } from "../managers/message-manager-types";
+import { Spinner } from "@ui/spinner";
+import { useChannelsQuery } from "../queries";
 
 interface Props {
   isCurrentUser: boolean;
@@ -34,18 +34,25 @@ export default function ChatInput({
   currentChannel,
   currentUser
 }: Props) {
+  useChannelsQuery();
+
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
-  const { data: directContacts } = useDirectContactsQuery();
   const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
   const [showGifPicker, setShowGifPicker] = useState(false);
-  const [isMessageText, setIsMessageText] = useState(false);
 
-  const { mutateAsync } = useChatFileUpload(setMessage, setIsMessageText);
+  const { mutateAsync: upload } = useChatFileUpload(setMessage);
+  const { mutateAsync: sendMessage, isLoading: isSendMessageLoading } = useSendMessage(
+    currentChannel,
+    currentUser,
+    () => {
+      setMessage("");
+    }
+  );
 
   const isDisabled = useMemo(
     () => (isCurrentUser && !receiverPubKey) || isActiveUserRemoved,
@@ -60,30 +67,6 @@ export default function ChatInput({
     }
   }, [isCommunity, isCurrentUser]);
 
-  const sendMessage = () => {
-    if (message.length !== 0 && !message.includes(UPLOADING)) {
-      if (isCommunity) {
-        if (!isActiveUserRemoved) {
-          messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
-        } else {
-          error(_t("chat.message-warning"));
-        }
-      }
-      if (isCurrentUser) {
-        messageServiceInstance?.sendDirectMessage(receiverPubKey!, message);
-      }
-      setMessage("");
-      setIsMessageText(false);
-    }
-    if (
-      receiverPubKey &&
-      !directContacts?.some((contact) => contact.name === currentUser) &&
-      isCurrentUser
-    ) {
-      messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
-    }
-  };
-
   const checkFile = (filename: string) => {
     const filenameLow = filename.toLowerCase();
     return CHAT_FILE_CONTENT_TYPES.some((el) => filenameLow.endsWith(el));
@@ -97,7 +80,7 @@ export default function ChatInput({
       e.preventDefault();
     }
 
-    files.forEach((file) => mutateAsync(file));
+    files.forEach((file) => upload(file));
 
     // reset input
     e.target.value = "";
@@ -132,7 +115,7 @@ export default function ChatInput({
         onSubmit={(e: React.FormEvent) => {
           e.preventDefault();
           e.stopPropagation();
-          sendMessage();
+          sendMessage(message);
         }}
         className="w-full flex items-center gap-2 p-2"
       >
@@ -158,13 +141,12 @@ export default function ChatInput({
           autoFocus={true}
           onChange={(e) => {
             setMessage(e.target.value);
-            setIsMessageText(e.target.value.length !== 0);
           }}
           required={true}
           type="text"
           placeholder={_t("chat.start-chat-placeholder")}
           autoComplete="off"
-          disabled={isDisabled}
+          disabled={isDisabled || isSendMessageLoading}
         />
         <div className="flex items-center px-2 h-full gap-3">
           <div className="relative">
@@ -184,9 +166,9 @@ export default function ChatInput({
           <Button
             noPadding={true}
             appearance="gray-link"
-            icon={messageSendSvg}
-            disabled={isDisabled}
-            onClick={sendMessage}
+            icon={isSendMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : messageSendSvg}
+            disabled={isDisabled || isSendMessageLoading}
+            onClick={() => sendMessage(message)}
           />
         </div>
       </Form>
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 13041102606..4243ea8f096 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -79,6 +79,7 @@ export default function ChatsMessagesBox(props: Props) {
     checkUserCommunityMembership();
   }, [updatedChannel, username, channels]);
 
+  // TODO: MAKE QUERY
   const fetchCurrentChannel = (communityName: string) => {
     const channel = channels.find((channel) => channel.communityName === communityName);
     if (channel) {
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
new file mode 100644
index 00000000000..2011d1a5bb6
--- /dev/null
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -0,0 +1,87 @@
+import { Message } from "../managers/message-manager-types";
+import Tooltip from "../../../components/tooltip";
+import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
+import { formatMessageTime, isMessageGif, isMessageImage } from "../utils";
+import { Spinner } from "@ui/spinner";
+import React, { useMemo } from "react";
+import { classNameObject } from "../../../helper/class-name-object";
+import { renderPostBody } from "@ecency/render-helper";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+
+interface Props {
+  type: "sender" | "receiver";
+  message: Message;
+  isSameUser: boolean;
+}
+
+export function ChatMessageItem({ type, message, isSameUser }: Props) {
+  const { global } = useMappedStore();
+
+  const isFailed = useMemo(() => message.sent === 2, [message]);
+  const isSending = useMemo(() => message.sent === 0, [message]);
+  const isGif = useMemo(() => isMessageGif(message.content), [message]);
+  const isImage = useMemo(() => isMessageImage(message.content), [message]);
+  const renderedPreview = useMemo(
+    () =>
+      renderPostBody(message.content, false, global.canUseWebp)
+        .replace(/<p[^>]*>/g, "")
+        .replace(/<\/p>/g, ""),
+    [message]
+  );
+
+  return (
+    <div key={message.id}>
+      <div
+        className={classNameObject({
+          "flex flex-col px-4 mb-4": true,
+          "items-start": type === "receiver",
+          "items-end": type === "sender",
+          failed: isFailed,
+          sending: isSending
+        })}
+      >
+        {message.sent === 2 && (
+          <Tooltip content={_t("g.resend")}>
+            <span
+              className="resend-svg"
+              onClick={() => {
+                // setStep(1);
+                // setResendMessage(message);
+              }}
+            >
+              {resendMessageSvg}
+            </span>
+          </Tooltip>
+        )}
+        <div
+          className={classNameObject({
+            "text-sm p-2.5 rounded-b-2xl min-w-[4rem]": !isGif && !isImage,
+            "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
+            "bg-gray-200 rounded-tr-2xl": type === "receiver",
+            "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
+            "same-user-message": isSameUser
+          })}
+        >
+          <div
+            className="sender-message-content"
+            dangerouslySetInnerHTML={{ __html: renderedPreview }}
+          />
+        </div>
+        <div className="text-gray-600 dark:text-gray-400 text-xs px-2 pt-1">
+          {formatMessageTime(message.created)}
+        </div>
+        {message.sent === 0 && (
+          <span style={{ margin: "10px 0 0 5px" }}>
+            <Spinner />
+          </span>
+        )}
+        {message.sent === 2 && (
+          <Tooltip content={"Failed"}>
+            <span className="failed-svg">{failedMessageSvg}</span>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 8ce72861240..1571a073110 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -419,7 +419,7 @@ export const ChatPopUp = () => {
                 <div
                   className="scroller"
                   style={{
-                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "20px" : "55px"
+                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "0" : "55px"
                   }}
                   onClick={scrollerClicked}
                 >
@@ -428,7 +428,7 @@ export const ChatPopUp = () => {
               </Tooltip>
             )}
           </div>
-          <div className="px-3">
+          <div className="pl-2">
             {(isCurrentUser || isCommunity) && (
               <ChatInput
                 isCurrentUser={isCurrentUser}
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 6577d7b6b5f..359902230b9 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -14,17 +14,13 @@ import UserAvatar from "../../../../components/user-avatar";
 import FollowControls from "../../../../components/follow-controls";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../../i18n";
-import Tooltip from "../../../../components/tooltip";
-import { failedMessageSvg, hideSvg, resendMessageSvg } from "../../../../img/svg";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { error } from "../../../../components/feedback";
 import { CHATPAGE, COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
 import { Theme } from "../../../../store/global/types";
 import {
   checkContiguousMessage,
-  formatMessageDate,
   formatMessageDateAndDay,
-  formatMessageTime,
   isMessageGif,
   isMessageImage
 } from "../../utils";
@@ -35,7 +31,7 @@ import { Popover, PopoverContent } from "@ui/popover";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
 import { FormControl } from "@ui/input";
-import { Spinner } from "@ui/spinner";
+import { ChatMessageItem } from "../chat-message-item";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -400,168 +396,11 @@ export default function ChatsChannelMessages(props: Props) {
                   </div>
                 )}
 
-                {pMsg.creator !== activeUserKeys?.pub ? (
-                  <div
-                    key={pMsg.id}
-                    className="receiver"
-                    onMouseEnter={() => !showMessageActions && setHoveredMessageId(pMsg.id)}
-                    onMouseLeave={() => !showMessageActions && setHoveredMessageId("")}
-                  >
-                    {!isSameUserMessage || (isSameUserMessage && dayAndMonth) ? (
-                      <div className="community-user-img">
-                        {/*<OverlayTrigger*/}
-                        {/*  trigger="click"*/}
-                        {/*  placement="right"*/}
-                        {/*  show={clickedMessage === pMsg.id}*/}
-                        {/*  overlay={popover}*/}
-                        {/*  delay={1000}*/}
-                        {/*  onToggle={() => handleImageClick(pMsg.id, pMsg.creator)}*/}
-                        {/*>*/}
-                        {/*  <span>*/}
-                        {/*    <UserAvatar username={name!} size="medium" />*/}
-                        {/*  </span>*/}
-                        {/*</OverlayTrigger>*/}
-                      </div>
-                    ) : (
-                      <></>
-                    )}
-
-                    <div
-                      className={`user-info ${
-                        isSameUserMessage && !dayAndMonth
-                          ? "same-user-msg"
-                          : dayAndMonth
-                          ? "date-changed"
-                          : ""
-                      }`}
-                    >
-                      {(!isSameUserMessage || dayAndMonth) && (
-                        <p className="user-msg-time">
-                          <span className="username-community">{name}</span>
-                        </p>
-                      )}
-
-                      <div
-                        className="receiver-message"
-                        onClick={() => handelMessageActions(pMsg.id)}
-                      >
-                        <Tooltip
-                          content={
-                            formatMessageDate(pMsg.created).split(",")[1] +
-                            " " +
-                            formatMessageTime(pMsg.created)
-                          }
-                        >
-                          <div
-                            className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
-                              isImage ? "chat-image" : ""
-                            }`}
-                          >
-                            <div
-                              className={`receiver-message-content  ${isGif ? "gif" : ""} ${
-                                isImage ? "chat-image" : ""
-                              }`}
-                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                            />
-                            <p className="receiver-msg-time">{formatMessageTime(pMsg.created)}</p>
-                          </div>
-                        </Tooltip>
-                        {hoveredMessageId === pMsg.id &&
-                          privilegedUsers.includes(activeUser?.username!) && (
-                            <Tooltip content={"Hide Message"}>
-                              <div className="hide-msg receiver">
-                                <p
-                                  className="hide-msg-svg"
-                                  onClick={() => {
-                                    setClickedMessage("");
-                                    setStep(1);
-                                    setHiddenMsgId(pMsg.id);
-                                  }}
-                                >
-                                  {hideSvg}
-                                </p>
-                              </div>
-                            </Tooltip>
-                          )}
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div
-                    key={pMsg.id}
-                    className="sender"
-                    onMouseEnter={() => !showMessageActions && setHoveredMessageId(pMsg.id)}
-                    onMouseLeave={() => !showMessageActions && setHoveredMessageId("")}
-                  >
-                    <div
-                      className={`sender-message ${
-                        pMsg.sent === 2 ? "failed" : pMsg.sent === 0 ? "sending" : ""
-                      }`}
-                      onClick={() => handelMessageActions(pMsg.id)}
-                    >
-                      {hoveredMessageId === pMsg.id && !isActiveUserRemoved && (
-                        <Tooltip content={"Hide Message"}>
-                          <div className="hide-msg">
-                            <p
-                              className="hide-msg-svg"
-                              onClick={() => {
-                                setClickedMessage("");
-                                setStep(1);
-                                setHiddenMsgId(pMsg.id);
-                              }}
-                            >
-                              {hideSvg}
-                            </p>
-                          </div>
-                        </Tooltip>
-                      )}
-                      {pMsg.sent === 2 && (
-                        <Tooltip content={"Resend"}>
-                          <span
-                            className="resend-svg"
-                            onClick={() => {
-                              setStep(4);
-                              setResendMessage(pMsg);
-                            }}
-                          >
-                            {resendMessageSvg}
-                          </span>
-                        </Tooltip>
-                      )}
-
-                      <Tooltip
-                        content={
-                          formatMessageDate(pMsg.created).split(",")[1] +
-                          " " +
-                          formatMessageTime(pMsg.created)
-                        }
-                      >
-                        <div
-                          className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
-                            isImage ? "chat-image" : isSameUserMessage ? "same-user-message" : ""
-                          }`}
-                        >
-                          <div
-                            className="sender-message-content"
-                            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                          />
-                          <p className="sender-message-time">{formatMessageTime(pMsg.created)}</p>
-                        </div>
-                      </Tooltip>
-
-                      {pMsg.sent === 0 && (
-                        <span style={{ margin: "10px 0 0 5px" }}>
-                          <Spinner />
-                        </span>
-                      )}
-                      {pMsg.sent === 2 && (
-                        <Tooltip content={"Failed"}>
-                          <span className="failed-svg">{failedMessageSvg}</span>
-                        </Tooltip>
-                      )}
-                    </div>
-                  </div>
-                )}
+                <ChatMessageItem
+                  type={pMsg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
+                  message={pMsg}
+                  isSameUser={isSameUserMessage}
+                />
               </React.Fragment>
             );
           })}
diff --git a/src/common/features/chats/components/chats-direct-messages/index.scss b/src/common/features/chats/components/chats-direct-messages/index.scss
index 9a4d2fa0182..a0c47aaeb67 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.scss
+++ b/src/common/features/chats/components/chats-direct-messages/index.scss
@@ -9,258 +9,7 @@
       font-size: 14px;
     }
   }
-
-  .receiver {
-    display: flex;
-
-    .user-img {
-      padding: 8px 8px 8px 16px;
-    }
-
-    .community-user-img {
-      padding: 8px 8px 0px 16px;
-
-      .user-avatar.medium {
-        cursor: pointer;
-      }
-    }
-
-    .user-info {
-      padding-top: 20px;
-      width: 100%;
-
-      .user-msg-time {
-        margin: 0;
-        color: rgb(138, 141, 145);
-        font-weight: 400;
-        font-size: 12px;
-        margin-left: 4px;
-        margin-bottom: 2px;
-
-        .username-community {
-          margin-right: 8px;
-        }
-      }
-
-      .receiver-messag {
-        display: flex;
-
-        .receiver-message-wrapper {
-          box-sizing: content-box;
-          border-radius: 0 10px 10px 10px;
-          max-width: 70% !important;
-          word-wrap: break-word;
-          @include themify(day) {
-            background: #e4e6eb;
-          }
-          @include themify(night) {
-            background: #cee2ff;
-          }
-
-          .receiver-message-content {
-            max-width: 100%;
-            color: #050505;
-            display: inline-block;
-            padding: 10px;
-            border-radius: 0px 10px 10px 0px;
-          }
-
-          .receiver-msg-time {
-            @include themify(day) {
-              color: rgb(138, 141, 145);
-            }
-            @include themify(night) {
-              @apply text-gray-charcoal;
-            }
-
-            font-size: 10px;
-            display: flex;
-            justify-content: flex-end;
-            margin: -5px 7px 3px 45px;
-          }
-
-          &.gif {
-            background: none;
-            padding: 0;
-
-            img {
-              max-width: 100%;
-            }
-          }
-
-          &.chat-image {
-            background: none;
-            padding: 0;
-
-            img {
-              max-width: 100%;
-            }
-          }
-
-          &.gif,
-          &.chat-image {
-            .receiver-message-wrapper {
-              background: none;
-            }
-
-            .receiver-message-content {
-              padding: 0;
-
-              img {
-                padding-bottom: 10px;
-              }
-            }
-
-            .receiver-msg-time {
-              @include themify(day) {
-                color: rgb(138, 141, 145);
-              }
-              @include themify(night) {
-                @apply text-light-300;
-              }
-            }
-          }
-        }
-      }
-
-      &.same-user-msg {
-        margin-left: 4rem;
-        padding-top: 1px;
-
-        .receiver-message-wrapper {
-          border-radius: 10px;
-        }
-      }
-
-      &.date-changed {
-        margin-left: 0;
-        border-radius: 0px 10px 10px 0px;
-      }
-    }
-  }
-
-  .sender {
-    margin-bottom: 1.5px;
-
-    .sender-message {
-      margin-left: auto;
-
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 17px;
-
-      .resend-svg {
-        margin: 5px 15px 0 0;
-        cursor: pointer;
-
-        svg {
-          @include themify(day) {
-            @apply fill-gray-600;
-          }
-          @include themify(night) {
-            @apply fill-white;
-          }
-        }
-      }
-
-      .failed-svg {
-        margin: 8px 0 0 5px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-          @apply fill-red;
-        }
-      }
-
-      &.sending {
-        margin-right: 5px;
-      }
-
-      &.failed {
-        margin-right: 7px;
-      }
-
-      .sender-message-wrapper {
-        box-sizing: content-box;
-        border-radius: 10px 0px 10px 10px;
-        max-width: 70%;
-        word-wrap: break-word;
-
-        @include themify(day) {
-          background-color: rgb(0, 132, 255);
-          @apply text-white;
-        }
-        @include themify(night) {
-          @apply border-gray-charcoal text-white;
-        }
-
-        &.gif {
-          background: none;
-
-          padding: 0;
-
-          img {
-            max-width: 100%;
-          }
-        }
-
-        &.chat-image {
-          background: none;
-          padding: 0;
-
-          img {
-            max-width: 100%;
-          }
-        }
-
-        &.gif,
-        &.chat-image {
-          .sender-message-time {
-            color: rgb(138, 141, 145);
-          }
-
-          .sender-message-content {
-            padding: 10px 0 0 5px;
-
-            img {
-              padding-bottom: 10px;
-            }
-          }
-        }
-
-        .sender-message-content {
-          max-width: 100%;
-          margin-bottom: 0;
-          @apply text-white;
-          font-size: 16px;
-          font-weight: 400;
-          padding: 8px 8px 8px 12px;
-
-          a {
-            text-decoration: underline;
-            color: white;
-          }
-        }
-
-        .sender-message-time {
-          @apply text-white;
-          margin-bottom: 3px;
-          font-size: 10px;
-          display: flex;
-          justify-content: flex-end;
-          margin-right: 7px;
-          margin-left: 45px;
-          margin-top: -5px;
-        }
-
-        &.same-user-message {
-          border-radius: 10px;
-        }
-      }
-    }
-  }
-
+  
   .not-joined {
     display: flex;
     align-items: center;
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index b5f6d29fc94..6e8c746c758 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,27 +1,15 @@
 import React, { useContext, useEffect, useState } from "react";
 import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
-import { Link } from "react-router-dom";
-import {
-  checkContiguousMessage,
-  formatMessageDate,
-  formatMessageDateAndDay,
-  formatMessageTime,
-  isMessageGif,
-  isMessageImage
-} from "../../utils";
+import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
 import { Theme } from "../../../../store/global/types";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import UserAvatar from "../../../../components/user-avatar";
-import Tooltip from "../../../../components/tooltip";
 import { ChatContext } from "../../chat-context-provider";
-import { failedMessageSvg, resendMessageSvg } from "../../../../img/svg";
-import { renderPostBody } from "@ecency/render-helper";
 import { _t } from "../../../../i18n";
 import "./index.scss";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { Spinner } from "@ui/spinner";
 import { DirectMessage } from "../../managers/message-manager-types";
+import { ChatMessageItem } from "../chat-message-item";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -94,15 +82,6 @@ export default function ChatsDirectMessages(props: Props) {
           <>
             {directMessages?.map((msg, i) => {
               const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
-              let renderedPreview = renderPostBody(msg.content, false, global.canUseWebp);
-
-              renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-              renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-              const isGif = isMessageGif(msg.content);
-
-              const isImage = isMessageImage(msg.content);
-
               const isSameUser = checkContiguousMessage(msg, i, directMessages);
 
               return (
@@ -114,106 +93,11 @@ export default function ChatsDirectMessages(props: Props) {
                       </span>
                     </div>
                   )}
-                  {msg.creator !== activeUserKeys?.pub ? (
-                    <div key={msg.id} className="receiver">
-                      {!isSameUser || (isSameUser && dayAndMonth) ? (
-                        <div className="user-img">
-                          <Link to={`/@${currentUser}`}>
-                            <span>
-                              <UserAvatar username={currentUser} size="medium" />
-                            </span>
-                          </Link>
-                        </div>
-                      ) : (
-                        <></>
-                      )}
-
-                      <div
-                        className={`user-info ${
-                          isSameUser && !dayAndMonth
-                            ? "same-user-msg"
-                            : dayAndMonth
-                            ? "date-changed"
-                            : ""
-                        }`}
-                      >
-                        <div className="receiver-messag">
-                          <Tooltip
-                            content={
-                              formatMessageDate(msg.created).split(",")[1] +
-                              " " +
-                              formatMessageTime(msg.created)
-                            }
-                          >
-                            <div
-                              className={`receiver-message-wrapper  ${isGif ? "gif" : ""} ${
-                                isImage ? "chat-image" : ""
-                              }`}
-                            >
-                              <div
-                                className={`receiver-message-content  ${isGif ? "gif" : ""} ${
-                                  isImage ? "chat-image" : ""
-                                }`}
-                                dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                              />
-                              <p className="receiver-msg-time">{formatMessageTime(msg.created)}</p>
-                            </div>
-                          </Tooltip>
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div key={msg.id} className="sender">
-                      <div
-                        className={`sender-message ${
-                          msg.sent === 2 ? "failed" : msg.sent === 0 ? "sending" : ""
-                        }`}
-                      >
-                        {msg.sent === 2 && (
-                          <Tooltip content={"Resend"}>
-                            <span
-                              className="resend-svg"
-                              onClick={() => {
-                                setStep(1);
-                                setResendMessage(msg);
-                              }}
-                            >
-                              {resendMessageSvg}
-                            </span>
-                          </Tooltip>
-                        )}
-                        <Tooltip
-                          content={
-                            formatMessageDate(msg.created).split(",")[1] +
-                            " " +
-                            formatMessageTime(msg.created)
-                          }
-                        >
-                          <div
-                            className={`sender-message-wrapper ${isGif ? "gif" : ""} ${
-                              isImage ? "chat-image" : isSameUser ? "same-user-message" : ""
-                            }`}
-                          >
-                            <div
-                              className="sender-message-content"
-                              dangerouslySetInnerHTML={{ __html: renderedPreview }}
-                            />
-                            <p className="sender-message-time">{formatMessageTime(msg.created)}</p>
-                          </div>
-                        </Tooltip>
-                        {msg.sent === 0 && (
-                          <span style={{ margin: "10px 0 0 5px" }}>
-                            <Spinner />
-                          </span>
-                        )}
-                        {msg.sent === 2 && (
-                          <Tooltip content={"Failed"}>
-                            <span className="failed-svg">{failedMessageSvg}</span>
-                          </Tooltip>
-                        )}
-                      </div>
-                    </div>
-                  )}
+                  <ChatMessageItem
+                    type={msg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
+                    message={msg}
+                    isSameUser={isSameUser}
+                  />
                 </React.Fragment>
               );
             })}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index c8bbcf180b4..88dde09ebe6 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -17,7 +17,7 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
   const { setReceiverPubKey } = useContext(ChatContext);
 
   const { data: directMessagesLastMessages } = useDirectContactsLastMessagesQuery();
-  const rawUsername = useMemo(() => username.replace("@", ""), [username]);
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
   const lastMessageDate = useMemo(
     () => getRelativeDate(directMessagesLastMessages[contact.name]?.created),
     [directMessagesLastMessages]
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index 2f68df50b83..dcecf7e6cdd 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -2,8 +2,6 @@ import React, { useContext, useEffect, useState } from "react";
 import { ActiveUser } from "../../../store/active-user/types";
 import { NostrKeysType } from "../types";
 import {
-  Channel,
-  ChannelUpdate,
   DirectMessage,
   Keys,
   MessagesObject,
@@ -145,34 +143,6 @@ const MessageManager = () => {
     };
   }, [messageService, chat.profiles]);
 
-  // Channel creation handler
-  const handleChannelCreation = (data: Channel[]) => {
-    addChannels(data.filter((x) => !chat.channels.find((y) => y.id === x.id)));
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
-    messageService?.addListener(MessageEvents.ChannelCreation, handleChannelCreation);
-
-    return () => {
-      messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
-    };
-  }, [messageService]);
-
-  // Channel update handler
-  const handleChannelUpdate = (data: ChannelUpdate[]) => {
-    UpdateChannels(data);
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
-    messageService?.addListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
-
-    return () => {
-      messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
-    };
-  }, [messageService]);
-
   const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
     setTimeout(() => {
       verifyPublicMessageSending(channelId, data);
@@ -302,27 +272,10 @@ const MessageManager = () => {
     };
   }, [messageService, chat.profiles, chat.publicMessages]);
 
-  // Left channel handler
-  const handleLeftChannelList = (data: string[]) => {
-    addleftChannels(data);
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
-    messageService?.addListener(MessageEvents.LeftChannelList, handleLeftChannelList);
-
-    return () => {
-      messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
-    };
-  }, [messageService, chat.leftChannelsList]);
-
   useEffect(() => {
     return () => {
       messageService?.removeListener(MessageEvents.Ready, handleReadyState);
       messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
-      messageService?.removeListener(MessageEvents.ChannelCreation, handleChannelCreation);
-      messageService?.removeListener(MessageEvents.LeftChannelList, handleLeftChannelList);
-      messageService?.removeListener(MessageEvents.ChannelUpdate, handleChannelUpdate);
       messageService?.removeListener(
         MessageEvents.PreviousPublicMessages,
         handlePreviousPublicMessages
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index ab6125af0b0..7321c09adb0 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -1 +1,3 @@
 export * from "./upload";
+export * from "./send-message";
+export * from "./join-chat";
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index 8f9de56e85b..324c4e54499 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -17,7 +17,7 @@ import { ChatQueries } from "../queries";
  */
 export function useJoinChat(onSuccess?: () => void) {
   const { activeUser, chat, resetChat } = useMappedStore();
-  const { mutateAsync: uploadPublicKey } = useMutation(["chat-upload-public-key"], (key: string) =>
+  const { mutateAsync: uploadPublicKey } = useMutation(["chats/upload-public-key"], (key: string) =>
     uploadChatPublicKey(activeUser, key)
   );
   const queryClient = useQueryClient();
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
new file mode 100644
index 00000000000..17254f94493
--- /dev/null
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -0,0 +1,48 @@
+import { useMutation } from "@tanstack/react-query";
+import { UPLOADING } from "../components/chat-popup/chat-constants";
+import { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
+import { Channel } from "../managers/message-manager-types";
+import { useDirectContactsQuery } from "../queries";
+
+export function useSendMessage(
+  currentChannel: Channel,
+  currentUser: string,
+  onSuccess: () => void
+) {
+  const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { data: directContacts } = useDirectContactsQuery();
+
+  return useMutation(
+    ["chats/send-message"],
+    async (message: string) => {
+      if (!message || message.includes(UPLOADING)) {
+        throw new Error("[Chat][SendMessage] – empty message or has uploading file");
+      }
+
+      if (isActiveUserRemoved) {
+        throw new Error("[Chat][SendMessage] – no active user");
+      }
+
+      // Set the user as direct contact if it isn't there yet
+      if (
+        receiverPubKey &&
+        !directContacts?.some((contact) => contact.name === currentUser) &&
+        !!currentUser
+      ) {
+        messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
+      }
+
+      if (currentChannel) {
+        return messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
+      } else if (currentUser) {
+        return messageServiceInstance?.sendDirectMessage(receiverPubKey!, message);
+      } else {
+        throw new Error("[Chat][SendMessage] – no receiver");
+      }
+    },
+    {
+      onSuccess: () => onSuccess()
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/upload.ts b/src/common/features/chats/mutations/upload.ts
index 23cbe8e3e31..e1ac46cf6de 100644
--- a/src/common/features/chats/mutations/upload.ts
+++ b/src/common/features/chats/mutations/upload.ts
@@ -11,14 +11,11 @@ class FileUploadingError {
   constructor(public code: number, public message: string) {}
 }
 
-export function useChatFileUpload(
-  setMessage: (v: string) => void,
-  setIsMessageText: (v: boolean) => void
-) {
+export function useChatFileUpload(setMessage: (v: string) => void) {
   const { activeUser, global } = useMappedStore();
 
   return useMutation(
-    ["chat-file-upload"],
+    ["chats/file-upload"],
     async (file: File) => {
       const username = activeUser?.username;
 
@@ -47,8 +44,6 @@ export function useChatFileUpload(
       if (imgTag) {
         setMessage(imgTag);
       }
-
-      setIsMessageText(true);
     },
     {
       onError: (e) => {
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
new file mode 100644
index 00000000000..00403bf993b
--- /dev/null
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -0,0 +1,44 @@
+import { useMessageListenerQuery } from "./message-listener-query";
+import { ChatQueries } from "./queries";
+import { MessageEvents } from "../../../helper/message-service";
+import { Channel } from "../managers/message-manager-types";
+
+export function useChannelsQuery() {
+  console.log("starting");
+
+  useMessageListenerQuery<Channel[], ChatQueries[]>(
+    [ChatQueries.CHANNELS],
+    MessageEvents.ChannelCreation,
+    (data, nextData, resolver) => {
+      console.log(nextData);
+      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
+    },
+    {
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<Channel[], ChatQueries[]>(
+    [ChatQueries.CHANNELS],
+    MessageEvents.ChannelUpdate,
+    (data, nextData, resolver) => {
+      console.log(nextData);
+      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
+    },
+    {
+      initialData: []
+    }
+  );
+
+  useMessageListenerQuery<Channel[], ChatQueries[]>(
+    [ChatQueries.CHANNELS],
+    MessageEvents.LeftChannelList,
+    (data, nextData, resolver) => {
+      console.log(nextData);
+      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 99b8b717386..f84ca4c3c5e 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -4,3 +4,4 @@ export * from "./direct-contacts-query";
 export * from "./message-listener-query";
 export * from "./messages-query";
 export * from "./chat-profiles-query";
+export * from "./channels-query";
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 9f5460ef791..9191aeca21e 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -10,5 +10,6 @@ export enum ChatQueries {
   BEFORE_PUBLIC_MESSAGES_TEMP = "chats/before-public-messages-temp",
   AFTER_PUBLIC_MESSAGES_TEMP = "chats/after-public-messages-temp",
   PREVIOUS_PUBLIC_MESSAGES = "chats/previous-public-messages",
-  PROFILES = "chats/profiles"
+  PROFILES = "chats/profiles",
+  CHANNELS = "chats/channels"
 }
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 07aa032b40d..5a3d24cb06f 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -78,7 +78,9 @@
     "first": "First",
     "last": "Last",
     "ok": "OK",
-    "join": "Join"
+    "join": "Join",
+    "resend": "Resend",
+    "failed": "Failed"
   },
   "confirm": {
     "title": "Are you sure?",

From b6d2d423e20998f4479f2319e0e20d4646212696 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 6 Nov 2023 20:21:29 +0600
Subject: [PATCH 112/179] Chats: made queries and mutations call Nostr directly
 w/o message service

---
 .../features/chats/chat-context-provider.tsx  |   5 +-
 .../chats/components/chat-message-box.tsx     |  10 +-
 .../chats/components/chat-messages-header.tsx |  11 +-
 .../chats/components/chat-messages-view.tsx   |  15 +-
 .../chat-popup/chat-popup-direct-messages.tsx |   7 +-
 .../chats-channel-messages/index.tsx          |   4 +-
 .../chats-community-dropdown-menu/index.tsx   |   6 +-
 .../components/join-community-chat-btn.tsx    | 217 ++-------
 .../chats/managers/message-manager-types.ts   |   4 +-
 .../chats/mutations/add-community-channel.ts  |  44 ++
 .../chats/mutations/create-community-chat.ts  |  61 +++
 src/common/features/chats/mutations/index.ts  |   2 +
 .../features/chats/mutations/send-message.ts  |   5 +
 src/common/features/chats/nostr/index.ts      |   4 +
 .../features/chats/nostr/nostr-context.ts     |  12 +
 .../chats/nostr/nostr-fetch-mutation.ts       |  22 +
 .../chats/nostr/nostr-fetch-query.tsx         |  32 ++
 .../features/chats/nostr/nostr-filters.ts     |   0
 .../features/chats/nostr/nostr-provider.tsx   |  32 ++
 .../chats/nostr/nostr-publish-mutation.ts     |  58 +++
 .../chats/nostr/utils/event-converter.ts      |  39 ++
 .../features/chats/nostr/utils/index.ts       |   1 +
 .../chats/nostr/utils/listen-while-finish.ts  |  27 ++
 .../features/chats/queries/channels-query.ts  |  76 ++--
 .../chats/queries/community-channel-query.ts  |  16 +
 .../chats/queries/direct-contacts-query.ts    |  41 +-
 src/common/features/chats/queries/index.ts    |   2 +
 .../chats/queries/message-listener-query.tsx  |   3 +-
 .../nostr-joined-community-team-query.ts      |  58 +++
 src/common/features/chats/queries/queries.ts  |   5 +-
 src/common/helper/message-service.ts          | 415 +++++++++---------
 31 files changed, 773 insertions(+), 461 deletions(-)
 create mode 100644 src/common/features/chats/mutations/add-community-channel.ts
 create mode 100644 src/common/features/chats/mutations/create-community-chat.ts
 create mode 100644 src/common/features/chats/nostr/index.ts
 create mode 100644 src/common/features/chats/nostr/nostr-context.ts
 create mode 100644 src/common/features/chats/nostr/nostr-fetch-mutation.ts
 create mode 100644 src/common/features/chats/nostr/nostr-fetch-query.tsx
 create mode 100644 src/common/features/chats/nostr/nostr-filters.ts
 create mode 100644 src/common/features/chats/nostr/nostr-provider.tsx
 create mode 100644 src/common/features/chats/nostr/nostr-publish-mutation.ts
 create mode 100644 src/common/features/chats/nostr/utils/event-converter.ts
 create mode 100644 src/common/features/chats/nostr/utils/index.ts
 create mode 100644 src/common/features/chats/nostr/utils/listen-while-finish.ts
 create mode 100644 src/common/features/chats/queries/community-channel-query.ts
 create mode 100644 src/common/features/chats/queries/nostr-joined-community-team-query.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 8b601bd7af7..da8fd94633f 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -6,8 +6,9 @@ import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
 import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
-import { useJoinChat } from "./mutations/join-chat";
+import { useJoinChat } from "./mutations";
 import { MessageListenerQueriesProvider } from "./queries";
+import { NostrProvider } from "./nostr";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -169,7 +170,7 @@ export const ChatContextProvider = (props: Props) => {
           initMessageServiceInstance
         }}
       >
-        {props.children}
+        <NostrProvider>{props.children}</NostrProvider>
       </ChatContext.Provider>
     </MessageListenerQueriesProvider>
   );
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 4243ea8f096..30f0a06b11c 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -11,6 +11,7 @@ import { ChatContext } from "../chat-context-provider";
 import { useMount } from "react-use";
 import { Button } from "@ui/button";
 import { Channel, ChannelUpdate } from "../managers/message-manager-types";
+import { useChannelsQuery } from "../queries";
 
 interface MatchParams {
   filter: string;
@@ -27,10 +28,11 @@ interface Props {
 
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
+  const { data: channels } = useChannelsQuery();
 
   const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
 
-  const { channels, updatedChannel } = chat;
+  const { updatedChannel } = chat;
   const { match } = props;
   const username = match.params.username;
 
@@ -61,8 +63,8 @@ export default function ChatsMessagesBox(props: Props) {
 
   const checkUserCommunityMembership = () => {
     getCommunityProfile();
-    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
-    const isCommunity = chat.channels.some((channel) => channel.communityName === username);
+    const communities = getJoinedCommunities(channels ?? [], chat.leftChannelsList);
+    const isCommunity = channels?.some((channel) => channel.communityName === username);
     if (isCommunity) {
       setIsCommunityChatEnabled(true);
       const isJoined = communities.some((channel) => channel.communityName === username);
@@ -81,7 +83,7 @@ export default function ChatsMessagesBox(props: Props) {
 
   // TODO: MAKE QUERY
   const fetchCurrentChannel = (communityName: string) => {
-    const channel = channels.find((channel) => channel.communityName === communityName);
+    const channel = channels?.find((channel) => channel.communityName === communityName);
     if (channel) {
       const updated: ChannelUpdate = updatedChannel
         .filter((x) => x.channelId === channel.id)
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 4ddfcbd1095..95e4f5f72b7 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -1,15 +1,14 @@
 import React, { useContext } from "react";
 import { History } from "history";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsCommunityDropdownMenu from "./chats-community-dropdown-menu";
 import UserAvatar from "../../../components/user-avatar";
 import { CHATPAGE } from "./chat-popup/chat-constants";
-import { Chat } from "../../../store/chat/types";
 import { formattedUserName } from "../utils";
 import Link from "../../../components/alink";
 import { expandSideBar } from "../../../img/svg";
 import { Button } from "@ui/button";
 import { ChatContext } from "../chat-context-provider";
+import { useChannelsQuery } from "../queries";
 
 interface Props {
   username: string;
@@ -19,13 +18,13 @@ interface Props {
 export default function ChatsMessagesHeader(props: Props) {
   const { username } = props;
   const { setReceiverPubKey } = useContext(ChatContext);
-  const { chat } = useMappedStore();
+  const { data: channels } = useChannelsQuery();
 
   const isChannel = (username: string) => !username.startsWith("@");
 
-  const formattedName = (username: string, chat: Chat) => {
+  const formattedName = (username: string) => {
     if (username && !username.startsWith("@")) {
-      const community = chat.channels.find((channel) => channel.communityName === username);
+      const community = channels?.find((channel) => channel.communityName === username);
       if (community) {
         return community.name;
       }
@@ -50,7 +49,7 @@ export default function ChatsMessagesHeader(props: Props) {
           target="_blank"
         >
           <UserAvatar username={formattedUserName(username)} size="medium" />
-          <div>{formattedName(username, chat)}</div>
+          <div>{formattedName(username)}</div>
         </Link>
       </div>
 
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 55fb8f72a19..00161a0dd0b 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -13,6 +13,7 @@ import { ChatContext } from "../chat-context-provider";
 import { classNameObject } from "../../../helper/class-name-object";
 import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
 import { useMessagesQuery } from "../queries";
+import isCommunity from "../../../helper/is-community";
 
 interface Props {
   username: string;
@@ -54,10 +55,6 @@ export default function ChatsMessagesView({
     }
   }, [messages]);
 
-  useEffect(() => {
-    isDirectUserOrCommunity();
-  }, [chat.channels]);
-
   useEffect(() => {
     getChannelMessages();
   }, [chat.publicMessages]);
@@ -101,12 +98,10 @@ export default function ChatsMessagesView({
   };
 
   const isDirectUserOrCommunity = () => {
-    if (username) {
-      if (username && username.startsWith("@")) {
-        setDirectUser(username.replace("@", ""));
-      } else {
-        setCommunityName(username);
-      }
+    if (isCommunity(username)) {
+      setCommunityName(username.replace("@", ""));
+    } else {
+      setDirectUser(username.replace("@", ""));
     }
   };
 
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index 71bfb68c06c..d1f4486e6b3 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -7,7 +7,11 @@ import { Button } from "@ui/button";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectMessage } from "./chat-direct-message";
-import { useDirectContactsLastMessagesQuery, useDirectContactsQuery } from "../../queries";
+import {
+  useChannelsQuery,
+  useDirectContactsLastMessagesQuery,
+  useDirectContactsQuery
+} from "../../queries";
 import { Channel } from "../../managers/message-manager-types";
 
 interface Props {
@@ -28,6 +32,7 @@ export function ChatPopupDirectMessages({
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: directContactsLastMessages } = useDirectContactsLastMessagesQuery();
+  const { data: channels } = useChannelsQuery();
 
   const [communities, setCommunities] = useState<Channel[]>([]);
 
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 359902230b9..5684b26b292 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -3,7 +3,7 @@ import { useMount } from "react-use";
 import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
-  communityModerator,
+  CommunityModerator,
   Profile,
   PublicMessage
 } from "../../managers/message-manager-types";
@@ -192,7 +192,7 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const getPrivilegedUsers = (communityModerators: communityModerator[]) => {
+  const getPrivilegedUsers = (communityModerators: CommunityModerator[]) => {
     const privilegedUsers = communityModerators.filter((user) =>
       PRIVILEGEDROLES.includes(user.role)
     );
diff --git a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
index 29d32ed9e24..f762c9a38ba 100644
--- a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
@@ -26,7 +26,7 @@ import { getAccountFull } from "../../../../api/hive";
 import { Button } from "@ui/button";
 import { FormControl, InputGroup } from "@ui/input";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { Channel, communityModerator } from "../../managers/message-manager-types";
+import { Channel, CommunityModerator } from "../../managers/message-manager-types";
 
 interface Props {
   history: History;
@@ -46,7 +46,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const [user, setUser] = useState("");
   const [addRoleError, setAddRoleError] = useState("");
   const [role, setRole] = useState("admin");
-  const [moderator, setModerator] = useState<communityModerator>();
+  const [moderator, setModerator] = useState<CommunityModerator>();
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
@@ -93,7 +93,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
 
   const updateRole = (
     event: React.ChangeEvent<HTMLSelectElement>,
-    moderator: communityModerator
+    moderator: CommunityModerator
   ) => {
     const selectedRole = event.target.value;
     const moderatorIndex = currentChannel?.communityModerators?.findIndex(
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 3758e4ce6ff..1f74e18d902 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -1,15 +1,17 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useMemo } from "react";
 import { History } from "history";
-import { Community, ROLES } from "../../../store/communities";
+import { Community } from "../../../store/communities";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
-import { CHANNEL, NOSTRKEY } from "./chat-popup/chat-constants";
-import { getProfileMetaData, setChannelMetaData } from "../utils";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
-import { Channel, communityModerator } from "../managers/message-manager-types";
-import { useJoinChat } from "../mutations/join-chat";
+import { useAddCommunityChannel, useCreateCommunityChat, useJoinChat } from "../mutations";
+import {
+  useChannelsQuery,
+  useCommunityChannelQuery,
+  useNostrJoinedCommunityTeamQuery
+} from "../queries";
 
 interface Props {
   history: History;
@@ -18,175 +20,40 @@ interface Props {
 
 export default function JoinCommunityChatBtn(props: Props) {
   const { messageServiceInstance, activeUserKeys, hasUserJoinedChat } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
   const { chat, activeUser } = useMappedStore();
 
-  const [inProgress, setInProgress] = useState(false);
-  const [isCommunityChatJoined, setIsCommunityChatJoined] = useState(false);
-  const [isChatEnabled, setIsChatEnabled] = useState(false);
-  const [currentCommunity, setCurrentCommunity] = useState<Channel>();
-  const [communityRoles, setCommunityRoles] = useState<communityModerator[]>([]);
-  const [loadCommunity, setLoadCommunity] = useState(false);
-  const [initiateCommunityChat, setInitiateCommunityChat] = useState(false);
+  const { data: currentChannel } = useCommunityChannelQuery(props.community);
+  const { data: channels } = useChannelsQuery();
+  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(props.community);
 
-  useEffect(() => {
-    fetchCommunityProfile();
-  }, [chat.channels, currentCommunity, chat.leftChannelsList]);
+  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
+    useAddCommunityChannel(currentChannel?.id);
+  const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
+  const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
+    useCreateCommunityChat(props.community);
 
-  useEffect(() => {
-    fetchCommunityProfile();
-  }, [activeUser]);
-
-  useEffect(() => {
-    if (activeUserKeys && activeUser?.username === props.community.name) {
-      getCommunityRoles();
-    }
-  }, [activeUserKeys]);
-
-  useEffect(() => {
-    fetchCommunityProfile();
-    checkIsChatJoined();
-    if (messageServiceInstance) {
-      if (loadCommunity) {
-        messageServiceInstance?.loadChannel(currentCommunity?.id!);
-        setInProgress(false);
-      }
-      if (
-        initiateCommunityChat &&
-        communityRoles.some((role) => role.pubkey === activeUserKeys.pub)
-      ) {
-        createCommunityChat();
-      }
-    }
-  }, [messageServiceInstance, loadCommunity, communityRoles, initiateCommunityChat]);
-
-  useEffect(() => {
-    checkIsChatJoined();
-
-    fetchCurrentChannel();
-  }, [isCommunityChatJoined, props.community, chat.channels, chat.leftChannelsList]);
-
-  const fetchCommunityProfile = async () => {
-    const communityProfile = await getProfileMetaData(props.community?.name);
-    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
-    setIsChatEnabled(haschannelMetaData);
-
-    if (!currentCommunity) {
-      setCurrentCommunity(communityProfile.channel);
-    }
-  };
-
-  const checkIsChatJoined = () => {
-    setIsCommunityChatJoined(
-      chat.channels.some(
+  const isChatEnabled = useMemo(() => !!currentChannel, [currentChannel]);
+  const isCommunityChatJoined = useMemo(
+    () =>
+      channels?.some(
         (item) =>
           item.communityName === props.community.name &&
-          !chat.leftChannelsList.includes(currentCommunity?.id!)
-      )
-    );
-  };
-
-  const getCommunityRoles = async () => {
-    let communityTeam: communityModerator[] = [];
-    const { community } = props;
-    const ownerData = await getProfileMetaData(community.name);
-    const ownerRole = {
-      name: activeUser!.username,
-      pubkey: activeUserKeys?.pub || ownerData.nsKey,
-      role: "owner"
-    };
-
-    communityTeam.push(ownerRole);
-
-    for (let i = 0; i < community.team.length; i++) {
-      const item = community.team[i];
-      if (item[1] === ROLES.ADMIN || item[1] === ROLES.MOD) {
-        const profileData = await getProfileMetaData(item[0]);
-        if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
-          const roleInfo: communityModerator = {
-            name: item[0],
-            pubkey: profileData.nsKey,
-            role: item[1]
-          };
-
-          communityTeam.push(roleInfo);
-        }
-      }
-    }
-    setCommunityRoles(communityTeam);
-  };
-
-  const createCommunityChat = async () => {
-    const { community } = props;
-    try {
-      const data = await messageServiceInstance?.createChannel({
-        name: community.title,
-        about: community.description,
-        communityName: community.name,
-        picture: "",
-        communityModerators: communityRoles,
-        hiddenMessageIds: [],
-        removedUserIds: []
-      });
-
-      const content = JSON.parse(data?.content!);
-      const channelMetaData = {
-        id: data?.id as string,
-        creator: data?.pubkey as string,
-        created: data?.created_at!,
-        communityName: content.communityName,
-        name: content.name,
-        about: content.about,
-        picture: content.picture
-      };
-      const response = await setChannelMetaData(community.name, channelMetaData);
-      if (response) {
-        setCurrentCommunity(channelMetaData);
-      }
-    } finally {
-      setInProgress(false);
-      setIsCommunityChatJoined(true);
-      setInitiateCommunityChat(false);
-    }
-  };
+          !chat.leftChannelsList.includes(currentChannel?.id!)
+      ),
+    [channels]
+  );
 
-  const joinCommunityChat = () => {
-    setInProgress(true);
+  const join = async () => {
     if (!hasUserJoinedChat) {
-      joinChat();
-      setLoadCommunity(true);
-      return;
+      await joinChat();
     }
-    if (chat.leftChannelsList.includes(currentCommunity?.id!)) {
+    // TODO: need to write it as query and mutation that if we left the chat then re-join again
+    if (chat.leftChannelsList.includes(currentChannel?.id!)) {
       messageServiceInstance?.updateLeftChannelList(
-        chat.leftChannelsList.filter((x) => x !== currentCommunity?.id)
+        chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
       );
     }
-    messageServiceInstance?.loadChannel(currentCommunity?.id!);
-    setIsCommunityChatJoined(true);
-    setInProgress(false);
-  };
-
-  const startCommunityChat = () => {
-    setInProgress(true);
-    if (!hasUserJoinedChat) {
-      joinChat();
-      setInitiateCommunityChat(true);
-
-      return;
-    } else {
-      createCommunityChat();
-    }
-  };
-
-  const fetchCurrentChannel = () => {
-    for (const item of chat.channels) {
-      if (item.communityName === props.community.name) {
-        setCurrentCommunity(item);
-        return item;
-      }
-    }
-    return {};
+    await addCommunityChannel();
   };
 
   return (
@@ -196,16 +63,27 @@ export default function JoinCommunityChatBtn(props: Props) {
           <Button outline={true}>{_t("chat.chat-joined")}</Button>
         ) : !isChatEnabled ? (
           <Button
-            onClick={startCommunityChat}
-            icon={inProgress ? <Spinner /> : <></>}
+            onClick={async () => {
+              if (!hasUserJoinedChat) {
+                await joinChat();
+              }
+
+              if (communityTeam.some((role) => role.pubkey === activeUserKeys.pub)) {
+                await createCommunityChat();
+                await join();
+              }
+            }}
+            disabled={isCreateCommunityChatLoading || isJoinChatLoading}
+            icon={isCreateCommunityChatLoading || isJoinChatLoading ? <Spinner /> : <></>}
             iconPlacement="left"
           >
             {_t("chat.start-community-chat")}
           </Button>
         ) : !isCommunityChatJoined && isChatEnabled && hasUserJoinedChat ? (
           <Button
-            onClick={joinCommunityChat}
-            icon={inProgress ? <Spinner /> : <></>}
+            disabled={isJoinChatLoading || isAddCommunityChannelLoading}
+            onClick={join}
+            icon={isJoinChatLoading ? <Spinner /> : <></>}
             iconPlacement="left"
           >
             {_t("chat.join-community-chat")}
@@ -215,8 +93,9 @@ export default function JoinCommunityChatBtn(props: Props) {
         )
       ) : isChatEnabled && !isCommunityChatJoined ? (
         <Button
-          onClick={joinCommunityChat}
-          icon={inProgress ? <Spinner /> : <></>}
+          disabled={isJoinChatLoading || isAddCommunityChannelLoading}
+          onClick={join}
+          icon={isJoinChatLoading ? <Spinner /> : <></>}
           iconPlacement="left"
         >
           {_t("community.join-community-chat")}
diff --git a/src/common/features/chats/managers/message-manager-types.ts b/src/common/features/chats/managers/message-manager-types.ts
index 6a434f87608..f39388bc375 100644
--- a/src/common/features/chats/managers/message-manager-types.ts
+++ b/src/common/features/chats/managers/message-manager-types.ts
@@ -14,12 +14,12 @@ export type Metadata = {
   about: string;
   picture: string;
   communityName?: string;
-  communityModerators?: communityModerator[];
+  communityModerators?: CommunityModerator[];
   hiddenMessageIds?: string[];
   removedUserIds?: string[];
 };
 
-export type communityModerator = {
+export type CommunityModerator = {
   name: string;
   pubkey: string;
   role: string;
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
new file mode 100644
index 00000000000..acd2efc48dd
--- /dev/null
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -0,0 +1,44 @@
+import { useNostrFetchMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+import { convertEvent } from "../nostr/utils/event-converter";
+import { ChatQueries, useChannelsQuery } from "../queries";
+import { useQueryClient } from "@tanstack/react-query";
+
+export function useAddCommunityChannel(name: string | undefined) {
+  const { data: channels } = useChannelsQuery();
+  const queryClient = useQueryClient();
+
+  return useNostrFetchMutation(
+    ["chats/add-community-channel"],
+    [
+      {
+        kinds: [Kind.ChannelCreation],
+        ids: name ? [name] : undefined
+      },
+      {
+        kinds: [Kind.ChannelMetadata],
+        "#e": name ? [name] : undefined
+      },
+      {
+        kinds: [Kind.ChannelMessage],
+        "#e": name ? [name] : undefined,
+        limit: 30
+      }
+    ],
+    {
+      onSuccess: (events) => {
+        events.forEach((event) => {
+          switch (event.kind) {
+            case Kind.ChannelCreation:
+              const channel = convertEvent(event);
+              const hasChannelAlready = channels?.some(({ id }) => id === channel?.id);
+              if (!hasChannelAlready && channel) {
+                queryClient.setQueryData([ChatQueries.CHANNELS], [...(channels ?? []), channel]);
+                queryClient.invalidateQueries([ChatQueries.CHANNELS]);
+              }
+          }
+        });
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/create-community-chat.ts b/src/common/features/chats/mutations/create-community-chat.ts
new file mode 100644
index 00000000000..d8c043b36d8
--- /dev/null
+++ b/src/common/features/chats/mutations/create-community-chat.ts
@@ -0,0 +1,61 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNostrPublishMutation } from "../nostr/nostr-publish-mutation";
+import { Kind } from "../../../../lib/nostr-tools/event";
+import { Community } from "../../../store/communities";
+import { useNostrJoinedCommunityTeamQuery } from "../queries";
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+
+/**
+ * A custom React Query hook for creating a chat channel within a community.
+ * This hook allows you to create a chat channel associated with a specific community.
+ */
+export function useCreateCommunityChat(community: Community) {
+  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(community);
+  const { mutateAsync: createChannel } = useNostrPublishMutation(
+    ["chats/create-channel"],
+    Kind.ChannelCreation,
+    () => {},
+    {}
+  );
+
+  return useMutation(["chats/create-community-chat"], async () => {
+    // Step 1: Create a chat channel using the `createChannel` mutation.
+    const data = await createChannel({
+      eventMetadata: {
+        name: community.title,
+        about: community.description,
+        communityName: community.name,
+        picture: "",
+        communityModerators: communityTeam,
+        hiddenMessageIds: [],
+        removedUserIds: []
+      },
+      tags: []
+    });
+
+    // Step 2: Extract and format channel metadata from the response.
+    const content = JSON.parse(data?.content!);
+    const channelMetaData = {
+      id: data?.id as string,
+      creator: data?.pubkey as string,
+      created: data?.created_at!,
+      communityName: content.communityName,
+      name: content.name,
+      about: content.about,
+      picture: content.picture
+    };
+
+    // Step 3: Retrieve the user's profile information.
+    const response = await getAccountFull(community.name!);
+    const { posting_json_metadata } = response;
+
+    // Step 4: Update the user's profile with the new channel information.
+    const profile = JSON.parse(posting_json_metadata!).profile;
+    const newProfile = {
+      channel: channelMetaData
+    };
+
+    return await updateProfile(response, { ...profile, ...newProfile });
+  });
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 7321c09adb0..e52e3296a42 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -1,3 +1,5 @@
 export * from "./upload";
 export * from "./send-message";
 export * from "./join-chat";
+export * from "./create-community-chat";
+export * from "./add-community-channel";
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 17254f94493..6f681c685f5 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -4,6 +4,7 @@ import { useContext } from "react";
 import { ChatContext } from "../chat-context-provider";
 import { Channel } from "../managers/message-manager-types";
 import { useDirectContactsQuery } from "../queries";
+import isCommunity from "../../../helper/is-community";
 
 export function useSendMessage(
   currentChannel: Channel,
@@ -33,6 +34,10 @@ export function useSendMessage(
         messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
       }
 
+      if (!currentChannel && isCommunity(currentUser)) {
+        throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
+      }
+
       if (currentChannel) {
         return messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
       } else if (currentUser) {
diff --git a/src/common/features/chats/nostr/index.ts b/src/common/features/chats/nostr/index.ts
new file mode 100644
index 00000000000..00244e0fc2c
--- /dev/null
+++ b/src/common/features/chats/nostr/index.ts
@@ -0,0 +1,4 @@
+export * from "./nostr-fetch-query";
+export * from "./nostr-provider";
+export * from "./nostr-context";
+export * from "./nostr-fetch-mutation";
diff --git a/src/common/features/chats/nostr/nostr-context.ts b/src/common/features/chats/nostr/nostr-context.ts
new file mode 100644
index 00000000000..735d4e3fc89
--- /dev/null
+++ b/src/common/features/chats/nostr/nostr-context.ts
@@ -0,0 +1,12 @@
+import { createContext } from "react";
+import SimplePool from "../../../../lib/nostr-tools/pool";
+
+export const NostrContext = createContext<{
+  pool: SimplePool | undefined;
+  readRelays: string[];
+  writeRelays: string[];
+}>({
+  pool: undefined,
+  writeRelays: [],
+  readRelays: []
+});
diff --git a/src/common/features/chats/nostr/nostr-fetch-mutation.ts b/src/common/features/chats/nostr/nostr-fetch-mutation.ts
new file mode 100644
index 00000000000..2eb59472157
--- /dev/null
+++ b/src/common/features/chats/nostr/nostr-fetch-mutation.ts
@@ -0,0 +1,22 @@
+import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { Event } from "../../../../lib/nostr-tools/event";
+import { listenWhileFinish } from "./utils";
+import { useContext } from "react";
+import { NostrContext } from "./nostr-context";
+import { ChatContext } from "../chat-context-provider";
+import { Filter } from "../../../../lib/nostr-tools/filter";
+
+export function useNostrFetchMutation(
+  key: MutationKey,
+  filters: Filter[],
+  options?: UseMutationOptions<Event[], Error>
+) {
+  const { pool, readRelays } = useContext(NostrContext);
+  const { activeUserKeys } = useContext(ChatContext);
+
+  return useMutation(
+    key,
+    () => listenWhileFinish(pool, readRelays, [], activeUserKeys.pub, filters),
+    options
+  );
+}
diff --git a/src/common/features/chats/nostr/nostr-fetch-query.tsx b/src/common/features/chats/nostr/nostr-fetch-query.tsx
new file mode 100644
index 00000000000..b96d6209289
--- /dev/null
+++ b/src/common/features/chats/nostr/nostr-fetch-query.tsx
@@ -0,0 +1,32 @@
+import { QueryKey, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Event, Kind } from "../../../../lib/nostr-tools/event";
+import { useContext } from "react";
+import { NostrContext } from "./nostr-context";
+import { ChatContext } from "../chat-context-provider";
+import { UseQueryOptions } from "@tanstack/react-query/src/types";
+import { listenWhileFinish } from "./utils";
+
+export function useNostrFetchQuery<DATA>(
+  key: QueryKey,
+  kinds: Kind[],
+  dataResolver: (events: Event[]) => DATA,
+  queryOptions?: UseQueryOptions<DATA>
+) {
+  const { activeUserKeys } = useContext(ChatContext);
+  const { pool, readRelays } = useContext(NostrContext);
+  const queryClient = useQueryClient();
+
+  return useQuery(
+    key,
+    async () => {
+      const queryData = queryClient.getQueryData<DATA>(key);
+      if (queryData && (Array.isArray(queryData) ? queryData.length > 0 : true)) {
+        return queryData;
+      }
+
+      const events = await listenWhileFinish(pool, readRelays, kinds, activeUserKeys.pub);
+      return dataResolver(events);
+    },
+    queryOptions
+  );
+}
diff --git a/src/common/features/chats/nostr/nostr-filters.ts b/src/common/features/chats/nostr/nostr-filters.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/common/features/chats/nostr/nostr-provider.tsx b/src/common/features/chats/nostr/nostr-provider.tsx
new file mode 100644
index 00000000000..3028a217d31
--- /dev/null
+++ b/src/common/features/chats/nostr/nostr-provider.tsx
@@ -0,0 +1,32 @@
+import React, { PropsWithChildren, useMemo, useRef } from "react";
+import SimplePool from "../../../../lib/nostr-tools/pool";
+import { NostrContext } from "./nostr-context";
+
+const RELAYS = {
+  "wss://relay1.nostrchat.io": { read: true, write: true },
+  "wss://relay2.nostrchat.io": { read: true, write: true },
+  "wss://relay.damus.io": { read: true, write: true },
+  "wss://relay.snort.social": { read: true, write: true },
+  "wss://nos.lol": { read: true, write: true }
+};
+
+export function NostrProvider({ children }: PropsWithChildren<unknown>) {
+  const poolRef = useRef(new SimplePool());
+  const lowLatencyPoolRef = useRef(new SimplePool({ eoseSubTimeout: 10000 }));
+  const useLowLatency = false;
+
+  const readRelays = useMemo(() => Object.keys(RELAYS).filter((r) => RELAYS[r].read), []);
+  const writeRelays = useMemo(() => Object.keys(RELAYS).filter((r) => RELAYS[r].write), []);
+
+  return (
+    <NostrContext.Provider
+      value={{
+        pool: useLowLatency ? lowLatencyPoolRef.current : poolRef.current,
+        readRelays,
+        writeRelays
+      }}
+    >
+      {children}
+    </NostrContext.Provider>
+  );
+}
diff --git a/src/common/features/chats/nostr/nostr-publish-mutation.ts b/src/common/features/chats/nostr/nostr-publish-mutation.ts
new file mode 100644
index 00000000000..baa7d364ae2
--- /dev/null
+++ b/src/common/features/chats/nostr/nostr-publish-mutation.ts
@@ -0,0 +1,58 @@
+import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { useContext } from "react";
+import { NostrContext } from "../nostr";
+import { Event, getEventHash, Kind, signEvent } from "../../../../lib/nostr-tools/event";
+import { ChatContext } from "../chat-context-provider";
+import { Metadata } from "../managers/message-manager-types";
+
+type Payload = { eventMetadata: Metadata; tags: string[][] };
+
+export function useNostrPublishMutation(
+  key: MutationKey,
+  kind: Kind,
+  onBeforeSend: (event: Event) => void,
+  options?: UseMutationOptions<Event, Error, Payload>
+) {
+  const { pool, writeRelays } = useContext(NostrContext);
+  const { activeUserKeys } = useContext(ChatContext);
+
+  const sign = async (event: Event) => ({
+    ...event,
+    id: getEventHash(event),
+    sig: await signEvent(event, activeUserKeys.priv)
+  });
+
+  return useMutation(
+    key,
+    ({ eventMetadata, tags }: Payload) =>
+      new Promise<Event>(async (resolve, reject) => {
+        let signedEvent: Event | null;
+        try {
+          signedEvent = await sign({
+            kind,
+            id: "",
+            sig: "",
+            content: JSON.stringify(eventMetadata),
+            pubkey: activeUserKeys.pub,
+            created_at: Math.floor(Date.now() / 1000),
+            tags
+          });
+        } catch (e) {
+          signedEvent = null;
+        }
+        if (!signedEvent) {
+          reject(new Error("[Chat][Nostr] – event couldn't be signed(kind: " + kind));
+          return;
+        }
+
+        onBeforeSend(signedEvent);
+
+        const publishInfo = pool?.publish(writeRelays, signedEvent);
+        publishInfo?.on("ok", () => resolve(signedEvent!!));
+        publishInfo?.on("failed", () =>
+          reject(new Error("[Chat][Nostr] – failed to publish event (kind: " + signedEvent!!.kind))
+        );
+      }),
+    options
+  );
+}
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
new file mode 100644
index 00000000000..30320200398
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -0,0 +1,39 @@
+import { Event, Kind } from "../../../../../lib/nostr-tools/event";
+import { Channel } from "../../managers/message-manager-types";
+
+export interface EventConverterResult {
+  [Kind.ChannelCreation]: Channel;
+}
+
+export function convertEvent<KIND extends keyof EventConverterResult>(
+  event: Event
+): EventConverterResult[KIND] | null {
+  try {
+    const content = JSON.parse(event.content);
+
+    if (!content) {
+      return null;
+    }
+
+    switch (event.kind) {
+      case Kind.ChannelCreation:
+        return {
+          id: event.id,
+          creator: event.pubkey,
+          created: event.created_at,
+          communityName: content.communityName,
+          communityModerators: content.communityModerators,
+          hiddenMessageIds: content.hiddenMessageIds,
+          removedUserIds: content.removedUserIds,
+          name: content.name,
+          about: content.about,
+          picture: content.picture
+        };
+      default:
+        return content;
+    }
+  } catch (e) {
+    console.error(new Error("[Chat][Nostr] – message content is not a JSON"));
+    return null;
+  }
+}
diff --git a/src/common/features/chats/nostr/utils/index.ts b/src/common/features/chats/nostr/utils/index.ts
new file mode 100644
index 00000000000..c1cc9f57481
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/index.ts
@@ -0,0 +1 @@
+export * from "./listen-while-finish";
diff --git a/src/common/features/chats/nostr/utils/listen-while-finish.ts b/src/common/features/chats/nostr/utils/listen-while-finish.ts
new file mode 100644
index 00000000000..cfd3db1d621
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/listen-while-finish.ts
@@ -0,0 +1,27 @@
+import { Event, Kind } from "../../../../../lib/nostr-tools/event";
+import SimplePool from "../../../../../lib/nostr-tools/pool";
+import { Filter } from "../../../../../lib/nostr-tools/filter";
+
+export async function listenWhileFinish(
+  pool: SimplePool | undefined,
+  readRelays: string[],
+  kinds: Kind[],
+  pub: string,
+  filters?: Filter[]
+) {
+  return new Promise<Event[]>((resolve) => {
+    const nextFilters = filters ?? [
+      {
+        kinds,
+        authors: [pub]
+      }
+    ];
+    const subInfo = pool?.sub(readRelays, nextFilters);
+    const events: Event[] = [];
+    subInfo?.on("event", (event: Event) => events.push(event));
+    subInfo?.on("eose", () => {
+      resolve(events.sort((a, b) => b.created_at - a.created_at));
+      subInfo?.unsub();
+    });
+  });
+}
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
index 00403bf993b..fdd4c6746db 100644
--- a/src/common/features/chats/queries/channels-query.ts
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -1,44 +1,52 @@
-import { useMessageListenerQuery } from "./message-listener-query";
 import { ChatQueries } from "./queries";
-import { MessageEvents } from "../../../helper/message-service";
 import { Channel } from "../managers/message-manager-types";
+import { useNostrFetchQuery } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+import { useKeysQuery } from "./keys-query";
+import { convertEvent } from "../nostr/utils/event-converter";
 
 export function useChannelsQuery() {
-  console.log("starting");
+  const { hasKeys } = useKeysQuery();
+  // useMessageListenerQuery<Channel[], ChatQueries[]>(
+  //   [ChatQueries.CHANNELS],
+  //   MessageEvents.ChannelCreation,
+  //   (data, nextData, resolver) =>
+  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
+  //   {
+  //     initialData: []
+  //   }
+  // );
+  //
+  // useMessageListenerQuery<Channel[], ChatQueries[]>(
+  //   [ChatQueries.CHANNELS],
+  //   MessageEvents.ChannelUpdate,
+  //   (data, nextData, resolver) =>
+  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
+  //   {
+  //     initialData: []
+  //   }
+  // );
+  //
+  // useMessageListenerQuery<Channel[], ChatQueries[]>(
+  //   [ChatQueries.CHANNELS],
+  //   MessageEvents.LeftChannelList,
+  //   (data, nextData, resolver) =>
+  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
+  //   {
+  //     initialData: []
+  //   }
+  // );
 
-  useMessageListenerQuery<Channel[], ChatQueries[]>(
+  return useNostrFetchQuery<Channel[]>(
     [ChatQueries.CHANNELS],
-    MessageEvents.ChannelCreation,
-    (data, nextData, resolver) => {
-      console.log(nextData);
-      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
-    },
+    [Kind.ChannelCreation],
+    (events) =>
+      events
+        .map((event) => convertEvent<Kind.ChannelCreation>(event))
+        .filter((channel) => !!channel) as Channel[],
     {
-      initialData: []
-    }
-  );
-
-  useMessageListenerQuery<Channel[], ChatQueries[]>(
-    [ChatQueries.CHANNELS],
-    MessageEvents.ChannelUpdate,
-    (data, nextData, resolver) => {
-      console.log(nextData);
-      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
-    },
-    {
-      initialData: []
-    }
-  );
-
-  useMessageListenerQuery<Channel[], ChatQueries[]>(
-    [ChatQueries.CHANNELS],
-    MessageEvents.LeftChannelList,
-    (data, nextData, resolver) => {
-      console.log(nextData);
-      resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]);
-    },
-    {
-      initialData: []
+      initialData: [],
+      enabled: hasKeys
     }
   );
 }
diff --git a/src/common/features/chats/queries/community-channel-query.ts b/src/common/features/chats/queries/community-channel-query.ts
new file mode 100644
index 00000000000..3ca5946a2a5
--- /dev/null
+++ b/src/common/features/chats/queries/community-channel-query.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChatQueries } from "./queries";
+import { Community } from "../../../store/communities";
+import { getProfileMetaData } from "../utils";
+import { Channel } from "../managers/message-manager-types";
+
+/**
+ * Get the community's channel information
+ * @see {@link ../mutations/create-community-chat.ts}
+ */
+export function useCommunityChannelQuery(community: Community) {
+  return useQuery<Channel>([ChatQueries.COMMUNITY_CHANNEL, community.name], async () => {
+    const communityProfile = await getProfileMetaData(community.name);
+    return communityProfile.channel;
+  });
+}
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index aeed2244ae7..978f2d1561e 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -1,34 +1,45 @@
 import { ChatQueries } from "./queries";
-import { MessageEvents } from "../../../helper/message-service";
 import { DirectContact, Message } from "../managers/message-manager-types";
-import { useMessageListenerQuery } from "./message-listener-query";
 import { useQuery } from "@tanstack/react-query";
 import isCommunity from "../../../helper/is-community";
 import { useMessagesQuery } from "./messages-query";
 import { getDirectLastMessage } from "../utils";
 import { useKeysQuery } from "./keys-query";
+import { useChannelsQuery } from "./channels-query";
+import { useNostrFetchQuery } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
 
 export function useDirectContactsQuery() {
   const { hasKeys } = useKeysQuery();
+  const {
+    data: channels,
+    isSuccess: isChannelsLoaded,
+    isError: isChannelsFailed
+  } = useChannelsQuery();
 
-  return useMessageListenerQuery<DirectContact[], ChatQueries[]>(
+  return useNostrFetchQuery<DirectContact[]>(
     [ChatQueries.DIRECT_CONTACTS],
-    MessageEvents.DirectContact,
-    (data, directContacts, resolver) => {
-      const result = [...data];
-      directContacts.forEach(({ name, pubkey }) => {
-        const isPresent = data.some((obj) => obj.name === name && obj.pubkey === pubkey);
-        if (!isPresent) {
-          result.push({ name, pubkey });
-        }
-      });
-      if (result.length !== 0) {
-        resolver(result);
+    [Kind.Contacts],
+    (events) => {
+      // Get first event with profile info
+      // note: events could be duplicated
+      // todo: think about duplications filtering
+      const profileEvent = events.find((event) => event.kind === Kind.Contacts);
+      if (profileEvent) {
+        return profileEvent.tags.map(([pubkey, name]) => ({ pubkey, name }));
       }
+      return [];
     },
     {
       initialData: [],
-      enabled: hasKeys
+      enabled: hasKeys && (isChannelsLoaded || isChannelsFailed),
+      select: (data) => [
+        ...(channels ?? []).map((channel) => ({
+          name: channel.name,
+          pubkey: ""
+        })),
+        ...data
+      ]
     }
   );
 }
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index f84ca4c3c5e..2a50c48e7fc 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -5,3 +5,5 @@ export * from "./message-listener-query";
 export * from "./messages-query";
 export * from "./chat-profiles-query";
 export * from "./channels-query";
+export * from "./nostr-joined-community-team-query";
+export * from "./community-channel-query";
diff --git a/src/common/features/chats/queries/message-listener-query.tsx b/src/common/features/chats/queries/message-listener-query.tsx
index 5712c3205c5..6cb24679172 100644
--- a/src/common/features/chats/queries/message-listener-query.tsx
+++ b/src/common/features/chats/queries/message-listener-query.tsx
@@ -51,8 +51,9 @@ export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
 
   const listener = (nextData: TQData) => {
     const resolver = (data: TQData) => queryClient.setQueryData(key, data);
-    queryClient.invalidateQueries(key);
     queryFn(query.data!!, nextData, resolver);
+
+    queryClient.invalidateQueries(key);
   };
 
   useDebounce(
diff --git a/src/common/features/chats/queries/nostr-joined-community-team-query.ts b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
new file mode 100644
index 00000000000..6f1004f4922
--- /dev/null
+++ b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
@@ -0,0 +1,58 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChatQueries } from "./queries";
+import { CommunityModerator } from "../managers/message-manager-types";
+import { getProfileMetaData } from "../utils";
+import { Community, ROLES } from "../../../store/communities";
+import { NOSTRKEY } from "../components/chat-popup/chat-constants";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
+import { useKeysQuery } from "./keys-query";
+
+/**
+ * Get a community team members which joined to Nostr and available to create a chat
+ */
+export function useNostrJoinedCommunityTeamQuery(community: Community) {
+  const { activeUser } = useMappedStore();
+  const { activeUserKeys } = useContext(ChatContext);
+
+  const { hasKeys } = useKeysQuery();
+
+  return useQuery(
+    [ChatQueries.COMMUNITY_ROLES, community.name],
+    async () => {
+      if (!activeUserKeys || activeUser?.username === community.name) {
+      }
+
+      let communityTeam: CommunityModerator[] = [];
+      const ownerData = await getProfileMetaData(community.name);
+
+      communityTeam.push({
+        name: activeUser!.username,
+        pubkey: activeUserKeys?.pub || ownerData.nsKey,
+        role: "owner"
+      });
+
+      for (const [name, role] of community.team) {
+        if ([ROLES.ADMIN, ROLES.MOD].includes(role as ROLES)) {
+          const profileData = await getProfileMetaData(name);
+          if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
+            const roleInfo: CommunityModerator = {
+              name,
+              pubkey: profileData.nsKey,
+              role
+            };
+
+            communityTeam.push(roleInfo);
+          }
+        }
+      }
+
+      return communityTeam;
+    },
+    {
+      initialData: [],
+      enabled: hasKeys && activeUser?.username === community.name
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 9191aeca21e..4cd45aa89ea 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -11,5 +11,8 @@ export enum ChatQueries {
   AFTER_PUBLIC_MESSAGES_TEMP = "chats/after-public-messages-temp",
   PREVIOUS_PUBLIC_MESSAGES = "chats/previous-public-messages",
   PROFILES = "chats/profiles",
-  CHANNELS = "chats/channels"
+  CHANNELS = "chats/channels",
+  JOINED_CHANNELS = "chats/joined-channels",
+  COMMUNITY_CHANNEL = "chats/community-channel",
+  COMMUNITY_ROLES = "chats/community-roles"
 }
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
index 7f9656b8512..88cd0e37dfe 100644
--- a/src/common/helper/message-service.ts
+++ b/src/common/helper/message-service.ts
@@ -1,5 +1,5 @@
 import { Sub } from "../../lib/nostr-tools/relay";
-import { Kind } from "../../lib/nostr-tools/event";
+import { Event, getEventHash, Kind, signEvent } from "../../lib/nostr-tools/event";
 import { Filter } from "../../lib/nostr-tools/filter";
 import { TypedEventEmitter } from "./message-event-emitter";
 import {
@@ -7,14 +7,12 @@ import {
   ChannelUpdate,
   DirectContact,
   DirectMessage,
-  Keys,
   Metadata,
   Profile,
   PublicMessage
 } from "../features/chats/managers/message-manager-types";
-import { encrypt, decrypt } from "../../lib/nostr-tools/nip04";
+import { decrypt, encrypt } from "../../lib/nostr-tools/nip04";
 import SimplePool from "../../lib/nostr-tools/pool";
-import { signEvent, getEventHash, Event } from "../../lib/nostr-tools/event";
 
 const relays = {
   "wss://relay1.nostrchat.io": { read: true, write: true },
@@ -59,26 +57,21 @@ type EventHandlerMap = {
 };
 
 class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
+  public directContacts: any = [];
+  listenerSub: Sub | null = null;
+  messageListenerSub: Sub | null = null;
   private pool: SimplePool;
   private poolL: SimplePool;
-
   private readonly priv: string | "nip07";
   private readonly pub: string;
-
   private readonly readRelays = Object.keys(relays).filter((r) => relays[r].read);
   private readonly writeRelays = Object.keys(relays).filter((r) => relays[r].write);
-
   private eventQueue: Event[] = [];
   private eventQueueTimer: any;
   private eventQueueFlag = true;
   private eventQueueBuffer: Event[] = [];
-  public directContacts: any = [];
-
   private nameCache: Record<string, number> = {};
 
-  listenerSub: Sub | null = null;
-  messageListenerSub: Sub | null = null;
-
   constructor(priv: string, pub: string) {
     super();
 
@@ -91,76 +84,34 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     this.init().then();
   }
 
-  private async init() {
-    this.eventQueue = [];
-    this.eventQueueFlag = true;
-    this.eventQueueBuffer = [];
-
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.Contacts],
-        authors: [this.pub]
-      },
-      {
-        kinds: [Kind.ChannelCreation, Kind.EventDeletion],
-        authors: [this.pub]
-      },
-      {
-        kinds: [Kind.ChannelMessage],
-        authors: [this.pub]
-      },
-      {
-        kinds: [NewKinds.Arbitrary],
-        authors: [this.pub],
-        "#d": ["left-channel-list", "read-mark-map"]
-      }
-    ];
-    this.fetchP(filters).then((resp) => {
-      const events = resp.sort((a, b) => b.created_at - a.created_at);
-      const deletions = resp
-        .filter((x) => x.kind === Kind.EventDeletion)
-        .map((x) => MessageService.findTagValue(x, "e"));
-      const profile = events.find((x) => x.kind === Kind.Contacts);
-      if (profile && profile?.tags.length !== 0) {
-        this.directContacts = profile?.tags;
-        this.pushToEventBuffer(profile!);
-      }
-
-      const leftChannelList = events.find(
-        (x) =>
-          x.kind.toString() === NewKinds.Arbitrary.toString() &&
-          MessageService.findTagValue(x, "d") === "left-channel-list"
-      );
+  static normalizeMetadata(meta: Metadata) {
+    return {
+      name: meta.name || "",
+      about: meta.about || "",
+      picture: meta.picture || ""
+    };
+  }
 
-      if (leftChannelList) {
-        this.pushToEventBuffer(leftChannelList);
-      }
+  static parseJson(d: string) {
+    try {
+      return JSON.parse(d);
+    } catch (e) {
+      return null;
+    }
+  }
 
-      const channels = Array.from(
-        new Set(
-          events
-            .map((x) => {
-              if (x.kind === Kind.ChannelCreation) {
-                return x.id;
-              }
+  static isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
 
-              if (x.kind === Kind.ChannelMessage) {
-                return MessageService.findTagValue(x, "e");
-              }
+  static notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+    return value !== null && value !== undefined;
+  }
 
-              return undefined;
-            })
-            .filter((x) => !deletions.includes(x))
-            .filter(MessageService.notEmpty)
-        )
-      );
-      if (channels.length !== 0) {
-        this.fetchChannels(channels);
-      }
+  static findTagValue(ev: Event, tag: "e" | "p" | "d") {
+    return ev.tags.find(([t]) => t === tag)?.[1];
+  }
 
-      this.fetchMessages();
-      this.emit(MessageEvents.Ready);
-    });
+  static filterTagValue(ev: Event, tag: "e" | "p" | "d") {
+    return ev.tags.filter(([t]) => t === tag);
   }
 
   public fetchPrevMessages(channel: string, until: number) {
@@ -363,57 +314,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     });
   }
 
-  private addDirectContact(event: Event) {
-    let isAdded = false;
-    const user = {
-      id: event.id,
-      creator: event.pubkey,
-      created: event.created_at,
-      name: JSON.parse(event.content).name,
-      about: JSON.parse(event.content).about || "",
-      picture: JSON.parse(event.content).picture || ""
-    };
-    const { creator, name } = user;
-    if (!isAdded) {
-      this.publishContacts(name, creator);
-      isAdded = true;
-    }
-  }
-
-  private fetch(filters: Filter[], unsub: boolean = true, isDirectContact: boolean = false) {
-    const sub = this.pool.sub(this.readRelays, filters);
-
-    sub.on("event", (event: Event) => {
-      event.kind === Kind.Metadata && isDirectContact
-        ? this.addDirectContact(event)
-        : this.pushToEventBuffer(event);
-    });
-
-    sub.on("eose", () => {
-      if (unsub) {
-        sub.unsub();
-      }
-    });
-
-    return sub;
-  }
-
-  private fetchP(filters: Filter[], lowLatencyPool: boolean = false): Promise<Event[]> {
-    return new Promise((resolve) => {
-      const sub = (lowLatencyPool ? this.poolL : this.pool).sub(this.readRelays, filters);
-      const events: Event[] = [];
-
-      sub.on("event", (event: Event) => {
-        events.push(event);
-      });
-
-      sub.on("eose", () => {
-        sub.unsub();
-        resolve(events);
-      });
-    });
-  }
-
   public listen(channels: string[], since: number) {
     if (this.listenerSub) {
       this.listenerSub.unsub();
@@ -516,17 +416,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     this.emit(MessageEvents.DirectMessageBeforeSent, eventArray);
   }
 
-  private async findHealthyRelay(relays: string[]) {
-    for (const relay of relays) {
-      try {
-        await this.pool.ensureRelay(relay);
-        return relay;
-      } catch (e) {}
-    }
-
-    throw new Error("Couldn't find a working relay");
-  }
-
   public async updateProfile(profile: Metadata) {
     return this.publish(Kind.Metadata, [], JSON.stringify(profile));
   }
@@ -558,60 +447,6 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     return this.publish(Kind.ChannelMessage, tags, message);
   }
 
-  private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
-    return new Promise((resolve, reject) => {
-      this.signEvent({
-        kind,
-        tags,
-        pubkey: this.pub,
-        content,
-        created_at: Math.floor(Date.now() / 1000),
-        id: "",
-        sig: ""
-      })
-        .then((event) => {
-          if (!event) {
-            reject("Couldn't sign event!");
-            return;
-          }
-          if (event.kind === Kind.ChannelMessage) {
-            this.emitPublicMessageBeforeSent(event);
-          } else if (event.kind === Kind.EncryptedDirectMessage) {
-            this.emitDirectMessageBeforeSent(event);
-          }
-          const pub = this.pool.publish(this.writeRelays, event);
-          pub.on("ok", () => {
-            resolve(event);
-            if (event.kind === Kind.Contacts) {
-              this.getContacts();
-            }
-            if (event.kind === Kind.Metadata) {
-              this.pushToEventBuffer(event);
-            }
-          });
-
-          pub.on("failed", () => {
-            reject("Couldn't sign event!");
-          });
-        })
-        .catch(() => {
-          reject("Couldn't sign event!");
-        });
-    });
-  }
-
-  private async signEvent(event: Event): Promise<Event | undefined> {
-    if (this.priv === "nip07") {
-      return window.nostr?.signEvent(event);
-    } else {
-      return {
-        ...event,
-        id: getEventHash(event),
-        sig: await signEvent(event, this.priv)
-      };
-    }
-  }
-
   pushToEventBuffer(event: Event) {
     const cacheKey = `${event.id}_emitted`;
     if (this.nameCache[cacheKey] === undefined) {
@@ -806,34 +641,192 @@ class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
     this.removeAllListeners();
   };
 
-  static normalizeMetadata(meta: Metadata) {
-    return {
-      name: meta.name || "",
-      about: meta.about || "",
-      picture: meta.picture || ""
-    };
+  private async init() {
+    this.eventQueue = [];
+    this.eventQueueFlag = true;
+    this.eventQueueBuffer = [];
+
+    const filters: Filter[] = [
+      {
+        kinds: [Kind.Contacts],
+        authors: [this.pub]
+      },
+      {
+        kinds: [Kind.ChannelCreation, Kind.EventDeletion],
+        authors: [this.pub]
+      },
+      {
+        kinds: [Kind.ChannelMessage],
+        authors: [this.pub]
+      },
+      {
+        kinds: [NewKinds.Arbitrary],
+        authors: [this.pub],
+        "#d": ["left-channel-list", "read-mark-map"]
+      }
+    ];
+    this.fetchP(filters).then((resp) => {
+      const events = resp.sort((a, b) => b.created_at - a.created_at);
+      const deletions = resp
+        .filter((x) => x.kind === Kind.EventDeletion)
+        .map((x) => MessageService.findTagValue(x, "e"));
+      const profile = events.find((x) => x.kind === Kind.Contacts);
+      if (profile && profile?.tags.length !== 0) {
+        this.directContacts = profile?.tags;
+        this.pushToEventBuffer(profile!);
+      }
+
+      const leftChannelList = events.find(
+        (x) =>
+          x.kind.toString() === NewKinds.Arbitrary.toString() &&
+          MessageService.findTagValue(x, "d") === "left-channel-list"
+      );
+
+      if (leftChannelList) {
+        this.pushToEventBuffer(leftChannelList);
+      }
+
+      const channels = Array.from(
+        new Set(
+          events
+            .map((x) => {
+              if (x.kind === Kind.ChannelCreation) {
+                return x.id;
+              }
+
+              if (x.kind === Kind.ChannelMessage) {
+                return MessageService.findTagValue(x, "e");
+              }
+
+              return undefined;
+            })
+            .filter((x) => !deletions.includes(x))
+            .filter(MessageService.notEmpty)
+        )
+      );
+      if (channels.length !== 0) {
+        this.fetchChannels(channels);
+      }
+
+      this.fetchMessages();
+      this.emit(MessageEvents.Ready);
+    });
   }
 
-  static parseJson(d: string) {
-    try {
-      return JSON.parse(d);
-    } catch (e) {
-      return null;
+  private addDirectContact(event: Event) {
+    let isAdded = false;
+    const user = {
+      id: event.id,
+      creator: event.pubkey,
+      created: event.created_at,
+      name: JSON.parse(event.content).name,
+      about: JSON.parse(event.content).about || "",
+      picture: JSON.parse(event.content).picture || ""
+    };
+    const { creator, name } = user;
+    if (!isAdded) {
+      this.publishContacts(name, creator);
+      isAdded = true;
     }
   }
 
-  static isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
+  private fetch(filters: Filter[], unsub: boolean = true, isDirectContact: boolean = false) {
+    const sub = this.pool.sub(this.readRelays, filters);
 
-  static notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
-    return value !== null && value !== undefined;
+    sub.on("event", (event: Event) => {
+      event.kind === Kind.Metadata && isDirectContact
+        ? this.addDirectContact(event)
+        : this.pushToEventBuffer(event);
+    });
+
+    sub.on("eose", () => {
+      if (unsub) {
+        sub.unsub();
+      }
+    });
+
+    return sub;
   }
 
-  static findTagValue(ev: Event, tag: "e" | "p" | "d") {
-    return ev.tags.find(([t]) => t === tag)?.[1];
+  private fetchP(filters: Filter[], lowLatencyPool: boolean = false): Promise<Event[]> {
+    return new Promise((resolve) => {
+      const sub = (lowLatencyPool ? this.poolL : this.pool).sub(this.readRelays, filters);
+      const events: Event[] = [];
+
+      sub.on("event", (event: Event) => {
+        events.push(event);
+      });
+
+      sub.on("eose", () => {
+        sub.unsub();
+        resolve(events);
+      });
+    });
   }
 
-  static filterTagValue(ev: Event, tag: "e" | "p" | "d") {
-    return ev.tags.filter(([t]) => t === tag);
+  private async findHealthyRelay(relays: string[]) {
+    for (const relay of relays) {
+      try {
+        await this.pool.ensureRelay(relay);
+        return relay;
+      } catch (e) {}
+    }
+
+    throw new Error("Couldn't find a working relay");
+  }
+
+  private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
+    return new Promise((resolve, reject) => {
+      this.signEvent({
+        kind,
+        tags,
+        pubkey: this.pub,
+        content,
+        created_at: Math.floor(Date.now() / 1000),
+        id: "",
+        sig: ""
+      })
+        .then((event) => {
+          if (!event) {
+            reject("Couldn't sign event!");
+            return;
+          }
+          if (event.kind === Kind.ChannelMessage) {
+            this.emitPublicMessageBeforeSent(event);
+          } else if (event.kind === Kind.EncryptedDirectMessage) {
+            this.emitDirectMessageBeforeSent(event);
+          }
+          const pub = this.pool.publish(this.writeRelays, event);
+          pub.on("ok", () => {
+            resolve(event);
+            if (event.kind === Kind.Contacts) {
+              this.getContacts();
+            }
+            if (event.kind === Kind.Metadata) {
+              this.pushToEventBuffer(event);
+            }
+          });
+
+          pub.on("failed", () => {
+            reject("Couldn't sign event!");
+          });
+        })
+        .catch(() => {
+          reject("Couldn't sign event!");
+        });
+    });
+  }
+
+  private async signEvent(event: Event): Promise<Event | undefined> {
+    if (this.priv === "nip07") {
+      return window.nostr?.signEvent(event);
+    } else {
+      return {
+        ...event,
+        id: getEventHash(event),
+        sig: await signEvent(event, this.priv)
+      };
+    }
   }
 }
 

From 3193d09f1382e8efa88afbc195edb3662eeddcf0 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 6 Nov 2023 21:19:42 +0600
Subject: [PATCH 113/179] Chats: added last messages query, leave community
 channel mutation, left channels query. Removed channels from the store

---
 .../chat-popup/chat-popup-direct-messages.tsx | 33 +++++++----------
 .../chats/components/chat-popup/index.tsx     |  6 ++-
 .../chat-sidebar-direct-contact.tsx           |  4 +-
 .../chats/components/chats-sidebar/index.tsx  | 21 ++++++-----
 .../hooks/use-message-service-listener.tsx    | 13 ++++---
 .../chats/managers/message-manager.tsx        | 10 ++---
 .../mutations/leave-community-channel.ts      |  1 +
 .../chats/nostr/utils/event-converter.ts      |  7 +++-
 .../chats/nostr/utils/find-tag-value.ts       |  5 +++
 .../features/chats/nostr/utils/index.ts       |  2 +
 .../features/chats/nostr/utils/is-sha256.ts   |  3 ++
 .../features/chats/queries/channels-query.ts  | 30 ---------------
 .../chats/queries/direct-contacts-query.ts    | 37 +------------------
 src/common/features/chats/queries/index.ts    |  1 +
 .../chats/queries/last-messages-query.ts      | 36 ++++++++++++++++++
 .../queries/left-community-channels-query.ts  | 36 ++++++++++++++++++
 src/common/features/chats/queries/queries.ts  |  4 +-
 src/common/pages/community-functional.tsx     | 25 ++++++-------
 src/common/store/actions.ts                   |  2 -
 src/common/store/chat/index.ts                | 29 ---------------
 src/common/store/chat/types.ts                |  7 ----
 21 files changed, 148 insertions(+), 164 deletions(-)
 create mode 100644 src/common/features/chats/mutations/leave-community-channel.ts
 create mode 100644 src/common/features/chats/nostr/utils/find-tag-value.ts
 create mode 100644 src/common/features/chats/nostr/utils/is-sha256.ts
 create mode 100644 src/common/features/chats/queries/last-messages-query.ts
 create mode 100644 src/common/features/chats/queries/left-community-channels-query.ts

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
index d1f4486e6b3..44fb1673d30 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
@@ -1,18 +1,13 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useMemo } from "react";
 import { _t } from "../../../../i18n";
-import { getCommunityLastMessage, getJoinedCommunities } from "../../utils";
+import { getJoinedCommunities } from "../../utils";
 import ImportChats from "../import-chats";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
-import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectMessage } from "./chat-direct-message";
-import {
-  useChannelsQuery,
-  useDirectContactsLastMessagesQuery,
-  useDirectContactsQuery
-} from "../../queries";
-import { Channel } from "../../managers/message-manager-types";
+import { useChannelsQuery, useDirectContactsQuery, useLastMessagesQuery } from "../../queries";
+import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 
 interface Props {
   communityClicked: (v: string) => void;
@@ -27,34 +22,32 @@ export function ChatPopupDirectMessages({
   setReceiverPubKey,
   setShowSearchUser
 }: Props) {
-  const { chat } = useMappedStore();
   const { activeUserKeys, showSpinner } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
-  const { data: directContactsLastMessages } = useDirectContactsLastMessagesQuery();
+  const { data: directContactsLastMessages } = useLastMessagesQuery();
   const { data: channels } = useChannelsQuery();
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
-  const [communities, setCommunities] = useState<Channel[]>([]);
-
-  useEffect(() => {
-    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
-    setCommunities(communities);
-  }, [chat.channels, chat.leftChannelsList]);
+  const communities = useMemo(
+    () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
+    [channels, leftChannelsIds]
+  );
 
   return (
     <>
-      {(directContacts?.length !== 0 || (chat.channels.length !== 0 && communities.length !== 0)) &&
+      {(directContacts?.length !== 0 || (channels?.length !== 0 && communities.length !== 0)) &&
       !showSpinner &&
       activeUserKeys?.priv ? (
         <>
-          {chat.channels.length !== 0 && communities.length !== 0 && (
+          {channels?.length !== 0 && communities.length !== 0 && (
             <>
               <div className="community-header">{_t("chat.communities")}</div>
               {communities.map((channel) => (
                 <ChatDirectMessage
                   key={channel.id}
                   username={channel.communityName!!}
-                  lastMessage={getCommunityLastMessage(channel.id, chat.publicMessages)}
+                  lastMessage={directContactsLastMessages[channel.name]?.content}
                   userClicked={() => communityClicked(channel.communityName!)}
                 />
               ))}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 1571a073110..101dc00b4dc 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -25,7 +25,7 @@ import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
 import { useJoinChat } from "../../mutations/join-chat";
-import { useDirectContactsQuery } from "../../queries";
+import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -42,7 +42,9 @@ export const ChatPopUp = () => {
     setShowSpinner
   } = useContext(ChatContext);
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
+
   const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -210,7 +212,7 @@ export const ChatPopUp = () => {
   };
 
   const fetchCurrentChannel = (communityName: string) => {
-    const channel = chat.channels.find((channel) => channel.communityName === communityName);
+    const channel = channels?.find((channel) => channel.communityName === communityName);
     if (channel) {
       const updated: ChannelUpdate = chat.updatedChannel
         .filter((x) => x.channelId === channel.id)
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 88dde09ebe6..537b48a6857 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -5,7 +5,7 @@ import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { DirectContact } from "../../managers/message-manager-types";
-import { useDirectContactsLastMessagesQuery } from "../../queries";
+import { useLastMessagesQuery } from "../../queries";
 
 interface Props {
   contact: DirectContact;
@@ -16,7 +16,7 @@ interface Props {
 export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKey }: Props) {
   const { setReceiverPubKey } = useContext(ChatContext);
 
-  const { data: directMessagesLastMessages } = useDirectContactsLastMessagesQuery();
+  const { data: directMessagesLastMessages } = useLastMessagesQuery();
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
   const lastMessageDate = useMemo(
     () => getRelativeDate(directMessagesLastMessages[contact.name]?.created),
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index e2501dae8a3..8d618b21e06 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { History } from "history";
 import {
@@ -17,8 +17,8 @@ import { ChatSidebarSearch } from "./chat-sidebar-search";
 import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
 import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
-import { useDirectContactsQuery } from "../../queries";
-import { Channel } from "../../managers/message-manager-types";
+import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
+import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 
 interface Props {
   username: string;
@@ -29,8 +29,10 @@ export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { chat } = useMappedStore();
   const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
-  const { channels, leftChannelsList } = chat;
+
   const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
 
@@ -38,7 +40,11 @@ export default function ChatsSideBar(props: Props) {
   const [showDivider, setShowDivider] = useState(false);
   const [userList, setUserList] = useState<AccountWithReputation[]>([]);
   const [isScrollToTop, setIsScrollToTop] = useState(false);
-  const [communities, setCommunities] = useState<Channel[]>([]);
+
+  const communities = useMemo(
+    () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
+    [channels, leftChannelsIds]
+  );
 
   useEffect(() => {
     if (username) {
@@ -48,11 +54,6 @@ export default function ChatsSideBar(props: Props) {
     }
   }, [username]);
 
-  useEffect(() => {
-    const communities = getJoinedCommunities(channels, leftChannelsList);
-    setCommunities(communities);
-  }, [channels, leftChannelsList]);
-
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     if (element.scrollTop > 2) {
diff --git a/src/common/features/chats/hooks/use-message-service-listener.tsx b/src/common/features/chats/hooks/use-message-service-listener.tsx
index 2d49950939b..b266c375dee 100644
--- a/src/common/features/chats/hooks/use-message-service-listener.tsx
+++ b/src/common/features/chats/hooks/use-message-service-listener.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
 import MessageService from "../../../helper/message-service";
-import { useMappedStore } from "../../../store/use-mapped-store";
+import { useChannelsQuery } from "../queries";
 
 export const useMessageServiceListener = (
   messageServiceReady: boolean,
   messageService: MessageService | undefined
 ) => {
-  const {
-    chat: { channels }
-  } = useMappedStore();
+  const { data: channels } = useChannelsQuery();
 
   const [since, setSince] = useState(0);
 
@@ -17,8 +15,13 @@ export const useMessageServiceListener = (
 
     const timer = setTimeout(
       () => {
+        if (!channels || channels.length === 0) {
+          return;
+        }
+
+        // TODO THIS THING
         messageService?.listen(
-          channels.map((x) => x.id),
+          channels?.map((x) => x.id),
           Math.floor((since || Date.now()) / 1000)
         );
         setSince(Date.now());
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index dcecf7e6cdd..d1e5bf266a5 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -14,7 +14,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { usePrevious } from "../../../util/use-previous";
 import { useMessageServiceListener } from "../hooks/use-message-service-listener";
-import { useDirectContactsQuery } from "../queries";
+import { useChannelsQuery, useDirectContactsQuery } from "../queries";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -31,7 +31,6 @@ const MessageManager = () => {
     chat,
     addDirectMessages,
     addPublicMessage,
-    addChannels,
     addProfile,
     addleftChannels,
     UpdateChannels,
@@ -43,6 +42,7 @@ const MessageManager = () => {
     resetChat
   } = useMappedStore();
   const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
 
   const prevActiveUser = usePrevious(activeUser);
 
@@ -60,13 +60,13 @@ const MessageManager = () => {
     useContext(ChatContext);
 
   useEffect(() => {
-    if (chat.channels.length !== 0) {
+    if (channels?.length !== 0) {
       setIsCommunityCreated(true);
     }
     if (chat.directMessages.length !== 0) {
       setIsDirectChatCreated(true);
     }
-  }, [chat.channels, chat.directMessages]);
+  }, [channels, chat.directMessages]);
 
   useEffect(() => {
     window.addEventListener("createMSInstance", createMSInstance);
@@ -226,7 +226,7 @@ const MessageManager = () => {
   }, [messageService, chat.profiles, chat.publicMessages]);
 
   useEffect(() => {
-    if (chat.channels.length !== 0 && publicMessageBuffer.length !== 0) {
+    if (channels?.length !== 0 && publicMessageBuffer.length !== 0) {
       setPublicMessages();
     }
   }, [chat.publicMessages, publicMessageBuffer]);
diff --git a/src/common/features/chats/mutations/leave-community-channel.ts b/src/common/features/chats/mutations/leave-community-channel.ts
new file mode 100644
index 00000000000..fbd5d113b30
--- /dev/null
+++ b/src/common/features/chats/mutations/leave-community-channel.ts
@@ -0,0 +1 @@
+export function useLeaveCommunityChannel() {}
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
index 30320200398..0598683390b 100644
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -3,6 +3,7 @@ import { Channel } from "../../managers/message-manager-types";
 
 export interface EventConverterResult {
   [Kind.ChannelCreation]: Channel;
+  30078: string[];
 }
 
 export function convertEvent<KIND extends keyof EventConverterResult>(
@@ -15,7 +16,7 @@ export function convertEvent<KIND extends keyof EventConverterResult>(
       return null;
     }
 
-    switch (event.kind) {
+    switch (event.kind as any) {
       case Kind.ChannelCreation:
         return {
           id: event.id,
@@ -28,7 +29,9 @@ export function convertEvent<KIND extends keyof EventConverterResult>(
           name: content.name,
           about: content.about,
           picture: content.picture
-        };
+        } as any;
+      case "30078":
+        return content;
       default:
         return content;
     }
diff --git a/src/common/features/chats/nostr/utils/find-tag-value.ts b/src/common/features/chats/nostr/utils/find-tag-value.ts
new file mode 100644
index 00000000000..22a286256f5
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/find-tag-value.ts
@@ -0,0 +1,5 @@
+import { Event } from "../../../../../lib/nostr-tools/event";
+
+export function findTagValue(ev: Event, tag: "e" | "p" | "d") {
+  return ev.tags.find(([t]) => t === tag)?.[1];
+}
diff --git a/src/common/features/chats/nostr/utils/index.ts b/src/common/features/chats/nostr/utils/index.ts
index c1cc9f57481..5e48e486485 100644
--- a/src/common/features/chats/nostr/utils/index.ts
+++ b/src/common/features/chats/nostr/utils/index.ts
@@ -1 +1,3 @@
 export * from "./listen-while-finish";
+export * from "./is-sha256";
+export * from "./find-tag-value";
diff --git a/src/common/features/chats/nostr/utils/is-sha256.ts b/src/common/features/chats/nostr/utils/is-sha256.ts
new file mode 100644
index 00000000000..92126775a9d
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/is-sha256.ts
@@ -0,0 +1,3 @@
+export function isSha256(s: string) {
+  return /^[a-f0-9]{64}$/gi.test(s);
+}
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
index fdd4c6746db..536df878e50 100644
--- a/src/common/features/chats/queries/channels-query.ts
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -7,36 +7,6 @@ import { convertEvent } from "../nostr/utils/event-converter";
 
 export function useChannelsQuery() {
   const { hasKeys } = useKeysQuery();
-  // useMessageListenerQuery<Channel[], ChatQueries[]>(
-  //   [ChatQueries.CHANNELS],
-  //   MessageEvents.ChannelCreation,
-  //   (data, nextData, resolver) =>
-  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
-  //   {
-  //     initialData: []
-  //   }
-  // );
-  //
-  // useMessageListenerQuery<Channel[], ChatQueries[]>(
-  //   [ChatQueries.CHANNELS],
-  //   MessageEvents.ChannelUpdate,
-  //   (data, nextData, resolver) =>
-  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
-  //   {
-  //     initialData: []
-  //   }
-  // );
-  //
-  // useMessageListenerQuery<Channel[], ChatQueries[]>(
-  //   [ChatQueries.CHANNELS],
-  //   MessageEvents.LeftChannelList,
-  //   (data, nextData, resolver) =>
-  //     resolver([...data, ...nextData.filter((ch) => !data.some((dCh) => ch.id === dCh.id))]),
-  //   {
-  //     initialData: []
-  //   }
-  // );
-
   return useNostrFetchQuery<Channel[]>(
     [ChatQueries.CHANNELS],
     [Kind.ChannelCreation],
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index 978f2d1561e..ac0a3e78494 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -1,9 +1,5 @@
 import { ChatQueries } from "./queries";
-import { DirectContact, Message } from "../managers/message-manager-types";
-import { useQuery } from "@tanstack/react-query";
-import isCommunity from "../../../helper/is-community";
-import { useMessagesQuery } from "./messages-query";
-import { getDirectLastMessage } from "../utils";
+import { DirectContact } from "../managers/message-manager-types";
 import { useKeysQuery } from "./keys-query";
 import { useChannelsQuery } from "./channels-query";
 import { useNostrFetchQuery } from "../nostr";
@@ -32,36 +28,7 @@ export function useDirectContactsQuery() {
     },
     {
       initialData: [],
-      enabled: hasKeys && (isChannelsLoaded || isChannelsFailed),
-      select: (data) => [
-        ...(channels ?? []).map((channel) => ({
-          name: channel.name,
-          pubkey: ""
-        })),
-        ...data
-      ]
-    }
-  );
-}
-
-export function useDirectContactsLastMessagesQuery() {
-  const { data: contacts } = useDirectContactsQuery();
-  const { data: messages } = useMessagesQuery("all");
-
-  return useQuery<Record<string, Message>>(
-    [ChatQueries.DIRECT_CONTACTS_LAST_MESSAGES],
-    async () =>
-      (contacts ?? []).reduce<Record<string, Message>>((acc, current) => {
-        const currentMessages = messages.filter((i) =>
-          !isCommunity(current.name) && "peer" in i
-            ? i.peer === current?.pubkey
-            : i.root === current?.pubkey
-        );
-        return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
-      }, {}),
-    {
-      initialData: {},
-      enabled: (contacts?.length ?? 0) > 0 && messages.length > 0
+      enabled: hasKeys && (isChannelsLoaded || isChannelsFailed)
     }
   );
 }
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 2a50c48e7fc..8a06e7eba57 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -7,3 +7,4 @@ export * from "./chat-profiles-query";
 export * from "./channels-query";
 export * from "./nostr-joined-community-team-query";
 export * from "./community-channel-query";
+export * from "./last-messages-query";
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
new file mode 100644
index 00000000000..443091d17c4
--- /dev/null
+++ b/src/common/features/chats/queries/last-messages-query.ts
@@ -0,0 +1,36 @@
+import { useMessagesQuery } from "./messages-query";
+import { useQuery } from "@tanstack/react-query";
+import { Message } from "../managers/message-manager-types";
+import { ChatQueries } from "./queries";
+import { getDirectLastMessage } from "../utils";
+import { useDirectContactsQuery } from "./direct-contacts-query";
+import { useChannelsQuery } from "./channels-query";
+
+export function useLastMessagesQuery() {
+  const { data: contacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+  const { data: messages } = useMessagesQuery("all");
+
+  const getContactsLastMessages = () =>
+    (contacts ?? []).reduce<Record<string, Message>>((acc, current) => {
+      const currentMessages = messages.filter((i) =>
+        "peer" in i ? i.peer === current?.pubkey : i.root === current?.pubkey
+      );
+      return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
+    }, {});
+
+  const getChannelsLastMessages = () =>
+    (channels ?? []).reduce<Record<string, Message>>((acc, current) => {
+      const currentMessages = messages.filter((i) => i.root === current.id);
+      return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
+    }, {});
+
+  return useQuery<Record<string, Message>>(
+    [ChatQueries.LAST_MESSAGES],
+    async () => ({ ...getContactsLastMessages(), ...getChannelsLastMessages() }),
+    {
+      initialData: {},
+      enabled: messages.length > 0
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/left-community-channels-query.ts b/src/common/features/chats/queries/left-community-channels-query.ts
new file mode 100644
index 00000000000..4956ab12a94
--- /dev/null
+++ b/src/common/features/chats/queries/left-community-channels-query.ts
@@ -0,0 +1,36 @@
+import { useNostrFetchQuery } from "../nostr";
+import { findTagValue, isSha256 } from "../nostr/utils";
+import { ChatQueries } from "./queries";
+import { convertEvent } from "../nostr/utils/event-converter";
+
+/**
+ * Fetch custom kind of event which stores the left channels
+ */
+export function useLeftCommunityChannelsQuery() {
+  return useNostrFetchQuery<string[]>(
+    [ChatQueries.LEFT_CHANNELS],
+    [30078],
+    (events) => {
+      if (events.length === 0) {
+        return [];
+      }
+      const leftChannelsEvent = events
+        .filter((x) => x.kind == 30078 && findTagValue(x, "d") === "left-channel-list")
+        .sort((a, b) => b.created_at - a.created_at)[0];
+
+      if (!leftChannelsEvent) {
+        return [];
+      }
+
+      const content = convertEvent<30078>(leftChannelsEvent);
+      if (Array.isArray(content) && content.every((x) => isSha256(x))) {
+        return content;
+      }
+
+      return [];
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 4cd45aa89ea..e59f43385e9 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -3,7 +3,7 @@ export enum ChatQueries {
   PUBLIC_KEY = "chats/public-key",
   PRIVATE_KEY = "chats/private-key",
   DIRECT_CONTACTS = "chats/direct-contacts",
-  DIRECT_CONTACTS_LAST_MESSAGES = "chats/direct-contacts-last-messages",
+  LAST_MESSAGES = "chats/last-messages",
   MESSAGES = "chats/messages",
   BEFORE_DIRECT_MESSAGES_TEMP = "chats/before-direct-messages-temp",
   AFTER_DIRECT_MESSAGES_TEMP = "chats/after-direct-messages-temp",
@@ -12,7 +12,7 @@ export enum ChatQueries {
   PREVIOUS_PUBLIC_MESSAGES = "chats/previous-public-messages",
   PROFILES = "chats/profiles",
   CHANNELS = "chats/channels",
-  JOINED_CHANNELS = "chats/joined-channels",
+  LEFT_CHANNELS = "chats/left-channels",
   COMMUNITY_CHANNEL = "chats/community-channel",
   COMMUNITY_ROLES = "chats/community-roles"
 }
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 55538c9aaf4..fbe3631bfe7 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -1,10 +1,9 @@
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
 import { match } from "react-router";
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, { Fragment, useContext, useEffect, useMemo, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
-import { Channel } from "../features/chats/managers/message-manager-types";
 import { usePrevious } from "../util/use-previous";
 
 import { getJoinedCommunities } from "../features/chats/utils";
@@ -45,6 +44,8 @@ import { ChatContext } from "../features/chats/chat-context-provider";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { useJoinChat } from "../features/chats/mutations/join-chat";
+import { useChannelsQuery } from "../features/chats/queries";
+import { useLeftCommunityChannelsQuery } from "../features/chats/queries/left-community-channels-query";
 
 interface MatchParams {
   filter: string;
@@ -64,6 +65,8 @@ export const CommunityPage = (props: Props) => {
 
   const queryClient = useQueryClient();
   const { data: community } = useCommunityCache(props.match.params.name);
+  const { data: channels } = useChannelsQuery();
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const [account, setAccount] = useState<Account | undefined>(
     props.accounts.find(({ name }) => [props.match.params.name])
@@ -75,8 +78,6 @@ export const CommunityPage = (props: Props) => {
   const [isJoinCommunity, setIsJoinCommunity] = useState(false);
   const [inProgress, setInProgress] = useState(false);
   const [channelId, setChannelId] = useState("");
-  const [communities, setCommunities] = useState<Channel[]>([]);
-  const [isCommunityAlreadyJoined, setIsCommunityAlreadyJoined] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [loadCommunity, setLoadCommunity] = useState(false);
 
@@ -86,15 +87,13 @@ export const CommunityPage = (props: Props) => {
   const { messageServiceInstance, hasUserJoinedChat } = useContext(ChatContext);
   const { mutateAsync: joinChat } = useJoinChat();
 
-  useEffect(() => {
-    const communities = getJoinedCommunities(chat.channels, chat.leftChannelsList);
-    setCommunities(communities);
-  }, [chat.channels, chat.leftChannelsList]);
-
-  useEffect(() => {
-    const isAlreadyExists = communities.some((community) => community.id === channelId);
-    setIsCommunityAlreadyJoined(isAlreadyExists);
-  }, [communities]);
+  const isCommunityAlreadyJoined = useMemo(
+    () =>
+      getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
+        (community) => community.id === channelId
+      ),
+    [channels, leftChannelsIds]
+  );
 
   useEffect(() => {
     if (messageServiceInstance && loadCommunity) {
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index 3df5282d855..b6acdbf8e52 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -39,7 +39,6 @@ import {
 } from "./notifications";
 import { setSigningKey } from "./signing-key";
 import {
-  addChannels,
   addDirectMessages,
   addleftChannels,
   addPreviousPublicMessages,
@@ -101,7 +100,6 @@ export const ACTIONS = {
   setNotificationsSettingsItem,
   addDirectMessages,
   resetChat,
-  addChannels,
   addPublicMessage,
   addProfile,
   addleftChannels,
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index 3bf18b2a776..f08d52f622f 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -1,5 +1,4 @@
 import {
-  Channel,
   ChannelUpdate,
   DirectMessage,
   MessagesObject,
@@ -11,7 +10,6 @@ import { Dispatch } from "redux";
 import {
   Actions,
   ActionTypes,
-  AddChannelsAction,
   AddPreviousPublicMessagesAction,
   Chat,
   DeleteDirectMessagesAction,
@@ -54,21 +52,6 @@ export default (state: Chat = initialState, action: Actions): Chat => {
     case ActionTypes.RESET:
       return initialState;
 
-    case ActionTypes.CHANNELS: {
-      const { data } = action;
-
-      const defaultPublicMessages = data.map((channel) => ({
-        channelId: channel.id,
-        PublicMessage: {}
-      }));
-
-      return {
-        ...state,
-        channels: [...state.channels, ...data],
-        publicMessages: [...state.publicMessages, ...defaultPublicMessages]
-      };
-    }
-
     case ActionTypes.PUBLICMESSAGES: {
       const { channelId, data } = action;
 
@@ -266,10 +249,6 @@ export const resetChat = () => (dispatch: Dispatch) => {
   dispatch(resetChatAct());
 };
 
-export const addChannels = (data: Channel[]) => (dispatch: Dispatch) => {
-  dispatch(addChannelsAct(data));
-};
-
 export const addPublicMessage =
   (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
     dispatch(addPublicMessagesAct(channelId, data));
@@ -345,14 +324,6 @@ export const resetChatAct = (): ResetChatAction => {
     type: ActionTypes.RESET
   };
 };
-
-export const addChannelsAct = (data: Channel[]): AddChannelsAction => {
-  return {
-    type: ActionTypes.CHANNELS,
-    data
-  };
-};
-
 export const addProfilesAct = (data: Profile[]): ProfilesAction => {
   return {
     type: ActionTypes.PROFILES,
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index ee30d127a19..50dd9dff2b2 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -35,7 +35,6 @@ export enum ActionTypes {
   DIRECTCONTACTS = "@chat/DIRECTCONTACTS",
   DIRECTMESSAGES = "@chat/DIRECTMESSAGES",
   RESET = "@chat/RESET",
-  CHANNELS = "@chat/CHANNELS",
   PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
   PROFILES = "@chat/PROFILES",
   LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST",
@@ -70,11 +69,6 @@ export interface PublicMessagesAction {
   channelId: string;
 }
 
-export interface AddChannelsAction {
-  type: ActionTypes.CHANNELS;
-  data: Channel[];
-}
-
 export interface ProfilesAction {
   type: ActionTypes.PROFILES;
   data: Profile[];
@@ -136,7 +130,6 @@ export type Actions =
   | DirectContactsAction
   | DirectMessagesAction
   | ResetChatAction
-  | AddChannelsAction
   | PublicMessagesAction
   | ProfilesAction
   | LeftChannelsAction

From 5518477f1c34bd3fa0172e16ac71c248be83f103 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 6 Nov 2023 23:11:23 +0600
Subject: [PATCH 114/179] Chats: migrated message sending to mutations fully

---
 .../chats/mutations/add-direct-contact.ts     | 30 +++++++++++++++
 .../chats/mutations/create-community-chat.ts  |  4 +-
 src/common/features/chats/mutations/index.ts  |  1 +
 .../features/chats/mutations/send-message.ts  | 27 +++++++-------
 src/common/features/chats/nostr/core/index.ts |  4 ++
 .../nostr/{ => core}/nostr-fetch-mutation.ts  |  0
 .../nostr/{ => core}/nostr-fetch-query.tsx    |  0
 .../core/nostr-listener-query.tsx}            | 12 +++---
 .../{ => core}/nostr-publish-mutation.ts      | 13 ++++---
 src/common/features/chats/nostr/index.ts      |  4 +-
 .../nostr/mutations/find-healthy-relay.ts     | 20 ++++++++++
 .../features/chats/nostr/mutations/index.ts   |  2 +
 .../nostr/mutations/send-direct-message.ts    | 34 +++++++++++++++++
 .../nostr/mutations/send-public-message.ts    | 37 +++++++++++++++++++
 .../features/chats/nostr/nostr-provider.tsx   |  2 +-
 .../features/chats/queries/messages-query.ts  | 12 +++---
 16 files changed, 166 insertions(+), 36 deletions(-)
 create mode 100644 src/common/features/chats/mutations/add-direct-contact.ts
 create mode 100644 src/common/features/chats/nostr/core/index.ts
 rename src/common/features/chats/nostr/{ => core}/nostr-fetch-mutation.ts (100%)
 rename src/common/features/chats/nostr/{ => core}/nostr-fetch-query.tsx (100%)
 rename src/common/features/chats/{queries/message-listener-query.tsx => nostr/core/nostr-listener-query.tsx} (83%)
 rename src/common/features/chats/nostr/{ => core}/nostr-publish-mutation.ts (80%)
 create mode 100644 src/common/features/chats/nostr/mutations/find-healthy-relay.ts
 create mode 100644 src/common/features/chats/nostr/mutations/index.ts
 create mode 100644 src/common/features/chats/nostr/mutations/send-direct-message.ts
 create mode 100644 src/common/features/chats/nostr/mutations/send-public-message.ts

diff --git a/src/common/features/chats/mutations/add-direct-contact.ts b/src/common/features/chats/mutations/add-direct-contact.ts
new file mode 100644
index 00000000000..c7bbd98482c
--- /dev/null
+++ b/src/common/features/chats/mutations/add-direct-contact.ts
@@ -0,0 +1,30 @@
+import { useMutation } from "@tanstack/react-query";
+import { useDirectContactsQuery } from "../queries";
+import { DirectContact } from "../managers/message-manager-types";
+import { useNostrPublishMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+
+export function useAddDirectContact() {
+  const { mutateAsync: publishDirectContact } = useNostrPublishMutation(
+    ["chats/nostr-publish-direct-contact"],
+    Kind.Contacts,
+    () => {}
+  );
+  const { data: directContacts } = useDirectContactsQuery();
+
+  return useMutation(["chats/add-direct-contact"], async (contact: DirectContact) => {
+    const hasInDirectContactsAlready = directContacts?.some(
+      (c) => c.name === contact.name && c.pubkey === contact.pubkey
+    );
+    if (!hasInDirectContactsAlready) {
+      return publishDirectContact({
+        tags: [
+          ...(directContacts ?? []).map((contact) => [contact.pubkey, contact.name]),
+          [contact.pubkey, contact.name]
+        ],
+        eventMetadata: ""
+      });
+    }
+    return;
+  });
+}
diff --git a/src/common/features/chats/mutations/create-community-chat.ts b/src/common/features/chats/mutations/create-community-chat.ts
index d8c043b36d8..b144fb0217a 100644
--- a/src/common/features/chats/mutations/create-community-chat.ts
+++ b/src/common/features/chats/mutations/create-community-chat.ts
@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { useNostrPublishMutation } from "../nostr/nostr-publish-mutation";
+import { useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { Community } from "../../../store/communities";
 import { useNostrJoinedCommunityTeamQuery } from "../queries";
@@ -13,7 +13,7 @@ import { updateProfile } from "../../../api/operations";
 export function useCreateCommunityChat(community: Community) {
   const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(community);
   const { mutateAsync: createChannel } = useNostrPublishMutation(
-    ["chats/create-channel"],
+    ["chats/nostr-create-channel"],
     Kind.ChannelCreation,
     () => {},
     {}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index e52e3296a42..998202e57fa 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -3,3 +3,4 @@ export * from "./send-message";
 export * from "./join-chat";
 export * from "./create-community-chat";
 export * from "./add-community-channel";
+export * from "./add-direct-contact";
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 6f681c685f5..585ad9e6deb 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -3,16 +3,22 @@ import { UPLOADING } from "../components/chat-popup/chat-constants";
 import { useContext } from "react";
 import { ChatContext } from "../chat-context-provider";
 import { Channel } from "../managers/message-manager-types";
-import { useDirectContactsQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
+import { useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
+import { useAddDirectContact } from "./add-direct-contact";
 
 export function useSendMessage(
   currentChannel: Channel,
   currentUser: string,
   onSuccess: () => void
 ) {
-  const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
-  const { data: directContacts } = useDirectContactsQuery();
+  const { activeUserKeys, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
+    activeUserKeys.priv,
+    receiverPubKey
+  );
+  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(currentChannel.id);
+  const { mutateAsync: addDirectContact } = useAddDirectContact();
 
   return useMutation(
     ["chats/send-message"],
@@ -25,23 +31,18 @@ export function useSendMessage(
         throw new Error("[Chat][SendMessage] – no active user");
       }
 
-      // Set the user as direct contact if it isn't there yet
-      if (
-        receiverPubKey &&
-        !directContacts?.some((contact) => contact.name === currentUser) &&
-        !!currentUser
-      ) {
-        messageServiceInstance?.publishContacts(currentUser, receiverPubKey);
-      }
+      // Add user to direct contacts if its not there yet
+      // E.g. if user opened chat room directly from the address bar
+      addDirectContact({ pubkey: receiverPubKey, name: currentUser });
 
       if (!currentChannel && isCommunity(currentUser)) {
         throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
       }
 
       if (currentChannel) {
-        return messageServiceInstance?.sendPublicMessage(currentChannel, message, [], "");
+        return sendPublicMessage({ message });
       } else if (currentUser) {
-        return messageServiceInstance?.sendDirectMessage(receiverPubKey!, message);
+        return sendDirectMessage(message);
       } else {
         throw new Error("[Chat][SendMessage] – no receiver");
       }
diff --git a/src/common/features/chats/nostr/core/index.ts b/src/common/features/chats/nostr/core/index.ts
new file mode 100644
index 00000000000..9ad225d1568
--- /dev/null
+++ b/src/common/features/chats/nostr/core/index.ts
@@ -0,0 +1,4 @@
+export * from "./nostr-listener-query";
+export * from "./nostr-fetch-mutation";
+export * from "./nostr-fetch-query";
+export * from "./nostr-publish-mutation";
diff --git a/src/common/features/chats/nostr/nostr-fetch-mutation.ts b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
similarity index 100%
rename from src/common/features/chats/nostr/nostr-fetch-mutation.ts
rename to src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
diff --git a/src/common/features/chats/nostr/nostr-fetch-query.tsx b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
similarity index 100%
rename from src/common/features/chats/nostr/nostr-fetch-query.tsx
rename to src/common/features/chats/nostr/core/nostr-fetch-query.tsx
diff --git a/src/common/features/chats/queries/message-listener-query.tsx b/src/common/features/chats/nostr/core/nostr-listener-query.tsx
similarity index 83%
rename from src/common/features/chats/queries/message-listener-query.tsx
rename to src/common/features/chats/nostr/core/nostr-listener-query.tsx
index 6cb24679172..d0535e7487f 100644
--- a/src/common/features/chats/queries/message-listener-query.tsx
+++ b/src/common/features/chats/nostr/core/nostr-listener-query.tsx
@@ -6,7 +6,7 @@ import useMap from "react-use/lib/useMap";
 import useDebounce from "react-use/lib/useDebounce";
 import { UseQueryOptions } from "@tanstack/react-query/src/types";
 
-export const MessageListenerQueriesContext = createContext<{
+export const NostrListenerQueriesContext = createContext<{
   subscribers: Record<string, boolean>;
   set: (key: string, value: boolean) => void;
   get: (key: string) => boolean;
@@ -16,16 +16,16 @@ export const MessageListenerQueriesContext = createContext<{
   get: () => false
 });
 
-export function MessageListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
+export function NostrListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
   const [subscribers, { set, get }] = useMap<Record<string, boolean>>();
 
   return (
-    <MessageListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
+    <NostrListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
   );
 }
 
 /**
- * Custom hook for listening to messages and updating a query with new data.
+ * Custom hook for listening to Nostr events and updating a query with new data.
  *
  * @template TQData - The data type returned by the query.
  * @template TQKey - The key used to identify the query.
@@ -35,14 +35,14 @@ export function MessageListenerQueriesProvider({ children }: PropsWithChildren<u
  * @param {UseQueryOptions<TQData>} [queryOptions] - Additional query options.
  * @returns {QueryObserverResult<TQData, unknown>} - The result of the query, including data and query status.
  */
-export function useMessageListenerQuery<TQData, TQKey extends QueryKey>(
+export function useNostrListenerQuery<TQData, TQKey extends QueryKey>(
   key: TQKey,
   event: MessageEvents,
   queryFn: (data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void,
   queryOptions?: UseQueryOptions<TQData>
 ): QueryObserverResult<TQData> {
   const { messageServiceInstance } = useContext(ChatContext);
-  const { set, get } = useContext(MessageListenerQueriesContext);
+  const { set, get } = useContext(NostrListenerQueriesContext);
   const queryClient = useQueryClient();
 
   const query = useQuery<TQData>(key, () => queryClient.getQueryData<TQData>(key)!!, queryOptions);
diff --git a/src/common/features/chats/nostr/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
similarity index 80%
rename from src/common/features/chats/nostr/nostr-publish-mutation.ts
rename to src/common/features/chats/nostr/core/nostr-publish-mutation.ts
index baa7d364ae2..4d3b3669424 100644
--- a/src/common/features/chats/nostr/nostr-publish-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
@@ -1,11 +1,11 @@
 import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { useContext } from "react";
-import { NostrContext } from "../nostr";
-import { Event, getEventHash, Kind, signEvent } from "../../../../lib/nostr-tools/event";
-import { ChatContext } from "../chat-context-provider";
-import { Metadata } from "../managers/message-manager-types";
+import { Metadata } from "../../managers/message-manager-types";
+import { Event, getEventHash, Kind, signEvent } from "../../../../../lib/nostr-tools/event";
+import { NostrContext } from "../nostr-context";
+import { ChatContext } from "../../chat-context-provider";
 
-type Payload = { eventMetadata: Metadata; tags: string[][] };
+type Payload = { eventMetadata: Metadata | string; tags: string[][] };
 
 export function useNostrPublishMutation(
   key: MutationKey,
@@ -32,7 +32,8 @@ export function useNostrPublishMutation(
             kind,
             id: "",
             sig: "",
-            content: JSON.stringify(eventMetadata),
+            content:
+              typeof eventMetadata === "object" ? JSON.stringify(eventMetadata) : eventMetadata,
             pubkey: activeUserKeys.pub,
             created_at: Math.floor(Date.now() / 1000),
             tags
diff --git a/src/common/features/chats/nostr/index.ts b/src/common/features/chats/nostr/index.ts
index 00244e0fc2c..d6b884dc2be 100644
--- a/src/common/features/chats/nostr/index.ts
+++ b/src/common/features/chats/nostr/index.ts
@@ -1,4 +1,4 @@
-export * from "./nostr-fetch-query";
 export * from "./nostr-provider";
 export * from "./nostr-context";
-export * from "./nostr-fetch-mutation";
+export * from "./core";
+export * from "./mutations";
diff --git a/src/common/features/chats/nostr/mutations/find-healthy-relay.ts b/src/common/features/chats/nostr/mutations/find-healthy-relay.ts
new file mode 100644
index 00000000000..2762f7bad04
--- /dev/null
+++ b/src/common/features/chats/nostr/mutations/find-healthy-relay.ts
@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { NostrContext } from "../nostr-context";
+import { useMutation } from "@tanstack/react-query";
+
+export function useFindHealthyRelayQuery() {
+  const { pool } = useContext(NostrContext);
+
+  return useMutation(["chats/nostr-find-healthy-relay"], async (channelId: string) => {
+    const relays = (pool?.seenOn(channelId) as string[]) ?? [];
+    for (const relay of relays) {
+      try {
+        await pool?.ensureRelay(relay);
+        return relay;
+      } catch (e) {
+        return undefined;
+      }
+    }
+    return undefined;
+  });
+}
diff --git a/src/common/features/chats/nostr/mutations/index.ts b/src/common/features/chats/nostr/mutations/index.ts
new file mode 100644
index 00000000000..92e687d702a
--- /dev/null
+++ b/src/common/features/chats/nostr/mutations/index.ts
@@ -0,0 +1,2 @@
+export * from "./send-direct-message";
+export * from "./send-public-message";
diff --git a/src/common/features/chats/nostr/mutations/send-direct-message.ts b/src/common/features/chats/nostr/mutations/send-direct-message.ts
new file mode 100644
index 00000000000..5b1457b4afa
--- /dev/null
+++ b/src/common/features/chats/nostr/mutations/send-direct-message.ts
@@ -0,0 +1,34 @@
+import { useNostrPublishMutation } from "../core";
+import { Kind } from "../../../../../lib/nostr-tools/event";
+import { useMutation } from "@tanstack/react-query";
+import { encrypt } from "../../../../../lib/nostr-tools/nip04";
+import { useFindHealthyRelayQuery } from "./find-healthy-relay";
+
+export function useNostrSendDirectMessage(
+  ownerPrivateKey: string,
+  destinationPublicKey: string,
+  parent?: string
+) {
+  const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
+    ["chats/nostr-publish-encrypted-message"],
+    Kind.EncryptedDirectMessage,
+    () => {}
+  );
+  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
+
+  return useMutation(["chats/send-direct-message"], async (message: string) => {
+    const encryptedMessage = await encrypt(ownerPrivateKey, destinationPublicKey, message);
+    const tags = [["p", destinationPublicKey]];
+
+    if (parent) {
+      const relay = await findHealthyRelay(parent);
+      if (relay) {
+        tags.push(["e", parent, relay, "root"]);
+      }
+    }
+    return publishEncryptedMessage({
+      tags,
+      eventMetadata: encryptedMessage
+    });
+  });
+}
diff --git a/src/common/features/chats/nostr/mutations/send-public-message.ts b/src/common/features/chats/nostr/mutations/send-public-message.ts
new file mode 100644
index 00000000000..bc78cfd46b9
--- /dev/null
+++ b/src/common/features/chats/nostr/mutations/send-public-message.ts
@@ -0,0 +1,37 @@
+import { useNostrPublishMutation } from "../core";
+import { Kind } from "../../../../../lib/nostr-tools/event";
+import { useMutation } from "@tanstack/react-query";
+import { useFindHealthyRelayQuery } from "./find-healthy-relay";
+
+interface Payload {
+  message: string;
+  mentions?: string[];
+}
+
+export function useNostrSendPublicMessage(channelId: string, parent?: string) {
+  const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
+    ["chats/nostr-publish-channel-message"],
+    Kind.ChannelMessage,
+    () => {}
+  );
+  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
+
+  return useMutation(["chats/send-public-message"], async ({ message, mentions }: Payload) => {
+    const root = parent || channelId;
+    const relay = await findHealthyRelay(root);
+
+    const tags: string[][] = [];
+    if (relay) {
+      tags.push(["e", root, relay, "root"]);
+    }
+
+    if (mentions) {
+      mentions.forEach((m) => tags.push(["p", m]));
+    }
+
+    return publishEncryptedMessage({
+      tags,
+      eventMetadata: message
+    });
+  });
+}
diff --git a/src/common/features/chats/nostr/nostr-provider.tsx b/src/common/features/chats/nostr/nostr-provider.tsx
index 3028a217d31..399a76f5f69 100644
--- a/src/common/features/chats/nostr/nostr-provider.tsx
+++ b/src/common/features/chats/nostr/nostr-provider.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useMemo, useRef } from "react";
 import SimplePool from "../../../../lib/nostr-tools/pool";
 import { NostrContext } from "./nostr-context";
 
-const RELAYS = {
+export const RELAYS = {
   "wss://relay1.nostrchat.io": { read: true, write: true },
   "wss://relay2.nostrchat.io": { read: true, write: true },
   "wss://relay.damus.io": { read: true, write: true },
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 21d3e02a1cc..440d6a96a7d 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -1,13 +1,13 @@
 import { useContext, useMemo } from "react";
 import { ChatContext } from "../chat-context-provider";
 import { MessageEvents } from "../../../helper/message-service";
-import { useMessageListenerQuery } from "./message-listener-query";
 import { ChatQueries } from "./queries";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { DirectMessage, Message, PublicMessage } from "../managers/message-manager-types";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import isCommunity from "../../../helper/is-community";
 import { useChatProfilesQuery } from "./chat-profiles-query";
+import { useNostrListenerQuery } from "../nostr";
 
 export function useMessagesQuery(username?: string) {
   const { messageServiceInstance } = useContext(ChatContext);
@@ -64,7 +64,7 @@ export function useMessagesQuery(username?: string) {
     queryClient.invalidateQueries([ChatQueries.MESSAGES, "all"]);
   };
 
-  useMessageListenerQuery<Message[], ChatQueries[]>(
+  useNostrListenerQuery<Message[], ChatQueries[]>(
     [ChatQueries.BEFORE_DIRECT_MESSAGES_TEMP],
     MessageEvents.DirectMessageBeforeSent,
     (_, nextData, resolver) => {
@@ -78,7 +78,7 @@ export function useMessagesQuery(username?: string) {
     }
   );
 
-  useMessageListenerQuery<DirectMessage[], ChatQueries[]>(
+  useNostrListenerQuery<DirectMessage[], ChatQueries[]>(
     [ChatQueries.AFTER_DIRECT_MESSAGES_TEMP],
     MessageEvents.DirectMessageAfterSent,
     (_, nextData, resolver) => {
@@ -94,7 +94,7 @@ export function useMessagesQuery(username?: string) {
     }
   );
 
-  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
     [ChatQueries.BEFORE_PUBLIC_MESSAGES_TEMP],
     MessageEvents.PublicMessageBeforeSent,
     (_, nextData, resolver) => {
@@ -108,7 +108,7 @@ export function useMessagesQuery(username?: string) {
     }
   );
 
-  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
     [ChatQueries.AFTER_PUBLIC_MESSAGES_TEMP],
     MessageEvents.PublicMessageAfterSent,
     (_, nextData, resolver) => {
@@ -127,7 +127,7 @@ export function useMessagesQuery(username?: string) {
     }
   );
 
-  useMessageListenerQuery<PublicMessage[], ChatQueries[]>(
+  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
     [ChatQueries.PREVIOUS_PUBLIC_MESSAGES],
     MessageEvents.PreviousPublicMessages,
     (_, nextData, resolver) => {

From 135e860b88bf08d143c58959f1c410a765c894ff Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 7 Nov 2023 13:08:07 +0600
Subject: [PATCH 115/179] Chats: added initial messages nostr query

---
 .../features/chats/chat-context-provider.tsx  |   7 +-
 .../chats/components/chat-message-box.tsx     |   8 +-
 .../chats/components/chat-messages-view.tsx   |  29 +-
 .../chats/components/chat-popup/index.tsx     | 107 ++-----
 .../chats-sidebar/chat-sidebar-channel.tsx    |  33 +++
 .../chat-sidebar-direct-contact.tsx           |   9 +-
 .../chats/components/chats-sidebar/index.tsx  |  37 +--
 .../components/join-community-chat-btn.tsx    |   4 +-
 .../chats/managers/message-manager.tsx        | 271 +++++++++---------
 .../chats/mutations/add-community-channel.ts  |   2 +-
 .../features/chats/mutations/send-message.ts  |   2 +-
 src/common/features/chats/nostr/core/index.ts |   1 +
 .../chats/nostr/core/nostr-fetch-mutation.ts  |  10 +-
 .../chats/nostr/core/nostr-fetch-query.tsx    |  21 +-
 .../chats/nostr/core/nostr-listener-query.tsx |  41 +--
 .../nostr/core/nostr-listeners-provider.tsx   |  20 ++
 .../nostr/queries/direct-messages-query.ts    |  40 +++
 .../features/chats/nostr/queries/index.ts     |   2 +
 .../nostr/queries/public-messages-query.ts    |  27 ++
 .../chats/nostr/utils/event-converter.ts      | 104 +++++--
 .../chats/nostr/utils/filter-tag-value.ts     |   5 +
 .../features/chats/nostr/utils/index.ts       |   1 +
 .../chats/queries/chat-profiles-query.ts      |  31 +-
 src/common/features/chats/queries/index.ts    |   2 -
 .../features/chats/queries/messages-query.ts  | 177 +++---------
 src/common/store/chat/types.ts                |   5 -
 26 files changed, 459 insertions(+), 537 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
 create mode 100644 src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
 create mode 100644 src/common/features/chats/nostr/queries/direct-messages-query.ts
 create mode 100644 src/common/features/chats/nostr/queries/index.ts
 create mode 100644 src/common/features/chats/nostr/queries/public-messages-query.ts
 create mode 100644 src/common/features/chats/nostr/utils/filter-tag-value.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index da8fd94633f..6dbeb0e261d 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -7,8 +7,7 @@ import { NostrKeysType } from "./types";
 import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
 import { useJoinChat } from "./mutations";
-import { MessageListenerQueriesProvider } from "./queries";
-import { NostrProvider } from "./nostr";
+import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 
 interface Context {
   activeUserKeys: NostrKeysType;
@@ -147,7 +146,7 @@ export const ChatContextProvider = (props: Props) => {
   };
 
   return (
-    <MessageListenerQueriesProvider>
+    <NostrListenerQueriesProvider>
       <ChatContext.Provider
         value={{
           activeUserKeys,
@@ -172,6 +171,6 @@ export const ChatContextProvider = (props: Props) => {
       >
         <NostrProvider>{props.children}</NostrProvider>
       </ChatContext.Provider>
-    </MessageListenerQueriesProvider>
+    </NostrListenerQueriesProvider>
   );
 };
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 30f0a06b11c..2a277d3eda5 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -12,6 +12,7 @@ import { useMount } from "react-use";
 import { Button } from "@ui/button";
 import { Channel, ChannelUpdate } from "../managers/message-manager-types";
 import { useChannelsQuery } from "../queries";
+import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 
 interface MatchParams {
   filter: string;
@@ -29,6 +30,7 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   const { chat } = useMappedStore();
   const { data: channels } = useChannelsQuery();
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
 
@@ -47,7 +49,7 @@ export default function ChatsMessagesBox(props: Props) {
   });
 
   useEffect(() => {
-    if (currentCommunity && chat.leftChannelsList.includes(currentCommunity.id)) {
+    if (currentCommunity && leftChannelsIds?.includes(currentCommunity.id)) {
       setHasLeftCommunity(true);
     }
   }, [currentCommunity]);
@@ -63,7 +65,7 @@ export default function ChatsMessagesBox(props: Props) {
 
   const checkUserCommunityMembership = () => {
     getCommunityProfile();
-    const communities = getJoinedCommunities(channels ?? [], chat.leftChannelsList);
+    const communities = getJoinedCommunities(channels ?? [], leftChannelsIds ?? []);
     const isCommunity = channels?.some((channel) => channel.communityName === username);
     if (isCommunity) {
       setIsCommunityChatEnabled(true);
@@ -119,7 +121,7 @@ export default function ChatsMessagesBox(props: Props) {
     if (currentCommunity) {
       if (hasLeftCommunity) {
         messageServiceInstance?.updateLeftChannelList(
-          chat.leftChannelsList.filter((x) => x !== currentCommunity?.id)
+          leftChannelsIds?.filter((x) => x !== currentCommunity?.id) ?? []
         );
       }
       messageServiceInstance?.loadChannel(currentCommunity?.id);
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 00161a0dd0b..b32f1dd5521 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,8 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { fetchCommunityMessages } from "../utils";
 import { History } from "history";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import ChatsProfileBox from "./chat-profile-box";
 import ChatsChannelMessages from "./chats-channel-messages";
 import ChatsDirectMessages from "./chats-direct-messages";
@@ -37,7 +35,6 @@ export default function ChatsMessagesView({
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
-  const { chat } = useMappedStore();
   const [directUser, setDirectUser] = useState("");
   const [communityName, setCommunityName] = useState("");
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
@@ -50,23 +47,11 @@ export default function ChatsMessagesView({
   }, []);
 
   useEffect(() => {
-    if (messages.length < 25) {
+    if (messages.length < 45) {
       setHasMore(false);
     }
   }, [messages]);
 
-  useEffect(() => {
-    getChannelMessages();
-  }, [chat.publicMessages]);
-
-  useEffect(() => {
-    if (directUser) {
-      // getDirectMessages();
-    } else if (communityName && currentChannel) {
-      getChannelMessages();
-    }
-  }, [directUser, communityName, currentChannel, chat.directMessages]);
-
   useEffect(() => {
     setIsScrollToBottom(false);
     setDirectUser("");
@@ -105,18 +90,6 @@ export default function ChatsMessagesView({
     }
   };
 
-  const getChannelMessages = () => {
-    if (currentChannel) {
-      const publicMessages = fetchCommunityMessages(
-        chat.publicMessages,
-        currentChannel,
-        currentChannel.hiddenMessageIds
-      );
-      const messages = publicMessages.sort((a, b) => a.created - b.created);
-      // setPublicMessages(messages);
-    }
-  };
-
   const scrollToBottom = () => {
     messagesBoxRef &&
       messagesBoxRef?.current?.scroll({
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 101dc00b4dc..4856113cd78 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
 import { history } from "../../../../store";
 import { Community } from "../../../../store/communities";
-import { ChannelUpdate, DirectMessage, PublicMessage } from "../../managers/message-manager-types";
+import { ChannelUpdate } from "../../managers/message-manager-types";
 import Tooltip from "../../../../components/tooltip";
 import LinearProgress from "../../../../components/linear-progress";
 import ManageChatKey from "../manage-chat-key";
@@ -12,7 +12,7 @@ import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import { getCommunity } from "../../../../api/bridge";
 import "./index.scss";
-import { fetchCommunityMessages, getPrivateKey, getUserChatPublicKey } from "../../utils";
+import { getPrivateKey, getUserChatPublicKey } from "../../utils";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
@@ -25,7 +25,7 @@ import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
 import { useJoinChat } from "../../mutations/join-chat";
-import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
+import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -45,6 +45,11 @@ export const ChatPopUp = () => {
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
+  const directContact = useMemo(
+    () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
+    [directContacts]
+  );
+  const { data: messages } = useMessagesQuery(directContact?.name);
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -58,11 +63,9 @@ export const ChatPopUp = () => {
   const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [directMessagesList, setDirectMessagesList] = useState<DirectMessage[]>([]);
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
   const [currentCommunity, setCurrentCommunity] = useState<Community>();
-  const [publicMessages, setPublicMessages] = useState<PublicMessage[]>([]);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -97,13 +100,14 @@ export const ChatPopUp = () => {
       .filter((x) => x.channelId === currentChannel?.id!)
       .sort((a, b) => b.created - a.created)[0];
     if (currentChannel && updated) {
-      const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        chat.publicMessages,
-        currentChannel,
-        updated?.hiddenMessageIds
-      );
-      const messages = publicMessages.sort((a, b) => a.created - b.created);
-      setPublicMessages(messages);
+      // TODO: check that updated channel affecting messagse
+      // const publicMessages: PublicMessage[] = fetchCommunityMessages(
+      //   chat.publicMessages,
+      //   currentChannel,
+      //   updated?.hiddenMessageIds
+      // );
+      // const messages = publicMessages.sort((a, b) => a.created - b.created);
+      // setPublicMessages(messages);
       const channel = {
         name: updated.name,
         about: updated.about,
@@ -127,12 +131,6 @@ export const ChatPopUp = () => {
     }
   }, [isTop]);
 
-  useEffect(() => {
-    const msgsList = fetchDirectMessages(receiverPubKey!);
-    const messages = msgsList.sort((a, b) => a.created - b.created);
-    setDirectMessagesList(messages);
-  }, [chat.directMessages]);
-
   useEffect(() => {
     if (prevActiveUser?.username !== activeUser?.username) {
       setIsCommunity(false);
@@ -142,26 +140,10 @@ export const ChatPopUp = () => {
   }, [global.theme, activeUser]);
 
   useEffect(() => {
-    if (directMessagesList.length !== 0 && !isScrolled) {
-      scrollerClicked();
-    }
-    if (!isScrolled && publicMessages.length !== 0 && isCommunity) {
+    if (messages.length !== 0 && !isScrolled) {
       scrollerClicked();
     }
-  }, [directMessagesList, publicMessages]);
-
-  useEffect(() => {
-    if (currentChannel && isCommunity) {
-      messageServiceInstance?.fetchChannel(currentChannel.id);
-      const publicMessages: PublicMessage[] = fetchCommunityMessages(
-        chat.publicMessages,
-        currentChannel,
-        currentChannel.hiddenMessageIds
-      );
-      const messages = publicMessages.sort((a, b) => a.created - b.created);
-      setPublicMessages(messages);
-    }
-  }, [currentChannel, isCommunity, chat.publicMessages]);
+  }, [messages]);
 
   useEffect(() => {
     if ((isCurrentUser || isCommunity) && show) {
@@ -169,18 +151,11 @@ export const ChatPopUp = () => {
     }
   }, [isCurrentUser, isCommunity, show]);
 
-  useEffect(() => {
-    const msgsList = fetchDirectMessages(receiverPubKey!);
-    const messages = msgsList.sort((a, b) => a.created - b.created);
-    setDirectMessagesList(messages);
-  }, [activeUser]);
-
   useEffect(() => {
     if (isCommunity && show) {
       fetchCommunity();
 
       scrollerClicked();
-      fetchCurrentChannel(communityName);
     }
   }, [isCommunity, communityName, show]);
 
@@ -194,10 +169,6 @@ export const ChatPopUp = () => {
         fetchCurrentUserData();
       }
 
-      const peer = directContacts?.find((x) => x.name === currentUser)?.pubkey ?? "";
-      const msgsList = fetchDirectMessages(peer!);
-      const messages = msgsList.sort((a, b) => a.created - b.created);
-      setDirectMessagesList(messages);
       if (!messageServiceInstance) {
         setNostrkeys(activeUserKeys!);
       }
@@ -211,41 +182,6 @@ export const ChatPopUp = () => {
     setCurrentCommunity(community!);
   };
 
-  const fetchCurrentChannel = (communityName: string) => {
-    const channel = channels?.find((channel) => channel.communityName === communityName);
-    if (channel) {
-      const updated: ChannelUpdate = chat.updatedChannel
-        .filter((x) => x.channelId === channel.id)
-        .sort((a, b) => b.created - a.created)[0];
-      if (updated) {
-        const channel = {
-          name: updated.name,
-          about: updated.about,
-          picture: updated.picture,
-          communityName: updated.communityName,
-          communityModerators: updated.communityModerators,
-          id: updated.channelId,
-          creator: updated.creator,
-          created: currentChannel?.created!,
-          hiddenMessageIds: updated.hiddenMessageIds,
-          removedUserIds: updated.removedUserIds
-        };
-        setCurrentChannel(channel);
-      } else {
-        setCurrentChannel(channel);
-      }
-    }
-  };
-
-  const fetchDirectMessages = (peer: string) => {
-    for (const item of chat.directMessages) {
-      if (item.peer === peer) {
-        return Object.values(item.chat);
-      }
-    }
-    return [];
-  };
-
   const fetchCurrentUserData = async () => {
     const nsKey = await getUserChatPublicKey(currentUser);
     if (nsKey) {
@@ -262,7 +198,7 @@ export const ChatPopUp = () => {
     setInProgress(true);
     // todo: make it infinite query
     messageServiceInstance
-      ?.fetchPrevMessages(currentChannel!.id, publicMessages[0].created)
+      ?.fetchPrevMessages(currentChannel!.id, messages[0].created)
       .then((num) => {
         if (num < 25) {
           setHasMore(false);
@@ -285,7 +221,7 @@ export const ChatPopUp = () => {
     setIsScrolled(isScrolled);
     setIsScrollToTop(isScrollToTop);
     setIsScrollToBottom(isScrollToBottom);
-    const scrollerTop = element.scrollTop <= 600 && publicMessages.length > 25;
+    const scrollerTop = element.scrollTop <= 600 && messages.length > 25;
     if (isCommunity && scrollerTop) {
       setIsTop(true);
     } else {
@@ -316,9 +252,6 @@ export const ChatPopUp = () => {
         priv: getPrivateKey(activeUser?.username!)!!
       };
       setNostrkeys(keys);
-      if (isCommunity && communityName) {
-        fetchCurrentChannel(communityName);
-      }
     }
   };
 
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
new file mode 100644
index 00000000000..60490c7c9f5
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom";
+import React, { useContext } from "react";
+import { Channel } from "../../managers/message-manager-types";
+import { ChatContext } from "../../chat-context-provider";
+import UserAvatar from "../../../../components/user-avatar";
+import { useLastMessagesQuery } from "../../queries";
+
+interface Props {
+  username: string;
+  channel: Channel;
+}
+
+export function ChatSidebarChannel({ channel, username }: Props) {
+  const { setRevealPrivKey } = useContext(ChatContext);
+
+  const { data: lastMessages } = useLastMessagesQuery();
+
+  return (
+    <Link to={`/chats/${channel.communityName}`} key={channel.id}>
+      <div
+        className={`community ${username === channel.communityName ? "selected" : ""}`}
+        key={channel.id}
+        onClick={() => setRevealPrivKey(false)}
+      >
+        <UserAvatar username={channel.communityName!} size="medium" />
+        <div className="community-info">
+          <p className="community-name">{channel.name}</p>
+          <p className="community-last-message">{lastMessages[channel.name].content}</p>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 537b48a6857..502b0bdde2c 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -10,11 +10,10 @@ import { useLastMessagesQuery } from "../../queries";
 interface Props {
   contact: DirectContact;
   username: string;
-  handleRevealPrivKey: () => void;
 }
 
-export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKey }: Props) {
-  const { setReceiverPubKey } = useContext(ChatContext);
+export function ChatSidebarDirectContact({ contact, username }: Props) {
+  const { setReceiverPubKey, revealPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
   const { data: directMessagesLastMessages } = useLastMessagesQuery();
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
@@ -33,7 +32,9 @@ export function ChatSidebarDirectContact({ contact, username, handleRevealPrivKe
       to={`/chats/@${contact.name}`}
       onClick={() => {
         setReceiverPubKey(contact.pubkey);
-        handleRevealPrivKey();
+        if (revealPrivKey) {
+          setRevealPrivKey(false);
+        }
       }}
     >
       <UserAvatar username={contact.name} size="medium" />
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 8d618b21e06..3ea54341daf 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,16 +1,8 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
 import { History } from "history";
-import {
-  formattedUserName,
-  getCommunityLastMessage,
-  getJoinedCommunities,
-  getUserChatPublicKey
-} from "../../utils";
+import { formattedUserName, getJoinedCommunities, getUserChatPublicKey } from "../../utils";
 import ChatsScroller from "../chats-scroller";
-import UserAvatar from "../../../../components/user-avatar";
 import { AccountWithReputation } from "../../types";
-import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatSidebarHeader } from "./chat-sidebar-header";
 import { ChatSidebarSearch } from "./chat-sidebar-search";
@@ -19,6 +11,7 @@ import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
 import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
+import { ChatSidebarChannel } from "./chat-sidebar-channel";
 
 interface Props {
   username: string;
@@ -27,8 +20,7 @@ interface Props {
 
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
-  const { chat } = useMappedStore();
-  const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
+  const { setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
@@ -68,12 +60,6 @@ export default function ChatsSideBar(props: Props) {
     setIsScrollToTop(isScrollToTop);
   };
 
-  const handleRevealPrivKey = () => {
-    if (revealPrivKey) {
-      setRevealPrivKey(false);
-    }
-  };
-
   const getReceiverPubKey = async (username: string) => {
     const peer = directContacts?.find((x) => x.name === username)?.pubkey ?? "";
     if (peer) {
@@ -114,21 +100,7 @@ export default function ChatsSideBar(props: Props) {
           <>
             {communities.length !== 0 && <p className="community-title">Communities</p>}
             {communities.map((channel) => (
-              <Link to={`/chats/${channel.communityName}`} key={channel.id}>
-                <div
-                  className={`community ${username === channel.communityName ? "selected" : ""}`}
-                  key={channel.id}
-                  onClick={() => setRevealPrivKey(false)}
-                >
-                  <UserAvatar username={channel.communityName!} size="medium" />
-                  <div className="community-info">
-                    <p className="community-name">{channel.name}</p>
-                    <p className="community-last-message">
-                      {getCommunityLastMessage(channel.id, chat.publicMessages)}
-                    </p>
-                  </div>
-                </div>
-              </Link>
+              <ChatSidebarChannel key={channel.id} channel={channel} username={username} />
             ))}
             {directContacts?.length !== 0 && (
               <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
@@ -140,7 +112,6 @@ export default function ChatsSideBar(props: Props) {
                 key={contact.pubkey}
                 contact={contact}
                 username={username}
-                handleRevealPrivKey={handleRevealPrivKey}
               />
             ))}
           </>
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 1f74e18d902..c3704d297fe 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -12,6 +12,7 @@ import {
   useCommunityChannelQuery,
   useNostrJoinedCommunityTeamQuery
 } from "../queries";
+import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 
 interface Props {
   history: History;
@@ -31,6 +32,7 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
   const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
     useCreateCommunityChat(props.community);
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const isChatEnabled = useMemo(() => !!currentChannel, [currentChannel]);
   const isCommunityChatJoined = useMemo(
@@ -38,7 +40,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       channels?.some(
         (item) =>
           item.communityName === props.community.name &&
-          !chat.leftChannelsList.includes(currentChannel?.id!)
+          leftChannelsIds?.includes(currentChannel?.id!)
       ),
     [channels]
   );
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index d1e5bf266a5..3ca9e03ca21 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -53,7 +53,6 @@ const MessageManager = () => {
   const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
   const [isCommunityCreated, setIsCommunityCreated] = useState(false);
   const [replacedPublicMessagesBuffer, setReplacedPublicMessagesBuffer] = useState<string[]>([]);
-  const [isDirectChatCreated, setIsDirectChatCreated] = useState(false);
   const [replacedDirectMessagesBuffer, setReplacedDirectMessagesBuffer] = useState<string[]>([]);
 
   const { messageServiceInstance, initMessageServiceInstance, setMessageServiceInstance } =
@@ -63,10 +62,7 @@ const MessageManager = () => {
     if (channels?.length !== 0) {
       setIsCommunityCreated(true);
     }
-    if (chat.directMessages.length !== 0) {
-      setIsDirectChatCreated(true);
-    }
-  }, [channels, chat.directMessages]);
+  }, [channels]);
 
   useEffect(() => {
     window.addEventListener("createMSInstance", createMSInstance);
@@ -143,151 +139,150 @@ const MessageManager = () => {
     };
   }, [messageService, chat.profiles]);
 
-  const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
-    setTimeout(() => {
-      verifyPublicMessageSending(channelId, data);
-    }, 20000);
-  };
+  // const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
+  //   setTimeout(() => {
+  //     verifyPublicMessageSending(channelId, data);
+  //   }, 20000);
+  // };
 
   //public message handle before sent
 
-  const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
-    data.map((m) => {
-      const { id, root } = m;
-      setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-      addPublicMessage(root, m);
-      checkPublicMessageSending(root, m);
-    });
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(
-      MessageEvents.PublicMessageBeforeSent,
-      handlePublicMessageBeforeSent
-    );
-    messageService?.addListener(
-      MessageEvents.PublicMessageBeforeSent,
-      handlePublicMessageBeforeSent
-    );
-
-    return () => {
-      messageService?.removeListener(
-        MessageEvents.PublicMessageBeforeSent,
-        handlePublicMessageBeforeSent
-      );
-    };
-  }, [messageService, chat.profiles, chat.publicMessages]);
+  // const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
+  //   data.map((m) => {
+  //     const { id, root } = m;
+  //     setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
+  //     addPublicMessage(root, m);
+  //     checkPublicMessageSending(root, m);
+  //   });
+  // };
+
+  // useEffect(() => {
+  //   messageService?.removeListener(
+  //     MessageEvents.PublicMessageBeforeSent,
+  //     handlePublicMessageBeforeSent
+  //   );
+  //   messageService?.addListener(
+  //     MessageEvents.PublicMessageBeforeSent,
+  //     handlePublicMessageBeforeSent
+  //   );
+  //
+  //   return () => {
+  //     messageService?.removeListener(
+  //       MessageEvents.PublicMessageBeforeSent,
+  //       handlePublicMessageBeforeSent
+  //     );
+  //   };
+  // }, [messageService, chat.profiles, chat.publicMessages]);
 
   //Public Message handler after sent
-  const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
-    console.log("data", data);
-    if (isCommunityCreated) {
-      data.forEach((message) => {
-        const { root, id } = message;
-        if (replacedPublicMessagesBuffer.includes(id)) {
-          setReplacedPublicMessagesBuffer((prevBuffer) =>
-            prevBuffer.filter((messageId) => messageId !== id)
-          );
-          replacePublicMessage(root, message);
-        } else {
-          addPublicMessage(root, message);
-        }
-      });
-    } else {
-      setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
-    }
-    let uniqueUsers: string[] = [];
-
-    for (const item of data) {
-      const isCreatorMatch = chat.profiles.find((profile) => profile.creator === item.creator);
-
-      if (!isCreatorMatch) {
-        if (!uniqueUsers.includes(item.creator)) {
-          uniqueUsers.push(item.creator);
-        }
-      }
-    }
-    messageServiceInstance?.loadProfiles(uniqueUsers);
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(
-      MessageEvents.PublicMessageAfterSent,
-      handlePublicMessageAfterSent
-    );
-    messageService?.addListener(MessageEvents.PublicMessageAfterSent, handlePublicMessageAfterSent);
-
-    return () => {
-      messageService?.removeListener(
-        MessageEvents.PublicMessageAfterSent,
-        handlePublicMessageAfterSent
-      );
-    };
-  }, [messageService, chat.profiles, chat.publicMessages]);
-
-  useEffect(() => {
-    if (channels?.length !== 0 && publicMessageBuffer.length !== 0) {
-      setPublicMessages();
-    }
-  }, [chat.publicMessages, publicMessageBuffer]);
-
-  const setPublicMessages = () => {
-    publicMessageBuffer.forEach((obj) => {
-      const { root } = obj;
-      const matchingStateItem = chat.publicMessages.find(
-        (stateItem) => stateItem.channelId === root
-      );
-      if (matchingStateItem) {
-        addPublicMessage(root, obj);
-        setPublicMessageBuffer((prevMessageBuffer) =>
-          prevMessageBuffer.filter((message) => message.id !== obj.id)
-        );
-      }
-    });
-  };
+  // const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
+  //   if (isCommunityCreated) {
+  //     data.forEach((message) => {
+  //       const { root, id } = message;
+  //       if (replacedPublicMessagesBuffer.includes(id)) {
+  //         setReplacedPublicMessagesBuffer((prevBuffer) =>
+  //           prevBuffer.filter((messageId) => messageId !== id)
+  //         );
+  //         replacePublicMessage(root, message);
+  //       } else {
+  //         addPublicMessage(root, message);
+  //       }
+  //     });
+  //   } else {
+  //     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
+  //   }
+  //   let uniqueUsers: string[] = [];
+  //
+  //   for (const item of data) {
+  //     const isCreatorMatch = chat.profiles.find((profile) => profile.creator === item.creator);
+  //
+  //     if (!isCreatorMatch) {
+  //       if (!uniqueUsers.includes(item.creator)) {
+  //         uniqueUsers.push(item.creator);
+  //       }
+  //     }
+  //   }
+  //   messageServiceInstance?.loadProfiles(uniqueUsers);
+  // };
+
+  // useEffect(() => {
+  //   messageService?.removeListener(
+  //     MessageEvents.PublicMessageAfterSent,
+  //     handlePublicMessageAfterSent
+  //   );
+  //   messageService?.addListener(MessageEvents.PublicMessageAfterSent, handlePublicMessageAfterSent);
+  //
+  //   return () => {
+  //     messageService?.removeListener(
+  //       MessageEvents.PublicMessageAfterSent,
+  //       handlePublicMessageAfterSent
+  //     );
+  //   };
+  // }, [messageService, chat.profiles, chat.publicMessages]);
+
+  // useEffect(() => {
+  //   if (channels?.length !== 0 && publicMessageBuffer.length !== 0) {
+  //     setPublicMessages();
+  //   }
+  // }, [chat.publicMessages, publicMessageBuffer]);
+
+  // const setPublicMessages = () => {
+  //   publicMessageBuffer.forEach((obj) => {
+  //     const { root } = obj;
+  //     const matchingStateItem = chat.publicMessages.find(
+  //       (stateItem) => stateItem.channelId === root
+  //     );
+  //     if (matchingStateItem) {
+  //       addPublicMessage(root, obj);
+  //       setPublicMessageBuffer((prevMessageBuffer) =>
+  //         prevMessageBuffer.filter((message) => message.id !== obj.id)
+  //       );
+  //     }
+  //   });
+  // };
 
   //previous public messages handler
-  const handlePreviousPublicMessages = (data: PublicMessage[]) => {
-    const channelId = data[0].root;
-    const messagesObject: MessagesObject = data.reduce((result, message) => {
-      result[message.id] = message;
-      return result;
-    }, {});
-
-    addPreviousPublicMessages(channelId, messagesObject);
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(
-      MessageEvents.PreviousPublicMessages,
-      handlePreviousPublicMessages
-    );
-    messageService?.addListener(MessageEvents.PreviousPublicMessages, handlePreviousPublicMessages);
-
-    return () => {
-      messageService?.removeListener(
-        MessageEvents.PreviousPublicMessages,
-        handlePreviousPublicMessages
-      );
-    };
-  }, [messageService, chat.profiles, chat.publicMessages]);
+  // const handlePreviousPublicMessages = (data: PublicMessage[]) => {
+  //   const channelId = data[0].root;
+  //   const messagesObject: MessagesObject = data.reduce((result, message) => {
+  //     result[message.id] = message;
+  //     return result;
+  //   }, {});
+  //
+  //   addPreviousPublicMessages(channelId, messagesObject);
+  // };
+
+  // useEffect(() => {
+  //   messageService?.removeListener(
+  //     MessageEvents.PreviousPublicMessages,
+  //     handlePreviousPublicMessages
+  //   );
+  //   messageService?.addListener(MessageEvents.PreviousPublicMessages, handlePreviousPublicMessages);
+  //
+  //   return () => {
+  //     messageService?.removeListener(
+  //       MessageEvents.PreviousPublicMessages,
+  //       handlePreviousPublicMessages
+  //     );
+  //   };
+  // }, [messageService, chat.profiles, chat.publicMessages]);
 
   useEffect(() => {
     return () => {
       messageService?.removeListener(MessageEvents.Ready, handleReadyState);
       messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
-      messageService?.removeListener(
-        MessageEvents.PreviousPublicMessages,
-        handlePreviousPublicMessages
-      );
-      messageService?.removeListener(
-        MessageEvents.PublicMessageBeforeSent,
-        handlePublicMessageBeforeSent
-      );
-      messageService?.removeListener(
-        MessageEvents.PublicMessageAfterSent,
-        handlePublicMessageAfterSent
-      );
+      // messageService?.removeListener(
+      //   MessageEvents.PreviousPublicMessages,
+      //   handlePreviousPublicMessages
+      // );
+      // messageService?.removeListener(
+      //   MessageEvents.PublicMessageBeforeSent,
+      //   handlePublicMessageBeforeSent
+      // );
+      // messageService?.removeListener(
+      //   MessageEvents.PublicMessageAfterSent,
+      //   handlePublicMessageAfterSent
+      // );
     };
   }, [messageService]);
 
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
index acd2efc48dd..b042916d9e9 100644
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -30,7 +30,7 @@ export function useAddCommunityChannel(name: string | undefined) {
         events.forEach((event) => {
           switch (event.kind) {
             case Kind.ChannelCreation:
-              const channel = convertEvent(event);
+              const channel = convertEvent<Kind.ChannelCreation>(event);
               const hasChannelAlready = channels?.some(({ id }) => id === channel?.id);
               if (!hasChannelAlready && channel) {
                 queryClient.setQueryData([ChatQueries.CHANNELS], [...(channels ?? []), channel]);
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 585ad9e6deb..3fc9b362c6b 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -17,7 +17,7 @@ export function useSendMessage(
     activeUserKeys.priv,
     receiverPubKey
   );
-  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(currentChannel.id);
+  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(currentChannel?.id);
   const { mutateAsync: addDirectContact } = useAddDirectContact();
 
   return useMutation(
diff --git a/src/common/features/chats/nostr/core/index.ts b/src/common/features/chats/nostr/core/index.ts
index 9ad225d1568..7c648295b36 100644
--- a/src/common/features/chats/nostr/core/index.ts
+++ b/src/common/features/chats/nostr/core/index.ts
@@ -2,3 +2,4 @@ export * from "./nostr-listener-query";
 export * from "./nostr-fetch-mutation";
 export * from "./nostr-fetch-query";
 export * from "./nostr-publish-mutation";
+export * from "./nostr-listeners-provider";
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
index 2eb59472157..6be5c0ae809 100644
--- a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
@@ -1,10 +1,10 @@
 import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
-import { Event } from "../../../../lib/nostr-tools/event";
-import { listenWhileFinish } from "./utils";
 import { useContext } from "react";
-import { NostrContext } from "./nostr-context";
-import { ChatContext } from "../chat-context-provider";
-import { Filter } from "../../../../lib/nostr-tools/filter";
+import { NostrContext } from "../nostr-context";
+import { ChatContext } from "../../chat-context-provider";
+import { listenWhileFinish } from "../utils";
+import { Event } from "../../../../../lib/nostr-tools/event";
+import { Filter } from "../../../../../lib/nostr-tools/filter";
 
 export function useNostrFetchMutation(
   key: MutationKey,
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
index b96d6209289..61681146aee 100644
--- a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
+++ b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
@@ -1,15 +1,16 @@
 import { QueryKey, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Event, Kind } from "../../../../lib/nostr-tools/event";
+import { Event, Kind } from "../../../../../lib/nostr-tools/event";
 import { useContext } from "react";
-import { NostrContext } from "./nostr-context";
-import { ChatContext } from "../chat-context-provider";
+import { NostrContext } from "../nostr-context";
+import { ChatContext } from "../../chat-context-provider";
 import { UseQueryOptions } from "@tanstack/react-query/src/types";
-import { listenWhileFinish } from "./utils";
+import { listenWhileFinish } from "../utils";
+import { Filter } from "../../../../../lib/nostr-tools/filter";
 
 export function useNostrFetchQuery<DATA>(
   key: QueryKey,
-  kinds: Kind[],
-  dataResolver: (events: Event[]) => DATA,
+  kindsOrFilters: (Kind | Filter)[],
+  dataResolver: (events: Event[]) => DATA | Promise<DATA>,
   queryOptions?: UseQueryOptions<DATA>
 ) {
   const { activeUserKeys } = useContext(ChatContext);
@@ -24,7 +25,13 @@ export function useNostrFetchQuery<DATA>(
         return queryData;
       }
 
-      const events = await listenWhileFinish(pool, readRelays, kinds, activeUserKeys.pub);
+      const kinds = kindsOrFilters.every((item) => typeof item === "number")
+        ? (kindsOrFilters as Kind[])
+        : [];
+      const filters = kindsOrFilters.every((item) => typeof item === "object")
+        ? (kindsOrFilters as Filter[])
+        : undefined;
+      const events = await listenWhileFinish(pool, readRelays, kinds, activeUserKeys.pub, filters);
       return dataResolver(events);
     },
     queryOptions
diff --git a/src/common/features/chats/nostr/core/nostr-listener-query.tsx b/src/common/features/chats/nostr/core/nostr-listener-query.tsx
index d0535e7487f..0e261db80f9 100644
--- a/src/common/features/chats/nostr/core/nostr-listener-query.tsx
+++ b/src/common/features/chats/nostr/core/nostr-listener-query.tsx
@@ -1,42 +1,13 @@
 import { QueryKey, QueryObserverResult, useQuery, useQueryClient } from "@tanstack/react-query";
-import React, { createContext, PropsWithChildren, useContext, useMemo } from "react";
-import { ChatContext } from "../chat-context-provider";
-import { MessageEvents } from "../../../helper/message-service";
-import useMap from "react-use/lib/useMap";
+import { useContext, useMemo } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { UseQueryOptions } from "@tanstack/react-query/src/types";
+import { MessageEvents } from "../../../../helper/message-service";
+import { ChatContext } from "../../chat-context-provider";
+import { NostrListenerQueriesContext } from "./nostr-listeners-provider";
 
-export const NostrListenerQueriesContext = createContext<{
-  subscribers: Record<string, boolean>;
-  set: (key: string, value: boolean) => void;
-  get: (key: string) => boolean;
-}>({
-  subscribers: {},
-  set: () => {},
-  get: () => false
-});
-
-export function NostrListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
-  const [subscribers, { set, get }] = useMap<Record<string, boolean>>();
-
-  return (
-    <NostrListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
-  );
-}
-
-/**
- * Custom hook for listening to Nostr events and updating a query with new data.
- *
- * @template TQData - The data type returned by the query.
- * @template TQKey - The key used to identify the query.
- * @param {TQKey} key - The key that identifies the query.
- * @param {MessageEvents} event - The message event to listen for.
- * @param {(data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void} queryFn - The function that processes the received data and updates the query.
- * @param {UseQueryOptions<TQData>} [queryOptions] - Additional query options.
- * @returns {QueryObserverResult<TQData, unknown>} - The result of the query, including data and query status.
- */
-export function useNostrListenerQuery<TQData, TQKey extends QueryKey>(
-  key: TQKey,
+export function useNostrListenerQuery<TQData>(
+  key: QueryKey,
   event: MessageEvents,
   queryFn: (data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void,
   queryOptions?: UseQueryOptions<TQData>
diff --git a/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx b/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
new file mode 100644
index 00000000000..d0158e24fe7
--- /dev/null
+++ b/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
@@ -0,0 +1,20 @@
+import React, { createContext, PropsWithChildren } from "react";
+import useMap from "react-use/lib/useMap";
+
+export const NostrListenerQueriesContext = createContext<{
+  subscribers: Record<string, boolean>;
+  set: (key: string, value: boolean) => void;
+  get: (key: string) => boolean;
+}>({
+  subscribers: {},
+  set: () => {},
+  get: () => false
+});
+
+export function NostrListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
+  const [subscribers, { set, get }] = useMap<Record<string, boolean>>();
+
+  return (
+    <NostrListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
+  );
+}
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
new file mode 100644
index 00000000000..ac108e2946b
--- /dev/null
+++ b/src/common/features/chats/nostr/queries/direct-messages-query.ts
@@ -0,0 +1,40 @@
+import { useNostrFetchQuery } from "../core";
+import { DirectContact, Message } from "../../managers/message-manager-types";
+import { Filter } from "../../../../../lib/nostr-tools/filter";
+import { Kind } from "../../../../../lib/nostr-tools/event";
+import { convertEvent } from "../utils/event-converter";
+
+export function useDirectMessagesQuery(
+  directContacts: DirectContact[],
+  publicKey: string,
+  privateKey: string
+) {
+  return useNostrFetchQuery<Message[]>(
+    ["chats/encrypted-direct-messages"],
+    directContacts.reduce<Filter[]>(
+      (acc, contact) => [
+        ...acc,
+        {
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [contact.pubkey],
+          authors: [publicKey]
+        },
+        {
+          kinds: [Kind.EncryptedDirectMessage],
+          "#p": [publicKey],
+          authors: [contact.pubkey]
+        }
+      ],
+      []
+    ),
+    async (events) =>
+      Promise.all(
+        events.map(
+          (event) => convertEvent<Kind.EncryptedDirectMessage>(event, publicKey, privateKey)!!
+        )
+      ),
+    {
+      enabled: directContacts.length > 0
+    }
+  );
+}
diff --git a/src/common/features/chats/nostr/queries/index.ts b/src/common/features/chats/nostr/queries/index.ts
new file mode 100644
index 00000000000..0a1de9d901b
--- /dev/null
+++ b/src/common/features/chats/nostr/queries/index.ts
@@ -0,0 +1,2 @@
+export * from "./direct-messages-query";
+export * from "./public-messages-query";
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
new file mode 100644
index 00000000000..4d8b0e5b5fd
--- /dev/null
+++ b/src/common/features/chats/nostr/queries/public-messages-query.ts
@@ -0,0 +1,27 @@
+import { useNostrFetchQuery } from "../core";
+import { Channel, Message } from "../../managers/message-manager-types";
+import { Filter } from "../../../../../lib/nostr-tools/filter";
+import { Kind } from "../../../../../lib/nostr-tools/event";
+import { convertEvent } from "../utils/event-converter";
+
+export function usePublicMessagesQuery(channels: Channel[]) {
+  return useNostrFetchQuery<Message[]>(
+    ["chats/nostr-public-messages"],
+    channels.reduce<Filter[]>(
+      (acc, channel) => [
+        ...acc,
+        {
+          kinds: [Kind.ChannelMessage],
+          "#e": [channel.id],
+          limit: 50
+        }
+      ],
+      []
+    ),
+    (events) =>
+      events.map((event) => convertEvent(event)).filter((message) => !!message) as Message[],
+    {
+      enabled: channels.length > 0
+    }
+  );
+}
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
index 0598683390b..6984b1eb36c 100644
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -1,42 +1,94 @@
 import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import { Channel } from "../../managers/message-manager-types";
+import { Channel, Message } from "../../managers/message-manager-types";
+import { findTagValue } from "./find-tag-value";
+import { filterTagValue } from "./filter-tag-value";
+import { decrypt } from "../../../../../lib/nostr-tools/nip04";
 
 export interface EventConverterResult {
   [Kind.ChannelCreation]: Channel;
+  [Kind.EncryptedDirectMessage]: Promise<Message>;
+  [Kind.ChannelMessage]: Message;
   30078: string[];
 }
 
 export function convertEvent<KIND extends keyof EventConverterResult>(
-  event: Event
+  event: Event,
+  publicKey?: string,
+  privateKey?: string
 ): EventConverterResult[KIND] | null {
+  let content: any = {};
   try {
-    const content = JSON.parse(event.content);
-
-    if (!content) {
-      return null;
-    }
+    content = JSON.parse(event.content);
+  } catch (e) {
+    content = null;
+  }
 
-    switch (event.kind as any) {
-      case Kind.ChannelCreation:
-        return {
+  switch (event.kind as any) {
+    case Kind.ChannelCreation:
+      if (!content) {
+        console.error(new Error("[Chat][Nostr] – message content is not a JSON"));
+        return null;
+      }
+      return {
+        id: event.id,
+        creator: event.pubkey,
+        created: event.created_at,
+        communityName: content.communityName,
+        communityModerators: content.communityModerators,
+        hiddenMessageIds: content.hiddenMessageIds,
+        removedUserIds: content.removedUserIds,
+        name: content.name,
+        about: content.about,
+        picture: content.picture
+      } as any;
+    case Kind.EncryptedDirectMessage:
+      return new Promise<Message>(async (resolve) => {
+        const receiver = findTagValue(event, "p")!!;
+        const peer = receiver === publicKey ? event.pubkey : receiver;
+        const encryptedMessage = {
           id: event.id,
+          root: filterTagValue(event, "e").find((tag) => tag[3] === "root")?.[1],
+          peer,
           creator: event.pubkey,
           created: event.created_at,
-          communityName: content.communityName,
-          communityModerators: content.communityModerators,
-          hiddenMessageIds: content.hiddenMessageIds,
-          removedUserIds: content.removedUserIds,
-          name: content.name,
-          about: content.about,
-          picture: content.picture
-        } as any;
-      case "30078":
-        return content;
-      default:
-        return content;
-    }
-  } catch (e) {
-    console.error(new Error("[Chat][Nostr] – message content is not a JSON"));
-    return null;
+          decrypted: false,
+          sent: 1
+        };
+
+        if (!privateKey) {
+          throw new Error(
+            "[Chat][Nostr] – private key is not provided while message is encrypting"
+          );
+        }
+
+        const decryptedMessageContent = await decrypt(privateKey, peer, event.content);
+        resolve({
+          ...encryptedMessage,
+          content: decryptedMessageContent,
+          decrypted: true
+        });
+      }) as any;
+    case Kind.ChannelMessage:
+      const eTags = filterTagValue(event, "e");
+      const root = eTags.find((x) => x[3] === "root")?.[1];
+      const mentions = filterTagValue(event, "p")
+        .map((mention) => mention?.[1])
+        .filter((mention) => !!mention);
+      if (!root) return null;
+      return event.content
+        ? {
+            id: event.id,
+            root,
+            content: event.content,
+            creator: event.pubkey,
+            mentions,
+            created: event.created_at,
+            sent: 1
+          }
+        : (null as any);
+    case "30078":
+      return content;
+    default:
+      return content;
   }
 }
diff --git a/src/common/features/chats/nostr/utils/filter-tag-value.ts b/src/common/features/chats/nostr/utils/filter-tag-value.ts
new file mode 100644
index 00000000000..3a33eccec8d
--- /dev/null
+++ b/src/common/features/chats/nostr/utils/filter-tag-value.ts
@@ -0,0 +1,5 @@
+import { Event } from "../../../../../lib/nostr-tools/event";
+
+export function filterTagValue(ev: Event, tag: "e" | "p" | "d") {
+  return ev.tags.filter(([t]) => t === tag);
+}
diff --git a/src/common/features/chats/nostr/utils/index.ts b/src/common/features/chats/nostr/utils/index.ts
index 5e48e486485..8a07672fdf7 100644
--- a/src/common/features/chats/nostr/utils/index.ts
+++ b/src/common/features/chats/nostr/utils/index.ts
@@ -1,3 +1,4 @@
 export * from "./listen-while-finish";
 export * from "./is-sha256";
 export * from "./find-tag-value";
+export * from "./filter-tag-value";
diff --git a/src/common/features/chats/queries/chat-profiles-query.ts b/src/common/features/chats/queries/chat-profiles-query.ts
index ea7fe71cd6a..8077d7c1cff 100644
--- a/src/common/features/chats/queries/chat-profiles-query.ts
+++ b/src/common/features/chats/queries/chat-profiles-query.ts
@@ -1,18 +1,13 @@
-import { useMessageListenerQuery } from "./message-listener-query";
-import { ChatQueries } from "./queries";
-import { MessageEvents } from "../../../helper/message-service";
-import { Profile } from "../managers/message-manager-types";
-
-export function useChatProfilesQuery() {
-  return useMessageListenerQuery<Profile[], ChatQueries[]>(
-    [ChatQueries.PROFILES],
-    MessageEvents.ProfileUpdate,
-    (_, nextData, resolver) => {
-      resolver(nextData);
-    },
-    {
-      initialData: [],
-      queryFn: () => []
-    }
-  );
-}
+// export function useChatProfilesQuery() {
+//   return useMessageListenerQuery<Profile[], ChatQueries[]>(
+//     [ChatQueries.PROFILES],
+//     MessageEvents.ProfileUpdate,
+//     (_, nextData, resolver) => {
+//       resolver(nextData);
+//     },
+//     {
+//       initialData: [],
+//       queryFn: () => []
+//     }
+//   );
+// }
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 8a06e7eba57..83a9aa74aaa 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -1,9 +1,7 @@
 export * from "./search-users-query";
 export * from "./queries";
 export * from "./direct-contacts-query";
-export * from "./message-listener-query";
 export * from "./messages-query";
-export * from "./chat-profiles-query";
 export * from "./channels-query";
 export * from "./nostr-joined-community-team-query";
 export * from "./community-channel-query";
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 440d6a96a7d..a8b78bc5719 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -1,161 +1,60 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useContext, useMemo } from "react";
 import { ChatContext } from "../chat-context-provider";
-import { MessageEvents } from "../../../helper/message-service";
+import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { ChatQueries } from "./queries";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { DirectMessage, Message, PublicMessage } from "../managers/message-manager-types";
-import { useDirectContactsQuery } from "./direct-contacts-query";
-import isCommunity from "../../../helper/is-community";
-import { useChatProfilesQuery } from "./chat-profiles-query";
-import { useNostrListenerQuery } from "../nostr";
+import { Message } from "../managers/message-manager-types";
+import { useChannelsQuery } from "./channels-query";
 
 export function useMessagesQuery(username?: string) {
-  const { messageServiceInstance } = useContext(ChatContext);
   const queryClient = useQueryClient();
-
+  const { activeUserKeys } = useContext(ChatContext);
   const { data: directContacts } = useDirectContactsQuery();
-  const { data: profiles } = useChatProfilesQuery();
-
-  const hasContacts = useMemo(() => (directContacts?.length ?? 0) > 0, [directContacts]);
-
-  // const checkDirectMessageSending = (peer: string, data: DirectMessage) => {
-  //   setTimeout(() => {
-  //     verifyDirectMessageSending(peer, data);
-  //   }, 20000);
-  // };
-  //
-  // const handleDirectMessageBeforeSent = (data: DirectMessage[]) => {
-  //   data.map((m) => {
-  //     const { peer, id } = m;
-  //     setReplacedDirectMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-  //     addDirectMessages(peer, m);
-  //     checkDirectMessageSending(peer, m);
-  //   });
-  // };
-  // });
-  // const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
-  //     data.map((m) => {
-  //       const { id, root } = m;
-  //       setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-  //       addPublicMessage(root, m);
-  //       checkPublicMessageSending(root, m);
-  //     });
-  //   };
-
-  const updateQueries = (nextData: Message[] | undefined) => {
-    let nextMessages: Message[] = [
-      ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.MESSAGES]) ?? []),
-      ...(nextData ?? [])
-    ];
-
-    directContacts?.forEach((contact) => {
-      queryClient.setQueryData(
-        [ChatQueries.MESSAGES, contact.name],
-        nextMessages.filter((i) =>
-          !isCommunity(contact.name) && "peer" in i
-            ? i.peer === contact?.pubkey
-            : i.root === contact?.pubkey
-        ) ?? []
-      );
-      queryClient.invalidateQueries([ChatQueries.MESSAGES, contact.name]);
-    });
+  const { data: channels } = useChannelsQuery();
 
-    queryClient.setQueryData([ChatQueries.MESSAGES, "all"], nextMessages);
-    queryClient.invalidateQueries([ChatQueries.MESSAGES, "all"]);
-  };
-
-  useNostrListenerQuery<Message[], ChatQueries[]>(
-    [ChatQueries.BEFORE_DIRECT_MESSAGES_TEMP],
-    MessageEvents.DirectMessageBeforeSent,
-    (_, nextData, resolver) => {
-      updateQueries(nextData);
-      resolver(nextData);
-    },
-    {
-      queryFn: () => [],
-      enabled: hasContacts,
-      initialData: []
-    }
+  const { data: initialDirectMessages } = useDirectMessagesQuery(
+    directContacts ?? [],
+    activeUserKeys.pub,
+    activeUserKeys.priv
   );
+  const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
 
-  useNostrListenerQuery<DirectMessage[], ChatQueries[]>(
-    [ChatQueries.AFTER_DIRECT_MESSAGES_TEMP],
-    MessageEvents.DirectMessageAfterSent,
-    (_, nextData, resolver) => {
-      updateQueries(nextData);
-      resolver(nextData);
-
-      messageServiceInstance?.checkProfiles(nextData.map((x) => x.peer));
-    },
-    {
-      queryFn: () => [],
-      enabled: hasContacts,
-      initialData: []
-    }
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.name === username),
+    [channels]
   );
 
-  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
-    [ChatQueries.BEFORE_PUBLIC_MESSAGES_TEMP],
-    MessageEvents.PublicMessageBeforeSent,
-    (_, nextData, resolver) => {
-      updateQueries(nextData);
-      resolver(nextData);
-    },
-    {
-      queryFn: () => [],
-      enabled: hasContacts,
-      initialData: []
-    }
-  );
+  return useQuery<Message[]>(
+    [ChatQueries.MESSAGES, username],
+    async () => {
+      if (!username) {
+        return [];
+      }
 
-  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
-    [ChatQueries.AFTER_PUBLIC_MESSAGES_TEMP],
-    MessageEvents.PublicMessageAfterSent,
-    (_, nextData, resolver) => {
-      updateQueries(nextData);
-      resolver(nextData);
+      const existingMessages =
+        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? [];
 
-      const uniqueUsers = nextData
-        .filter((message) => profiles?.find((profile) => profile.creator !== message.creator))
-        .reduce<Set<string>>((acc, next) => acc.add(next.creator), new Set());
-      messageServiceInstance?.loadProfiles(Array.from(uniqueUsers.values()));
-    },
-    {
-      queryFn: () => [],
-      enabled: hasContacts,
-      initialData: []
-    }
-  );
+      if (existingMessages.length > 0) {
+        return existingMessages;
+      }
 
-  useNostrListenerQuery<PublicMessage[], ChatQueries[]>(
-    [ChatQueries.PREVIOUS_PUBLIC_MESSAGES],
-    MessageEvents.PreviousPublicMessages,
-    (_, nextData, resolver) => {
-      queryClient.setQueryData(
-        [ChatQueries.MESSAGES, username],
-        [
-          ...(queryClient.getQueryData<PublicMessage[]>([ChatQueries.MESSAGES, username]) ?? []),
-          ...(nextData ?? [])
-        ]
-      );
-      queryClient.invalidateQueries([ChatQueries.MESSAGES, username]);
+      if (!!currentChannel) {
+        return [...(initialPublicMessages ?? [])];
+      }
 
-      resolver(nextData);
+      return [...(initialDirectMessages ?? [])];
     },
     {
-      queryFn: () => [],
-      enabled: hasContacts,
-      initialData: []
-    }
-  );
-
-  return useQuery<Message[]>(
-    [ChatQueries.MESSAGES, username],
-    () => queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? [],
-    {
-      enabled: hasContacts,
       initialData: [],
-      select: (data) => [...data]?.sort((a, b) => a.created - b.created)
+      select: (messages) => {
+        if (currentChannel) {
+          return messages.filter(
+            (message) => !currentChannel.hiddenMessageIds?.includes(message.id)
+          );
+        }
+        return messages;
+      }
     }
   );
 }
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 50dd9dff2b2..46d3fe1ff12 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -23,17 +23,12 @@ export interface publicMessagesList {
 }
 
 export interface Chat {
-  directMessages: directMessagesList[];
-  channels: Channel[];
-  publicMessages: publicMessagesList[];
   profiles: Profile[];
   leftChannelsList: string[];
   updatedChannel: ChannelUpdate[];
 }
 
 export enum ActionTypes {
-  DIRECTCONTACTS = "@chat/DIRECTCONTACTS",
-  DIRECTMESSAGES = "@chat/DIRECTMESSAGES",
   RESET = "@chat/RESET",
   PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
   PROFILES = "@chat/PROFILES",

From 1ce4f6e5a431d7e3cea31164b52b931c204e3938 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 7 Nov 2023 21:16:30 +0600
Subject: [PATCH 116/179] Chats: added update channel mutations

---
 .../features/chats/components/chat-input.tsx  |  24 +-
 .../chats/components/chat-message-box.tsx     | 144 +++--------
 .../chats/components/chat-messages-header.tsx |   9 +-
 .../chats/components/chat-messages-view.tsx   |  10 +-
 .../chat-popup/chat-popup-header.tsx          |   2 +-
 .../chats/components/chat-popup/index.tsx     |  13 +-
 .../chats-channel-messages/index.tsx          |  94 +-------
 .../edit-roles-modal.tsx                      | 211 ++++++++++++++++
 .../index.scss                                |   0
 .../index.tsx                                 | 226 +-----------------
 .../chats-sidebar/chat-sidebar-channel.tsx    |  43 +++-
 .../chat-sidebar-direct-contact.tsx           |  10 +-
 .../chats/components/chats-sidebar/index.tsx  |   6 +-
 .../components/join-community-chat-btn.tsx    |  10 +-
 .../chats/mutations/add-community-channel.ts  |  14 +-
 src/common/features/chats/mutations/index.ts  |   3 +
 .../mutations/leave-community-channel.ts      |  21 +-
 .../features/chats/mutations/send-message.ts  |  18 +-
 .../mutations/update-channel-moderator.ts     |  29 +++
 .../mutations/update-community-channel.ts     |  50 ++++
 .../features/chats/nostr/mutations/index.ts   |   1 +
 .../nostr/mutations/send-public-message.ts    |  12 +-
 .../nostr/mutations/update-left-channels.ts   |   5 +
 .../chats/nostr/utils/listen-while-finish.ts  |   9 +-
 .../chats/queries/community-channel-query.ts  |   8 +-
 .../chats/queries/last-messages-query.ts      |  29 ++-
 .../features/chats/queries/messages-query.ts  |  12 +-
 src/common/features/chats/screens/chats.tsx   |  27 ++-
 .../utils/use-get-direct-last-message.ts      |   4 +
 src/common/helper/is-community.ts             |   2 +-
 src/common/pages/community-functional.tsx     |  40 +---
 src/common/store/chat/index.ts                |  53 +---
 src/common/store/chat/types.ts                |  30 ---
 33 files changed, 544 insertions(+), 625 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
 rename src/common/features/chats/components/{chats-community-dropdown-menu => chats-community-actions}/index.scss (100%)
 rename src/common/features/chats/components/{chats-community-dropdown-menu => chats-community-actions}/index.tsx (55%)
 create mode 100644 src/common/features/chats/mutations/update-channel-moderator.ts
 create mode 100644 src/common/features/chats/mutations/update-community-channel.ts
 create mode 100644 src/common/features/chats/nostr/mutations/update-left-channels.ts

diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 044d140a7f6..ad22779d8ba 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -22,25 +22,18 @@ import { Spinner } from "@ui/spinner";
 import { useChannelsQuery } from "../queries";
 
 interface Props {
-  isCurrentUser: boolean;
-  isCommunity: boolean;
-  currentChannel: Channel;
-  currentUser: string;
+  currentChannel?: Channel;
+  currentUser?: string;
 }
 
-export default function ChatInput({
-  isCommunity,
-  isCurrentUser,
-  currentChannel,
-  currentUser
-}: Props) {
+export default function ChatInput({ currentChannel, currentUser }: Props) {
   useChannelsQuery();
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
-  const { messageServiceInstance, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
   const [showGifPicker, setShowGifPicker] = useState(false);
@@ -54,6 +47,9 @@ export default function ChatInput({
     }
   );
 
+  const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
+  const isCommunity = useMemo(() => !!currentChannel, [currentChannel]);
+
   const isDisabled = useMemo(
     () => (isCurrentUser && !receiverPubKey) || isActiveUserRemoved,
     [isCurrentUser, receiverPubKey, isActiveUserRemoved]
@@ -95,11 +91,7 @@ export default function ChatInput({
           gifImagesStyle={GifImagesStyle}
           shGif={true}
           changeState={(gifState) => setShowGifPicker(gifState!)}
-          fallback={(e) =>
-            isCurrentUser
-              ? messageServiceInstance?.sendDirectMessage(receiverPubKey!, e)
-              : messageServiceInstance?.sendPublicMessage(currentChannel, e, [], "")
-          }
+          fallback={(e) => sendMessage(e)}
         />
       )}
       <input
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 2a277d3eda5..b8d24de72f8 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -1,18 +1,15 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { match } from "react-router";
 import { History } from "history";
 import ChatsMessagesHeader from "./chat-messages-header";
 import ChatsMessagesView from "./chat-messages-view";
 import LinearProgress from "../../../components/linear-progress";
-import { formattedUserName, getJoinedCommunities, getProfileMetaData } from "../utils";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { CHANNEL } from "./chat-popup/chat-constants";
-import { ChatContext } from "../chat-context-provider";
-import { useMount } from "react-use";
+import { getJoinedCommunities } from "../utils";
 import { Button } from "@ui/button";
-import { Channel, ChannelUpdate } from "../managers/message-manager-types";
-import { useChannelsQuery } from "../queries";
+import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
+import { useCommunityCache } from "../../../core";
+import { useAddCommunityChannel } from "../mutations";
 
 interface MatchParams {
   filter: string;
@@ -28,106 +25,37 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const { chat } = useMappedStore();
+  const { data: community } = useCommunityCache(props.match.params.username);
+
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
+  const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
 
-  const { messageServiceInstance, currentChannel, setCurrentChannel } = useContext(ChatContext);
+  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
+    useAddCommunityChannel(props.match.params.name);
 
-  const { updatedChannel } = chat;
   const { match } = props;
   const username = match.params.username;
 
   const [inProgress, setInProgress] = useState(false);
-  const [isCommunityChatEnabled, setIsCommunityChatEnabled] = useState(false);
-  const [isCommunityJoined, setIsCommunityChatJoined] = useState(false);
-  const [currentCommunity, setCurrentCommunity] = useState<Channel>();
-  const [hasLeftCommunity, setHasLeftCommunity] = useState(false);
-
-  useMount(() => {
-    checkUserCommunityMembership();
-  });
-
-  useEffect(() => {
-    if (currentCommunity && leftChannelsIds?.includes(currentCommunity.id)) {
-      setHasLeftCommunity(true);
-    }
-  }, [currentCommunity]);
-
-  useEffect(() => {
-    if (username && !username.startsWith("@")) {
-      checkUserCommunityMembership();
-    } else {
-      setIsCommunityChatJoined(false);
-      setIsCommunityChatEnabled(true);
-    }
-  }, [username]);
-
-  const checkUserCommunityMembership = () => {
-    getCommunityProfile();
-    const communities = getJoinedCommunities(channels ?? [], leftChannelsIds ?? []);
-    const isCommunity = channels?.some((channel) => channel.communityName === username);
-    if (isCommunity) {
-      setIsCommunityChatEnabled(true);
-      const isJoined = communities.some((channel) => channel.communityName === username);
-      if (isJoined) {
-        setIsCommunityChatJoined(true);
-      }
-    } else {
-      setIsCommunityChatJoined(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchCurrentChannel(formattedUserName(username));
-    checkUserCommunityMembership();
-  }, [updatedChannel, username, channels]);
-
-  // TODO: MAKE QUERY
-  const fetchCurrentChannel = (communityName: string) => {
-    const channel = channels?.find((channel) => channel.communityName === communityName);
-    if (channel) {
-      const updated: ChannelUpdate = updatedChannel
-        .filter((x) => x.channelId === channel.id)
-        .sort((a, b) => b.created - a.created)[0];
-      if (updated) {
-        const channel = {
-          name: updated.name,
-          about: updated.about,
-          picture: updated.picture,
-          communityName: updated.communityName,
-          communityModerators: updated.communityModerators,
-          id: updated.channelId,
-          creator: updated.creator,
-          created: currentChannel?.created!,
-          hiddenMessageIds: updated.hiddenMessageIds,
-          removedUserIds: updated.removedUserIds
-        };
-        setCurrentChannel(channel);
-      } else {
-        setCurrentChannel(channel);
-      }
-    }
-  };
 
-  const getCommunityProfile = async () => {
-    const communityProfile = await getProfileMetaData(username);
-    setCurrentCommunity(communityProfile?.channel);
-    const haschannelMetaData = communityProfile && communityProfile.hasOwnProperty(CHANNEL);
-    setIsCommunityChatEnabled(haschannelMetaData);
-  };
-
-  const handleJoinCommunity = () => {
-    if (currentCommunity) {
-      if (hasLeftCommunity) {
-        messageServiceInstance?.updateLeftChannelList(
-          leftChannelsIds?.filter((x) => x !== currentCommunity?.id) ?? []
-        );
-      }
-      messageServiceInstance?.loadChannel(currentCommunity?.id);
-      setIsCommunityChatJoined(true);
-    }
-  };
+  const currentChannel = useMemo(
+    () => channels?.find((c) => c.communityName === community?.name),
+    [channels]
+  );
+  const hasCommunityChat = useMemo(() => !!communityChannel, [communityChannel]);
+  const hasLeftCommunity = useMemo(
+    () => leftCommunityChannelsIds?.includes(currentChannel?.id ?? ""),
+    [currentChannel]
+  );
+  const isCommunityJoined = useMemo(
+    () =>
+      getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
+        (channel) => channel.id === currentChannel?.id
+      ),
+    [channels, leftChannelsIds]
+  );
 
   return (
     <div
@@ -144,7 +72,7 @@ export default function ChatsMessagesBox(props: Props) {
         </div>
       ) : (
         <>
-          {username.startsWith("@") || (isCommunityChatEnabled && isCommunityJoined) ? (
+          {username.startsWith("@") || (hasCommunityChat && isCommunityJoined) ? (
             <>
               <ChatsMessagesHeader username={username} history={props.history} />
               {inProgress && <LinearProgress />}
@@ -153,23 +81,27 @@ export default function ChatsMessagesBox(props: Props) {
                 username={username}
                 currentChannel={currentChannel!}
                 inProgress={inProgress}
-                currentChannelSetter={setCurrentChannel}
                 setInProgress={setInProgress}
               />
             </>
-          ) : isCommunityChatEnabled && !isCommunityJoined ? (
-            <div className="no-chat-select">
-              <div className="text-center">
+          ) : hasCommunityChat && !isCommunityJoined ? (
+            <>
+              <div />
+              <div className="flex flex-col justify-center items-center">
                 <p className="info-message">
                   {hasLeftCommunity
                     ? "You have left this community chat. Rejoin the chat now!"
                     : " You are not part of this community. Join the community chat now!"}
                 </p>
-                <Button onClick={handleJoinCommunity}>
+                <Button
+                  onClick={() => addCommunityChannel()}
+                  disabled={isAddCommunityChannelLoading}
+                >
                   {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
                 </Button>
               </div>
-            </div>
+              <div />
+            </>
           ) : (
             <p className="no-chat-select">Community chat not started yet</p>
           )}
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 95e4f5f72b7..9baf62fc03e 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { History } from "history";
-import ChatsCommunityDropdownMenu from "./chats-community-dropdown-menu";
+import ChatsCommunityDropdownMenu from "./chats-community-actions";
 import UserAvatar from "../../../components/user-avatar";
 import { CHATPAGE } from "./chat-popup/chat-constants";
 import { formattedUserName } from "../utils";
@@ -9,6 +9,7 @@ import { expandSideBar } from "../../../img/svg";
 import { Button } from "@ui/button";
 import { ChatContext } from "../chat-context-provider";
 import { useChannelsQuery } from "../queries";
+import isCommunity from "../../../helper/is-community";
 
 interface Props {
   username: string;
@@ -20,8 +21,6 @@ export default function ChatsMessagesHeader(props: Props) {
   const { setReceiverPubKey } = useContext(ChatContext);
   const { data: channels } = useChannelsQuery();
 
-  const isChannel = (username: string) => !username.startsWith("@");
-
   const formattedName = (username: string) => {
     if (username && !username.startsWith("@")) {
       const community = channels?.find((channel) => channel.communityName === username);
@@ -53,8 +52,8 @@ export default function ChatsMessagesHeader(props: Props) {
         </Link>
       </div>
 
-      {isChannel(username) && (
-        <div className="community-menu">
+      {isCommunity(username) && (
+        <div className="flex items-center justify-center">
           <ChatsCommunityDropdownMenu
             from={CHATPAGE}
             history={props.history}
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index b32f1dd5521..f5223526fa5 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -18,7 +18,6 @@ interface Props {
   history: History;
   currentChannel: Channel;
   inProgress: boolean;
-  currentChannelSetter: (channel: Channel) => void;
   setInProgress: (d: boolean) => void;
 }
 
@@ -26,7 +25,6 @@ export default function ChatsMessagesView({
   username,
   currentChannel,
   inProgress,
-  currentChannelSetter,
   setInProgress,
   history
 }: Props) {
@@ -137,7 +135,6 @@ export default function ChatsMessagesView({
               from={CHATPAGE}
               isScrolled={isScrolled}
               scrollToBottom={scrollToBottom}
-              currentChannelSetter={currentChannelSetter}
             />
           </>
         ) : (
@@ -160,12 +157,7 @@ export default function ChatsMessagesView({
       </div>
 
       <div className="sticky bottom-0 border-t border-[--border-color] bg-white">
-        <ChatInput
-          isCurrentUser={!!directUser}
-          isCommunity={!!communityName}
-          currentUser={directUser}
-          currentChannel={currentChannel!}
-        />
+        <ChatInput currentUser={directUser} currentChannel={currentChannel} />
       </div>
     </>
   );
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index e1bfdc959c2..38db39c956c 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -8,7 +8,7 @@ import {
   expandArrow,
   extendedView
 } from "../../../../img/svg";
-import ChatsCommunityDropdownMenu from "../chats-community-dropdown-menu";
+import ChatsCommunityDropdownMenu from "../chats-community-actions";
 import { history } from "../../../../store";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { classNameObject } from "../../../../helper/class-name-object";
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 4856113cd78..ceb13551777 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -26,6 +26,7 @@ import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
 import { useJoinChat } from "../../mutations/join-chat";
 import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
+import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -45,6 +46,7 @@ export const ChatPopUp = () => {
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
   const directContact = useMemo(
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
     [directContacts]
@@ -88,11 +90,11 @@ export const ChatPopUp = () => {
 
   // todo: ??
   useEffect(() => {
-    if (currentChannel && chat.leftChannelsList.includes(currentChannel.id)) {
+    if (currentChannel && leftCommunityChannelsIds?.includes(currentChannel.id)) {
       setIsCommunity(false);
       setCommunityName("");
     }
-  }, [chat.leftChannelsList]);
+  }, [leftCommunityChannelsIds]);
 
   // todo ???
   useEffect(() => {
@@ -365,12 +367,7 @@ export const ChatPopUp = () => {
           </div>
           <div className="pl-2">
             {(isCurrentUser || isCommunity) && (
-              <ChatInput
-                isCurrentUser={isCurrentUser}
-                isCommunity={isCommunity}
-                currentUser={currentUser}
-                currentChannel={currentChannel!}
-              />
+              <ChatInput currentUser={currentUser} currentChannel={currentChannel ?? undefined} />
             )}
           </div>
         </div>
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 5684b26b292..2fe0235d79f 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -1,5 +1,4 @@
 import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
-import { useMount } from "react-use";
 import mediumZoom, { Zoom } from "medium-zoom";
 import {
   Channel,
@@ -8,7 +7,6 @@ import {
   PublicMessage
 } from "../../managers/message-manager-types";
 import { History } from "history";
-import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import UserAvatar from "../../../../components/user-avatar";
 import FollowControls from "../../../../components/follow-controls";
@@ -16,22 +14,16 @@ import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../../i18n";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { error } from "../../../../components/feedback";
-import { CHATPAGE, COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
+import { COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
 import { Theme } from "../../../../store/global/types";
-import {
-  checkContiguousMessage,
-  formatMessageDateAndDay,
-  isMessageGif,
-  isMessageImage
-} from "../../utils";
+import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { Popover, PopoverContent } from "@ui/popover";
 import { Button } from "@ui/button";
-import { Form } from "@ui/form";
-import { FormControl } from "@ui/input";
 import { ChatMessageItem } from "../chat-message-item";
+import ChatInput from "../chat-input";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -42,7 +34,6 @@ interface Props {
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
-  currentChannelSetter: (channel: Channel) => void;
 }
 
 let zoom: Zoom | null = null;
@@ -54,8 +45,7 @@ export default function ChatsChannelMessages(props: Props) {
     isScrollToBottom,
     isScrolled,
     currentChannel,
-    scrollToBottom,
-    currentChannelSetter
+    scrollToBottom
   } = props;
   const {
     chat,
@@ -79,23 +69,13 @@ export default function ChatsChannelMessages(props: Props) {
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
-  const [hoveredMessageId, setHoveredMessageId] = useState("");
   const [step, setStep] = useState(0);
-  const [dmMessage, setDmMessage] = useState("");
   const [clickedMessage, setClickedMessage] = useState("");
   const [removedUserId, setRemovedUserID] = useState("");
   const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
-  const [showMessageActions, setShowMessageActions] = useState(false);
-
-  useMount(() => {
-    if (window.innerWidth <= 768) {
-      setShowMessageActions(true);
-    }
-  });
-
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -112,12 +92,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   }, [publicMessages, isScrollToBottom, channelMessagesRef]);
 
-  useEffect(() => {
-    if (windowWidth <= 768) {
-      setShowMessageActions(true);
-    }
-  }, [windowWidth]);
-
   useEffect(() => {
     if (currentChannel) {
       zoomInitializer();
@@ -156,17 +130,6 @@ export default function ChatsChannelMessages(props: Props) {
     };
   }, [clickedMessage]);
 
-  const sendDM = (name: string, pubkey: string) => {
-    if (dmMessage) {
-      messageServiceInstance?.sendDirectMessage(pubkey, dmMessage);
-      setClickedMessage("");
-      setDmMessage("");
-      if (from && from === CHATPAGE) {
-        history?.push(`/chats/@${name}`);
-      }
-    }
-  };
-
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
     zoom = mediumZoom(elements);
@@ -181,17 +144,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const handleImageClick = (msgId: string, pubkey: string) => {
-    if (clickedMessage === msgId) {
-      popoverRef.current = null;
-      setClickedMessage("");
-    } else {
-      popoverRef.current = null;
-      setClickedMessage(msgId);
-      setRemovedUserID(pubkey);
-    }
-  };
-
   const getPrivilegedUsers = (communityModerators: CommunityModerator[]) => {
     const privilegedUsers = communityModerators.filter((user) =>
       PRIVILEGEDROLES.includes(user.role)
@@ -267,21 +219,13 @@ export default function ChatsChannelMessages(props: Props) {
 
     try {
       messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
-      currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
+      // currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
       setStep(0);
     } catch (err) {
       error(_t("chat.error-updating-community"));
     }
   };
 
-  const handelMessageActions = (msgId: string) => {
-    if (showMessageActions && hoveredMessageId !== msgId) {
-      setHoveredMessageId(msgId);
-    } else {
-      setHoveredMessageId("");
-    }
-  };
-
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -291,16 +235,6 @@ export default function ChatsChannelMessages(props: Props) {
             const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
 
             const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
-
-            let renderedPreview = renderPostBody(pMsg.content, false, global.canUseWebp);
-
-            renderedPreview = renderedPreview.replace(/<p[^>]*>/g, "");
-            renderedPreview = renderedPreview.replace(/<\/p>/g, "");
-
-            const isGif = isMessageGif(pMsg.content);
-
-            const isImage = isMessageImage(pMsg.content);
-
             const name = getProfileName(pMsg.creator, chat.profiles);
 
             const popover = (
@@ -363,23 +297,7 @@ export default function ChatsChannelMessages(props: Props) {
                           )}
                       </div>
 
-                      <Form
-                        onSubmit={(e: React.FormEvent) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          sendDM(name!, pMsg.creator);
-                        }}
-                      >
-                        <FormControl
-                          value={dmMessage}
-                          autoFocus={true}
-                          onChange={(e) => setDmMessage(e.target.value)}
-                          required={true}
-                          type="text"
-                          placeholder={"Send direct message"}
-                          autoComplete="off"
-                        />
-                      </Form>
+                      <ChatInput currentChannel={currentChannel} currentUser="" />
                     </div>
                   </div>
                 </PopoverContent>
diff --git a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
new file mode 100644
index 00000000000..cbb0613ccad
--- /dev/null
+++ b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
@@ -0,0 +1,211 @@
+import { _t } from "../../../../i18n";
+import LinearProgress from "../../../../components/linear-progress";
+import { FormControl, InputGroup } from "@ui/input";
+import React, { useMemo, useState } from "react";
+import { Button } from "@ui/button";
+import { NOSTRKEY } from "../chat-popup/chat-constants";
+import { useChannelsQuery } from "../../queries";
+import UserAvatar from "../../../../components/user-avatar";
+import { ROLES } from "../../../../store/communities";
+import { CommunityModerator } from "../../managers/message-manager-types";
+import { error } from "../../../../components/feedback";
+import useDebounce from "react-use/lib/useDebounce";
+import { getAccountFull } from "../../../../api/hive";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { useUpdateChannelModerator } from "../../mutations";
+import { Table, Td, Th, Tr } from "@ui/table";
+import { Spinner } from "@ui/spinner";
+
+interface Props {
+  username: string;
+}
+
+const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
+
+export function EditRolesModal({ username }: Props) {
+  const { activeUser } = useMappedStore();
+  const { data: channels } = useChannelsQuery();
+
+  const [inProgress, setInProgress] = useState(false);
+  const [user, setUser] = useState("");
+  const [moderator, setModerator] = useState<CommunityModerator>();
+  const [role, setRole] = useState("admin");
+  const [addRoleError, setAddRoleError] = useState("");
+
+  const currentChannel = useMemo(
+    () => channels?.find((c) => c.communityName === username),
+    [channels]
+  );
+
+  const { mutateAsync: updateModerator, isLoading: isUpdateModeratorLoading } =
+    useUpdateChannelModerator(currentChannel);
+
+  useDebounce(
+    async () => {
+      if (user.length === 0) {
+        setAddRoleError("");
+        setInProgress(false);
+        return;
+      }
+      try {
+        const response = await getAccountFull(user);
+        if (!response) {
+          setAddRoleError("Account does not exist");
+          return;
+        }
+
+        if (!response.posting_json_metadata) {
+          setAddRoleError("This user hasn't joined the chat yet.");
+          return;
+        }
+
+        const { posting_json_metadata } = response;
+        const profile = JSON.parse(posting_json_metadata).profile;
+
+        if (!profile || !profile.hasOwnProperty(NOSTRKEY)) {
+          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
+          return;
+        }
+
+        const alreadyExists = currentChannel?.communityModerators?.some(
+          (moderator) => moderator.name === response.name
+        );
+
+        if (alreadyExists) {
+          setAddRoleError("You have already assigned some rule to this user.");
+          setInProgress(false);
+        } else {
+          const moderator = {
+            name: user,
+            pubkey: profile.nsKey,
+            role: role
+          };
+          setModerator(moderator);
+          setAddRoleError("");
+        }
+      } catch (err) {
+        error(err as string);
+      } finally {
+        setInProgress(false);
+      }
+    },
+    200,
+    [user, role]
+  );
+
+  return (
+    <>
+      <h4 className="pb-6">{_t("chat.edit-community-roles")}</h4>
+      {inProgress && <LinearProgress />}
+      <div>
+        <div className={`flex flex-col mb-6 gap-6 ${inProgress ? "in-progress" : ""}`}>
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.username")}</div>
+            <div className="col-span-12 sm:col-span-10">
+              <InputGroup prepend="@">
+                <FormControl
+                  type="text"
+                  autoFocus={user === ""}
+                  placeholder={_t("community-role-edit.username").toLowerCase()}
+                  value={user}
+                  onChange={(e) => {
+                    setUser(e.target.value);
+                    setInProgress(true);
+                  }}
+                  className={addRoleError ? "is-invalid" : ""}
+                />
+              </InputGroup>
+              {addRoleError && <div className="text-danger">{addRoleError}</div>}
+            </div>
+          </div>
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.role")}</div>
+            <div className="col-span-12 sm:col-span-10">
+              <FormControl
+                type="select"
+                value={role}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setRole(e.target.value)}
+              >
+                {roles.map((r, i) => (
+                  <option key={i} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              onClick={() => {
+                if (moderator) {
+                  updateModerator(moderator);
+                }
+              }}
+              disabled={isUpdateModeratorLoading || addRoleError.length !== 0 || user.length === 0}
+            >
+              {_t("chat.add")}
+            </Button>
+          </div>
+        </div>
+        {currentChannel?.communityModerators?.length !== 0 ? (
+          <>
+            <Table full={true}>
+              <thead>
+                <Tr>
+                  <Th style={{ width: "50%" }}>{_t("community.roles-account")}</Th>
+                  <Th style={{ width: "50%" }}>{_t("community.roles-role")}</Th>
+                </Tr>
+              </thead>
+              <tbody>
+                {currentChannel?.communityModerators &&
+                  currentChannel?.communityModerators!.map((moderator, i) => {
+                    return (
+                      <Tr key={i}>
+                        <Td>
+                          <div className="flex">
+                            <UserAvatar username={moderator.name} size="medium" />{" "}
+                            <span className="mt-2 ml-2 username">@{moderator.name}</span>
+                          </div>
+                        </Td>
+                        <Td>
+                          {moderator.name === activeUser?.username ? (
+                            <div style={{ margin: "5px 0 0 12px" }}>{moderator.role}</div>
+                          ) : (
+                            <InputGroup
+                              prepend={
+                                isUpdateModeratorLoading && <Spinner className="w-3.5 h-3.5" />
+                              }
+                            >
+                              <FormControl
+                                type="select"
+                                value={moderator.role}
+                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                                  updateModerator({ ...moderator, role: e.target.value })
+                                }
+                                disabled={isUpdateModeratorLoading}
+                              >
+                                {roles.map((r, i) => (
+                                  <option key={i} value={r}>
+                                    {r}
+                                  </option>
+                                ))}
+                              </FormControl>
+                            </InputGroup>
+                          )}
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+              </tbody>
+            </Table>
+          </>
+        ) : (
+          <div className="text-center">
+            <p>{_t("chat.no-admin")}</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-community-dropdown-menu/index.scss b/src/common/features/chats/components/chats-community-actions/index.scss
similarity index 100%
rename from src/common/features/chats/components/chats-community-dropdown-menu/index.scss
rename to src/common/features/chats/components/chats-community-actions/index.scss
diff --git a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
similarity index 55%
rename from src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
rename to src/common/features/chats/components/chats-community-actions/index.tsx
index f762c9a38ba..450156b6cc5 100644
--- a/src/common/features/chats/components/chats-community-dropdown-menu/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -1,32 +1,23 @@
 import React, { useContext, useEffect, useState } from "react";
 import { History } from "history";
 import DropDown, { MenuItem } from "../../../../components/dropdown";
-import useDebounce from "react-use/lib/useDebounce";
 
 import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../../img/svg";
 import { _t } from "../../../../i18n";
-import {
-  ADDROLE,
-  CHATPAGE,
-  DropDownStyle,
-  LEAVECOMMUNITY,
-  NOSTRKEY,
-  UNBLOCKUSER
-} from "../chat-popup/chat-constants";
+import { ADDROLE, DropDownStyle, LEAVECOMMUNITY, UNBLOCKUSER } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { error, success } from "../../../../components/feedback";
-import LinearProgress from "../../../../components/linear-progress";
 import { ROLES } from "../../../../store/communities";
 import UserAvatar from "../../../../components/user-avatar";
 import { copyToClipboard } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
-import { getAccountFull } from "../../../../api/hive";
 import { Button } from "@ui/button";
-import { FormControl, InputGroup } from "@ui/input";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { Channel, CommunityModerator } from "../../managers/message-manager-types";
+import { CommunityModerator } from "../../managers/message-manager-types";
+import { useLeaveCommunityChannel } from "../../mutations";
+import { EditRolesModal } from "./edit-roles-modal";
 
 interface Props {
   history: History;
@@ -42,15 +33,17 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const { history, from } = props;
   const [step, setStep] = useState(0);
   const [keyDialog, setKeyDialog] = useState(false);
-  const [inProgress, setInProgress] = useState(false);
-  const [user, setUser] = useState("");
-  const [addRoleError, setAddRoleError] = useState("");
-  const [role, setRole] = useState("admin");
   const [moderator, setModerator] = useState<CommunityModerator>();
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
 
+  const { mutateAsync: leaveChannel } = useLeaveCommunityChannel(() => {
+    setKeyDialog(false);
+    setStep(0);
+    history?.push("/chats");
+  });
+
   const { messageServiceInstance } = useContext(ChatContext);
 
   useEffect(() => {
@@ -91,83 +84,11 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     setStep(3);
   };
 
-  const updateRole = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-    moderator: CommunityModerator
-  ) => {
-    const selectedRole = event.target.value;
-    const moderatorIndex = currentChannel?.communityModerators?.findIndex(
-      (mod) => mod.name === moderator.name
-    );
-    if (moderatorIndex !== -1 && currentChannel) {
-      const newUpdatedChannel: Channel = { ...currentChannel };
-      const newUpdatedModerator = { ...newUpdatedChannel?.communityModerators![moderatorIndex!] };
-      newUpdatedModerator.role = selectedRole;
-      newUpdatedChannel!.communityModerators![moderatorIndex!] = newUpdatedModerator;
-      setCurrentChannel(newUpdatedChannel);
-      messageServiceInstance?.updateChannel(currentChannel, newUpdatedChannel);
-      success("Roles updated succesfully");
-    }
-  };
-
   const finish = () => {
     setStep(0);
     setKeyDialog(false);
   };
 
-  useDebounce(
-    async () => {
-      if (user.length === 0) {
-        setAddRoleError("");
-        setInProgress(false);
-        return;
-      }
-      try {
-        const response = await getAccountFull(user);
-        if (!response) {
-          setAddRoleError("Account does not exist");
-          return;
-        }
-
-        if (!response.posting_json_metadata) {
-          setAddRoleError("This user hasn't joined the chat yet.");
-          return;
-        }
-
-        const { posting_json_metadata } = response;
-        const profile = JSON.parse(posting_json_metadata).profile;
-
-        if (!profile || !profile.hasOwnProperty(NOSTRKEY)) {
-          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
-          return;
-        }
-
-        const alreadyExists = currentChannel?.communityModerators?.some(
-          (moderator) => moderator.name === response.name
-        );
-
-        if (alreadyExists) {
-          setAddRoleError("You have already assigned some rule to this user.");
-          setInProgress(false);
-        } else {
-          const moderator = {
-            name: user,
-            pubkey: profile.nsKey,
-            role: role
-          };
-          setModerator(moderator);
-          setAddRoleError("");
-        }
-      } catch (err) {
-        error(err as string);
-      } finally {
-        setInProgress(false);
-      }
-    },
-    200,
-    [user, role]
-  );
-
   const communityMenuItems: MenuItem[] = [
     {
       label: _t("chat.invite"),
@@ -247,117 +168,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     );
   };
 
-  const EditRolesModal = () => {
-    return (
-      <>
-        <div className="add-dialog-header border-bottom">
-          <div className="add-dialog-titles">
-            <h4 className="add-main-title">{_t("chat.edit-community-roles")}</h4>
-            {inProgress && <LinearProgress />}
-          </div>
-        </div>
-        <div className="community-chat-role-edit-dialog-content">
-          <div className={`add-user-role-form ${inProgress ? "in-progress" : ""}`}>
-            <div className="grid grid-cols-12">
-              <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.username")}</div>
-              <div className="col-span-12 sm:col-span-10">
-                <InputGroup prepend="@">
-                  <FormControl
-                    type="text"
-                    autoFocus={user === ""}
-                    placeholder={_t("community-role-edit.username").toLowerCase()}
-                    value={user}
-                    onChange={(e) => {
-                      setUser(e.target.value);
-                      setInProgress(true);
-                    }}
-                    className={addRoleError ? "is-invalid" : ""}
-                  />
-                </InputGroup>
-                {addRoleError && <div className="text-danger">{addRoleError}</div>}
-              </div>
-            </div>
-            <div className="grid grid-cols-12">
-              <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.role")}</div>
-              <div className="col-span-12 sm:col-span-10">
-                <FormControl
-                  type="select"
-                  value={role}
-                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setRole(e.target.value)}
-                >
-                  {roles.map((r, i) => (
-                    <option key={i} value={r}>
-                      {r}
-                    </option>
-                  ))}
-                </FormControl>
-              </div>
-            </div>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={() => handleChannelUpdate(ADDROLE)}
-                disabled={inProgress || addRoleError.length !== 0 || user.length === 0}
-              >
-                {_t("chat.add")}
-              </Button>
-            </div>
-          </div>
-          {currentChannel?.communityModerators?.length !== 0 ? (
-            <>
-              <table className="table table-striped table-bordered table-roles mt-4">
-                <thead>
-                  <tr>
-                    <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
-                    <th style={{ width: "50%" }}>{_t("community.roles-role")}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {currentChannel?.communityModerators &&
-                    currentChannel?.communityModerators!.map((moderator, i) => {
-                      return (
-                        <tr key={i}>
-                          <td>
-                            <span className="flex user">
-                              <UserAvatar username={moderator.name} size="medium" />{" "}
-                              <span className="mt-2 ml-2 username">@{moderator.name}</span>
-                            </span>
-                          </td>
-                          <td>
-                            {moderator.name === activeUser?.username ? (
-                              <p style={{ margin: "5px 0 0 12px" }}>{moderator.role}</p>
-                            ) : (
-                              <FormControl
-                                type="select"
-                                value={moderator.role}
-                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                                  updateRole(e, moderator)
-                                }
-                              >
-                                {roles.map((r, i) => (
-                                  <option key={i} value={r}>
-                                    {r}
-                                  </option>
-                                ))}
-                              </FormControl>
-                            )}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-              </table>
-            </>
-          ) : (
-            <div className="text-center">
-              <p>{_t("chat.no-admin")}</p>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  };
-
   const blockedUsersModal = () => {
     return (
       <>
@@ -440,16 +250,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const handleConfirmButton = (actionType: string) => {
     switch (actionType) {
       case LEAVECOMMUNITY:
-        messageServiceInstance
-          ?.updateLeftChannelList([...chat.leftChannelsList!, currentChannel?.id!])
-          .then(() => {})
-          .finally(() => {
-            setKeyDialog(false);
-            setStep(0);
-            if (from && from === CHATPAGE) {
-              history?.push("/chats");
-            }
-          });
+        leaveChannel(currentChannel?.id!!);
         break;
       case UNBLOCKUSER:
         handleChannelUpdate(UNBLOCKUSER);
@@ -490,9 +291,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
         setKeyDialog(true);
         setRemovedUserID("");
       }
-      if (operationType === ADDROLE) {
-        setUser("");
-      }
     } catch (err) {
       error(_t("chat.error-updating-community"));
     }
@@ -520,7 +318,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
           <ModalHeader thin={true} closeButton={true} />
           <ModalBody className="chat-modals-body">
             {step === 1 && confirmationModal(LEAVECOMMUNITY)}
-            {step === 2 && EditRolesModal()}
+            {step === 2 && <EditRolesModal username={props.username} />}
             {step === 3 && blockedUsersModal()}
             {step === 4 && confirmationModal(UNBLOCKUSER)}
             {step === 5 && successModal(UNBLOCKUSER)}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index 60490c7c9f5..9a2772d5970 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -1,9 +1,11 @@
 import { Link } from "react-router-dom";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { Channel } from "../../managers/message-manager-types";
-import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { useLastMessagesQuery } from "../../queries";
+import { classNameObject } from "../../../../helper/class-name-object";
+import { getRelativeDate } from "../../utils";
+import { ChatContext } from "../../chat-context-provider";
 
 interface Props {
   username: string;
@@ -11,22 +13,37 @@ interface Props {
 }
 
 export function ChatSidebarChannel({ channel, username }: Props) {
-  const { setRevealPrivKey } = useContext(ChatContext);
+  const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
 
   const { data: lastMessages } = useLastMessagesQuery();
 
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
+  const lastMessageDate = useMemo(
+    () => getRelativeDate(lastMessages[channel.name]?.created),
+    [lastMessages]
+  );
+
   return (
-    <Link to={`/chats/${channel.communityName}`} key={channel.id}>
-      <div
-        className={`community ${username === channel.communityName ? "selected" : ""}`}
-        key={channel.id}
-        onClick={() => setRevealPrivKey(false)}
-      >
-        <UserAvatar username={channel.communityName!} size="medium" />
-        <div className="community-info">
-          <p className="community-name">{channel.name}</p>
-          <p className="community-last-message">{lastMessages[channel.name].content}</p>
+    <Link
+      className={classNameObject({
+        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+          true,
+        "bg-gray-100 dark:bg-gray-800": rawUsername === channel.name
+      })}
+      to={`/chats/${channel.communityName}`}
+      onClick={() => {
+        if (revealPrivKey) {
+          setRevealPrivKey(false);
+        }
+      }}
+    >
+      <UserAvatar username={channel.communityName!} size="medium" />
+      <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
+        <div className="flex justify-between w-full items-center">
+          <div className="font-semibold truncate dark:text-white">{channel.name}</div>
+          <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
+        <div className="text-sm text-gray-600 truncate">{lastMessages[channel.name]?.content}</div>
       </div>
     </Link>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 502b0bdde2c..f841b050ba2 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -15,11 +15,11 @@ interface Props {
 export function ChatSidebarDirectContact({ contact, username }: Props) {
   const { setReceiverPubKey, revealPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
-  const { data: directMessagesLastMessages } = useLastMessagesQuery();
+  const { data: lastMessages } = useLastMessagesQuery();
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
   const lastMessageDate = useMemo(
-    () => getRelativeDate(directMessagesLastMessages[contact.name]?.created),
-    [directMessagesLastMessages]
+    () => getRelativeDate(lastMessages[contact.name]?.created),
+    [lastMessages]
   );
 
   return (
@@ -43,9 +43,7 @@ export function ChatSidebarDirectContact({ contact, username }: Props) {
           <div className="font-semibold truncate dark:text-white">{contact.name}</div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
-        <div className="text-sm text-gray-600 truncate">
-          {directMessagesLastMessages[contact.name]?.content}
-        </div>
+        <div className="text-sm text-gray-600 truncate">{lastMessages[contact.name]?.content}</div>
       </div>
     </Link>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 3ea54341daf..2708c83f7ef 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -98,7 +98,11 @@ export default function ChatsSideBar(props: Props) {
           ))
         ) : (
           <>
-            {communities.length !== 0 && <p className="community-title">Communities</p>}
+            {communities.length !== 0 && (
+              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
+                {_t("chat.communities")}
+              </div>
+            )}
             {communities.map((channel) => (
               <ChatSidebarChannel key={channel.id} channel={channel} username={username} />
             ))}
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index c3704d297fe..4b8260ce2fc 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -20,8 +20,8 @@ interface Props {
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
-  const { messageServiceInstance, activeUserKeys, hasUserJoinedChat } = useContext(ChatContext);
-  const { chat, activeUser } = useMappedStore();
+  const { activeUserKeys, hasUserJoinedChat } = useContext(ChatContext);
+  const { activeUser } = useMappedStore();
 
   const { data: currentChannel } = useCommunityChannelQuery(props.community);
   const { data: channels } = useChannelsQuery();
@@ -49,12 +49,6 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (!hasUserJoinedChat) {
       await joinChat();
     }
-    // TODO: need to write it as query and mutation that if we left the chat then re-join again
-    if (chat.leftChannelsList.includes(currentChannel?.id!)) {
-      messageServiceInstance?.updateLeftChannelList(
-        chat.leftChannelsList.filter((x) => x !== currentChannel?.id)
-      );
-    }
     await addCommunityChannel();
   };
 
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
index b042916d9e9..96d38331cac 100644
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -1,13 +1,17 @@
-import { useNostrFetchMutation } from "../nostr";
+import { useNostrFetchMutation, useUpdateLeftChannels } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { convertEvent } from "../nostr/utils/event-converter";
 import { ChatQueries, useChannelsQuery } from "../queries";
 import { useQueryClient } from "@tanstack/react-query";
+import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 
 export function useAddCommunityChannel(name: string | undefined) {
   const { data: channels } = useChannelsQuery();
   const queryClient = useQueryClient();
 
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+  const { mutateAsync: updateLeftChannels } = useUpdateLeftChannels();
+
   return useNostrFetchMutation(
     ["chats/add-community-channel"],
     [
@@ -36,6 +40,14 @@ export function useAddCommunityChannel(name: string | undefined) {
                 queryClient.setQueryData([ChatQueries.CHANNELS], [...(channels ?? []), channel]);
                 queryClient.invalidateQueries([ChatQueries.CHANNELS]);
               }
+
+              // Remove the community from left list
+              updateLeftChannels({
+                tags: [["d", "left-channel-list"]],
+                eventMetadata: JSON.stringify(
+                  leftCommunityChannelsIds?.filter((id) => name !== id) ?? []
+                )
+              });
           }
         });
       }
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 998202e57fa..ea2befcd2de 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -4,3 +4,6 @@ export * from "./join-chat";
 export * from "./create-community-chat";
 export * from "./add-community-channel";
 export * from "./add-direct-contact";
+export * from "./leave-community-channel";
+export * from "./update-community-channel";
+export * from "./update-channel-moderator";
diff --git a/src/common/features/chats/mutations/leave-community-channel.ts b/src/common/features/chats/mutations/leave-community-channel.ts
index fbd5d113b30..90446ef53df 100644
--- a/src/common/features/chats/mutations/leave-community-channel.ts
+++ b/src/common/features/chats/mutations/leave-community-channel.ts
@@ -1 +1,20 @@
-export function useLeaveCommunityChannel() {}
+import { useUpdateLeftChannels } from "../nostr";
+import { useMutation } from "@tanstack/react-query";
+import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
+
+export function useLeaveCommunityChannel(onSuccess?: () => void) {
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+  const { mutateAsync: updateLeftChannels } = useUpdateLeftChannels();
+
+  return useMutation(["chats/leave-community-channels"], async (name: string) =>
+    updateLeftChannels(
+      {
+        tags: [["d", "left-channel-list"]],
+        eventMetadata: JSON.stringify([...(leftCommunityChannelsIds ?? []), name])
+      },
+      {
+        onSuccess
+      }
+    )
+  );
+}
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 3fc9b362c6b..6d884a53f58 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -8,9 +8,9 @@ import { useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
 import { useAddDirectContact } from "./add-direct-contact";
 
 export function useSendMessage(
-  currentChannel: Channel,
-  currentUser: string,
-  onSuccess: () => void
+  currentChannel?: Channel,
+  currentUser?: string,
+  onSuccess?: () => void
 ) {
   const { activeUserKeys, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
   const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
@@ -31,14 +31,16 @@ export function useSendMessage(
         throw new Error("[Chat][SendMessage] – no active user");
       }
 
-      // Add user to direct contacts if its not there yet
-      // E.g. if user opened chat room directly from the address bar
-      addDirectContact({ pubkey: receiverPubKey, name: currentUser });
-
       if (!currentChannel && isCommunity(currentUser)) {
         throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
       }
 
+      // Add user to direct contacts if it's not there yet
+      // E.g. if user opened chat room directly from the address bar
+      if (currentUser) {
+        addDirectContact({ pubkey: receiverPubKey, name: currentUser });
+      }
+
       if (currentChannel) {
         return sendPublicMessage({ message });
       } else if (currentUser) {
@@ -48,7 +50,7 @@ export function useSendMessage(
       }
     },
     {
-      onSuccess: () => onSuccess()
+      onSuccess: () => onSuccess?.()
     }
   );
 }
diff --git a/src/common/features/chats/mutations/update-channel-moderator.ts b/src/common/features/chats/mutations/update-channel-moderator.ts
new file mode 100644
index 00000000000..57cfc8b183b
--- /dev/null
+++ b/src/common/features/chats/mutations/update-channel-moderator.ts
@@ -0,0 +1,29 @@
+import { useMutation } from "@tanstack/react-query";
+import { Channel, CommunityModerator } from "../managers/message-manager-types";
+import { useUpdateCommunityChannel } from "./update-community-channel";
+
+export function useUpdateChannelModerator(channel?: Channel) {
+  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
+
+  return useMutation(
+    ["chats/update-channel-moderator", channel?.communityName],
+    async (moderator: CommunityModerator) => {
+      const moderatorIndex = channel?.communityModerators?.findIndex(
+        (mod) => mod.name === moderator.name
+      );
+      if (!channel) {
+        console.error("[Chat][Nostr] – trying to update not existing channel");
+        return;
+      }
+
+      const newUpdatedChannel: Channel = { ...channel };
+      if (moderatorIndex === -1) {
+        newUpdatedChannel!.communityModerators?.push(moderator);
+      } else {
+        newUpdatedChannel!.communityModerators![moderatorIndex!] = moderator;
+      }
+
+      return updateChannel(newUpdatedChannel);
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/update-community-channel.ts b/src/common/features/chats/mutations/update-community-channel.ts
new file mode 100644
index 00000000000..ca4d8ccf439
--- /dev/null
+++ b/src/common/features/chats/mutations/update-community-channel.ts
@@ -0,0 +1,50 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Channel } from "../managers/message-manager-types";
+import { ChatQueries, useChannelsQuery } from "../queries";
+import { useNostrPublishMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+import { useFindHealthyRelayQuery } from "../nostr/mutations/find-healthy-relay";
+
+export function useUpdateCommunityChannel(channel?: Channel) {
+  const queryClient = useQueryClient();
+  const { data: channels } = useChannelsQuery();
+
+  const { mutateAsync: updateChannel } = useNostrPublishMutation(
+    ["chats/nostr-update-channel", channel?.communityName],
+    Kind.ChannelMetadata,
+    () => {}
+  );
+  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
+
+  return useMutation(
+    ["chats/update-community-channel", channel?.communityName],
+    async (newUpdatedChannel: Channel) => {
+      if (!channel) {
+        return;
+      }
+
+      const relay = await findHealthyRelay(channel.id);
+
+      await updateChannel({
+        tags: [["e", channel.id, ...(relay ? [relay] : [])]],
+        eventMetadata: JSON.stringify(newUpdatedChannel)
+      });
+
+      return newUpdatedChannel;
+    },
+    {
+      onSuccess: (updatedChannel) => {
+        if (!updatedChannel) {
+          return;
+        }
+
+        const tempChannels = [...(channels ?? [])];
+        const index = tempChannels.findIndex((ch) => ch.id === updatedChannel?.id);
+        tempChannels[index] = updatedChannel;
+
+        queryClient.setQueryData([ChatQueries.CHANNELS], tempChannels);
+        queryClient.invalidateQueries([ChatQueries.CHANNELS]);
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/nostr/mutations/index.ts b/src/common/features/chats/nostr/mutations/index.ts
index 92e687d702a..56960208a26 100644
--- a/src/common/features/chats/nostr/mutations/index.ts
+++ b/src/common/features/chats/nostr/mutations/index.ts
@@ -1,2 +1,3 @@
 export * from "./send-direct-message";
 export * from "./send-public-message";
+export * from "./update-left-channels";
diff --git a/src/common/features/chats/nostr/mutations/send-public-message.ts b/src/common/features/chats/nostr/mutations/send-public-message.ts
index bc78cfd46b9..656bce36603 100644
--- a/src/common/features/chats/nostr/mutations/send-public-message.ts
+++ b/src/common/features/chats/nostr/mutations/send-public-message.ts
@@ -8,8 +8,8 @@ interface Payload {
   mentions?: string[];
 }
 
-export function useNostrSendPublicMessage(channelId: string, parent?: string) {
-  const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
+export function useNostrSendPublicMessage(channelId?: string, parent?: string) {
+  const { mutateAsync: publishChannelMessage } = useNostrPublishMutation(
     ["chats/nostr-publish-channel-message"],
     Kind.ChannelMessage,
     () => {}
@@ -18,6 +18,12 @@ export function useNostrSendPublicMessage(channelId: string, parent?: string) {
 
   return useMutation(["chats/send-public-message"], async ({ message, mentions }: Payload) => {
     const root = parent || channelId;
+
+    if (!root) {
+      console.error("[Chat][Nostr] – trying to send public message to not existing channel");
+      return;
+    }
+
     const relay = await findHealthyRelay(root);
 
     const tags: string[][] = [];
@@ -29,7 +35,7 @@ export function useNostrSendPublicMessage(channelId: string, parent?: string) {
       mentions.forEach((m) => tags.push(["p", m]));
     }
 
-    return publishEncryptedMessage({
+    return publishChannelMessage({
       tags,
       eventMetadata: message
     });
diff --git a/src/common/features/chats/nostr/mutations/update-left-channels.ts b/src/common/features/chats/nostr/mutations/update-left-channels.ts
new file mode 100644
index 00000000000..aa994ceece1
--- /dev/null
+++ b/src/common/features/chats/nostr/mutations/update-left-channels.ts
@@ -0,0 +1,5 @@
+import { useNostrPublishMutation } from "../core";
+
+export function useUpdateLeftChannels() {
+  return useNostrPublishMutation(["chats/nostr-update-left-channels-list"], 30078, () => {});
+}
diff --git a/src/common/features/chats/nostr/utils/listen-while-finish.ts b/src/common/features/chats/nostr/utils/listen-while-finish.ts
index cfd3db1d621..57b3d9399ac 100644
--- a/src/common/features/chats/nostr/utils/listen-while-finish.ts
+++ b/src/common/features/chats/nostr/utils/listen-while-finish.ts
@@ -20,7 +20,14 @@ export async function listenWhileFinish(
     const events: Event[] = [];
     subInfo?.on("event", (event: Event) => events.push(event));
     subInfo?.on("eose", () => {
-      resolve(events.sort((a, b) => b.created_at - a.created_at));
+      resolve(
+        events
+          .reduce<Event[]>(
+            (acc, event) => [...acc, ...(acc.some((e) => e.id === event.id) ? [] : [event])],
+            []
+          )
+          .sort((a, b) => b.created_at - a.created_at)
+      );
       subInfo?.unsub();
     });
   });
diff --git a/src/common/features/chats/queries/community-channel-query.ts b/src/common/features/chats/queries/community-channel-query.ts
index 3ca5946a2a5..1ea4ad8dac4 100644
--- a/src/common/features/chats/queries/community-channel-query.ts
+++ b/src/common/features/chats/queries/community-channel-query.ts
@@ -8,8 +8,12 @@ import { Channel } from "../managers/message-manager-types";
  * Get the community's channel information
  * @see {@link ../mutations/create-community-chat.ts}
  */
-export function useCommunityChannelQuery(community: Community) {
-  return useQuery<Channel>([ChatQueries.COMMUNITY_CHANNEL, community.name], async () => {
+export function useCommunityChannelQuery(community?: Community) {
+  return useQuery<Channel>([ChatQueries.COMMUNITY_CHANNEL, community?.name], async () => {
+    if (!community) {
+      return undefined;
+    }
+
     const communityProfile = await getProfileMetaData(community.name);
     return communityProfile.channel;
   });
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
index 443091d17c4..c6bc5eecb89 100644
--- a/src/common/features/chats/queries/last-messages-query.ts
+++ b/src/common/features/chats/queries/last-messages-query.ts
@@ -1,36 +1,45 @@
-import { useMessagesQuery } from "./messages-query";
 import { useQuery } from "@tanstack/react-query";
 import { Message } from "../managers/message-manager-types";
 import { ChatQueries } from "./queries";
 import { getDirectLastMessage } from "../utils";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useChannelsQuery } from "./channels-query";
+import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
+import { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
 
 export function useLastMessagesQuery() {
+  const { activeUserKeys } = useContext(ChatContext);
+
   const { data: contacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
-  const { data: messages } = useMessagesQuery("all");
+  const { data: initialDirectMessages } = useDirectMessagesQuery(
+    contacts ?? [],
+    activeUserKeys.pub,
+    activeUserKeys.priv
+  );
+  const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
 
   const getContactsLastMessages = () =>
-    (contacts ?? []).reduce<Record<string, Message>>((acc, current) => {
-      const currentMessages = messages.filter((i) =>
+    (contacts ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
+      const currentMessages = initialDirectMessages?.filter((i) =>
         "peer" in i ? i.peer === current?.pubkey : i.root === current?.pubkey
       );
-      return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
+      return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
     }, {});
 
   const getChannelsLastMessages = () =>
-    (channels ?? []).reduce<Record<string, Message>>((acc, current) => {
-      const currentMessages = messages.filter((i) => i.root === current.id);
-      return { ...acc, [current.name]: getDirectLastMessage(currentMessages) };
+    (channels ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
+      const currentMessages = initialPublicMessages?.filter((i) => i.root === current.id);
+      return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
     }, {});
 
-  return useQuery<Record<string, Message>>(
+  return useQuery<Record<string, Message | undefined>>(
     [ChatQueries.LAST_MESSAGES],
     async () => ({ ...getContactsLastMessages(), ...getChannelsLastMessages() }),
     {
       initialData: {},
-      enabled: messages.length > 0
+      enabled: !!initialDirectMessages?.length && !!initialPublicMessages?.length
     }
   );
 }
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index a8b78bc5719..49243a4b85d 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -21,8 +21,8 @@ export function useMessagesQuery(username?: string) {
   const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
 
   const currentChannel = useMemo(
-    () => channels?.find((channel) => channel.name === username),
-    [channels]
+    () => channels?.find((channel) => channel.communityName === username),
+    [channels, username]
   );
 
   return useQuery<Message[]>(
@@ -49,11 +49,11 @@ export function useMessagesQuery(username?: string) {
       initialData: [],
       select: (messages) => {
         if (currentChannel) {
-          return messages.filter(
-            (message) => !currentChannel.hiddenMessageIds?.includes(message.id)
-          );
+          return messages
+            .filter((message) => !currentChannel.hiddenMessageIds?.includes(message.id))
+            .sort((a, b) => a.created - b.created);
         }
-        return messages;
+        return messages.sort((a, b) => a.created - b.created);
       }
     }
   );
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index ba9308e82f6..b92dcbe285b 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -14,6 +14,8 @@ import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
+import { useChannelsQuery } from "../queries";
+import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 
 interface Props extends PageProps {
   match: match<{
@@ -27,28 +29,39 @@ interface Props extends PageProps {
 
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
-  const { match, history } = props;
-
-  const username = match.params.username;
-
   const { receiverPubKey, showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } =
     useContext(ChatContext);
 
+  const { data: channels } = useChannelsQuery();
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+
+  const isChannel = useMemo(
+    () =>
+      channels?.some(
+        (channel) =>
+          channel.communityName === props.match.params.username &&
+          !leftCommunityChannelsIds?.includes(channel.name)
+      ),
+    [channels, leftCommunityChannelsIds]
+  );
+
   const isReady = useMemo(
     () => !!(activeUser && activeUserKeys?.pub && chatPrivKey),
     [activeUserKeys, activeUserKeys, chatPrivKey]
   );
   const isShowManageKey = useMemo(() => isReady && revealPrivKey, [isReady, revealPrivKey]);
   const isShowChatRoom = useMemo(
-    () => isReady && !showSpinner && !!receiverPubKey && !revealPrivKey,
+    () => isReady && !showSpinner && (!!receiverPubKey || isChannel) && !revealPrivKey,
     [isReady, showSpinner, receiverPubKey, revealPrivKey]
   );
   const isShowDefaultScreen = useMemo(
-    () => isReady && !receiverPubKey && !revealPrivKey && !showSpinner,
+    () => isReady && !receiverPubKey && !isChannel && !revealPrivKey && !showSpinner,
     [isReady, receiverPubKey, revealPrivKey, showSpinner]
   );
   const isShowImportChats = useMemo(() => !isReady && !showSpinner, [isReady, showSpinner]);
 
+  const { match, history } = props;
+
   useEffect(() => {
     document.body.style.overflow = "hidden";
 
@@ -65,7 +78,7 @@ export const Chats = (props: Props) => {
       <div className="container mx-auto md:py-6">
         <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
           <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
-            {isReady ? <ChatsSideBar history={history} username={username} /> : <></>}
+            {isReady ? <ChatsSideBar history={history} username={match.params.username} /> : <></>}
           </div>
           <div
             className={classNameObject({
diff --git a/src/common/features/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
index 3b74429c298..357b8182fa2 100644
--- a/src/common/features/chats/utils/use-get-direct-last-message.ts
+++ b/src/common/features/chats/utils/use-get-direct-last-message.ts
@@ -1,6 +1,10 @@
 import { Message } from "../managers/message-manager-types";
 
 export const getDirectLastMessage = (directMessages: Message[]) => {
+  if (!directMessages.length) {
+    return undefined;
+  }
+
   const messages = directMessages.sort((a, b) => a.created - b.created);
   const lastMessage = messages.slice(-1);
   return lastMessage[0];
diff --git a/src/common/helper/is-community.ts b/src/common/helper/is-community.ts
index b5b5aae16c4..0c233af2fb0 100644
--- a/src/common/helper/is-community.ts
+++ b/src/common/helper/is-community.ts
@@ -1 +1 @@
-export default (s: string) => s.match(/^hive-\d+/) !== null;
+export default (s?: string) => s?.match(/^hive-\d+/) !== null;
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index fbe3631bfe7..e8499eb4d8b 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -37,15 +37,14 @@ import { connect } from "react-redux";
 import { withPersistentScroll } from "../components/with-persistent-scroll";
 import "./community.scss";
 import LoginRequired from "../components/login-required";
-import { useMappedStore } from "../store/use-mapped-store";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
 import { ChatContext } from "../features/chats/chat-context-provider";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { useJoinChat } from "../features/chats/mutations/join-chat";
 import { useChannelsQuery } from "../features/chats/queries";
 import { useLeftCommunityChannelsQuery } from "../features/chats/queries/left-community-channels-query";
+import { useAddCommunityChannel, useJoinChat } from "../features/chats/mutations";
 
 interface MatchParams {
   filter: string;
@@ -61,13 +60,16 @@ export const CommunityPage = (props: Props) => {
     const updatedLocation = props.location.search.replace(/communityid=.*?(?=&|$)/, "");
     return updatedLocation.replace("?", "").replace("q", "").replace("=", "").replace("&", "");
   };
-  const { chat } = useMappedStore();
-
   const queryClient = useQueryClient();
   const { data: community } = useCommunityCache(props.match.params.name);
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === community?.name),
+    [channels, community]
+  );
+
   const [account, setAccount] = useState<Account | undefined>(
     props.accounts.find(({ name }) => [props.match.params.name])
   );
@@ -77,32 +79,23 @@ export const CommunityPage = (props: Props) => {
   const [searchData, setSearchData] = useState<SearchResult[]>([]);
   const [isJoinCommunity, setIsJoinCommunity] = useState(false);
   const [inProgress, setInProgress] = useState(false);
-  const [channelId, setChannelId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [loadCommunity, setLoadCommunity] = useState(false);
 
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
-  const { messageServiceInstance, hasUserJoinedChat } = useContext(ChatContext);
+  const { hasUserJoinedChat } = useContext(ChatContext);
   const { mutateAsync: joinChat } = useJoinChat();
+  const { mutateAsync: addCommunityChannel } = useAddCommunityChannel(community?.name);
 
   const isCommunityAlreadyJoined = useMemo(
     () =>
       getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
-        (community) => community.id === channelId
+        (community) => community.name === currentChannel?.communityName
       ),
     [channels, leftChannelsIds]
   );
 
-  useEffect(() => {
-    if (messageServiceInstance && loadCommunity) {
-      messageServiceInstance?.loadChannel(channelId);
-      setInProgress(false);
-      setIsJoinCommunity(false);
-    }
-  }, [loadCommunity, messageServiceInstance]);
-
   useEffect(() => {
     setIsLoading(true);
 
@@ -115,7 +108,6 @@ export const CommunityPage = (props: Props) => {
     const urlParams = new URLSearchParams(location.search);
     const communityId = urlParams.get("communityid");
     if (communityId) {
-      setChannelId(communityId);
       setIsJoinCommunity(true);
     }
 
@@ -233,20 +225,12 @@ export const CommunityPage = (props: Props) => {
     <NavBar {...props} />
   );
 
-  const joinCommunityChat = () => {
+  const joinCommunityChat = async () => {
     if (!hasUserJoinedChat) {
       setInProgress(true);
-      joinChat();
-      setLoadCommunity(true);
-      return;
-    }
-    if (chat.leftChannelsList.includes(channelId)) {
-      messageServiceInstance?.updateLeftChannelList(
-        chat.leftChannelsList.filter((x) => x !== channelId)
-      );
+      await joinChat();
     }
-    messageServiceInstance?.loadChannel(channelId);
-    setIsJoinCommunity(false);
+    await addCommunityChannel();
   };
 
   const joinCommunityModal = () => {
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
index f08d52f622f..f7f0a934ed5 100644
--- a/src/common/store/chat/index.ts
+++ b/src/common/store/chat/index.ts
@@ -27,50 +27,15 @@ import {
 } from "./types";
 
 export const initialState: Chat = {
-  directMessages: [],
-  channels: [],
-  publicMessages: [],
   profiles: [],
-  leftChannelsList: [],
   updatedChannel: []
 };
 
 export default (state: Chat = initialState, action: Actions): Chat => {
   switch (action.type) {
-    case ActionTypes.DIRECTMESSAGES: {
-      const { peer, data } = action;
-      return {
-        ...state,
-        directMessages: state.directMessages.map((contact) =>
-          contact.peer === peer
-            ? { peer: peer, chat: { ...contact.chat, [data.id]: data } }
-            : contact
-        )
-      };
-    }
-
     case ActionTypes.RESET:
       return initialState;
 
-    case ActionTypes.PUBLICMESSAGES: {
-      const { channelId, data } = action;
-
-      return {
-        ...state,
-        publicMessages: state.publicMessages.map((obj) =>
-          obj.channelId === channelId
-            ? {
-                channelId: channelId,
-                PublicMessage: {
-                  ...obj.PublicMessage,
-                  [data.id]: data // Add the new message object with its ID as the key
-                }
-              }
-            : obj
-        )
-      };
-    }
-
     case ActionTypes.PROFILES: {
       const { data } = action;
 
@@ -83,15 +48,6 @@ export default (state: Chat = initialState, action: Actions): Chat => {
         profiles: [...state.profiles, ...filteredProfiles]
       };
     }
-
-    case ActionTypes.LEFTCHANNELLIST: {
-      const { data } = action;
-      return {
-        ...state,
-        leftChannelsList: [...data]
-      };
-    }
-
     case ActionTypes.UPDATEDCHANNEL: {
       const { data } = action;
       return {
@@ -112,14 +68,7 @@ export default (state: Chat = initialState, action: Actions): Chat => {
       }
 
       return {
-        ...state,
-        publicMessages: [
-          ...state.publicMessages.map((obj) =>
-            obj.channelId === channelId
-              ? { channelId: channelId, PublicMessage: { ...publicChat } }
-              : obj
-          )
-        ]
+        ...state
       };
     }
 
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
index 46d3fe1ff12..2e54cfd2e74 100644
--- a/src/common/store/chat/types.ts
+++ b/src/common/store/chat/types.ts
@@ -1,5 +1,4 @@
 import {
-  Channel,
   ChannelUpdate,
   DirectMessage,
   MessagesObject,
@@ -24,15 +23,12 @@ export interface publicMessagesList {
 
 export interface Chat {
   profiles: Profile[];
-  leftChannelsList: string[];
   updatedChannel: ChannelUpdate[];
 }
 
 export enum ActionTypes {
   RESET = "@chat/RESET",
-  PUBLICMESSAGES = "@chat/PUBLICMESSAGES",
   PROFILES = "@chat/PROFILES",
-  LEFTCHANNELLIST = "@chat/LEFTCHANNELLIST",
   UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL",
   REPLACEPUBLICMESSAGE = "@chat/REPLACEPUBLICMESSAGE",
   VERIFYPUBLICMESSAGESENDING = "@chat/VERIFYMESSAGESENDING",
@@ -43,37 +39,15 @@ export enum ActionTypes {
   ADDPREVIOUSPUBLICMESSAGES = "@chat/ADDPREVIOUSPUBLICMESSAGES"
 }
 
-export interface DirectContactsAction {
-  type: ActionTypes.DIRECTCONTACTS;
-  data: DirectContactsType[];
-}
-
 export interface ResetChatAction {
   type: ActionTypes.RESET;
 }
 
-export interface DirectMessagesAction {
-  type: ActionTypes.DIRECTMESSAGES;
-  data: DirectMessage;
-  peer: string;
-}
-
-export interface PublicMessagesAction {
-  type: ActionTypes.PUBLICMESSAGES;
-  data: PublicMessage;
-  channelId: string;
-}
-
 export interface ProfilesAction {
   type: ActionTypes.PROFILES;
   data: Profile[];
 }
 
-export interface LeftChannelsAction {
-  type: ActionTypes.LEFTCHANNELLIST;
-  data: string[];
-}
-
 export interface UpdateChannelAction {
   type: ActionTypes.UPDATEDCHANNEL;
   data: ChannelUpdate[];
@@ -122,12 +96,8 @@ export interface AddPreviousPublicMessagesAction {
 }
 
 export type Actions =
-  | DirectContactsAction
-  | DirectMessagesAction
   | ResetChatAction
-  | PublicMessagesAction
   | ProfilesAction
-  | LeftChannelsAction
   | UpdateChannelAction
   | ReplacePublicMessagesAction
   | VerifyPublicMessageSendingAction

From 02bfaa7b7a9bf6cf6c217b19ae941ab32d4e8461 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 8 Nov 2023 18:34:05 +0600
Subject: [PATCH 117/179] Chats: added previous messages fetching mutation

---
 .../chats/components/chat-message-box.tsx     |   3 +-
 .../chats/components/chat-messages-view.tsx   |  30 ++---
 .../chat-popup/chat-direct-message.tsx        |   2 +-
 .../chat-popup/chat-popup-header.tsx          |  12 +-
 .../chat-popup/chat-popup-messages-list.tsx   |  64 ++++------
 .../chats/components/chat-popup/index.tsx     | 109 +++---------------
 .../chats/components/chat-profile-box.tsx     |  75 ++++--------
 .../chats-channel-messages/index.tsx          |  10 +-
 .../chats-direct-messages/index.tsx           |   7 +-
 .../mutations/fetch-previous-messages.ts      |  36 ++++++
 src/common/features/chats/mutations/index.ts  |   1 +
 11 files changed, 120 insertions(+), 229 deletions(-)
 create mode 100644 src/common/features/chats/mutations/fetch-previous-messages.ts

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index b8d24de72f8..046efb8dd7d 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -42,7 +42,7 @@ export default function ChatsMessagesBox(props: Props) {
 
   const currentChannel = useMemo(
     () => channels?.find((c) => c.communityName === community?.name),
-    [channels]
+    [channels, community]
   );
   const hasCommunityChat = useMemo(() => !!communityChannel, [communityChannel]);
   const hasLeftCommunity = useMemo(
@@ -80,7 +80,6 @@ export default function ChatsMessagesBox(props: Props) {
                 history={props.history}
                 username={username}
                 currentChannel={currentChannel!}
-                inProgress={inProgress}
                 setInProgress={setInProgress}
               />
             </>
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index f5223526fa5..893ef51cc8f 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { History } from "history";
 import ChatsProfileBox from "./chat-profile-box";
@@ -7,28 +7,25 @@ import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
 import ChatsScroller from "./chats-scroller";
 import { CHATPAGE } from "./chat-popup/chat-constants";
-import { ChatContext } from "../chat-context-provider";
 import { classNameObject } from "../../../helper/class-name-object";
 import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
 import { useMessagesQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
+import { useFetchPreviousMessages } from "../mutations";
 
 interface Props {
   username: string;
   history: History;
   currentChannel: Channel;
-  inProgress: boolean;
   setInProgress: (d: boolean) => void;
 }
 
 export default function ChatsMessagesView({
   username,
   currentChannel,
-  inProgress,
   setInProgress,
   history
 }: Props) {
-  const { messageServiceInstance } = useContext(ChatContext);
   const { data: messages } = useMessagesQuery(username.replace("@", ""));
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
@@ -40,10 +37,17 @@ export default function ChatsMessagesView({
   const [hasMore, setHasMore] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingPreviousMessages } =
+    useFetchPreviousMessages(currentChannel, () => {});
+
   useEffect(() => {
     isDirectUserOrCommunity();
   }, []);
 
+  useEffect(() => {
+    setInProgress(isFetchingPreviousMessages);
+  }, [isFetchingPreviousMessages]);
+
   useEffect(() => {
     if (messages.length < 45) {
       setHasMore(false);
@@ -64,20 +68,16 @@ export default function ChatsMessagesView({
   }, [isTop]);
 
   const fetchPrevMessages = () => {
-    if (!hasMore || inProgress) return;
+    if (!hasMore) return;
 
     setInProgress(true);
-    messageServiceInstance
-      ?.fetchPrevMessages(currentChannel!.id, messages[0].created)
-      .then((num) => {
-        if (num < 25) {
+    fetchPreviousMessages()
+      .then((events) => {
+        if (events.length < 25) {
           setHasMore(false);
         }
       })
-      .finally(() => {
-        setInProgress(false);
-        setIsTop(false);
-      });
+      .finally(() => setIsTop(false));
   };
 
   const isDirectUserOrCommunity = () => {
@@ -122,7 +122,7 @@ export default function ChatsMessagesView({
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
           target="_blank"
         >
-          <ChatsProfileBox username={username} />
+          <ChatsProfileBox communityName={username} currentUser={username} />
         </Link>
         {communityName.length !== 0 ? (
           <>
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-message.tsx b/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
index 931cfc66c19..909edcba206 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
@@ -4,7 +4,7 @@ import UserAvatar from "../../../../components/user-avatar";
 
 interface Props {
   username: string;
-  lastMessage: string;
+  lastMessage?: string;
   userClicked: (username: string) => void;
 }
 
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index 38db39c956c..a89fe706dd7 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -14,7 +14,6 @@ import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { classNameObject } from "../../../../helper/class-name-object";
 import React, { useContext } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { Community } from "../../../../store/communities";
 import { ChatContext } from "../../chat-context-provider";
 
 interface Props {
@@ -30,7 +29,6 @@ interface Props {
   handleRefreshSvgClick: () => void;
   handleExtendedView: () => void;
   setExpanded: (v: boolean) => void;
-  currentCommunity?: Community;
 }
 
 export function ChatPopupHeader({
@@ -45,8 +43,7 @@ export function ChatPopupHeader({
   handleMessageSvgClick,
   handleRefreshSvgClick,
   handleExtendedView,
-  setExpanded,
-  currentCommunity
+  setExpanded
 }: Props) {
   const { revealPrivKey, activeUserKeys, hasUserJoinedChat, setRevealPrivKey } =
     useContext(ChatContext);
@@ -67,17 +64,14 @@ export function ChatPopupHeader({
         )}
         <div className="flex items-center gap-3" onClick={() => setExpanded(!expanded)}>
           {(currentUser || isCommunity) && (
-            <UserAvatar
-              username={isCurrentUser ? currentUser : (isCommunity && currentCommunity?.name) || ""}
-              size="small"
-            />
+            <UserAvatar username={isCurrentUser ? currentUser : communityName || ""} size="small" />
           )}
 
           <div className="text-lg truncate max-w-[180px] font-semibold">
             {currentUser
               ? currentUser
               : isCommunity
-              ? currentCommunity?.title
+              ? communityName
               : showSearchUser
               ? _t("chat.new-message")
               : revealPrivKey
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index b6ae2f437b1..c79f8f4ba7d 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -3,63 +3,43 @@ import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
 import ChatsChannelMessages from "../chats-channel-messages";
 import { history } from "../../../../store";
-import React, { useContext } from "react";
-import { ChatContext } from "../../chat-context-provider";
-import { Community } from "../../../../store/communities";
+import React, { useMemo } from "react";
 import { DirectMessage, PublicMessage } from "../../managers/message-manager-types";
-import { useMessagesQuery } from "../../queries";
+import { useChannelsQuery, useMessagesQuery } from "../../queries";
+import { useCommunityCache } from "../../../../core";
 
 interface Props {
-  isCurrentUser: boolean;
-  currentUser: string;
-  isCommunity: boolean;
-  communityName: string;
-  currentCommunity?: Community;
+  username: string;
 }
 
-export function ChatPopupMessagesList({
-  isCommunity,
-  currentUser,
-  isCurrentUser,
-  currentCommunity,
-  communityName
-}: Props) {
-  const { currentChannel, setCurrentChannel } = useContext(ChatContext);
-  const { data: messages } = useMessagesQuery(currentUser);
+export function ChatPopupMessagesList({ username }: Props) {
+  const { data: currentCommunity } = useCommunityCache(username);
+  const { data: messages } = useMessagesQuery(username);
+  const { data: channels } = useChannelsQuery();
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === currentCommunity?.name),
+    [channels, currentCommunity]
+  );
 
   return (
     <div className="chats">
       {" "}
-      <Link
-        to={
-          isCurrentUser
-            ? `/@${currentUser}`
-            : isCommunity
-            ? `/created/${currentCommunity?.name}`
-            : ""
-        }
-      >
-        <ChatsProfileBox
-          isCommunity={isCommunity}
-          isCurrentUser={isCurrentUser}
-          communityName={communityName}
-          currentUser={currentUser}
-        />
+      <Link to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${username}`}>
+        <ChatsProfileBox communityName={username} currentUser={username} />
       </Link>
-      {isCurrentUser ? (
-        <ChatsDirectMessages
-          directMessages={messages as DirectMessage[]}
-          currentUser={currentUser}
-          isScrollToBottom={false}
-        />
-      ) : (
+      {!!currentChannel ? (
         <ChatsChannelMessages
           history={history!}
-          username={communityName}
+          username={username}
           publicMessages={messages as PublicMessage[]}
           currentChannel={currentChannel!}
           isScrollToBottom={false}
-          currentChannelSetter={setCurrentChannel}
+        />
+      ) : (
+        <ChatsDirectMessages
+          directMessages={messages as DirectMessage[]}
+          currentUser={username}
+          isScrollToBottom={false}
         />
       )}
     </div>
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index ceb13551777..713b33980ae 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -1,8 +1,6 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
 import { history } from "../../../../store";
-import { Community } from "../../../../store/communities";
-import { ChannelUpdate } from "../../managers/message-manager-types";
 import Tooltip from "../../../../components/tooltip";
 import LinearProgress from "../../../../components/linear-progress";
 import ManageChatKey from "../manage-chat-key";
@@ -10,9 +8,8 @@ import ChatInput from "../chat-input";
 import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
 import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
-import { getCommunity } from "../../../../api/bridge";
 import "./index.scss";
-import { getPrivateKey, getUserChatPublicKey } from "../../utils";
+import { getPrivateKey } from "../../utils";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
@@ -24,9 +21,9 @@ import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
 import { setNostrkeys } from "../../managers/message-manager";
-import { useJoinChat } from "../../mutations/join-chat";
 import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
+import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
@@ -35,10 +32,7 @@ export const ChatPopUp = () => {
     messageServiceInstance,
     revealPrivKey,
     activeUserKeys,
-    showSpinner,
     hasUserJoinedChat,
-    currentChannel,
-    setCurrentChannel,
     setRevealPrivKey,
     setShowSpinner
   } = useContext(ChatContext);
@@ -67,11 +61,14 @@ export const ChatPopUp = () => {
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
-  const [currentCommunity, setCurrentCommunity] = useState<Community>();
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === communityName),
+    [communityName, channels]
+  );
   const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
   const canSendMessage = useMemo(
     () =>
@@ -79,6 +76,9 @@ export const ChatPopUp = () => {
     [currentUser, hasUserJoinedChat, activeUserKeys, isCommunity, revealPrivKey]
   );
 
+  const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingMore } =
+    useFetchPreviousMessages(currentChannel);
+
   useMount(() => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   });
@@ -96,36 +96,6 @@ export const ChatPopUp = () => {
     }
   }, [leftCommunityChannelsIds]);
 
-  // todo ???
-  useEffect(() => {
-    const updated: ChannelUpdate = chat.updatedChannel
-      .filter((x) => x.channelId === currentChannel?.id!)
-      .sort((a, b) => b.created - a.created)[0];
-    if (currentChannel && updated) {
-      // TODO: check that updated channel affecting messagse
-      // const publicMessages: PublicMessage[] = fetchCommunityMessages(
-      //   chat.publicMessages,
-      //   currentChannel,
-      //   updated?.hiddenMessageIds
-      // );
-      // const messages = publicMessages.sort((a, b) => a.created - b.created);
-      // setPublicMessages(messages);
-      const channel = {
-        name: updated.name,
-        about: updated.about,
-        picture: updated.picture,
-        communityName: updated.communityName,
-        communityModerators: updated.communityModerators,
-        id: updated.channelId,
-        creator: updated.creator,
-        created: currentChannel?.created!,
-        hiddenMessageIds: updated.hiddenMessageIds,
-        removedUserIds: updated.removedUserIds
-      };
-      setCurrentChannel(channel);
-    }
-  }, [chat.updatedChannel]);
-
   // Fetching previous messages when scrol achieved top
   useEffect(() => {
     if (isTop) {
@@ -155,61 +125,20 @@ export const ChatPopUp = () => {
 
   useEffect(() => {
     if (isCommunity && show) {
-      fetchCommunity();
-
       scrollerClicked();
     }
   }, [isCommunity, communityName, show]);
 
-  useEffect(() => {
-    if (currentUser) {
-      const isCurrentUserFound = directContacts?.find((contact) => contact.name === currentUser);
-      if (isCurrentUserFound) {
-        setReceiverPubKey(isCurrentUserFound.pubkey);
-      } else {
-        setInProgress(true);
-        fetchCurrentUserData();
-      }
-
-      if (!messageServiceInstance) {
-        setNostrkeys(activeUserKeys!);
-      }
-    } else {
-      setInProgress(false);
-    }
-  }, [currentUser]);
-
-  const fetchCommunity = async () => {
-    const community = await getCommunity(communityName, activeUser?.username);
-    setCurrentCommunity(community!);
-  };
-
-  const fetchCurrentUserData = async () => {
-    const nsKey = await getUserChatPublicKey(currentUser);
-    if (nsKey) {
-      setReceiverPubKey(nsKey);
-    } else {
-      setReceiverPubKey("");
-    }
-    setInProgress(false);
-  };
-
   const fetchPrevMessages = () => {
-    if (!hasMore || inProgress) return;
+    if (!hasMore) return;
 
-    setInProgress(true);
-    // todo: make it infinite query
-    messageServiceInstance
-      ?.fetchPrevMessages(currentChannel!.id, messages[0].created)
-      .then((num) => {
-        if (num < 25) {
+    fetchPreviousMessages()
+      .then((events) => {
+        if (events.length < 25) {
           setHasMore(false);
         }
       })
-      .finally(() => {
-        setInProgress(false);
-        setIsTop(false);
-      });
+      .finally(() => setIsTop(false));
   };
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
@@ -303,9 +232,8 @@ export const ChatPopUp = () => {
             handleMessageSvgClick={handleMessageSvgClick}
             handleRefreshSvgClick={handleRefreshSvgClick}
             showSearchUser={showSearchUser}
-            currentCommunity={currentCommunity}
           />
-          {inProgress && <LinearProgress />}
+          {(inProgress || isFetchingMore) && <LinearProgress />}
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
@@ -316,12 +244,7 @@ export const ChatPopUp = () => {
             {hasUserJoinedChat && !revealPrivKey ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
-                  <ChatPopupMessagesList
-                    isCurrentUser={isCurrentUser}
-                    currentUser={currentUser}
-                    isCommunity={isCommunity}
-                    communityName={communityName}
-                  />
+                  <ChatPopupMessagesList username={currentUser ? currentUser : communityName} />
                 ) : showSearchUser ? (
                   <ChatPopupSearchUser setCurrentUser={setCurrentUser} />
                 ) : (
diff --git a/src/common/features/chats/components/chat-profile-box.tsx b/src/common/features/chats/components/chat-profile-box.tsx
index ac052ed8162..d7f1c3520b4 100644
--- a/src/common/features/chats/components/chat-profile-box.tsx
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -3,10 +3,9 @@ import UserAvatar from "../../../components/user-avatar";
 import { dateToFormatted } from "../../../helper/parse-date";
 import { _t } from "../../../i18n";
 import { getAccountFull } from "../../../api/hive";
-import { formattedUserName } from "../utils";
 import { useCommunityCache } from "../../../core";
 
-export interface profileData {
+export interface ProfileData {
   joiningData: string;
   about: string | undefined;
   followers: number | undefined;
@@ -15,27 +14,18 @@ export interface profileData {
 }
 
 interface Props {
-  username?: string;
-  isCommunity?: boolean;
-  isCurrentUser?: boolean;
   communityName?: string;
   currentUser?: string;
 }
 
-export default function ChatsProfileBox({
-  username,
-  isCommunity,
-  isCurrentUser,
-  communityName,
-  currentUser
-}: Props) {
-  const [profileData, setProfileData] = useState<profileData>();
+export default function ChatsProfileBox({ communityName, currentUser }: Props) {
+  const [profileData, setProfileData] = useState<ProfileData>();
 
-  const { data: community } = useCommunityCache(username ? username! : communityName!);
+  const { data: community } = useCommunityCache(communityName!);
 
   useEffect(() => {
     fetchProfileData();
-  }, [username, isCommunity, isCurrentUser, communityName, currentUser]);
+  }, [communityName, currentUser]);
 
   const formatFollowers = (count: number | undefined) => {
     if (count) {
@@ -49,44 +39,23 @@ export default function ChatsProfileBox({
   };
 
   const fetchProfileData = async () => {
-    if (username && username?.length !== 0) {
-      if (username?.startsWith("@")) {
-        const response = await getAccountFull(formattedUserName(username));
-        setProfileData({
-          joiningData: response.created,
-          about: response.profile?.about,
-          followers: response.follow_stats?.follower_count,
-          name: response.name,
-          username: response.name
-        });
-      } else {
-        setProfileData({
-          joiningData: community?.created_at!,
-          about: community?.about,
-          followers: community?.subscribers,
-          name: community?.title!,
-          username: community?.name!
-        });
-      }
-    } else {
-      if (isCurrentUser && currentUser?.length !== 0) {
-        const response = await getAccountFull(currentUser!);
-        setProfileData({
-          joiningData: response.created,
-          about: response.profile?.about,
-          followers: response.follow_stats?.follower_count,
-          name: response.name,
-          username: response.name
-        });
-      } else {
-        setProfileData({
-          joiningData: community?.created_at!,
-          about: community?.about,
-          followers: community?.subscribers,
-          name: community?.title!,
-          username: community?.name!
-        });
-      }
+    if (community) {
+      setProfileData({
+        joiningData: community?.created_at!,
+        about: community?.about,
+        followers: community?.subscribers,
+        name: community?.title!,
+        username: community?.name!
+      });
+    } else if (currentUser) {
+      const response = await getAccountFull(currentUser.replace("@", ""));
+      setProfileData({
+        joiningData: response.created,
+        about: response.profile?.about,
+        followers: response.follow_stats?.follower_count,
+        name: response.name,
+        username: response.name
+      });
     }
   };
 
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 2fe0235d79f..925afe5abbe 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -38,15 +38,7 @@ interface Props {
 
 let zoom: Zoom | null = null;
 export default function ChatsChannelMessages(props: Props) {
-  const {
-    publicMessages,
-    history,
-    from,
-    isScrollToBottom,
-    isScrolled,
-    currentChannel,
-    scrollToBottom
-  } = props;
+  const { publicMessages, isScrollToBottom, isScrolled, currentChannel, scrollToBottom } = props;
   const {
     chat,
     global,
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 6e8c746c758..8ca339fda73 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -24,8 +24,7 @@ export default function ChatsDirectMessages(props: Props) {
   const { directMessages, currentUser, isScrolled, isScrollToBottom, scrollToBottom } = props;
 
   const { global, activeUser, deleteDirectMessage } = useMappedStore();
-  const { activeUserKeys, messageServiceInstance, windowWidth, receiverPubKey } =
-    useContext(ChatContext);
+  const { activeUserKeys, messageServiceInstance, receiverPubKey } = useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
   const [step, setStep] = useState(0);
@@ -82,8 +81,6 @@ export default function ChatsDirectMessages(props: Props) {
           <>
             {directMessages?.map((msg, i) => {
               const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
-              const isSameUser = checkContiguousMessage(msg, i, directMessages);
-
               return (
                 <React.Fragment key={msg.id}>
                   {dayAndMonth && (
@@ -96,7 +93,7 @@ export default function ChatsDirectMessages(props: Props) {
                   <ChatMessageItem
                     type={msg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
                     message={msg}
-                    isSameUser={isSameUser}
+                    isSameUser={checkContiguousMessage(msg, i, directMessages)}
                   />
                 </React.Fragment>
               );
diff --git a/src/common/features/chats/mutations/fetch-previous-messages.ts b/src/common/features/chats/mutations/fetch-previous-messages.ts
new file mode 100644
index 00000000000..cc1621ff52c
--- /dev/null
+++ b/src/common/features/chats/mutations/fetch-previous-messages.ts
@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNostrFetchMutation } from "../nostr";
+import { Event, Kind } from "../../../../lib/nostr-tools/event";
+import { Channel } from "../managers/message-manager-types";
+import { ChatQueries, useMessagesQuery } from "../queries";
+import { convertEvent } from "../nostr/utils/event-converter";
+
+export function useFetchPreviousMessages(channel?: Channel, onSuccess?: (events: Event[]) => void) {
+  const queryClient = useQueryClient();
+
+  const { data: messages } = useMessagesQuery(channel?.communityName);
+  const { mutateAsync: fetchPreviousChannels } = useNostrFetchMutation(
+    ["chats/nostr-fetch-previous-messages"],
+    [
+      {
+        kinds: [Kind.ChannelMessage],
+        "#e": [channel?.name!!],
+        until: messages[0]?.created,
+        limit: 50
+      }
+    ]
+  );
+
+  return useMutation(["chats/fetch-previous-messages"], async () => fetchPreviousChannels(), {
+    onSuccess: (events) => {
+      const previousMessages = events.map((event) => convertEvent<Kind.ChannelMessage>(event));
+      queryClient.setQueryData(
+        [ChatQueries.MESSAGES, channel?.name],
+        [...messages, ...previousMessages]
+      );
+      queryClient.invalidateQueries([ChatQueries.MESSAGES, channel?.name]);
+
+      onSuccess?.(events);
+    }
+  });
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index ea2befcd2de..d10daddfb42 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -7,3 +7,4 @@ export * from "./add-direct-contact";
 export * from "./leave-community-channel";
 export * from "./update-community-channel";
 export * from "./update-channel-moderator";
+export * from "./fetch-previous-messages";

From a9fc9e3922d494c35934b2bccb1bbb771f7be6cc Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 8 Nov 2023 20:16:25 +0600
Subject: [PATCH 118/179] Chats: adding message to list after sending

---
 .../chats/components/chat-message-box.tsx     |  2 +-
 ...x => chat-popup-contacts-and-channels.tsx} | 14 +++----
 .../chats/components/chat-popup/index.tsx     | 37 ++++++-------------
 .../features/chats/components/join-chat.tsx   | 24 +++---------
 .../features/chats/mutations/send-message.ts  | 28 ++++++++++++--
 .../nostr/mutations/send-direct-message.ts    | 12 +++++-
 .../nostr/mutations/send-public-message.ts    |  7 ++--
 .../nostr/queries/direct-messages-query.ts    |  3 +-
 .../features/chats/nostr/queries/index.ts     |  1 +
 .../nostr/queries/public-messages-query.ts    |  3 +-
 .../features/chats/nostr/queries/queries.ts   |  4 ++
 .../features/chats/queries/messages-query.ts  |  4 +-
 src/common/features/chats/queries/queries.ts  |  5 ---
 13 files changed, 74 insertions(+), 70 deletions(-)
 rename src/common/features/chats/components/chat-popup/{chat-popup-direct-messages.tsx => chat-popup-contacts-and-channels.tsx} (88%)
 create mode 100644 src/common/features/chats/nostr/queries/queries.ts

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 046efb8dd7d..fa8d2ddfef4 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -54,7 +54,7 @@ export default function ChatsMessagesBox(props: Props) {
       getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
         (channel) => channel.id === currentChannel?.id
       ),
-    [channels, leftChannelsIds]
+    [channels, currentChannel, leftChannelsIds]
   );
 
   return (
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
similarity index 88%
rename from src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
rename to src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 44fb1673d30..282a74424ba 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-direct-messages.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -12,38 +12,36 @@ import { useLeftCommunityChannelsQuery } from "../../queries/left-community-chan
 interface Props {
   communityClicked: (v: string) => void;
   userClicked: (v: string) => void;
-  setReceiverPubKey: (v: string) => void;
   setShowSearchUser: (v: boolean) => void;
 }
 
-export function ChatPopupDirectMessages({
+export function ChatPopupContactsAndChannels({
   communityClicked,
   userClicked,
-  setReceiverPubKey,
   setShowSearchUser
 }: Props) {
-  const { activeUserKeys, showSpinner } = useContext(ChatContext);
+  const { activeUserKeys, showSpinner, setReceiverPubKey } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: directContactsLastMessages } = useLastMessagesQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
-  const communities = useMemo(
+  const joinedChannels = useMemo(
     () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
     [channels, leftChannelsIds]
   );
 
   return (
     <>
-      {(directContacts?.length !== 0 || (channels?.length !== 0 && communities.length !== 0)) &&
+      {(directContacts?.length !== 0 || (channels?.length !== 0 && joinedChannels.length !== 0)) &&
       !showSpinner &&
       activeUserKeys?.priv ? (
         <>
-          {channels?.length !== 0 && communities.length !== 0 && (
+          {joinedChannels.length !== 0 && (
             <>
               <div className="community-header">{_t("chat.communities")}</div>
-              {communities.map((channel) => (
+              {joinedChannels.map((channel) => (
                 <ChatDirectMessage
                   key={channel.id}
                   username={channel.communityName!!}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 713b33980ae..b29ebac264d 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -19,17 +19,16 @@ import { classNameObject } from "../../../../helper/class-name-object";
 import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
-import { ChatPopupDirectMessages } from "./chat-popup-direct-messages";
+import { ChatPopupContactsAndChannels } from "./chat-popup-contacts-and-channels";
 import { setNostrkeys } from "../../managers/message-manager";
 import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
-import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
 
   const {
-    messageServiceInstance,
+    receiverPubKey,
     revealPrivKey,
     activeUserKeys,
     hasUserJoinedChat,
@@ -38,14 +37,13 @@ export const ChatPopUp = () => {
   } = useContext(ChatContext);
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
 
-  const { data: directContacts } = useDirectContactsQuery();
-  const { data: channels } = useChannelsQuery();
-  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+  const { data: directContacts, isLoading: isDirectContactsLoading } = useDirectContactsQuery();
   const directContact = useMemo(
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
-    [directContacts]
+    [directContacts, receiverPubKey]
   );
   const { data: messages } = useMessagesQuery(directContact?.name);
+  const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
@@ -56,9 +54,7 @@ export const ChatPopUp = () => {
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
-  const [inProgress, setInProgress] = useState(false);
   const [show, setShow] = useState(false);
-  const [receiverPubKey, setReceiverPubKey] = useState("");
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
   const [isTop, setIsTop] = useState(false);
@@ -88,14 +84,6 @@ export const ChatPopUp = () => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   }, [routerLocation, activeUser]);
 
-  // todo: ??
-  useEffect(() => {
-    if (currentChannel && leftCommunityChannelsIds?.includes(currentChannel.id)) {
-      setIsCommunity(false);
-      setCommunityName("");
-    }
-  }, [leftCommunityChannelsIds]);
-
   // Fetching previous messages when scrol achieved top
   useEffect(() => {
     if (isTop) {
@@ -186,11 +174,6 @@ export const ChatPopUp = () => {
     }
   };
 
-  const communityClicked = (community: string) => {
-    setIsCommunity(true);
-    setCommunityName(community);
-  };
-
   const handleBackArrowSvg = () => {
     setCurrentUser("");
     setCommunityName("");
@@ -233,7 +216,7 @@ export const ChatPopUp = () => {
             handleRefreshSvgClick={handleRefreshSvgClick}
             showSearchUser={showSearchUser}
           />
-          {(inProgress || isFetchingMore) && <LinearProgress />}
+          {(isJoinChatLoading || isChannelsLoading || isFetchingMore) && <LinearProgress />}
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
@@ -248,9 +231,11 @@ export const ChatPopUp = () => {
                 ) : showSearchUser ? (
                   <ChatPopupSearchUser setCurrentUser={setCurrentUser} />
                 ) : (
-                  <ChatPopupDirectMessages
-                    communityClicked={communityClicked}
-                    setReceiverPubKey={setReceiverPubKey}
+                  <ChatPopupContactsAndChannels
+                    communityClicked={(community: string) => {
+                      setIsCommunity(true);
+                      setCommunityName(community);
+                    }}
                     setShowSearchUser={setShowSearchUser}
                     userClicked={(username) => setCurrentUser(username)}
                   />
diff --git a/src/common/features/chats/components/join-chat.tsx b/src/common/features/chats/components/join-chat.tsx
index 182665021a0..5f075e6d127 100644
--- a/src/common/features/chats/components/join-chat.tsx
+++ b/src/common/features/chats/components/join-chat.tsx
@@ -1,31 +1,19 @@
-import React, { useContext, useEffect, useState } from "react";
-import { ChatContext } from "../chat-context-provider";
+import React from "react";
 import { Button } from "@ui/button";
 import { Spinner } from "@ui/spinner";
 import { _t } from "../../../i18n";
-import { useJoinChat } from "../mutations/join-chat";
+import { useJoinChat } from "../mutations";
 
 export default function JoinChat() {
-  const { messageServiceInstance } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
-
-  const [showSpinner, setShowSpinner] = useState(false);
-
-  useEffect(() => {
-    if (messageServiceInstance) {
-      setShowSpinner(false);
-    }
-  }, [messageServiceInstance]);
+  const { mutateAsync: joinChat, isLoading } = useJoinChat();
 
   return (
     <div className="no-chat text-center">
       <p>{_t("chat.you-haven-t-joined")}</p>
       <Button
-        onClick={() => {
-          setShowSpinner(true);
-          joinChat();
-        }}
-        icon={showSpinner ? <Spinner /> : <></>}
+        onClick={() => joinChat()}
+        disabled={isLoading}
+        icon={isLoading ? <Spinner /> : <></>}
         iconPlacement="left"
       >
         {_t("chat.join-chat")}
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 6d884a53f58..86573a92296 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { UPLOADING } from "../components/chat-popup/chat-constants";
 import { useContext } from "react";
 import { ChatContext } from "../chat-context-provider";
@@ -6,18 +6,27 @@ import { Channel } from "../managers/message-manager-types";
 import isCommunity from "../../../helper/is-community";
 import { useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
 import { useAddDirectContact } from "./add-direct-contact";
+import { ChatQueries, useMessagesQuery } from "../queries";
 
 export function useSendMessage(
   currentChannel?: Channel,
   currentUser?: string,
   onSuccess?: () => void
 ) {
+  const queryClient = useQueryClient();
+
   const { activeUserKeys, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
+
   const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
     activeUserKeys.priv,
-    receiverPubKey
+    receiverPubKey,
+    undefined
+  );
+  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(
+    currentChannel?.id,
+    undefined
   );
-  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(currentChannel?.id);
   const { mutateAsync: addDirectContact } = useAddDirectContact();
 
   return useMutation(
@@ -50,7 +59,18 @@ export function useSendMessage(
       }
     },
     {
-      onSuccess: () => onSuccess?.()
+      onSuccess: (message) => {
+        queryClient.setQueryData(
+          [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
+          [...messages, message]
+        );
+        queryClient.invalidateQueries([
+          ChatQueries.MESSAGES,
+          currentChannel?.communityName ?? currentUser
+        ]);
+
+        onSuccess?.();
+      }
     }
   );
 }
diff --git a/src/common/features/chats/nostr/mutations/send-direct-message.ts b/src/common/features/chats/nostr/mutations/send-direct-message.ts
index 5b1457b4afa..139dd3dc201 100644
--- a/src/common/features/chats/nostr/mutations/send-direct-message.ts
+++ b/src/common/features/chats/nostr/mutations/send-direct-message.ts
@@ -3,12 +3,17 @@ import { Kind } from "../../../../../lib/nostr-tools/event";
 import { useMutation } from "@tanstack/react-query";
 import { encrypt } from "../../../../../lib/nostr-tools/nip04";
 import { useFindHealthyRelayQuery } from "./find-healthy-relay";
+import { convertEvent } from "../utils/event-converter";
+import { useContext } from "react";
+import { ChatContext } from "../../chat-context-provider";
 
 export function useNostrSendDirectMessage(
   ownerPrivateKey: string,
   destinationPublicKey: string,
   parent?: string
 ) {
+  const { activeUserKeys } = useContext(ChatContext);
+
   const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
     ["chats/nostr-publish-encrypted-message"],
     Kind.EncryptedDirectMessage,
@@ -26,9 +31,14 @@ export function useNostrSendDirectMessage(
         tags.push(["e", parent, relay, "root"]);
       }
     }
-    return publishEncryptedMessage({
+    const event = await publishEncryptedMessage({
       tags,
       eventMetadata: encryptedMessage
     });
+    return convertEvent<Kind.EncryptedDirectMessage>(
+      event,
+      activeUserKeys.pub,
+      activeUserKeys.priv
+    )!!;
   });
 }
diff --git a/src/common/features/chats/nostr/mutations/send-public-message.ts b/src/common/features/chats/nostr/mutations/send-public-message.ts
index 656bce36603..1fdacbcb103 100644
--- a/src/common/features/chats/nostr/mutations/send-public-message.ts
+++ b/src/common/features/chats/nostr/mutations/send-public-message.ts
@@ -2,6 +2,7 @@ import { useNostrPublishMutation } from "../core";
 import { Kind } from "../../../../../lib/nostr-tools/event";
 import { useMutation } from "@tanstack/react-query";
 import { useFindHealthyRelayQuery } from "./find-healthy-relay";
+import { convertEvent } from "../utils/event-converter";
 
 interface Payload {
   message: string;
@@ -20,8 +21,7 @@ export function useNostrSendPublicMessage(channelId?: string, parent?: string) {
     const root = parent || channelId;
 
     if (!root) {
-      console.error("[Chat][Nostr] – trying to send public message to not existing channel");
-      return;
+      throw new Error("[Chat][Nostr] – trying to send public message to not existing channel");
     }
 
     const relay = await findHealthyRelay(root);
@@ -35,9 +35,10 @@ export function useNostrSendPublicMessage(channelId?: string, parent?: string) {
       mentions.forEach((m) => tags.push(["p", m]));
     }
 
-    return publishChannelMessage({
+    const event = await publishChannelMessage({
       tags,
       eventMetadata: message
     });
+    return convertEvent<Kind.ChannelMessage>(event)!!;
   });
 }
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
index ac108e2946b..2bbfffc010b 100644
--- a/src/common/features/chats/nostr/queries/direct-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/direct-messages-query.ts
@@ -3,6 +3,7 @@ import { DirectContact, Message } from "../../managers/message-manager-types";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
 import { Kind } from "../../../../../lib/nostr-tools/event";
 import { convertEvent } from "../utils/event-converter";
+import { NostrQueries } from "./queries";
 
 export function useDirectMessagesQuery(
   directContacts: DirectContact[],
@@ -10,7 +11,7 @@ export function useDirectMessagesQuery(
   privateKey: string
 ) {
   return useNostrFetchQuery<Message[]>(
-    ["chats/encrypted-direct-messages"],
+    [NostrQueries.DIRECT_MESSAGES],
     directContacts.reduce<Filter[]>(
       (acc, contact) => [
         ...acc,
diff --git a/src/common/features/chats/nostr/queries/index.ts b/src/common/features/chats/nostr/queries/index.ts
index 0a1de9d901b..064d39a50be 100644
--- a/src/common/features/chats/nostr/queries/index.ts
+++ b/src/common/features/chats/nostr/queries/index.ts
@@ -1,2 +1,3 @@
 export * from "./direct-messages-query";
 export * from "./public-messages-query";
+export * from "./queries";
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
index 4d8b0e5b5fd..4d378ebe8f2 100644
--- a/src/common/features/chats/nostr/queries/public-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/public-messages-query.ts
@@ -3,10 +3,11 @@ import { Channel, Message } from "../../managers/message-manager-types";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
 import { Kind } from "../../../../../lib/nostr-tools/event";
 import { convertEvent } from "../utils/event-converter";
+import { NostrQueries } from "./queries";
 
 export function usePublicMessagesQuery(channels: Channel[]) {
   return useNostrFetchQuery<Message[]>(
-    ["chats/nostr-public-messages"],
+    [NostrQueries.PUBLIC_MESSAGES],
     channels.reduce<Filter[]>(
       (acc, channel) => [
         ...acc,
diff --git a/src/common/features/chats/nostr/queries/queries.ts b/src/common/features/chats/nostr/queries/queries.ts
new file mode 100644
index 00000000000..8fecc4c67d2
--- /dev/null
+++ b/src/common/features/chats/nostr/queries/queries.ts
@@ -0,0 +1,4 @@
+export enum NostrQueries {
+  DIRECT_MESSAGES = "chats/nostr-encrypted-direct-messages",
+  PUBLIC_MESSAGES = "chats/nostr-public-messages"
+}
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 49243a4b85d..c688e190949 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useContext, useMemo } from "react";
 import { ChatContext } from "../chat-context-provider";
@@ -6,9 +6,9 @@ import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries
 import { ChatQueries } from "./queries";
 import { Message } from "../managers/message-manager-types";
 import { useChannelsQuery } from "./channels-query";
+import { queryClient } from "../../../core";
 
 export function useMessagesQuery(username?: string) {
-  const queryClient = useQueryClient();
   const { activeUserKeys } = useContext(ChatContext);
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index e59f43385e9..ff87e744088 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -5,11 +5,6 @@ export enum ChatQueries {
   DIRECT_CONTACTS = "chats/direct-contacts",
   LAST_MESSAGES = "chats/last-messages",
   MESSAGES = "chats/messages",
-  BEFORE_DIRECT_MESSAGES_TEMP = "chats/before-direct-messages-temp",
-  AFTER_DIRECT_MESSAGES_TEMP = "chats/after-direct-messages-temp",
-  BEFORE_PUBLIC_MESSAGES_TEMP = "chats/before-public-messages-temp",
-  AFTER_PUBLIC_MESSAGES_TEMP = "chats/after-public-messages-temp",
-  PREVIOUS_PUBLIC_MESSAGES = "chats/previous-public-messages",
   PROFILES = "chats/profiles",
   CHANNELS = "chats/channels",
   LEFT_CHANNELS = "chats/left-channels",

From ee17973669cca51560c49b932a5613f2df5cdec3 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 8 Nov 2023 21:17:27 +0600
Subject: [PATCH 119/179] Chats: adding profile fetching in channel message

---
 .../chat-message-channel-item-extension.tsx   | 118 +++++++++++++++
 .../chats/components/chat-message-item.tsx    |  12 +-
 .../chats-channel-messages/index.tsx          | 139 +-----------------
 src/common/features/chats/mutations/index.ts  |   1 +
 .../mutations/update-channel-blocked-users.ts |  23 +++
 .../nostr/queries/get-user-profile-query.ts   |  17 +++
 .../features/chats/nostr/queries/index.ts     |   1 +
 .../chats/nostr/utils/event-converter.ts      |  16 +-
 8 files changed, 188 insertions(+), 139 deletions(-)
 create mode 100644 src/common/features/chats/components/chat-message-channel-item-extension.tsx
 create mode 100644 src/common/features/chats/mutations/update-channel-blocked-users.ts
 create mode 100644 src/common/features/chats/nostr/queries/get-user-profile-query.ts

diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
new file mode 100644
index 00000000000..ecb8d4f4164
--- /dev/null
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -0,0 +1,118 @@
+import { Popover, PopoverContent } from "@ui/popover";
+import React, { PropsWithChildren, RefObject, useMemo, useRef } from "react";
+import FollowControls from "../../../components/follow-controls";
+import { Button } from "@ui/button";
+import { _t } from "../../../i18n";
+import ChatInput from "./chat-input";
+import { Channel } from "../managers/message-manager-types";
+import UserAvatar from "../../../components/user-avatar";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { COMMUNITYADMINROLES, PRIVILEGEDROLES } from "./chat-popup/chat-constants";
+import { useUpdateChannelBlockedUsers } from "../mutations";
+import { useNostrGetUserProfileQuery } from "../nostr/queries";
+
+interface Props {
+  currentChannel: Channel;
+  creator: string;
+}
+
+export function ChatMessageChannelItemExtension({
+  currentChannel,
+  children,
+  creator
+}: PropsWithChildren<Props>) {
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+
+  const { activeUser, setActiveUser, updateActiveUser, deleteUser, toggleUIProp, ui, users } =
+    useMappedStore();
+
+  const { data: nostrUserProfiles } = useNostrGetUserProfileQuery(creator);
+
+  const profile = useMemo(
+    () => nostrUserProfiles?.find((p) => p.creator === creator),
+    [creator, nostrUserProfiles]
+  );
+  const communityAdmins = useMemo(
+    () =>
+      currentChannel?.communityModerators
+        ?.filter((user) => COMMUNITYADMINROLES.includes(user.role))
+        .map((user) => user.name) ?? [],
+    [currentChannel]
+  );
+  const privilegedUsers = useMemo(
+    () =>
+      currentChannel?.communityModerators
+        ?.filter((user) => PRIVILEGEDROLES.includes(user.role))
+        .map((user) => user.name) ?? [],
+    [currentChannel]
+  );
+
+  const { mutateAsync: updateBlockedUsers } = useUpdateChannelBlockedUsers(currentChannel);
+
+  const block = (removedUserId: string) =>
+    updateBlockedUsers([...(currentChannel.removedUserIds ?? []), removedUserId]);
+
+  const unBlock = (removedUserId: string) =>
+    updateBlockedUsers(
+      currentChannel.removedUserIds?.filter((item) => item !== removedUserId) ?? []
+    );
+
+  return (
+    <Popover id={`profile-popover`} className="profile-popover">
+      <UserAvatar username={profile?.name ?? ""} />
+      {children}
+      <PopoverContent>
+        <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
+          <div className="profile-box-content">
+            <div className="profile-box-logo flex justify-center">
+              <UserAvatar username={profile?.name ?? ""} size="large" />
+            </div>
+
+            <p className="flex justify-center profile-name">{`@${profile?.name}`}</p>
+            <div
+              className={`flex mb-3 ${
+                communityAdmins.includes(activeUser?.username!) &&
+                profile?.name !== currentChannel.communityName
+                  ? "justify-between"
+                  : "justify-center"
+              }  profile-box-buttons`}
+            >
+              <FollowControls
+                setActiveUser={setActiveUser}
+                updateActiveUser={updateActiveUser}
+                deleteUser={deleteUser}
+                toggleUIProp={toggleUIProp}
+                activeUser={activeUser}
+                targetUsername={profile?.name ?? ""}
+                where={"chat-box"}
+                ui={ui}
+                users={users}
+              />
+
+              {communityAdmins.includes(activeUser?.username!) &&
+                profile?.name !== currentChannel.communityName && (
+                  <>
+                    {currentChannel?.removedUserIds?.includes(profile?.creator ?? "") ? (
+                      <>
+                        <Button onClick={() => unBlock(profile?.creator ?? "")}>
+                          {_t("chat.unblock")}
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Button onClick={() => block(profile?.creator ?? "")}>
+                          {_t("chat.block")}
+                        </Button>
+                      </>
+                    )}
+                  </>
+                )}
+            </div>
+
+            <ChatInput currentChannel={currentChannel} currentUser="" />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 2011d1a5bb6..2b49988b70c 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,4 +1,4 @@
-import { Message } from "../managers/message-manager-types";
+import { Channel, Message } from "../managers/message-manager-types";
 import Tooltip from "../../../components/tooltip";
 import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
 import { formatMessageTime, isMessageGif, isMessageImage } from "../utils";
@@ -8,14 +8,16 @@ import { classNameObject } from "../../../helper/class-name-object";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
+import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
 
 interface Props {
   type: "sender" | "receiver";
   message: Message;
   isSameUser: boolean;
+  currentChannel?: Channel;
 }
 
-export function ChatMessageItem({ type, message, isSameUser }: Props) {
+export function ChatMessageItem({ type, message, isSameUser, currentChannel }: Props) {
   const { global } = useMappedStore();
 
   const isFailed = useMemo(() => message.sent === 2, [message]);
@@ -63,6 +65,12 @@ export function ChatMessageItem({ type, message, isSameUser }: Props) {
             "same-user-message": isSameUser
           })}
         >
+          {currentChannel && (
+            <ChatMessageChannelItemExtension
+              creator={message.creator}
+              currentChannel={currentChannel}
+            />
+          )}
           <div
             className="sender-message-content"
             dangerouslySetInnerHTML={{ __html: renderedPreview }}
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 925afe5abbe..b9b31b9ba02 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -1,29 +1,18 @@
-import React, { RefObject, useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import mediumZoom, { Zoom } from "medium-zoom";
-import {
-  Channel,
-  CommunityModerator,
-  Profile,
-  PublicMessage
-} from "../../managers/message-manager-types";
+import { Channel, PublicMessage } from "../../managers/message-manager-types";
 import { History } from "history";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import UserAvatar from "../../../../components/user-avatar";
-import FollowControls from "../../../../components/follow-controls";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../../i18n";
 import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { error } from "../../../../components/feedback";
-import { COMMUNITYADMINROLES, PRIVILEGEDROLES } from "../chat-popup/chat-constants";
 import { Theme } from "../../../../store/global/types";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
-import { Popover, PopoverContent } from "@ui/popover";
-import { Button } from "@ui/button";
 import { ChatMessageItem } from "../chat-message-item";
-import ChatInput from "../chat-input";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -57,14 +46,11 @@ export default function ChatsChannelMessages(props: Props) {
 
   let prevGlobal = usePrevious(global);
 
-  const popoverRef = useRef<HTMLDivElement | null>(null);
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
-  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [step, setStep] = useState(0);
   const [clickedMessage, setClickedMessage] = useState("");
   const [removedUserId, setRemovedUserID] = useState("");
-  const [privilegedUsers, setPrivilegedUsers] = useState<string[]>([]);
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
@@ -87,41 +73,9 @@ export default function ChatsChannelMessages(props: Props) {
   useEffect(() => {
     if (currentChannel) {
       zoomInitializer();
-      getPrivilegedUsers(currentChannel?.communityModerators!);
     }
   }, [currentChannel]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const clickedElement = event.target as HTMLElement;
-
-      if (!popoverRef.current) {
-        return;
-      }
-
-      const isAvatarClicked =
-        clickedElement.classList.contains("user-avatar") &&
-        clickedElement.classList.contains("medium");
-      if (
-        popoverRef.current &&
-        !popoverRef.current?.contains(event.target as Node) &&
-        !isAvatarClicked
-      ) {
-        setClickedMessage("");
-      }
-    };
-
-    if (channelMessagesRef.current) {
-      channelMessagesRef.current.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      if (channelMessagesRef.current) {
-        channelMessagesRef.current.removeEventListener("mousedown", handleClickOutside);
-      }
-    };
-  }, [clickedMessage]);
-
   const zoomInitializer = () => {
     const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
     zoom = mediumZoom(elements);
@@ -136,26 +90,6 @@ export default function ChatsChannelMessages(props: Props) {
     }
   };
 
-  const getPrivilegedUsers = (communityModerators: CommunityModerator[]) => {
-    const privilegedUsers = communityModerators.filter((user) =>
-      PRIVILEGEDROLES.includes(user.role)
-    );
-    const communityAdmins = communityModerators.filter((user) =>
-      COMMUNITYADMINROLES.includes(user.role)
-    );
-
-    const privilegedUserNames = privilegedUsers.map((user) => user.name);
-    const communityAdminNames = communityAdmins.map((user) => user.name);
-
-    setPrivilegedUsers(privilegedUserNames);
-    setCommunityAdmins(communityAdminNames);
-  };
-
-  const getProfileName = (creator: string, profiles: Profile[]) => {
-    const profile = profiles.find((x) => x.creator === creator);
-    return profile?.name;
-  };
-
   const handleConfirm = () => {
     let updatedMetaData = {
       name: currentChannel?.name!,
@@ -227,74 +161,6 @@ export default function ChatsChannelMessages(props: Props) {
             const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
 
             const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
-            const name = getProfileName(pMsg.creator, chat.profiles);
-
-            const popover = (
-              <Popover id={`profile-popover`} className="profile-popover">
-                <PopoverContent>
-                  <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
-                    <div className="profile-box-content">
-                      <div className="profile-box-logo flex justify-center">
-                        <UserAvatar username={name!} size="large" />
-                      </div>
-
-                      <p className="flex justify-center profile-name">{`@${name!}`}</p>
-                      <div
-                        className={`flex mb-3 ${
-                          communityAdmins.includes(activeUser?.username!) &&
-                          name !== currentChannel.communityName
-                            ? "justify-between"
-                            : "justify-center"
-                        }  profile-box-buttons`}
-                      >
-                        <FollowControls
-                          setActiveUser={setActiveUser}
-                          updateActiveUser={updateActiveUser}
-                          deleteUser={deleteUser}
-                          toggleUIProp={toggleUIProp}
-                          activeUser={activeUser}
-                          targetUsername={name!}
-                          where={"chat-box"}
-                          ui={ui}
-                          users={users}
-                        />
-
-                        {communityAdmins.includes(activeUser?.username!) &&
-                          name !== currentChannel.communityName && (
-                            <>
-                              {currentChannel?.removedUserIds?.includes(pMsg.creator) ? (
-                                <>
-                                  <Button
-                                    onClick={() => {
-                                      setStep(3);
-                                      setClickedMessage("");
-                                    }}
-                                  >
-                                    {_t("chat.unblock")}
-                                  </Button>
-                                </>
-                              ) : (
-                                <>
-                                  <Button
-                                    onClick={() => {
-                                      setStep(2);
-                                      setClickedMessage("");
-                                    }}
-                                  >
-                                    {_t("chat.block")}
-                                  </Button>
-                                </>
-                              )}
-                            </>
-                          )}
-                      </div>
-
-                      <ChatInput currentChannel={currentChannel} currentUser="" />
-                    </div>
-                  </div>
-                </PopoverContent>
-              </Popover>
-            );
 
             return (
               <React.Fragment key={pMsg.id}>
@@ -307,6 +173,7 @@ export default function ChatsChannelMessages(props: Props) {
                 )}
 
                 <ChatMessageItem
+                  currentChannel={currentChannel}
                   type={pMsg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
                   message={pMsg}
                   isSameUser={isSameUserMessage}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index d10daddfb42..3da1015edb7 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -8,3 +8,4 @@ export * from "./leave-community-channel";
 export * from "./update-community-channel";
 export * from "./update-channel-moderator";
 export * from "./fetch-previous-messages";
+export * from "./update-channel-blocked-users";
diff --git a/src/common/features/chats/mutations/update-channel-blocked-users.ts b/src/common/features/chats/mutations/update-channel-blocked-users.ts
new file mode 100644
index 00000000000..644a5449c5c
--- /dev/null
+++ b/src/common/features/chats/mutations/update-channel-blocked-users.ts
@@ -0,0 +1,23 @@
+import { useUpdateCommunityChannel } from "./update-community-channel";
+import { useMutation } from "@tanstack/react-query";
+import { Channel } from "../managers/message-manager-types";
+
+export function useUpdateChannelBlockedUsers(channel: Channel) {
+  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
+
+  return useMutation(
+    ["chats/update-channel-blocked-users", channel?.communityName],
+    async (users: string[]) => {
+      if (!channel) {
+        console.error("[Chat][Nostr] – trying to update not existing channel");
+        return;
+      }
+
+      const newUpdatedChannel: Channel = { ...channel };
+
+      newUpdatedChannel.removedUserIds = users;
+
+      return updateChannel(newUpdatedChannel);
+    }
+  );
+}
diff --git a/src/common/features/chats/nostr/queries/get-user-profile-query.ts b/src/common/features/chats/nostr/queries/get-user-profile-query.ts
new file mode 100644
index 00000000000..70c2fa931da
--- /dev/null
+++ b/src/common/features/chats/nostr/queries/get-user-profile-query.ts
@@ -0,0 +1,17 @@
+import { useNostrFetchQuery } from "../core";
+import { Kind } from "../../../../../lib/nostr-tools/event";
+import { convertEvent } from "../utils/event-converter";
+
+export function useNostrGetUserProfileQuery(user: string) {
+  return useNostrFetchQuery(
+    ["chats/nostr-get-user-profile", user],
+    [
+      {
+        kinds: [Kind.Metadata],
+        authors: [user]
+      }
+    ],
+    (events) =>
+      events.map((event) => convertEvent<Kind.Metadata>(event)!!).filter((profile) => profile!!)
+  );
+}
diff --git a/src/common/features/chats/nostr/queries/index.ts b/src/common/features/chats/nostr/queries/index.ts
index 064d39a50be..958dfc95a67 100644
--- a/src/common/features/chats/nostr/queries/index.ts
+++ b/src/common/features/chats/nostr/queries/index.ts
@@ -1,3 +1,4 @@
 export * from "./direct-messages-query";
 export * from "./public-messages-query";
+export * from "./get-user-profile-query";
 export * from "./queries";
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
index 6984b1eb36c..3090f041014 100644
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -1,5 +1,5 @@
 import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import { Channel, Message } from "../../managers/message-manager-types";
+import { Channel, Message, Profile } from "../../managers/message-manager-types";
 import { findTagValue } from "./find-tag-value";
 import { filterTagValue } from "./filter-tag-value";
 import { decrypt } from "../../../../../lib/nostr-tools/nip04";
@@ -8,6 +8,7 @@ export interface EventConverterResult {
   [Kind.ChannelCreation]: Channel;
   [Kind.EncryptedDirectMessage]: Promise<Message>;
   [Kind.ChannelMessage]: Message;
+  [Kind.Metadata]: Profile;
   30078: string[];
 }
 
@@ -86,6 +87,19 @@ export function convertEvent<KIND extends keyof EventConverterResult>(
             sent: 1
           }
         : (null as any);
+    case Kind.Metadata:
+      if (!content) {
+        return null;
+      }
+
+      return {
+        id: event.id,
+        creator: event.pubkey,
+        created: event.created_at,
+        name: content.name || "",
+        about: content.about || "",
+        picture: content.picture || ""
+      } as any;
     case "30078":
       return content;
     default:

From f22bd2eaf97987d7c08170a9d6a8afa5a945a465 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 8 Nov 2023 21:53:46 +0600
Subject: [PATCH 120/179] Chats: code cleanup

---
 .../features/chats/chat-context-provider.tsx  | 34 +----------------
 .../chats/components/chat-message-item.tsx    |  1 +
 .../chat-popup-contacts-and-channels.tsx      |  8 ++--
 .../chat-popup/chat-popup-header.tsx          | 10 +++--
 .../chats/components/chat-popup/index.tsx     | 23 ++++-------
 .../chats-channel-messages/index.tsx          | 25 ++++--------
 .../chats-community-actions/index.tsx         | 34 ++++++++---------
 .../chats-direct-messages/index.tsx           | 38 ++++---------------
 .../chats-sidebar/chat-sidebar-header.tsx     |  6 +--
 .../chats/components/import-chats/index.tsx   | 15 ++++----
 .../components/join-community-chat-btn.tsx    |  6 ++-
 .../chats/managers/message-manager.tsx        | 23 +----------
 .../features/chats/mutations/join-chat.ts     | 19 +++++++++-
 .../features/chats/mutations/send-message.ts  |  6 ++-
 .../chats/nostr/core/nostr-fetch-mutation.ts  |  6 +--
 .../chats/nostr/core/nostr-fetch-query.tsx    |  9 +++--
 .../nostr/core/nostr-publish-mutation.ts      |  8 ++--
 .../nostr/mutations/send-direct-message.ts    | 17 +++++----
 .../chats/queries/last-messages-query.ts      | 10 ++---
 .../features/chats/queries/messages-query.ts  | 10 ++---
 .../nostr-joined-community-team-query.ts      | 10 +----
 src/common/features/chats/screens/chats.tsx   | 10 ++---
 22 files changed, 123 insertions(+), 205 deletions(-)

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 6dbeb0e261d..4a2b9b55515 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { Channel, Keys } from "./managers/message-manager-types";
 import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
-import { useMappedStore } from "../../store/use-mapped-store";
 import { NostrKeysType } from "./types";
 import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
@@ -10,7 +9,6 @@ import { useJoinChat } from "./mutations";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 
 interface Context {
-  activeUserKeys: NostrKeysType;
   showSpinner: boolean;
   revealPrivKey: boolean;
   chatPrivKey: string;
@@ -24,7 +22,6 @@ interface Context {
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
-  setActiveUserKeys: (keys: NostrKeysType) => void;
   setReceiverPubKey: (key: string) => void;
   setMessageServiceInstance: (instance: MessageService | null) => void;
   initMessageServiceInstance: (keys: Keys) => MessageService | null;
@@ -35,7 +32,6 @@ interface Props {
 }
 
 export const ChatContext = React.createContext<Context>({
-  activeUserKeys: { pub: " ", priv: "" },
   showSpinner: false,
   revealPrivKey: false,
   chatPrivKey: "",
@@ -49,15 +45,13 @@ export const ChatContext = React.createContext<Context>({
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
   setChatPrivKey: () => {},
-  setActiveUserKeys: () => {},
   setReceiverPubKey: () => {},
   setMessageServiceInstance: () => {},
   initMessageServiceInstance: () => (({} as MessageService) || null)
 });
 
 export const ChatContextProvider = (props: Props) => {
-  const { activeUser, chat, resetChat } = useMappedStore();
-
+  // TODO: USE QUERY INTEAD
   const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: "", priv: "" });
   const [showSpinner, setShowSpinner] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
@@ -65,16 +59,14 @@ export const ChatContextProvider = (props: Props) => {
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | null>(null);
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
-  const [shouldUpdateProfile, setShouldUpdateProfile] = useState(false);
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
   const [windowWidth, setWindowWidth] = useState(0);
   const [isActiveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
-  const { privateKey, publicKey, refetch } = useKeysQuery(activeUserKeys, setActiveUserKeys);
+  const { privateKey, publicKey, refetch } = useKeysQuery();
 
   useJoinChat(() => {
     setHasUserJoinedChat(true);
-    setShouldUpdateProfile(true);
   });
 
   useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
@@ -111,26 +103,6 @@ export const ChatContextProvider = (props: Props) => {
     };
   }, []);
 
-  useEffect(() => {
-    refetch();
-    if (
-      messageServiceInstance &&
-      chat.profiles.some((profile) => profile.name === activeUser?.username)
-    ) {
-      setShouldUpdateProfile(false);
-    }
-  }, [messageServiceInstance, chat.profiles]);
-
-  useEffect(() => {
-    if (shouldUpdateProfile && messageServiceInstance) {
-      messageServiceInstance.updateProfile({
-        name: activeUser?.username!,
-        about: "",
-        picture: ""
-      });
-    }
-  }, [shouldUpdateProfile, messageServiceInstance]);
-
   const initMessageServiceInstance = (keys: Keys) => {
     if (messageServiceInstance) {
       messageServiceInstance.close();
@@ -149,7 +121,6 @@ export const ChatContextProvider = (props: Props) => {
     <NostrListenerQueriesProvider>
       <ChatContext.Provider
         value={{
-          activeUserKeys,
           showSpinner,
           revealPrivKey,
           receiverPubKey,
@@ -163,7 +134,6 @@ export const ChatContextProvider = (props: Props) => {
           setRevealPrivKey,
           setShowSpinner,
           setChatPrivKey,
-          setActiveUserKeys,
           setReceiverPubKey,
           setMessageServiceInstance,
           initMessageServiceInstance
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 2b49988b70c..a0c49b1545a 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -17,6 +17,7 @@ interface Props {
   currentChannel?: Channel;
 }
 
+// TODO: Add resend
 export function ChatMessageItem({ type, message, isSameUser, currentChannel }: Props) {
   const { global } = useMappedStore();
 
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 282a74424ba..d014a0fc7c4 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -8,6 +8,7 @@ import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectMessage } from "./chat-direct-message";
 import { useChannelsQuery, useDirectContactsQuery, useLastMessagesQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
+import { useKeysQuery } from "../../queries/keys-query";
 
 interface Props {
   communityClicked: (v: string) => void;
@@ -20,8 +21,9 @@ export function ChatPopupContactsAndChannels({
   userClicked,
   setShowSearchUser
 }: Props) {
-  const { activeUserKeys, showSpinner, setReceiverPubKey } = useContext(ChatContext);
+  const { showSpinner, setReceiverPubKey } = useContext(ChatContext);
 
+  const { privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: directContactsLastMessages } = useLastMessagesQuery();
   const { data: channels } = useChannelsQuery();
@@ -36,7 +38,7 @@ export function ChatPopupContactsAndChannels({
     <>
       {(directContacts?.length !== 0 || (channels?.length !== 0 && joinedChannels.length !== 0)) &&
       !showSpinner &&
-      activeUserKeys?.priv ? (
+      privateKey ? (
         <>
           {joinedChannels.length !== 0 && (
             <>
@@ -64,7 +66,7 @@ export function ChatPopupContactsAndChannels({
             />
           ))}
         </>
-      ) : !activeUserKeys?.priv ? (
+      ) : !privateKey ? (
         <ImportChats />
       ) : showSpinner ? (
         <div className="no-chat">
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index a89fe706dd7..422a0e55356 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -15,6 +15,7 @@ import { classNameObject } from "../../../../helper/class-name-object";
 import React, { useContext } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { ChatContext } from "../../chat-context-provider";
+import { useKeysQuery } from "../../queries/keys-query";
 
 interface Props {
   currentUser: string;
@@ -45,8 +46,9 @@ export function ChatPopupHeader({
   handleExtendedView,
   setExpanded
 }: Props) {
-  const { revealPrivKey, activeUserKeys, hasUserJoinedChat, setRevealPrivKey } =
-    useContext(ChatContext);
+  const { revealPrivKey, hasUserJoinedChat, setRevealPrivKey } = useContext(ChatContext);
+
+  const { privateKey } = useKeysQuery();
 
   return (
     <div className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2">
@@ -101,7 +103,7 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        {hasUserJoinedChat && activeUserKeys?.priv && !revealPrivKey && (
+        {hasUserJoinedChat && privateKey && !revealPrivKey && (
           <Tooltip content={_t("chat.refresh")}>
             <Button
               noPadding={true}
@@ -117,7 +119,7 @@ export function ChatPopupHeader({
             <ChatsCommunityDropdownMenu history={history!} username={communityName} />
           </div>
         )}
-        {!isCommunity && !isCurrentUser && activeUserKeys?.priv && (
+        {!isCommunity && !isCurrentUser && privateKey && (
           <div className="simple-menu" onClick={() => setExpanded(true)}>
             <ChatsDropdownMenu
               history={history!}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index b29ebac264d..d0253a217d3 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -20,23 +20,18 @@ import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupContactsAndChannels } from "./chat-popup-contacts-and-channels";
-import { setNostrkeys } from "../../managers/message-manager";
 import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
 import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
+import { useKeysQuery } from "../../queries/keys-query";
 
 export const ChatPopUp = () => {
   const { activeUser, global, chat, resetChat } = useMappedStore();
 
-  const {
-    receiverPubKey,
-    revealPrivKey,
-    activeUserKeys,
-    hasUserJoinedChat,
-    setRevealPrivKey,
-    setShowSpinner
-  } = useContext(ChatContext);
+  const { receiverPubKey, revealPrivKey, hasUserJoinedChat, setRevealPrivKey, setShowSpinner } =
+    useContext(ChatContext);
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
 
+  const { privateKey, publicKey } = useKeysQuery();
   const { data: directContacts, isLoading: isDirectContactsLoading } = useDirectContactsQuery();
   const directContact = useMemo(
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
@@ -67,9 +62,8 @@ export const ChatPopUp = () => {
   );
   const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
   const canSendMessage = useMemo(
-    () =>
-      !currentUser && hasUserJoinedChat && !!activeUserKeys?.priv && !isCommunity && !revealPrivKey,
-    [currentUser, hasUserJoinedChat, activeUserKeys, isCommunity, revealPrivKey]
+    () => !currentUser && hasUserJoinedChat && !!privateKey && !isCommunity && !revealPrivKey,
+    [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivKey]
   );
 
   const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingMore } =
@@ -167,10 +161,9 @@ export const ChatPopUp = () => {
     if (getPrivateKey(activeUser?.username!)) {
       setShowSpinner(true);
       const keys = {
-        pub: activeUserKeys?.pub!,
-        priv: getPrivateKey(activeUser?.username!)!!
+        pub: publicKey!,
+        priv: privateKey
       };
-      setNostrkeys(keys);
     }
   };
 
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index b9b31b9ba02..9d73ddf8cb9 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -13,6 +13,7 @@ import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { ChatMessageItem } from "../chat-message-item";
+import { useKeysQuery } from "../../queries/keys-query";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -28,32 +29,21 @@ interface Props {
 let zoom: Zoom | null = null;
 export default function ChatsChannelMessages(props: Props) {
   const { publicMessages, isScrollToBottom, isScrolled, currentChannel, scrollToBottom } = props;
-  const {
-    chat,
-    global,
-    activeUser,
-    ui,
-    users,
-    deletePublicMessage,
-    setActiveUser,
-    updateActiveUser,
-    deleteUser,
-    toggleUIProp
-  } = useMappedStore();
-
-  const { messageServiceInstance, activeUserKeys, windowWidth, isActiveUserRemoved } =
-    useContext(ChatContext);
+  const { global, activeUser, deletePublicMessage } = useMappedStore();
+
+  const { messageServiceInstance, isActiveUserRemoved } = useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
   const [step, setStep] = useState(0);
-  const [clickedMessage, setClickedMessage] = useState("");
   const [removedUserId, setRemovedUserID] = useState("");
   const [hiddenMsgId, setHiddenMsgId] = useState("");
   const [resendMessage, setResendMessage] = useState<PublicMessage>();
 
+  const { publicKey } = useKeysQuery();
+
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -156,7 +146,6 @@ export default function ChatsChannelMessages(props: Props) {
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
         {publicMessages.length !== 0 &&
-          activeUserKeys &&
           publicMessages.map((pMsg, i) => {
             const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
 
@@ -174,7 +163,7 @@ export default function ChatsChannelMessages(props: Props) {
 
                 <ChatMessageItem
                   currentChannel={currentChannel}
-                  type={pMsg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
+                  type={pMsg.creator !== publicKey ? "receiver" : "sender"}
                   message={pMsg}
                   isSameUser={isSameUserMessage}
                 />
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index 450156b6cc5..13f8d53e0e9 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -1,13 +1,12 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { History } from "history";
 import DropDown, { MenuItem } from "../../../../components/dropdown";
 
 import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../../img/svg";
 import { _t } from "../../../../i18n";
-import { ADDROLE, DropDownStyle, LEAVECOMMUNITY, UNBLOCKUSER } from "../chat-popup/chat-constants";
+import { DropDownStyle, LEAVECOMMUNITY, UNBLOCKUSER } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { error, success } from "../../../../components/feedback";
-import { ROLES } from "../../../../store/communities";
 import UserAvatar from "../../../../components/user-avatar";
 import { copyToClipboard } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
@@ -18,6 +17,7 @@ import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { CommunityModerator } from "../../managers/message-manager-types";
 import { useLeaveCommunityChannel } from "../../mutations";
 import { EditRolesModal } from "./edit-roles-modal";
+import { useChannelsQuery } from "../../queries";
 
 interface Props {
   history: History;
@@ -25,11 +25,8 @@ interface Props {
   username: string;
 }
 
-const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
-
 const ChatsCommunityDropdownMenu = (props: Props) => {
   const { activeUser, chat } = useMappedStore();
-  const { currentChannel, setCurrentChannel } = useContext(ChatContext);
   const { history, from } = props;
   const [step, setStep] = useState(0);
   const [keyDialog, setKeyDialog] = useState(false);
@@ -38,6 +35,12 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
 
+  const { data: channels } = useChannelsQuery();
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === props.username),
+    [channels, props.username]
+  );
+
   const { mutateAsync: leaveChannel } = useLeaveCommunityChannel(() => {
     setKeyDialog(false);
     setStep(0);
@@ -50,7 +53,7 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     getCommunityAdmins();
 
     if (currentChannel && currentChannel?.removedUserIds) {
-      getBlockedUsers(currentChannel?.removedUserIds!);
+      // getBlockedUsers(currentChannel?.removedUserIds!);
     }
   }, [currentChannel, removedUserId]);
 
@@ -72,12 +75,12 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     setCommunityAdmins(communityAdminNames!);
   };
 
-  const getBlockedUsers = (blockedUser: string[]) => {
-    const blockedUsers = chat.profiles
-      .filter((item) => blockedUser.includes(item.creator))
-      .map((item) => ({ name: item.name, pubkey: item.creator }));
-    setBlockedUsers(blockedUsers);
-  };
+  // const getBlockedUsers = (blockedUser: string[]) => {
+  //   const blockedUsers = profiles
+  //     .filter((item) => blockedUser.includes(item.creator))
+  //     .map((item) => ({ name: item.name, pubkey: item.creator }));
+  //   setBlockedUsers(blockedUsers);
+  // };
 
   const handleBlockedUsers = () => {
     setKeyDialog(true);
@@ -269,10 +272,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
       removedUserIds: currentChannel?.removedUserIds
     };
     switch (operationType) {
-      case ADDROLE:
-        const updatedRoles = [...(currentChannel?.communityModerators || []), moderator!];
-        updatedMetaData.communityModerators = updatedRoles;
-        break;
       case UNBLOCKUSER:
         const NewUpdatedRemovedUsers = currentChannel?.removedUserIds?.filter(
           (item) => item !== removedUserId
@@ -284,7 +283,6 @@ const ChatsCommunityDropdownMenu = (props: Props) => {
     }
     try {
       messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
-      setCurrentChannel({ ...currentChannel!, ...updatedMetaData });
 
       if (operationType === UNBLOCKUSER) {
         setStep(5);
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 8ca339fda73..4a54d9fc9d9 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
@@ -7,9 +7,9 @@ import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { _t } from "../../../../i18n";
 import "./index.scss";
-import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { DirectMessage } from "../../managers/message-manager-types";
 import { ChatMessageItem } from "../chat-message-item";
+import { useKeysQuery } from "../../queries/keys-query";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -21,14 +21,14 @@ interface Props {
 
 let zoom: Zoom | null = null;
 export default function ChatsDirectMessages(props: Props) {
-  const { directMessages, currentUser, isScrolled, isScrollToBottom, scrollToBottom } = props;
+  const { directMessages, isScrolled, isScrollToBottom, scrollToBottom } = props;
 
   const { global, activeUser, deleteDirectMessage } = useMappedStore();
-  const { activeUserKeys, messageServiceInstance, receiverPubKey } = useContext(ChatContext);
+  const { receiverPubKey } = useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
-  const [step, setStep] = useState(0);
-  const [resendMessage, setResendMessage] = useState<DirectMessage>();
+
+  const { publicKey } = useKeysQuery();
 
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
@@ -60,20 +60,6 @@ export default function ChatsDirectMessages(props: Props) {
     }
   };
 
-  const handleConfirm = () => {
-    switch (step) {
-      case 1:
-        if (resendMessage) {
-          deleteDirectMessage(receiverPubKey, resendMessage?.id);
-          messageServiceInstance?.sendDirectMessage(receiverPubKey!, resendMessage.content);
-        }
-        break;
-      default:
-        break;
-    }
-    setStep(0);
-  };
-
   return (
     <>
       <div className="direct-messages">
@@ -91,7 +77,7 @@ export default function ChatsDirectMessages(props: Props) {
                     </div>
                   )}
                   <ChatMessageItem
-                    type={msg.creator !== activeUserKeys?.pub ? "receiver" : "sender"}
+                    type={msg.creator !== publicKey ? "receiver" : "sender"}
                     message={msg}
                     isSameUser={checkContiguousMessage(msg, i, directMessages)}
                   />
@@ -103,16 +89,6 @@ export default function ChatsDirectMessages(props: Props) {
           <p className="not-joined">{_t("chat.not-joined")}</p>
         )}
       </div>
-      {step !== 0 && (
-        <ChatsConfirmationModal
-          actionType={"Confirmation"}
-          content={"Are you sure?"}
-          onClose={() => {
-            setStep(0);
-          }}
-          onConfirm={handleConfirm}
-        />
-      )}
     </>
   );
 }
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index aa11eceb420..4124b13fd88 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -7,7 +7,6 @@ import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { History } from "history";
-import { setNostrkeys } from "../../managers/message-manager";
 
 interface Props {
   history: History;
@@ -15,13 +14,10 @@ interface Props {
 
 export function ChatSidebarHeader({ history }: Props) {
   const { resetChat } = useMappedStore();
-  const { activeUserKeys, setShowSpinner, revealPrivKey, chatPrivKey, setRevealPrivKey } =
-    useContext(ChatContext);
+  const { revealPrivKey, chatPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
   const handleRefreshChat = () => {
     resetChat();
-    setNostrkeys(activeUserKeys!);
-    setShowSpinner(true);
   };
 
   return (
diff --git a/src/common/features/chats/components/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
index b23772231d8..ae73f648355 100644
--- a/src/common/features/chats/components/import-chats/index.tsx
+++ b/src/common/features/chats/components/import-chats/index.tsx
@@ -4,7 +4,6 @@ import { _t } from "../../../../i18n";
 import { keySvg } from "../../../../img/svg";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import OrDivider from "../../../../components/or-divider";
-import * as ls from "../../../../util/local-storage";
 import { ChatContext } from "../../chat-context-provider";
 import "./index.scss";
 import LinearProgress from "../../../../components/linear-progress";
@@ -12,8 +11,8 @@ import ChatsConfirmationModal from "../chats-confirmation-modal";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
 import { FormControl, InputGroup } from "@ui/input";
-import { setNostrkeys } from "../../managers/message-manager";
 import { useJoinChat } from "../../mutations/join-chat";
+import { useKeysQuery } from "../../queries/keys-query";
 
 export default function ImportChats() {
   const { activeUser } = useMappedStore();
@@ -24,21 +23,21 @@ export default function ImportChats() {
   const [privKey, setPrivKey] = useState("");
   const [step, setStep] = useState(0);
 
-  const { activeUserKeys, hasUserJoinedChat, setChatPrivKey } = useContext(ChatContext);
+  const { hasUserJoinedChat, setChatPrivKey } = useContext(ChatContext);
   const { mutateAsync: joinChat } = useJoinChat();
 
+  const { publicKey, privateKey } = useKeysQuery();
+
   const handleImportChatSubmit = () => {
     try {
       setInProgress(true);
       const pubKey = getPublicKey(privKey);
-      if (pubKey === activeUserKeys?.pub) {
+      if (pubKey === publicKey) {
         setChatPrivKey(privKey);
-        ls.set(`${activeUser?.username}_nsPrivKey`, privKey);
         const keys = {
-          pub: activeUserKeys?.pub!,
-          priv: privKey
+          pub: publicKey,
+          priv: privateKey
         };
-        setNostrkeys(keys);
         setImportPrivKey(false);
         setChatPrivKey(privKey);
       } else {
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 4b8260ce2fc..845b247b78f 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -13,6 +13,7 @@ import {
   useNostrJoinedCommunityTeamQuery
 } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
+import { useKeysQuery } from "../queries/keys-query";
 
 interface Props {
   history: History;
@@ -20,7 +21,8 @@ interface Props {
 }
 
 export default function JoinCommunityChatBtn(props: Props) {
-  const { activeUserKeys, hasUserJoinedChat } = useContext(ChatContext);
+  const { publicKey } = useKeysQuery();
+  const { hasUserJoinedChat } = useContext(ChatContext);
   const { activeUser } = useMappedStore();
 
   const { data: currentChannel } = useCommunityChannelQuery(props.community);
@@ -64,7 +66,7 @@ export default function JoinCommunityChatBtn(props: Props) {
                 await joinChat();
               }
 
-              if (communityTeam.some((role) => role.pubkey === activeUserKeys.pub)) {
+              if (communityTeam.some((role) => role.pubkey === publicKey)) {
                 await createCommunityChat();
                 await join();
               }
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index 3ca9e03ca21..5f1e44ab16c 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -1,13 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { ActiveUser } from "../../../store/active-user/types";
 import { NostrKeysType } from "../types";
-import {
-  DirectMessage,
-  Keys,
-  MessagesObject,
-  Profile,
-  PublicMessage
-} from "./message-manager-types";
+import { DirectMessage, Keys, PublicMessage } from "./message-manager-types";
 import MessageService, { MessageEvents } from "../../../helper/message-service";
 import { getPrivateKey, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -28,7 +22,6 @@ export const setNostrkeys = (keys: NostrKeysType) => {
 const MessageManager = () => {
   const {
     activeUser,
-    chat,
     addDirectMessages,
     addPublicMessage,
     addProfile,
@@ -126,19 +119,6 @@ const MessageManager = () => {
     };
   }, [messageServiceReady, messageService]);
 
-  // Profile update handler
-  const handleProfileUpdate = (data: Profile[]) => {
-    addProfile(data);
-  };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
-    messageService?.addListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
-    return () => {
-      messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
-    };
-  }, [messageService, chat.profiles]);
-
   // const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
   //   setTimeout(() => {
   //     verifyPublicMessageSending(channelId, data);
@@ -270,7 +250,6 @@ const MessageManager = () => {
   useEffect(() => {
     return () => {
       messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-      messageService?.removeListener(MessageEvents.ProfileUpdate, handleProfileUpdate);
       // messageService?.removeListener(
       //   MessageEvents.PreviousPublicMessages,
       //   handlePreviousPublicMessages
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index 324c4e54499..47937afc0df 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -4,6 +4,8 @@ import * as ls from "../../../util/local-storage";
 import { setNostrkeys } from "../managers/message-manager";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatQueries } from "../queries";
+import { useNostrPublishMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
 
 /**
  * Custom React hook for joining a chat with some side effects.
@@ -16,11 +18,17 @@ import { ChatQueries } from "../queries";
  * @returns A function from the `useMutation` hook, which can be used to initiate the chat join process.
  */
 export function useJoinChat(onSuccess?: () => void) {
+  const queryClient = useQueryClient();
   const { activeUser, chat, resetChat } = useMappedStore();
+
   const { mutateAsync: uploadPublicKey } = useMutation(["chats/upload-public-key"], (key: string) =>
     uploadChatPublicKey(activeUser, key)
   );
-  const queryClient = useQueryClient();
+  const { mutateAsync: updateProfile } = useNostrPublishMutation(
+    ["chats/update-nostr-profile"],
+    Kind.Metadata,
+    () => {}
+  );
 
   return useMutation(
     ["chat-join-chat"],
@@ -37,6 +45,15 @@ export function useJoinChat(onSuccess?: () => void) {
         queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
         queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
 
+        await updateProfile({
+          tags: [],
+          eventMetadata: {
+            name: activeUser?.username!,
+            about: "",
+            picture: ""
+          }
+        });
+
         onSuccess?.();
       }
     }
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 86573a92296..5ff65b90356 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -7,6 +7,7 @@ import isCommunity from "../../../helper/is-community";
 import { useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
 import { useAddDirectContact } from "./add-direct-contact";
 import { ChatQueries, useMessagesQuery } from "../queries";
+import { useKeysQuery } from "../queries/keys-query";
 
 export function useSendMessage(
   currentChannel?: Channel,
@@ -15,11 +16,12 @@ export function useSendMessage(
 ) {
   const queryClient = useQueryClient();
 
-  const { activeUserKeys, isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { privateKey } = useKeysQuery();
   const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
 
   const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
-    activeUserKeys.priv,
+    privateKey!!,
     receiverPubKey,
     undefined
   );
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
index 6be5c0ae809..f9cfc78ca23 100644
--- a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
@@ -1,10 +1,10 @@
 import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { useContext } from "react";
 import { NostrContext } from "../nostr-context";
-import { ChatContext } from "../../chat-context-provider";
 import { listenWhileFinish } from "../utils";
 import { Event } from "../../../../../lib/nostr-tools/event";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
+import { useKeysQuery } from "../../queries/keys-query";
 
 export function useNostrFetchMutation(
   key: MutationKey,
@@ -12,11 +12,11 @@ export function useNostrFetchMutation(
   options?: UseMutationOptions<Event[], Error>
 ) {
   const { pool, readRelays } = useContext(NostrContext);
-  const { activeUserKeys } = useContext(ChatContext);
+  const { publicKey } = useKeysQuery();
 
   return useMutation(
     key,
-    () => listenWhileFinish(pool, readRelays, [], activeUserKeys.pub, filters),
+    () => listenWhileFinish(pool, readRelays, [], publicKey!!, filters),
     options
   );
 }
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
index 61681146aee..cb045088d0a 100644
--- a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
+++ b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
@@ -2,10 +2,10 @@ import { QueryKey, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Event, Kind } from "../../../../../lib/nostr-tools/event";
 import { useContext } from "react";
 import { NostrContext } from "../nostr-context";
-import { ChatContext } from "../../chat-context-provider";
 import { UseQueryOptions } from "@tanstack/react-query/src/types";
 import { listenWhileFinish } from "../utils";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
+import { useKeysQuery } from "../../queries/keys-query";
 
 export function useNostrFetchQuery<DATA>(
   key: QueryKey,
@@ -13,10 +13,11 @@ export function useNostrFetchQuery<DATA>(
   dataResolver: (events: Event[]) => DATA | Promise<DATA>,
   queryOptions?: UseQueryOptions<DATA>
 ) {
-  const { activeUserKeys } = useContext(ChatContext);
-  const { pool, readRelays } = useContext(NostrContext);
   const queryClient = useQueryClient();
 
+  const { pool, readRelays } = useContext(NostrContext);
+  const { publicKey } = useKeysQuery();
+
   return useQuery(
     key,
     async () => {
@@ -31,7 +32,7 @@ export function useNostrFetchQuery<DATA>(
       const filters = kindsOrFilters.every((item) => typeof item === "object")
         ? (kindsOrFilters as Filter[])
         : undefined;
-      const events = await listenWhileFinish(pool, readRelays, kinds, activeUserKeys.pub, filters);
+      const events = await listenWhileFinish(pool, readRelays, kinds, publicKey!!, filters);
       return dataResolver(events);
     },
     queryOptions
diff --git a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
index 4d3b3669424..e4f7b1a64ff 100644
--- a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { Metadata } from "../../managers/message-manager-types";
 import { Event, getEventHash, Kind, signEvent } from "../../../../../lib/nostr-tools/event";
 import { NostrContext } from "../nostr-context";
-import { ChatContext } from "../../chat-context-provider";
+import { useKeysQuery } from "../../queries/keys-query";
 
 type Payload = { eventMetadata: Metadata | string; tags: string[][] };
 
@@ -14,12 +14,12 @@ export function useNostrPublishMutation(
   options?: UseMutationOptions<Event, Error, Payload>
 ) {
   const { pool, writeRelays } = useContext(NostrContext);
-  const { activeUserKeys } = useContext(ChatContext);
+  const { publicKey, privateKey } = useKeysQuery();
 
   const sign = async (event: Event) => ({
     ...event,
     id: getEventHash(event),
-    sig: await signEvent(event, activeUserKeys.priv)
+    sig: await signEvent(event, privateKey!!)
   });
 
   return useMutation(
@@ -34,7 +34,7 @@ export function useNostrPublishMutation(
             sig: "",
             content:
               typeof eventMetadata === "object" ? JSON.stringify(eventMetadata) : eventMetadata,
-            pubkey: activeUserKeys.pub,
+            pubkey: publicKey!!,
             created_at: Math.floor(Date.now() / 1000),
             tags
           });
diff --git a/src/common/features/chats/nostr/mutations/send-direct-message.ts b/src/common/features/chats/nostr/mutations/send-direct-message.ts
index 139dd3dc201..d84d601eadd 100644
--- a/src/common/features/chats/nostr/mutations/send-direct-message.ts
+++ b/src/common/features/chats/nostr/mutations/send-direct-message.ts
@@ -4,15 +4,14 @@ import { useMutation } from "@tanstack/react-query";
 import { encrypt } from "../../../../../lib/nostr-tools/nip04";
 import { useFindHealthyRelayQuery } from "./find-healthy-relay";
 import { convertEvent } from "../utils/event-converter";
-import { useContext } from "react";
-import { ChatContext } from "../../chat-context-provider";
+import { useKeysQuery } from "../../queries/keys-query";
 
 export function useNostrSendDirectMessage(
   ownerPrivateKey: string,
   destinationPublicKey: string,
   parent?: string
 ) {
-  const { activeUserKeys } = useContext(ChatContext);
+  const { privateKey, publicKey } = useKeysQuery();
 
   const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
     ["chats/nostr-publish-encrypted-message"],
@@ -22,6 +21,12 @@ export function useNostrSendDirectMessage(
   const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
 
   return useMutation(["chats/send-direct-message"], async (message: string) => {
+    if (!publicKey || !privateKey) {
+      throw new Error(
+        "[Chat][Nostr] – attempting to send direct message with no private and public key"
+      );
+    }
+
     const encryptedMessage = await encrypt(ownerPrivateKey, destinationPublicKey, message);
     const tags = [["p", destinationPublicKey]];
 
@@ -35,10 +40,6 @@ export function useNostrSendDirectMessage(
       tags,
       eventMetadata: encryptedMessage
     });
-    return convertEvent<Kind.EncryptedDirectMessage>(
-      event,
-      activeUserKeys.pub,
-      activeUserKeys.priv
-    )!!;
+    return convertEvent<Kind.EncryptedDirectMessage>(event, publicKey, privateKey)!!;
   });
 }
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
index c6bc5eecb89..e23fcef2bc5 100644
--- a/src/common/features/chats/queries/last-messages-query.ts
+++ b/src/common/features/chats/queries/last-messages-query.ts
@@ -5,18 +5,16 @@ import { getDirectLastMessage } from "../utils";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useChannelsQuery } from "./channels-query";
 import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
-import { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
+import { useKeysQuery } from "./keys-query";
 
 export function useLastMessagesQuery() {
-  const { activeUserKeys } = useContext(ChatContext);
-
+  const { publicKey, privateKey } = useKeysQuery();
   const { data: contacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: initialDirectMessages } = useDirectMessagesQuery(
     contacts ?? [],
-    activeUserKeys.pub,
-    activeUserKeys.priv
+    publicKey!!,
+    privateKey!!
   );
   const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
 
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index c688e190949..807c8914e5d 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -1,22 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
 import { useDirectContactsQuery } from "./direct-contacts-query";
-import { useContext, useMemo } from "react";
-import { ChatContext } from "../chat-context-provider";
+import { useMemo } from "react";
 import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { ChatQueries } from "./queries";
 import { Message } from "../managers/message-manager-types";
 import { useChannelsQuery } from "./channels-query";
 import { queryClient } from "../../../core";
+import { useKeysQuery } from "./keys-query";
 
 export function useMessagesQuery(username?: string) {
-  const { activeUserKeys } = useContext(ChatContext);
+  const { privateKey, publicKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
 
   const { data: initialDirectMessages } = useDirectMessagesQuery(
     directContacts ?? [],
-    activeUserKeys.pub,
-    activeUserKeys.priv
+    publicKey!!,
+    privateKey!!
   );
   const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
 
diff --git a/src/common/features/chats/queries/nostr-joined-community-team-query.ts b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
index 6f1004f4922..1380e0e09f9 100644
--- a/src/common/features/chats/queries/nostr-joined-community-team-query.ts
+++ b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
@@ -5,8 +5,6 @@ import { getProfileMetaData } from "../utils";
 import { Community, ROLES } from "../../../store/communities";
 import { NOSTRKEY } from "../components/chat-popup/chat-constants";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
 import { useKeysQuery } from "./keys-query";
 
 /**
@@ -14,22 +12,18 @@ import { useKeysQuery } from "./keys-query";
  */
 export function useNostrJoinedCommunityTeamQuery(community: Community) {
   const { activeUser } = useMappedStore();
-  const { activeUserKeys } = useContext(ChatContext);
 
-  const { hasKeys } = useKeysQuery();
+  const { hasKeys, publicKey } = useKeysQuery();
 
   return useQuery(
     [ChatQueries.COMMUNITY_ROLES, community.name],
     async () => {
-      if (!activeUserKeys || activeUser?.username === community.name) {
-      }
-
       let communityTeam: CommunityModerator[] = [];
       const ownerData = await getProfileMetaData(community.name);
 
       communityTeam.push({
         name: activeUser!.username,
-        pubkey: activeUserKeys?.pub || ownerData.nsKey,
+        pubkey: publicKey || ownerData.nsKey,
         role: "owner"
       });
 
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index b92dcbe285b..b09b08127ea 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -16,6 +16,7 @@ import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
 import { useChannelsQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
+import { useKeysQuery } from "../queries/keys-query";
 
 interface Props extends PageProps {
   match: match<{
@@ -29,9 +30,9 @@ interface Props extends PageProps {
 
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
-  const { receiverPubKey, showSpinner, activeUserKeys, revealPrivKey, chatPrivKey } =
-    useContext(ChatContext);
+  const { receiverPubKey, showSpinner, revealPrivKey } = useContext(ChatContext);
 
+  const { publicKey, privateKey } = useKeysQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
 
@@ -45,10 +46,7 @@ export const Chats = (props: Props) => {
     [channels, leftCommunityChannelsIds]
   );
 
-  const isReady = useMemo(
-    () => !!(activeUser && activeUserKeys?.pub && chatPrivKey),
-    [activeUserKeys, activeUserKeys, chatPrivKey]
-  );
+  const isReady = useMemo(() => !!(activeUser && publicKey && privateKey), [publicKey, privateKey]);
   const isShowManageKey = useMemo(() => isReady && revealPrivKey, [isReady, revealPrivKey]);
   const isShowChatRoom = useMemo(
     () => isReady && !showSpinner && (!!receiverPubKey || isChannel) && !revealPrivKey,

From c349318cd5aff2d4c242a193c72afa666329d6c4 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Nov 2023 00:44:13 +0600
Subject: [PATCH 121/179] Chats: added chat importing mutation

---
 .../chat-popup-contacts-and-channels.tsx      |   4 +-
 .../chats/components/chats-import.tsx         |  88 ++++++++++++++
 .../chats/components/import-chats/index.scss  |   7 --
 .../chats/components/import-chats/index.tsx   | 109 ------------------
 .../chats/mutations/import-chat-by-key.ts     |  39 +++++++
 src/common/features/chats/mutations/index.ts  |   1 +
 .../features/chats/mutations/join-chat.ts     |  43 +++----
 .../chats/queries/chat-profiles-query.ts      |  13 ---
 .../features/chats/queries/keys-query.ts      |  40 +------
 .../features/chats/queries/messages-query.ts  |   3 +-
 src/common/features/chats/screens/chats.tsx   |   8 +-
 .../chats/utils/get-user-chat-public-key.ts   |   4 +-
 src/common/i18n/locales/en-US.json            |   4 +-
 13 files changed, 164 insertions(+), 199 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-import.tsx
 delete mode 100644 src/common/features/chats/components/import-chats/index.scss
 delete mode 100644 src/common/features/chats/components/import-chats/index.tsx
 create mode 100644 src/common/features/chats/mutations/import-chat-by-key.ts
 delete mode 100644 src/common/features/chats/queries/chat-profiles-query.ts

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index d014a0fc7c4..ed334f393a4 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from "react";
 import { _t } from "../../../../i18n";
 import { getJoinedCommunities } from "../../utils";
-import ImportChats from "../import-chats";
+import { ChatsImport } from "../chats-import";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 import { ChatContext } from "../../chat-context-provider";
@@ -67,7 +67,7 @@ export function ChatPopupContactsAndChannels({
           ))}
         </>
       ) : !privateKey ? (
-        <ImportChats />
+        <ChatsImport />
       ) : showSpinner ? (
         <div className="no-chat">
           <Spinner />
diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
new file mode 100644
index 00000000000..101c39f264c
--- /dev/null
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -0,0 +1,88 @@
+import React, { useContext, useEffect, useState } from "react";
+import { _t } from "../../../i18n";
+import { keySvg } from "../../../img/svg";
+import { ChatContext } from "../chat-context-provider";
+import LinearProgress from "../../../components/linear-progress";
+import ChatsConfirmationModal from "./chats-confirmation-modal";
+import { Button } from "@ui/button";
+import { Form } from "@ui/form";
+import { FormControl, InputGroup } from "@ui/input";
+import { useImportChatByKey, useJoinChat } from "../mutations";
+import OrDivider from "../../../components/or-divider";
+
+export function ChatsImport() {
+  const [showImportChats, setShowImportChats] = useState(false);
+  const [privateKeyInput, setPrivateKeyInput] = useState("");
+  const [step, setStep] = useState(0);
+  const [error, setError] = useState("");
+
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const { mutateAsync: joinChat } = useJoinChat();
+
+  const { mutateAsync: importChatByKey, isLoading, error: importError } = useImportChatByKey();
+
+  useEffect(() => {
+    if (importError) {
+      setError(_t("chat.invalid-private-key"));
+    }
+  }, [importError]);
+
+  useEffect(() => {
+    if (hasUserJoinedChat) {
+      setStep(0);
+    }
+  }, [hasUserJoinedChat]);
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center">
+        {showImportChats && (
+          <div className="private-key" style={{ margin: "15px 10px" }}>
+            <Form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
+              <InputGroup
+                prepend={keySvg}
+                append={
+                  <Button onClick={() => importChatByKey({ key: privateKeyInput })}>
+                    {_t("chat.submit")}
+                  </Button>
+                }
+              >
+                <FormControl
+                  value={privateKeyInput}
+                  type="password"
+                  autoFocus={true}
+                  autoComplete="off"
+                  placeholder={_t("chat.enter-private-key")}
+                  aria-invalid={!!error}
+                  onChange={(e) => {
+                    setPrivateKeyInput(e.target.value);
+                    setError("");
+                  }}
+                />
+              </InputGroup>
+              {isLoading && <LinearProgress />}
+              {error && <div className="text-red text-xs p-4">{error}</div>}
+            </Form>
+          </div>
+        )}
+        <Button onClick={() => setShowImportChats(!showImportChats)}>
+          {_t("chat.import-chat")}
+        </Button>
+        <OrDivider />
+        <div className="flex justify-center">
+          <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
+        </div>
+      </div>
+      {step !== 0 && (
+        <ChatsConfirmationModal
+          actionType={"Warning"}
+          content={"creating new account will reset your chats"}
+          onClose={() => {
+            setStep(0);
+          }}
+          onConfirm={() => joinChat()}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/import-chats/index.scss b/src/common/features/chats/components/import-chats/index.scss
deleted file mode 100644
index 6a2e3d11b86..00000000000
--- a/src/common/features/chats/components/import-chats/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "src/style/vars_mixins";
-
-.import-chats {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/src/common/features/chats/components/import-chats/index.tsx b/src/common/features/chats/components/import-chats/index.tsx
deleted file mode 100644
index ae73f648355..00000000000
--- a/src/common/features/chats/components/import-chats/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { getPublicKey } from "../../../../../lib/nostr-tools/keys";
-import { _t } from "../../../../i18n";
-import { keySvg } from "../../../../img/svg";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import OrDivider from "../../../../components/or-divider";
-import { ChatContext } from "../../chat-context-provider";
-import "./index.scss";
-import LinearProgress from "../../../../components/linear-progress";
-import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { Button } from "@ui/button";
-import { Form } from "@ui/form";
-import { FormControl, InputGroup } from "@ui/input";
-import { useJoinChat } from "../../mutations/join-chat";
-import { useKeysQuery } from "../../queries/keys-query";
-
-export default function ImportChats() {
-  const { activeUser } = useMappedStore();
-
-  const [importPrivKey, setImportPrivKey] = useState(false);
-  const [error, setError] = useState("");
-  const [inProgress, setInProgress] = useState(false);
-  const [privKey, setPrivKey] = useState("");
-  const [step, setStep] = useState(0);
-
-  const { hasUserJoinedChat, setChatPrivKey } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
-
-  const { publicKey, privateKey } = useKeysQuery();
-
-  const handleImportChatSubmit = () => {
-    try {
-      setInProgress(true);
-      const pubKey = getPublicKey(privKey);
-      if (pubKey === publicKey) {
-        setChatPrivKey(privKey);
-        const keys = {
-          pub: publicKey,
-          priv: privateKey
-        };
-        setImportPrivKey(false);
-        setChatPrivKey(privKey);
-      } else {
-        setImportPrivKey(true);
-        setError("Invalid Private key");
-      }
-    } catch (error) {
-      setImportPrivKey(true);
-      setError("Invalid Private key");
-    } finally {
-      setInProgress(false);
-    }
-  };
-
-  useEffect(() => {
-    if (hasUserJoinedChat) {
-      setStep(0);
-    }
-  }, [hasUserJoinedChat]);
-
-  return (
-    <>
-      <div className="import-chats">
-        <div className="import-chats-container">
-          <div className="flex justify-center import-chat-btn">
-            <Button onClick={() => setImportPrivKey(!importPrivKey)}>
-              {_t("chat.import-chat")}
-            </Button>
-          </div>
-          {importPrivKey && (
-            <div className="private-key" style={{ margin: "15px 10px" }}>
-              <Form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
-                <InputGroup
-                  prepend={keySvg}
-                  append={<Button onClick={handleImportChatSubmit}>{_t("chat.submit")}</Button>}
-                >
-                  <FormControl
-                    value={privKey}
-                    type="password"
-                    autoFocus={true}
-                    autoComplete="off"
-                    placeholder={_t("chat.enter-private-key")}
-                    onChange={(e) => setPrivKey(e.target.value)}
-                  />
-                </InputGroup>
-                {inProgress && <LinearProgress />}
-                {error && <div className="text-danger">{error}</div>}
-              </Form>
-            </div>
-          )}
-          {<OrDivider />}
-          <div className="flex justify-center">
-            <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
-          </div>
-        </div>
-      </div>
-      {step !== 0 && (
-        <ChatsConfirmationModal
-          actionType={"Warning"}
-          content={"creating new account will reset your chats"}
-          onClose={() => {
-            setStep(0);
-          }}
-          onConfirm={() => joinChat()}
-        />
-      )}
-    </>
-  );
-}
diff --git a/src/common/features/chats/mutations/import-chat-by-key.ts b/src/common/features/chats/mutations/import-chat-by-key.ts
new file mode 100644
index 00000000000..82c7237bfe8
--- /dev/null
+++ b/src/common/features/chats/mutations/import-chat-by-key.ts
@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getPublicKey } from "../../../../lib/nostr-tools/keys";
+import { ChatQueries } from "../queries";
+import { PREFIX } from "../../../util/local-storage";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { getUserChatPublicKey } from "../utils";
+
+interface Payload {
+  key: string;
+}
+
+export function useImportChatByKey(onSuccess?: () => void) {
+  const queryClient = useQueryClient();
+  const { activeUser } = useMappedStore();
+
+  return useMutation(
+    ["chats/import-chat-by-key"],
+    async ({ key }: Payload) => {
+      const publicKey = getPublicKey(key);
+
+      if (activeUser) {
+        const activeUserExistingPublicKey = await getUserChatPublicKey(activeUser.username);
+
+        if (activeUserExistingPublicKey !== publicKey) {
+          throw new Error(
+            "[Chat][Nostr] – account public key doesn't match to generated from private"
+          );
+        }
+      }
+
+      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, key);
+      queryClient.invalidateQueries([ChatQueries.PUBLIC_KEY]);
+      queryClient.invalidateQueries([ChatQueries.PRIVATE_KEY]);
+    },
+    {
+      onSuccess
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 3da1015edb7..d66abbecf55 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -9,3 +9,4 @@ export * from "./update-community-channel";
 export * from "./update-channel-moderator";
 export * from "./fetch-previous-messages";
 export * from "./update-channel-blocked-users";
+export * from "./import-chat-by-key";
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index 47937afc0df..216db2bfd62 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -19,7 +19,7 @@ import { Kind } from "../../../../lib/nostr-tools/event";
  */
 export function useJoinChat(onSuccess?: () => void) {
   const queryClient = useQueryClient();
-  const { activeUser, chat, resetChat } = useMappedStore();
+  const { activeUser } = useMappedStore();
 
   const { mutateAsync: uploadPublicKey } = useMutation(["chats/upload-public-key"], (key: string) =>
     uploadChatPublicKey(activeUser, key)
@@ -30,32 +30,25 @@ export function useJoinChat(onSuccess?: () => void) {
     () => {}
   );
 
-  return useMutation(
-    ["chat-join-chat"],
-    async () => {
-      resetChat();
-      return createNoStrAccount();
-    },
-    {
-      onSuccess: async (keys: ReturnType<typeof createNoStrAccount>) => {
-        ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
-        await uploadPublicKey(keys.pub);
+  return useMutation(["chat-join-chat"], async () => createNoStrAccount(), {
+    onSuccess: async (keys: ReturnType<typeof createNoStrAccount>) => {
+      ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+      await uploadPublicKey(keys.pub);
 
-        setNostrkeys(keys);
-        queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
-        queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
+      setNostrkeys(keys);
+      queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
+      queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
 
-        await updateProfile({
-          tags: [],
-          eventMetadata: {
-            name: activeUser?.username!,
-            about: "",
-            picture: ""
-          }
-        });
+      await updateProfile({
+        tags: [],
+        eventMetadata: {
+          name: activeUser?.username!,
+          about: "",
+          picture: ""
+        }
+      });
 
-        onSuccess?.();
-      }
+      onSuccess?.();
     }
-  );
+  });
 }
diff --git a/src/common/features/chats/queries/chat-profiles-query.ts b/src/common/features/chats/queries/chat-profiles-query.ts
deleted file mode 100644
index 8077d7c1cff..00000000000
--- a/src/common/features/chats/queries/chat-profiles-query.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// export function useChatProfilesQuery() {
-//   return useMessageListenerQuery<Profile[], ChatQueries[]>(
-//     [ChatQueries.PROFILES],
-//     MessageEvents.ProfileUpdate,
-//     (_, nextData, resolver) => {
-//       resolver(nextData);
-//     },
-//     {
-//       initialData: [],
-//       queryFn: () => []
-//     }
-//   );
-// }
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 5f47708b24d..a78d8be93b1 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -1,25 +1,11 @@
 import { useQueries } from "@tanstack/react-query";
 import { ChatQueries } from "./queries";
-import { getPrivateKey, getUserChatPublicKey } from "../utils";
+import { getUserChatPublicKey } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { NostrKeysType } from "../types";
 import { useMemo } from "react";
+import { PREFIX } from "../../../util/local-storage";
 
-/**
- * Custom React hook for managing queries related to a user's public and private keys in a chat application.
- *
- * This hook handles querying and managing the user's public and private keys, as well as providing a
- * method for manual data refetch.
- *
- * @returns An object containing the user's public and private keys, along with a refetch method.
- *   - publicKey: The user's public key for secure communication.
- *   - privateKey: The user's private key for secure communication.
- *   - refetch: A function to manually trigger a refetch of the public and private keys.
- */
-export function useKeysQuery(
-  activeUserKeys?: NostrKeysType,
-  setActiveUserKeys?: (keys: Partial<NostrKeysType>) => void
-) {
+export function useKeysQuery() {
   const { activeUser } = useMappedStore();
 
   const [
@@ -29,27 +15,11 @@ export function useKeysQuery(
     queries: [
       {
         queryKey: [ChatQueries.PUBLIC_KEY],
-        queryFn: () => getUserChatPublicKey(activeUser?.username!),
-        onSuccess: (key: string | null) => {
-          if (key) {
-            setActiveUserKeys?.({
-              ...(activeUserKeys ?? {}),
-              pub: key
-            });
-          }
-        }
+        queryFn: async () => getUserChatPublicKey(activeUser?.username!)
       },
       {
         queryKey: [ChatQueries.PRIVATE_KEY],
-        queryFn: () => getPrivateKey(activeUser?.username!),
-        onSuccess: (key: string | null) => {
-          if (key) {
-            setActiveUserKeys?.({
-              ...(activeUserKeys ?? {}),
-              priv: key
-            });
-          }
-        }
+        queryFn: () => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username)
       }
     ]
   });
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 807c8914e5d..cfba7602779 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -9,7 +9,7 @@ import { queryClient } from "../../../core";
 import { useKeysQuery } from "./keys-query";
 
 export function useMessagesQuery(username?: string) {
-  const { privateKey, publicKey } = useKeysQuery();
+  const { privateKey, publicKey, hasKeys } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
 
@@ -47,6 +47,7 @@ export function useMessagesQuery(username?: string) {
     },
     {
       initialData: [],
+      enabled: hasKeys,
       select: (messages) => {
         if (currentChannel) {
           return messages
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index b09b08127ea..c87717e1e99 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -9,7 +9,6 @@ import Feedback from "../../../components/feedback";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
-import ImportChats from "../components/import-chats";
 import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
@@ -17,6 +16,7 @@ import "./_chats.scss";
 import { useChannelsQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useKeysQuery } from "../queries/keys-query";
+import { ChatsImport } from "../components/chats-import";
 
 interface Props extends PageProps {
   match: match<{
@@ -98,9 +98,9 @@ export const Chats = (props: Props) => {
                 <Spinner className="w-6 h-6" />
               </div>
             )}
-            {isShowImportChats && (
+            {isShowImportChats && activeUser && (
               <div className="h-full w-full flex items-center justify-center">
-                <ImportChats />
+                <ChatsImport />
               </div>
             )}
             {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
@@ -112,7 +112,7 @@ export const Chats = (props: Props) => {
                 <div>Search a person or community and start messaging</div>
               </div>
             )}
-            {!isReady && (
+            {!isReady && !isShowImportChats && !showSpinner && (
               <div className="flex justify-center items-center full-page">
                 <JoinChat />
               </div>
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index 3e6aa39eddd..d20427e4fff 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -1,6 +1,6 @@
 import { getAccountFull } from "../../../api/hive";
 
-export const getUserChatPublicKey = async (username: string): Promise<string | null> => {
+export const getUserChatPublicKey = async (username: string): Promise<string | undefined> => {
   const response = await getAccountFull(username);
   if (response && response.posting_json_metadata) {
     const { posting_json_metadata } = response;
@@ -10,5 +10,5 @@ export const getUserChatPublicKey = async (username: string): Promise<string | n
       return nsKey;
     }
   }
-  return null;
+  return undefined;
 };
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 5a3d24cb06f..42a06af9b42 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1879,7 +1879,9 @@
     "chat-priv-key": "Please, copy this key or save QR code to your device for joining to same account in another devices",
     "copy-priv-key": "Copy Private key",
     "extended-view": "Extended View",
-    "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting."
+    "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting.",
+    "invalid-private-key": "Invalid private key",
+    "enter-username": "Enter temporary username"
   },
   "add-image": {
     "title": "Add Image",

From 068eb73a1a21d8b85319f938992412968545b0cf Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Nov 2023 00:51:14 +0600
Subject: [PATCH 122/179] Chats: removed store

---
 src/common/components/login/index.tsx         |  10 +-
 .../chats/components/chat-popup/index.tsx     |   3 +-
 .../chats-channel-messages/index.tsx          |  16 +-
 .../chats-community-actions/index.tsx         |   4 +-
 .../chats-direct-messages/index.tsx           |   2 +-
 .../chats-sidebar/chat-sidebar-header.tsx     |   6 +-
 .../chats/managers/message-manager.tsx        | 126 +-----
 src/common/features/chats/utils/index.ts      |   4 -
 .../chats/utils/upload-channel-data.ts        |  17 -
 .../utils/use-fetch-community-messages.ts     |  18 -
 .../chats/utils/use-fetch-direct-messages.ts  |  10 -
 .../utils/use-get-community-last-message.ts   |  20 -
 src/common/store/actions.ts                   |  30 +-
 src/common/store/chat/index.ts                | 369 ------------------
 src/common/store/chat/types.ts                | 108 -----
 src/common/store/index.ts                     |   4 +-
 src/common/store/initial-state.ts             |   4 +-
 17 files changed, 29 insertions(+), 722 deletions(-)
 delete mode 100644 src/common/features/chats/utils/upload-channel-data.ts
 delete mode 100644 src/common/features/chats/utils/use-fetch-community-messages.ts
 delete mode 100644 src/common/features/chats/utils/use-fetch-direct-messages.ts
 delete mode 100644 src/common/features/chats/utils/use-get-community-last-message.ts
 delete mode 100644 src/common/store/chat/index.ts
 delete mode 100644 src/common/store/chat/types.ts

diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index d506b5a4922..77e29db1c01 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -730,7 +730,6 @@ interface Props {
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
-  resetChat: () => void;
 }
 
 class LoginDialog extends Component<Props> {
@@ -751,7 +750,7 @@ class LoginDialog extends Component<Props> {
   doLogin = async (hsCode: string, postingKey: null | undefined | string, account: Account) => {
     const profile = await getProfileMetaData(account.name);
 
-    const { global, setActiveUser, updateActiveUser, addUser, resetChat } = this.props;
+    const { global, setActiveUser, updateActiveUser, addUser } = this.props;
 
     // get access token from code
     return hsTokenRenew(hsCode).then((x) => {
@@ -766,9 +765,6 @@ class LoginDialog extends Component<Props> {
       // add / update user data
       addUser(user);
 
-      //reset the already stored chat
-      resetChat();
-
       //create new message service instance for newly logged in user
       if (profile && profile.nsKey && getPrivateKey(account.name)) {
         const keys = {
@@ -830,8 +826,7 @@ export default ({ history }: Pick<Props, "history">) => {
     setActiveUser,
     updateActiveUser,
     deleteUser,
-    toggleUIProp,
-    resetChat
+    toggleUIProp
   } = useMappedStore();
   const location = useLocation();
 
@@ -843,7 +838,6 @@ export default ({ history }: Pick<Props, "history">) => {
       ui={ui}
       users={users}
       activeUser={activeUser}
-      resetChat={resetChat}
       addUser={addUser}
       setActiveUser={setActiveUser}
       updateActiveUser={updateActiveUser}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index d0253a217d3..0b59afed9a9 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -25,7 +25,7 @@ import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
 import { useKeysQuery } from "../../queries/keys-query";
 
 export const ChatPopUp = () => {
-  const { activeUser, global, chat, resetChat } = useMappedStore();
+  const { activeUser, global } = useMappedStore();
 
   const { receiverPubKey, revealPrivKey, hasUserJoinedChat, setRevealPrivKey, setShowSpinner } =
     useContext(ChatContext);
@@ -156,7 +156,6 @@ export const ChatPopUp = () => {
 
   const handleRefreshSvgClick = () => {
     setExpanded(true);
-    resetChat();
     handleBackArrowSvg();
     if (getPrivateKey(activeUser?.username!)) {
       setShowSpinner(true);
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chats-channel-messages/index.tsx
index 9d73ddf8cb9..4ab376b2606 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chats-channel-messages/index.tsx
@@ -29,7 +29,7 @@ interface Props {
 let zoom: Zoom | null = null;
 export default function ChatsChannelMessages(props: Props) {
   const { publicMessages, isScrollToBottom, isScrolled, currentChannel, scrollToBottom } = props;
-  const { global, activeUser, deletePublicMessage } = useMappedStore();
+  const { global, activeUser } = useMappedStore();
 
   const { messageServiceInstance, isActiveUserRemoved } = useContext(ChatContext);
 
@@ -120,13 +120,13 @@ export default function ChatsChannelMessages(props: Props) {
         break;
       case 4:
         if (resendMessage) {
-          deletePublicMessage(currentChannel.id, resendMessage?.id);
-          messageServiceInstance?.sendPublicMessage(
-            currentChannel!,
-            resendMessage?.content,
-            [],
-            ""
-          );
+          // // deletePublicMessage(currentChannel.id, resendMessage?.id);
+          // messageServiceInstance?.sendPublicMessage(
+          //   currentChannel!,
+          //   resendMessage?.content,
+          //   [],
+          //   ""
+          // );
         }
         break;
       default:
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index 13f8d53e0e9..8d9f773e198 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -14,7 +14,6 @@ import { ChatContext } from "../../chat-context-provider";
 import "./index.scss";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { CommunityModerator } from "../../managers/message-manager-types";
 import { useLeaveCommunityChannel } from "../../mutations";
 import { EditRolesModal } from "./edit-roles-modal";
 import { useChannelsQuery } from "../../queries";
@@ -26,11 +25,10 @@ interface Props {
 }
 
 const ChatsCommunityDropdownMenu = (props: Props) => {
-  const { activeUser, chat } = useMappedStore();
+  const { activeUser } = useMappedStore();
   const { history, from } = props;
   const [step, setStep] = useState(0);
   const [keyDialog, setKeyDialog] = useState(false);
-  const [moderator, setModerator] = useState<CommunityModerator>();
   const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
   const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
   const [removedUserId, setRemovedUserID] = useState("");
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 4a54d9fc9d9..4364b457cae 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -23,7 +23,7 @@ let zoom: Zoom | null = null;
 export default function ChatsDirectMessages(props: Props) {
   const { directMessages, isScrolled, isScrollToBottom, scrollToBottom } = props;
 
-  const { global, activeUser, deleteDirectMessage } = useMappedStore();
+  const { global, activeUser } = useMappedStore();
   const { receiverPubKey } = useContext(ChatContext);
 
   let prevGlobal = usePrevious(global);
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index 4124b13fd88..e701baea700 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -5,7 +5,6 @@ import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
-import { useMappedStore } from "../../../../store/use-mapped-store";
 import { History } from "history";
 
 interface Props {
@@ -13,12 +12,9 @@ interface Props {
 }
 
 export function ChatSidebarHeader({ history }: Props) {
-  const { resetChat } = useMappedStore();
   const { revealPrivKey, chatPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
-  const handleRefreshChat = () => {
-    resetChat();
-  };
+  const handleRefreshChat = () => {};
 
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
index 5f1e44ab16c..2f3d2bd8707 100644
--- a/src/common/features/chats/managers/message-manager.tsx
+++ b/src/common/features/chats/managers/message-manager.tsx
@@ -1,14 +1,7 @@
-import React, { useContext, useEffect, useState } from "react";
-import { ActiveUser } from "../../../store/active-user/types";
+import React, { useState } from "react";
 import { NostrKeysType } from "../types";
-import { DirectMessage, Keys, PublicMessage } from "./message-manager-types";
-import MessageService, { MessageEvents } from "../../../helper/message-service";
-import { getPrivateKey, getProfileMetaData } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
 import { usePrevious } from "../../../util/use-previous";
-import { useMessageServiceListener } from "../hooks/use-message-service-listener";
-import { useChannelsQuery, useDirectContactsQuery } from "../queries";
 
 export const setNostrkeys = (keys: NostrKeysType) => {
   const detail: NostrKeysType = {
@@ -20,104 +13,27 @@ export const setNostrkeys = (keys: NostrKeysType) => {
 };
 
 const MessageManager = () => {
-  const {
-    activeUser,
-    addDirectMessages,
-    addPublicMessage,
-    addProfile,
-    addleftChannels,
-    UpdateChannels,
-    replacePublicMessage,
-    verifyPublicMessageSending,
-    replaceDirectMessage,
-    verifyDirectMessageSending,
-    addPreviousPublicMessages,
-    resetChat
-  } = useMappedStore();
-  const { data: directContacts } = useDirectContactsQuery();
-  const { data: channels } = useChannelsQuery();
-
+  const { activeUser } = useMappedStore();
   const prevActiveUser = usePrevious(activeUser);
 
   const [messageServiceReady, setMessageServiceReady] = useState(false);
-  const [keys, setKeys] = useState<Keys>();
-  const [messageService, setMessageService] = useState<MessageService | undefined>(undefined);
-  const [directMessageBuffer, setDirectMessageBuffer] = useState<DirectMessage[]>([]);
-  const [publicMessageBuffer, setPublicMessageBuffer] = useState<PublicMessage[]>([]);
-  const [isCommunityCreated, setIsCommunityCreated] = useState(false);
-  const [replacedPublicMessagesBuffer, setReplacedPublicMessagesBuffer] = useState<string[]>([]);
-  const [replacedDirectMessagesBuffer, setReplacedDirectMessagesBuffer] = useState<string[]>([]);
-
-  const { messageServiceInstance, initMessageServiceInstance, setMessageServiceInstance } =
-    useContext(ChatContext);
-
-  useEffect(() => {
-    if (channels?.length !== 0) {
-      setIsCommunityCreated(true);
-    }
-  }, [channels]);
-
-  useEffect(() => {
-    window.addEventListener("createMSInstance", createMSInstance);
-
-    return () => {
-      window.removeEventListener("createMSInstance", createMSInstance);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (keys?.priv) {
-      const messageService = initMessageServiceInstance(keys);
-      setMessageServiceInstance(messageService);
-      setMessageService(messageService!);
-    } else {
-      setMessageServiceInstance(null);
-    }
-  }, [keys]);
-
-  useEffect(() => {
-    if (activeUser) {
-      getNostrKeys(activeUser);
-    }
-    if (prevActiveUser?.username !== activeUser?.username) {
-      resetChat();
-      getNostrKeys(activeUser!);
-    }
-  }, [activeUser]);
-
-  const createMSInstance = (e: Event) => {
-    const detail = (e as CustomEvent).detail as NostrKeysType;
-    const messageService = initMessageServiceInstance(detail);
-    setMessageServiceInstance(messageService);
-    setMessageService(messageService!);
-  };
-
-  const getNostrKeys = async (activeUser: ActiveUser) => {
-    const profile = await getProfileMetaData(activeUser.username);
-    const noStrPrivKey = getPrivateKey(activeUser.username);
-    const keys = {
-      pub: profile?.nsKey,
-      priv: noStrPrivKey!!
-    };
-    setKeys(keys);
-  };
 
   //Listen for events in an interval.
-  useMessageServiceListener(messageServiceReady, messageService);
+  // useMessageServiceListener(messageServiceReady, messageService);
 
   // // Ready state handler
   const handleReadyState = () => {
     setMessageServiceReady(true);
   };
-
-  useEffect(() => {
-    messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-    messageService?.addListener(MessageEvents.Ready, handleReadyState);
-
-    return () => {
-      messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-    };
-  }, [messageServiceReady, messageService]);
+  //
+  // useEffect(() => {
+  //   messageService?.removeListener(MessageEvents.Ready, handleReadyState);
+  //   messageService?.addListener(MessageEvents.Ready, handleReadyState);
+  //
+  //   return () => {
+  //     messageService?.removeListener(MessageEvents.Ready, handleReadyState);
+  //   };
+  // }, [messageServiceReady, messageService]);
 
   // const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
   //   setTimeout(() => {
@@ -247,24 +163,6 @@ const MessageManager = () => {
   //   };
   // }, [messageService, chat.profiles, chat.publicMessages]);
 
-  useEffect(() => {
-    return () => {
-      messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-      // messageService?.removeListener(
-      //   MessageEvents.PreviousPublicMessages,
-      //   handlePreviousPublicMessages
-      // );
-      // messageService?.removeListener(
-      //   MessageEvents.PublicMessageBeforeSent,
-      //   handlePublicMessageBeforeSent
-      // );
-      // messageService?.removeListener(
-      //   MessageEvents.PublicMessageAfterSent,
-      //   handlePublicMessageAfterSent
-      // );
-    };
-  }, [messageService]);
-
   return <>{}</>;
 };
 
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index 84476493cac..30dab8fa017 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -1,20 +1,16 @@
 export * from "./fetch-profile-metadata";
 export * from "./delete-chat-public-key";
 export * from "./upload-chat-public-key";
-export * from "./upload-channel-data";
 export * from "./create-nostr-account";
 export * from "./format-message-time";
-export * from "./use-fetch-community-messages";
 export * from "./is-message-gif";
 export * from "./get-user-chat-public-key";
-export * from "./use-get-community-last-message";
 export * from "./use-get-direct-last-message";
 export * from "./formatted-user-name";
 export * from "./is-message-image";
 export * from "./get-chat-private-key";
 export * from "./get-joined-communities";
 export * from "./copy-to-clipboard";
-export * from "./use-fetch-direct-messages";
 export * from "./check-contiguous-message";
 export * from "./format-message-date-and-day";
 export * from "./get-relative-date";
diff --git a/src/common/features/chats/utils/upload-channel-data.ts b/src/common/features/chats/utils/upload-channel-data.ts
deleted file mode 100644
index 45458239bab..00000000000
--- a/src/common/features/chats/utils/upload-channel-data.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getAccountFull } from "../../../api/hive";
-import { updateProfile } from "../../../api/operations";
-import { Channel } from "../managers/message-manager-types";
-
-export const setChannelMetaData = async (username: string, channel: Channel) => {
-  try {
-    const response = await getAccountFull(username!);
-    const { posting_json_metadata } = response;
-    const profile = JSON.parse(posting_json_metadata!).profile;
-    const newProfile = {
-      channel: channel
-    };
-    return await updateProfile(response, { ...profile, ...newProfile });
-  } catch (error) {
-    throw error;
-  }
-};
diff --git a/src/common/features/chats/utils/use-fetch-community-messages.ts b/src/common/features/chats/utils/use-fetch-community-messages.ts
deleted file mode 100644
index cbfd3f477aa..00000000000
--- a/src/common/features/chats/utils/use-fetch-community-messages.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { publicMessagesList } from "../../../store/chat/types";
-import { Channel } from "../managers/message-manager-types";
-
-export const fetchCommunityMessages = (
-  publicMessages: publicMessagesList[],
-  currentChannel: Channel,
-  hiddenMessageIds?: string[]
-) => {
-  const hideMessageIds = hiddenMessageIds || currentChannel?.hiddenMessageIds || [];
-  for (const item of publicMessages) {
-    if (item.channelId === currentChannel.id) {
-      return Object.values(item.PublicMessage).filter(
-        (message) => !hideMessageIds.includes(message.id)
-      );
-    }
-  }
-  return [];
-};
diff --git a/src/common/features/chats/utils/use-fetch-direct-messages.ts b/src/common/features/chats/utils/use-fetch-direct-messages.ts
deleted file mode 100644
index 189d930d98b..00000000000
--- a/src/common/features/chats/utils/use-fetch-direct-messages.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { directMessagesList } from "../../../store/chat/types";
-
-export const fetchDirectMessages = (peer: string, directMessages: directMessagesList[]) => {
-  for (const item of directMessages) {
-    if (item.peer === peer) {
-      return Object.values(item.chat);
-    }
-  }
-  return [];
-};
diff --git a/src/common/features/chats/utils/use-get-community-last-message.ts b/src/common/features/chats/utils/use-get-community-last-message.ts
deleted file mode 100644
index 24fea4b2ba9..00000000000
--- a/src/common/features/chats/utils/use-get-community-last-message.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { publicMessagesList } from "../../../store/chat/types";
-
-export const getCommunityLastMessage = (
-  channelId: string,
-  publicMessages: publicMessagesList[]
-) => {
-  const msgsList = fetchChannelMessages(channelId!, publicMessages);
-  const messages = msgsList.sort((a, b) => a.created - b.created);
-  const lastMessage = messages.slice(-1);
-  return lastMessage[0]?.content;
-};
-
-const fetchChannelMessages = (channelId: string, publicMessages: publicMessagesList[]) => {
-  for (const item of publicMessages) {
-    if (item.channelId === channelId) {
-      return Object.values(item.PublicMessage);
-    }
-  }
-  return [];
-};
diff --git a/src/common/store/actions.ts b/src/common/store/actions.ts
index b6acdbf8e52..eb7b42bd5ae 100644
--- a/src/common/store/actions.ts
+++ b/src/common/store/actions.ts
@@ -38,21 +38,6 @@ import {
   updateNotificationsSettings
 } from "./notifications";
 import { setSigningKey } from "./signing-key";
-import {
-  addDirectMessages,
-  addleftChannels,
-  addPreviousPublicMessages,
-  addProfile,
-  addPublicMessage,
-  deleteDirectMessage,
-  deletePublicMessage,
-  replaceDirectMessage,
-  replacePublicMessage,
-  resetChat,
-  UpdateChannels,
-  verifyDirectMessageSending,
-  verifyPublicMessageSending
-} from "./chat";
 
 // @note Do not use it directly
 export const ACTIONS = {
@@ -97,20 +82,7 @@ export const ACTIONS = {
   setSigningKey,
   updateNotificationsSettings,
   fetchNotificationsSettings,
-  setNotificationsSettingsItem,
-  addDirectMessages,
-  resetChat,
-  addPublicMessage,
-  addProfile,
-  addleftChannels,
-  UpdateChannels,
-  replacePublicMessage,
-  verifyPublicMessageSending,
-  replaceDirectMessage,
-  verifyDirectMessageSending,
-  deletePublicMessage,
-  deleteDirectMessage,
-  addPreviousPublicMessages
+  setNotificationsSettingsItem
 };
 
 export const getActions = () => ({
diff --git a/src/common/store/chat/index.ts b/src/common/store/chat/index.ts
deleted file mode 100644
index f7f0a934ed5..00000000000
--- a/src/common/store/chat/index.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import {
-  ChannelUpdate,
-  DirectMessage,
-  MessagesObject,
-  Profile,
-  PublicMessage
-} from "../../features/chats/managers/message-manager-types";
-import { Dispatch } from "redux";
-
-import {
-  Actions,
-  ActionTypes,
-  AddPreviousPublicMessagesAction,
-  Chat,
-  DeleteDirectMessagesAction,
-  DeletePublicMessagesAction,
-  DirectMessagesAction,
-  LeftChannelsAction,
-  ProfilesAction,
-  PublicMessagesAction,
-  ReplaceDirectMessagesAction,
-  ReplacePublicMessagesAction,
-  ResetChatAction,
-  UpdateChannelAction,
-  VerifyDirectMessageSendingAction,
-  VerifyPublicMessageSendingAction
-} from "./types";
-
-export const initialState: Chat = {
-  profiles: [],
-  updatedChannel: []
-};
-
-export default (state: Chat = initialState, action: Actions): Chat => {
-  switch (action.type) {
-    case ActionTypes.RESET:
-      return initialState;
-
-    case ActionTypes.PROFILES: {
-      const { data } = action;
-
-      const filteredProfiles = data.filter((profile) => {
-        return !state.profiles.some((existingProfile) => existingProfile.id === profile.id);
-      });
-
-      return {
-        ...state,
-        profiles: [...state.profiles, ...filteredProfiles]
-      };
-    }
-    case ActionTypes.UPDATEDCHANNEL: {
-      const { data } = action;
-      return {
-        ...state,
-        updatedChannel: [...state.updatedChannel, ...data]
-      };
-    }
-
-    case ActionTypes.REPLACEPUBLICMESSAGE: {
-      const { channelId, data } = action;
-      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage || {};
-
-      if (publicChat.hasOwnProperty(data.id)) {
-        publicChat[data.id] = data;
-      } else {
-        publicChat[data.id] = data;
-      }
-
-      return {
-        ...state
-      };
-    }
-
-    case ActionTypes.VERIFYPUBLICMESSAGESENDING: {
-      const { channelId, data } = action;
-
-      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage || {};
-
-      if (publicChat.hasOwnProperty(data.id)) {
-        if (publicChat[data.id].sent === 0) {
-          publicChat[data.id].sent = 2;
-        }
-      }
-      return {
-        ...state,
-        publicMessages: state.publicMessages.map((obj) =>
-          obj.channelId === channelId ? { channelId, PublicMessage: { ...publicChat } } : obj
-        )
-      };
-    }
-
-    case ActionTypes.REPLACEDIRECTMESSAGE: {
-      const { peer, data } = action;
-      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
-      const directMessages = directMessagesObject?.chat || {};
-
-      if (directMessages.hasOwnProperty(data.id)) {
-        directMessages[data.id] = data;
-      } else {
-        directMessages[data.id] = data;
-      }
-
-      return {
-        ...state,
-        directMessages: [
-          ...state.directMessages.map((obj) =>
-            obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
-          )
-        ]
-      };
-    }
-
-    case ActionTypes.VERIFYDIRECTMESSAGESENDING: {
-      const { peer, data } = action;
-
-      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
-      const directMessages = directMessagesObject?.chat || {};
-
-      if (directMessages.hasOwnProperty(data.id)) {
-        if (directMessages[data.id].sent === 0) {
-          directMessages[data.id].sent = 2;
-        }
-      }
-      return {
-        ...state,
-        directMessages: state.directMessages.map((obj) =>
-          obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
-        )
-      };
-    }
-
-    case ActionTypes.DELETEPUBLICMESSAGE: {
-      const { channelId, msgId } = action;
-
-      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage || {};
-
-      if (publicChat[msgId]) {
-        delete publicChat[msgId];
-      }
-      return {
-        ...state,
-        publicMessages: state.publicMessages.map((obj) =>
-          obj.channelId === channelId ? { channelId, PublicMessage: { ...publicChat } } : obj
-        )
-      };
-    }
-
-    case ActionTypes.DELETEDIRECTMESSAGE: {
-      const { peer, msgId } = action;
-
-      const directMessagesObject = state.directMessages.find((item) => item.peer === peer);
-      const directMessages = directMessagesObject?.chat || {};
-
-      if (directMessages[msgId]) {
-        delete directMessages[msgId];
-      }
-
-      return {
-        ...state,
-        directMessages: [
-          ...state.directMessages.map((obj) =>
-            obj.peer === peer ? { peer, chat: { ...directMessages } } : obj
-          )
-        ]
-      };
-    }
-
-    case ActionTypes.ADDPREVIOUSPUBLICMESSAGES: {
-      const { channelId, data } = action;
-
-      const publicChatObject = state.publicMessages.find((item) => item.channelId === channelId);
-      const publicChat = publicChatObject?.PublicMessage || {};
-
-      return {
-        ...state,
-        publicMessages: state.publicMessages.map((obj) =>
-          obj.channelId === channelId
-            ? { channelId, PublicMessage: { ...data, ...publicChat } }
-            : obj
-        )
-      };
-    }
-
-    default:
-      return state;
-  }
-};
-
-/* Actions */
-export const addDirectMessages = (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
-  dispatch(addDirectMessagesAct(peer, data));
-};
-
-export const resetChat = () => (dispatch: Dispatch) => {
-  dispatch(resetChatAct());
-};
-
-export const addPublicMessage =
-  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
-    dispatch(addPublicMessagesAct(channelId, data));
-  };
-
-export const addProfile = (data: Profile[]) => (dispatch: Dispatch) => {
-  dispatch(addProfilesAct(data));
-};
-
-export const addleftChannels = (data: string[]) => (dispatch: Dispatch) => {
-  dispatch(addleftChannelsAct(data));
-};
-
-export const UpdateChannels = (data: ChannelUpdate[]) => (dispatch: Dispatch) => {
-  dispatch(UpdateChannelsAct(data));
-};
-
-export const replacePublicMessage =
-  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
-    dispatch(replacePublicMessagesAct(channelId, data));
-  };
-
-export const verifyPublicMessageSending =
-  (channelId: string, data: PublicMessage) => (dispatch: Dispatch) => {
-    dispatch(verifyPublicMessageSendingAct(channelId, data));
-  };
-
-export const replaceDirectMessage = (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
-  dispatch(replaceDirectMessagesAct(peer, data));
-};
-
-export const verifyDirectMessageSending =
-  (peer: string, data: DirectMessage) => (dispatch: Dispatch) => {
-    dispatch(verifyDirectMessageSendingAct(peer, data));
-  };
-
-export const deletePublicMessage = (channelId: string, msgId: string) => (dispatch: Dispatch) => {
-  dispatch(deletePublicMessageAct(channelId, msgId));
-};
-
-export const deleteDirectMessage = (peer: string, msgId: string) => (dispatch: Dispatch) => {
-  dispatch(deleteDirectMessageAct(peer, msgId));
-};
-
-export const addPreviousPublicMessages =
-  (channelId: string, data: MessagesObject) => (dispatch: Dispatch) => {
-    dispatch(addPreviousPublicMessagesAct(channelId, data));
-  };
-
-/* Action Creators */
-
-export const addDirectMessagesAct = (peer: string, data: DirectMessage): DirectMessagesAction => {
-  return {
-    type: ActionTypes.DIRECTMESSAGES,
-    peer,
-    data
-  };
-};
-
-export const addPublicMessagesAct = (
-  channelId: string,
-  data: PublicMessage
-): PublicMessagesAction => {
-  return {
-    type: ActionTypes.PUBLICMESSAGES,
-    channelId,
-    data
-  };
-};
-
-export const resetChatAct = (): ResetChatAction => {
-  return {
-    type: ActionTypes.RESET
-  };
-};
-export const addProfilesAct = (data: Profile[]): ProfilesAction => {
-  return {
-    type: ActionTypes.PROFILES,
-    data
-  };
-};
-
-export const addleftChannelsAct = (data: string[]): LeftChannelsAction => {
-  return {
-    type: ActionTypes.LEFTCHANNELLIST,
-    data
-  };
-};
-
-export const UpdateChannelsAct = (data: ChannelUpdate[]): UpdateChannelAction => {
-  return {
-    type: ActionTypes.UPDATEDCHANNEL,
-    data
-  };
-};
-
-export const replacePublicMessagesAct = (
-  channelId: string,
-  data: PublicMessage
-): ReplacePublicMessagesAction => {
-  return {
-    type: ActionTypes.REPLACEPUBLICMESSAGE,
-    channelId,
-    data
-  };
-};
-
-export const verifyPublicMessageSendingAct = (
-  channelId: string,
-  data: PublicMessage
-): VerifyPublicMessageSendingAction => {
-  return {
-    type: ActionTypes.VERIFYPUBLICMESSAGESENDING,
-    channelId,
-    data
-  };
-};
-
-export const replaceDirectMessagesAct = (
-  peer: string,
-  data: DirectMessage
-): ReplaceDirectMessagesAction => {
-  return {
-    type: ActionTypes.REPLACEDIRECTMESSAGE,
-    peer,
-    data
-  };
-};
-
-export const verifyDirectMessageSendingAct = (
-  peer: string,
-  data: DirectMessage
-): VerifyDirectMessageSendingAction => {
-  return {
-    type: ActionTypes.VERIFYDIRECTMESSAGESENDING,
-    peer,
-    data
-  };
-};
-
-export const deletePublicMessageAct = (
-  channelId: string,
-  msgId: string
-): DeletePublicMessagesAction => {
-  return {
-    type: ActionTypes.DELETEPUBLICMESSAGE,
-    channelId,
-    msgId
-  };
-};
-
-export const deleteDirectMessageAct = (peer: string, msgId: string): DeleteDirectMessagesAction => {
-  return {
-    type: ActionTypes.DELETEDIRECTMESSAGE,
-    peer,
-    msgId
-  };
-};
-
-export const addPreviousPublicMessagesAct = (
-  channelId: string,
-  data: MessagesObject
-): AddPreviousPublicMessagesAction => {
-  return {
-    type: ActionTypes.ADDPREVIOUSPUBLICMESSAGES,
-    channelId,
-    data
-  };
-};
diff --git a/src/common/store/chat/types.ts b/src/common/store/chat/types.ts
deleted file mode 100644
index 2e54cfd2e74..00000000000
--- a/src/common/store/chat/types.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  ChannelUpdate,
-  DirectMessage,
-  MessagesObject,
-  Profile,
-  PublicMessage
-} from "../../features/chats/managers/message-manager-types";
-
-export interface DirectContactsType {
-  name: string;
-  pubkey: string;
-}
-
-export interface directMessagesList {
-  peer: string;
-  chat: { [messageId: string]: DirectMessage };
-}
-
-export interface publicMessagesList {
-  channelId: string;
-  PublicMessage: { [messageId: string]: PublicMessage };
-}
-
-export interface Chat {
-  profiles: Profile[];
-  updatedChannel: ChannelUpdate[];
-}
-
-export enum ActionTypes {
-  RESET = "@chat/RESET",
-  PROFILES = "@chat/PROFILES",
-  UPDATEDCHANNEL = "@chat/UPDATEDCHANNEL",
-  REPLACEPUBLICMESSAGE = "@chat/REPLACEPUBLICMESSAGE",
-  VERIFYPUBLICMESSAGESENDING = "@chat/VERIFYMESSAGESENDING",
-  REPLACEDIRECTMESSAGE = "@chat/REPLACEDIRECTMESSAGE",
-  VERIFYDIRECTMESSAGESENDING = "@chat/VERIFYDIRECTMESSAGESENDING",
-  DELETEPUBLICMESSAGE = "@chat/DELETEPUBLICMESSAGE",
-  DELETEDIRECTMESSAGE = "@chat/DELETEDIRECTMESSAGE",
-  ADDPREVIOUSPUBLICMESSAGES = "@chat/ADDPREVIOUSPUBLICMESSAGES"
-}
-
-export interface ResetChatAction {
-  type: ActionTypes.RESET;
-}
-
-export interface ProfilesAction {
-  type: ActionTypes.PROFILES;
-  data: Profile[];
-}
-
-export interface UpdateChannelAction {
-  type: ActionTypes.UPDATEDCHANNEL;
-  data: ChannelUpdate[];
-}
-
-export interface ReplacePublicMessagesAction {
-  type: ActionTypes.REPLACEPUBLICMESSAGE;
-  data: PublicMessage;
-  channelId: string;
-}
-
-export interface ReplaceDirectMessagesAction {
-  type: ActionTypes.REPLACEDIRECTMESSAGE;
-  data: DirectMessage;
-  peer: string;
-}
-
-export interface VerifyPublicMessageSendingAction {
-  type: ActionTypes.VERIFYPUBLICMESSAGESENDING;
-  data: PublicMessage;
-  channelId: string;
-}
-
-export interface VerifyDirectMessageSendingAction {
-  type: ActionTypes.VERIFYDIRECTMESSAGESENDING;
-  data: DirectMessage;
-  peer: string;
-}
-
-export interface DeletePublicMessagesAction {
-  type: ActionTypes.DELETEPUBLICMESSAGE;
-  msgId: string;
-  channelId: string;
-}
-
-export interface DeleteDirectMessagesAction {
-  type: ActionTypes.DELETEDIRECTMESSAGE;
-  msgId: string;
-  peer: string;
-}
-
-export interface AddPreviousPublicMessagesAction {
-  type: ActionTypes.ADDPREVIOUSPUBLICMESSAGES;
-  channelId: string;
-  data: MessagesObject;
-}
-
-export type Actions =
-  | ResetChatAction
-  | ProfilesAction
-  | UpdateChannelAction
-  | ReplacePublicMessagesAction
-  | VerifyPublicMessageSendingAction
-  | ReplaceDirectMessagesAction
-  | VerifyDirectMessageSendingAction
-  | DeletePublicMessagesAction
-  | DeleteDirectMessagesAction
-  | AddPreviousPublicMessagesAction;
diff --git a/src/common/store/index.ts b/src/common/store/index.ts
index c22a180a801..770725fc9c7 100644
--- a/src/common/store/index.ts
+++ b/src/common/store/index.ts
@@ -21,7 +21,6 @@ import signingKey from "./signing-key";
 import persistentPageScroll from "./persistent-page-scroll";
 
 import filterTagExtract from "../helper/filter-tag-extract";
-import chat from "./chat";
 
 let reducers = {
   global,
@@ -38,8 +37,7 @@ let reducers = {
   subscriptions,
   notifications,
   signingKey,
-  persistentPageScroll,
-  chat
+  persistentPageScroll
 };
 
 export let history: History | undefined;
diff --git a/src/common/store/initial-state.ts b/src/common/store/initial-state.ts
index ad658298a64..f323a59acc8 100644
--- a/src/common/store/initial-state.ts
+++ b/src/common/store/initial-state.ts
@@ -15,7 +15,6 @@ import { initialState as notificationsInitialState } from "./notifications";
 import { initialState as entriesInitialState } from "./entries";
 import { initialState as signingKeyInitialState } from "./signing-key";
 import { initialState as persistentPageScrollInitialState } from "./persistent-page-scroll";
-import { initialState as chatInitialState } from "./chat";
 
 const initialState: AppState = {
   global: globalInitialState,
@@ -32,8 +31,7 @@ const initialState: AppState = {
   notifications: notificationsInitialState,
   entries: entriesInitialState,
   signingKey: signingKeyInitialState,
-  persistentPageScroll: persistentPageScrollInitialState,
-  chat: chatInitialState
+  persistentPageScroll: persistentPageScrollInitialState
 };
 
 export default initialState;

From d4463f819f2d96069fbc6563e7935fd8eb7469db Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Nov 2023 14:03:30 +0600
Subject: [PATCH 123/179] save

---
 .../chats/queries/community-channel-query.ts  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/common/features/chats/queries/community-channel-query.ts b/src/common/features/chats/queries/community-channel-query.ts
index 1ea4ad8dac4..10f350540ae 100644
--- a/src/common/features/chats/queries/community-channel-query.ts
+++ b/src/common/features/chats/queries/community-channel-query.ts
@@ -9,12 +9,18 @@ import { Channel } from "../managers/message-manager-types";
  * @see {@link ../mutations/create-community-chat.ts}
  */
 export function useCommunityChannelQuery(community?: Community) {
-  return useQuery<Channel>([ChatQueries.COMMUNITY_CHANNEL, community?.name], async () => {
-    if (!community) {
-      return undefined;
-    }
+  return useQuery<Channel>(
+    [ChatQueries.COMMUNITY_CHANNEL, community?.name],
+    async () => {
+      if (!community) {
+        return undefined;
+      }
 
-    const communityProfile = await getProfileMetaData(community.name);
-    return communityProfile.channel;
-  });
+      const communityProfile = await getProfileMetaData(community.name);
+      return communityProfile.channel;
+    },
+    {
+      enabled: !!community
+    }
+  );
 }

From 72c91d1491594260ebce8ce9a901b83ae30ac558 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Nov 2023 21:19:34 +0600
Subject: [PATCH 124/179] Tailwind migration: fixed message hiding in channel

---
 .../features/chats/chat-context-provider.tsx  |   3 -
 .../index.tsx => chat-channel-messages.tsx}   | 135 +++++---
 .../chats/components/chat-message-box.tsx     |   1 -
 .../chats/components/chat-message-item.tsx    |  18 +-
 .../chats/components/chat-messages-header.tsx |   2 +-
 .../chats/components/chat-messages-view.tsx   |  15 +-
 .../chat-popup/chat-popup-messages-list.tsx   |   5 +-
 .../chats-channel-messages/index.scss         | 308 ------------------
 .../mutations/hide-message-in-channel.ts      |  53 +++
 src/common/features/chats/mutations/index.ts  |   1 +
 src/common/features/chats/screens/chats.tsx   |  11 +-
 src/common/features/ui/dropdown/index.tsx     |  28 +-
 src/common/i18n/locales/en-US.json            |   4 +-
 src/common/img/svg.tsx                        |   2 +
 yarn.lock                                     | 127 ++++++++
 15 files changed, 325 insertions(+), 388 deletions(-)
 rename src/common/features/chats/components/{chats-channel-messages/index.tsx => chat-channel-messages.tsx} (53%)
 delete mode 100644 src/common/features/chats/components/chats-channel-messages/index.scss
 create mode 100644 src/common/features/chats/mutations/hide-message-in-channel.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 4a2b9b55515..d1e5456ac25 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -15,7 +15,6 @@ interface Context {
   receiverPubKey: string;
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
-  currentChannel: Channel | null;
   windowWidth: number;
   isActiveUserRemoved: boolean;
   setCurrentChannel: (channel: Channel) => void;
@@ -38,7 +37,6 @@ export const ChatContext = React.createContext<Context>({
   receiverPubKey: "",
   messageServiceInstance: null,
   hasUserJoinedChat: false,
-  currentChannel: null,
   windowWidth: 0,
   isActiveUserRemoved: false,
   setCurrentChannel: () => {},
@@ -127,7 +125,6 @@ export const ChatContextProvider = (props: Props) => {
           chatPrivKey,
           messageServiceInstance,
           hasUserJoinedChat,
-          currentChannel,
           windowWidth,
           isActiveUserRemoved,
           setCurrentChannel,
diff --git a/src/common/features/chats/components/chats-channel-messages/index.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
similarity index 53%
rename from src/common/features/chats/components/chats-channel-messages/index.tsx
rename to src/common/features/chats/components/chat-channel-messages.tsx
index 4ab376b2606..9ba1f64062f 100644
--- a/src/common/features/chats/components/chats-channel-messages/index.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,42 +1,48 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import mediumZoom, { Zoom } from "medium-zoom";
-import { Channel, PublicMessage } from "../../managers/message-manager-types";
-import { History } from "history";
-import { useMappedStore } from "../../../../store/use-mapped-store";
+import { Channel, PublicMessage } from "../managers/message-manager-types";
+import { useMappedStore } from "../../../store/use-mapped-store";
 import usePrevious from "react-use/lib/usePrevious";
-import { _t } from "../../../../i18n";
-import ChatsConfirmationModal from "../chats-confirmation-modal";
-import { error } from "../../../../components/feedback";
-import { Theme } from "../../../../store/global/types";
-import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
-import { ChatContext } from "../../chat-context-provider";
-
-import "./index.scss";
-import { ChatMessageItem } from "../chat-message-item";
-import { useKeysQuery } from "../../queries/keys-query";
+import { _t } from "../../../i18n";
+import ChatsConfirmationModal from "./chats-confirmation-modal";
+import { error } from "../../../components/feedback";
+import { Theme } from "../../../store/global/types";
+import { checkContiguousMessage, formatMessageDateAndDay } from "../utils";
+import { ChatContext } from "../chat-context-provider";
+import { ChatMessageItem } from "./chat-message-item";
+import { useKeysQuery } from "../queries/keys-query";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
+import { hideSvg, removeUserSvg } from "../../../img/svg";
+import { useHideMessageInChannel } from "../mutations";
+import { Spinner } from "@ui/spinner";
 
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
-  username: string;
-  from?: string;
-  history: History;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
 }
 
 let zoom: Zoom | null = null;
-export default function ChatsChannelMessages(props: Props) {
-  const { publicMessages, isScrollToBottom, isScrolled, currentChannel, scrollToBottom } = props;
+
+export function ChatsChannelMessages({
+  publicMessages,
+  isScrollToBottom,
+  isScrolled,
+  currentChannel,
+  scrollToBottom
+}: Props) {
   const { global, activeUser } = useMappedStore();
 
   const { messageServiceInstance, isActiveUserRemoved } = useContext(ChatContext);
-
   let prevGlobal = usePrevious(global);
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
+  // Message where users interacted with context menu
+  const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
+
   const [step, setStep] = useState(0);
   const [removedUserId, setRemovedUserID] = useState("");
   const [hiddenMsgId, setHiddenMsgId] = useState("");
@@ -44,6 +50,17 @@ export default function ChatsChannelMessages(props: Props) {
 
   const { publicKey } = useKeysQuery();
 
+  const { mutateAsync: hideMessage, isLoading: isHideMessageLoading } =
+    useHideMessageInChannel(currentChannel);
+
+  const messages = useMemo(
+    () =>
+      publicMessages.filter((m) =>
+        currentChannel.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
+      ),
+    [publicMessages, currentChannel]
+  );
+
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -52,13 +69,13 @@ export default function ChatsChannelMessages(props: Props) {
   }, [global.theme, activeUser]);
 
   useEffect(() => {
-    if (publicMessages.length !== 0) {
+    if (messages.length !== 0) {
       zoomInitializer();
     }
-    if (!isScrollToBottom && publicMessages.length !== 0 && !isScrolled) {
+    if (!isScrollToBottom && messages.length !== 0 && !isScrolled) {
       scrollToBottom && scrollToBottom();
     }
-  }, [publicMessages, isScrollToBottom, channelMessagesRef]);
+  }, [messages, isScrollToBottom, channelMessagesRef]);
 
   useEffect(() => {
     if (currentChannel) {
@@ -145,31 +162,55 @@ export default function ChatsChannelMessages(props: Props) {
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
-        {publicMessages.length !== 0 &&
-          publicMessages.map((pMsg, i) => {
-            const dayAndMonth = formatMessageDateAndDay(pMsg, i, publicMessages);
-
-            const isSameUserMessage = checkContiguousMessage(pMsg, i, publicMessages);
-
-            return (
-              <React.Fragment key={pMsg.id}>
-                {dayAndMonth && (
-                  <div className="custom-divider">
-                    <span className="flex justify-center items-center mt-3 custom-divider-text">
-                      {dayAndMonth}
-                    </span>
-                  </div>
-                )}
-
-                <ChatMessageItem
-                  currentChannel={currentChannel}
-                  type={pMsg.creator !== publicKey ? "receiver" : "sender"}
-                  message={pMsg}
-                  isSameUser={isSameUserMessage}
+        {messages.map((message, i) => (
+          <React.Fragment key={message.id}>
+            {formatMessageDateAndDay(message, i, messages) && (
+              <div className="custom-divider">
+                <span className="flex justify-center items-center mt-3 text-gray-600 dark:text-gray-400 my-4 text-sm">
+                  {formatMessageDateAndDay(message, i, messages)}
+                </span>
+              </div>
+            )}
+
+            <Dropdown
+              show={currentInteractingMessageId === message.id}
+              setShow={(v) =>
+                setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
+              }
+              closeOnClickOutside={false}
+            >
+              <ChatMessageItem
+                currentChannel={currentChannel}
+                type={message.creator !== publicKey ? "receiver" : "sender"}
+                message={message}
+                isSameUser={checkContiguousMessage(message, i, messages)}
+                onContextMenu={() => {
+                  if (currentChannel.communityName === activeUser?.username) {
+                    setCurrentInteractingMessageId(message.id);
+                  }
+                }}
+              />
+              <DropdownMenu
+                className="top-[70%]"
+                align={message.creator === publicKey ? "right" : "left"}
+              >
+                <DropdownItemWithIcon
+                  icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
+                  label={_t("chat.hide-message")}
+                  onClick={() =>
+                    hideMessage({
+                      hide:
+                        currentChannel.hiddenMessageIds?.some((id) => id === message.id) === false,
+                      messageId: message.id
+                    })
+                  }
                 />
-              </React.Fragment>
-            );
-          })}
+                <DropdownItemWithIcon icon={removeUserSvg} label={_t("chat.block-author")} />
+              </DropdownMenu>
+            </Dropdown>
+          </React.Fragment>
+        ))}
+        {/*TODO: CHeck it in messages query*/}
         {isActiveUserRemoved && (
           <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index fa8d2ddfef4..b97e6acb16f 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -77,7 +77,6 @@ export default function ChatsMessagesBox(props: Props) {
               <ChatsMessagesHeader username={username} history={props.history} />
               {inProgress && <LinearProgress />}
               <ChatsMessagesView
-                history={props.history}
                 username={username}
                 currentChannel={currentChannel!}
                 setInProgress={setInProgress}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index a0c49b1545a..d1c6d9c7503 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -15,10 +15,17 @@ interface Props {
   message: Message;
   isSameUser: boolean;
   currentChannel?: Channel;
+  onContextMenu?: () => void;
 }
 
 // TODO: Add resend
-export function ChatMessageItem({ type, message, isSameUser, currentChannel }: Props) {
+export function ChatMessageItem({
+  type,
+  message,
+  isSameUser,
+  currentChannel,
+  onContextMenu
+}: Props) {
   const { global } = useMappedStore();
 
   const isFailed = useMemo(() => message.sent === 2, [message]);
@@ -43,6 +50,13 @@ export function ChatMessageItem({ type, message, isSameUser, currentChannel }: P
           failed: isFailed,
           sending: isSending
         })}
+        onContextMenu={(e) => {
+          if (onContextMenu) {
+            e.stopPropagation();
+            e.preventDefault();
+            onContextMenu();
+          }
+        }}
       >
         {message.sent === 2 && (
           <Tooltip content={_t("g.resend")}>
@@ -59,7 +73,7 @@ export function ChatMessageItem({ type, message, isSameUser, currentChannel }: P
         )}
         <div
           className={classNameObject({
-            "text-sm p-2.5 rounded-b-2xl min-w-[4rem]": !isGif && !isImage,
+            "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
             "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
             "bg-gray-200 rounded-tr-2xl": type === "receiver",
             "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 9baf62fc03e..4d9212bfb4b 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -32,7 +32,7 @@ export default function ChatsMessagesHeader(props: Props) {
   };
 
   return (
-    <div className="flex sticky top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[60px]">
+    <div className="flex sticky z-[10] top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[60px]">
       <div className="flex items-center gap-4">
         <Button
           appearance="gray-link"
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 893ef51cc8f..dfe20e3e243 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,31 +1,23 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { History } from "history";
 import ChatsProfileBox from "./chat-profile-box";
-import ChatsChannelMessages from "./chats-channel-messages";
 import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
 import ChatsScroller from "./chats-scroller";
-import { CHATPAGE } from "./chat-popup/chat-constants";
 import { classNameObject } from "../../../helper/class-name-object";
 import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
 import { useMessagesQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
 import { useFetchPreviousMessages } from "../mutations";
+import { ChatsChannelMessages } from "./chat-channel-messages";
 
 interface Props {
   username: string;
-  history: History;
   currentChannel: Channel;
   setInProgress: (d: boolean) => void;
 }
 
-export default function ChatsMessagesView({
-  username,
-  currentChannel,
-  setInProgress,
-  history
-}: Props) {
+export default function ChatsMessagesView({ username, currentChannel, setInProgress }: Props) {
   const { data: messages } = useMessagesQuery(username.replace("@", ""));
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
@@ -127,12 +119,9 @@ export default function ChatsMessagesView({
         {communityName.length !== 0 ? (
           <>
             <ChatsChannelMessages
-              username={username}
-              history={history}
               publicMessages={messages as PublicMessage[]}
               currentChannel={currentChannel!}
               isScrollToBottom={isScrollToBottom}
-              from={CHATPAGE}
               isScrolled={isScrolled}
               scrollToBottom={scrollToBottom}
             />
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index c79f8f4ba7d..24c1f3078a2 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -1,12 +1,11 @@
 import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
-import ChatsChannelMessages from "../chats-channel-messages";
-import { history } from "../../../../store";
 import React, { useMemo } from "react";
 import { DirectMessage, PublicMessage } from "../../managers/message-manager-types";
 import { useChannelsQuery, useMessagesQuery } from "../../queries";
 import { useCommunityCache } from "../../../../core";
+import { ChatsChannelMessages } from "../chat-channel-messages";
 
 interface Props {
   username: string;
@@ -29,8 +28,6 @@ export function ChatPopupMessagesList({ username }: Props) {
       </Link>
       {!!currentChannel ? (
         <ChatsChannelMessages
-          history={history!}
-          username={username}
           publicMessages={messages as PublicMessage[]}
           currentChannel={currentChannel!}
           isScrollToBottom={false}
diff --git a/src/common/features/chats/components/chats-channel-messages/index.scss b/src/common/features/chats/components/chats-channel-messages/index.scss
deleted file mode 100644
index 4de1752e65c..00000000000
--- a/src/common/features/chats/components/chats-channel-messages/index.scss
+++ /dev/null
@@ -1,308 +0,0 @@
-@import "src/style/vars_mixins";
-
-.channel-messages {
-  padding-bottom: 15px;
-
-  .custom-divider {
-    .custom-divider-text {
-      margin-bottom: 1rem;
-      font-size: 14px;
-    }
-  }
-
-  .receiver {
-    display: flex;
-
-    .user-img {
-      padding: 18px 8px 8px 16px;
-    }
-
-    .community-user-img {
-      padding: 8px 8px 8px 16px;
-
-      .user-avatar.medium {
-        cursor: pointer;
-      }
-    }
-
-    .user-info {
-      padding-top: 8px;
-      width: 100%;
-
-      .user-msg-time {
-        margin: 0;
-        color: rgb(138, 141, 145);
-        font-weight: 400;
-        font-size: 12px;
-        margin-left: 4px;
-        margin-bottom: 2px;
-
-        .username-community {
-          margin-right: 8px;
-        }
-      }
-
-      .receiver-message {
-        display: flex;
-
-        .receiver-message-wrapper {
-          box-sizing: content-box;
-          border-radius: 0 10px 10px 10px;
-          max-width: 70% !important;
-          word-wrap: break-word;
-          @include themify(day) {
-            background: #e4e6eb;
-          }
-          @include themify(night) {
-            background: #cee2ff;
-          }
-
-          .receiver-message-content {
-            max-width: 100%;
-            color: #050505;
-            display: inline-block;
-            padding: 10px;
-            border-radius: 0px 10px 10px 0px;
-          }
-
-          .receiver-msg-time {
-            @include themify(day) {
-              color: rgb(138, 141, 145);
-            }
-            @include themify(night) {
-              @apply text-gray-charcoal;
-            }
-
-            font-size: 10px;
-            display: flex;
-            justify-content: flex-end;
-            margin: -5px 7px 3px 45px;
-          }
-
-          &.gif {
-            background: none;
-            padding: 0;
-
-            img {
-              max-width: 100%;
-            }
-          }
-
-          &.chat-image {
-            background: none;
-            padding: 0;
-
-            img {
-              max-width: 100%;
-            }
-          }
-
-          &.gif,
-          &.chat-image {
-            .receiver-message-wrapper {
-              background: none;
-            }
-
-            .receiver-message-content {
-              padding: 0;
-
-              img {
-                padding-bottom: 10px;
-              }
-            }
-
-            .receiver-msg-time {
-              @include themify(day) {
-                color: rgb(138, 141, 145);
-              }
-              @include themify(night) {
-                @apply text-light-300;
-              }
-            }
-          }
-        }
-      }
-
-      &.same-user-msg {
-        margin-left: 4rem;
-        padding-top: 1px;
-
-        .receiver-message-wrapper {
-          border-radius: 10px;
-        }
-      }
-
-      &.date-changed {
-        margin-left: 0;
-        border-radius: 0px 10px 10px 0px;
-      }
-    }
-  }
-
-  .sender {
-    margin: 1px;
-
-    .sender-message {
-      margin-left: auto;
-
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 17px;
-
-      .resend-svg {
-        margin: 5px 15px 0 0;
-        cursor: pointer;
-
-        svg {
-          @include themify(day) {
-            @apply fill-gray-600;
-          }
-          @include themify(night) {
-            @apply fill-white;
-          }
-        }
-      }
-
-      .failed-svg {
-        margin: 8px 0 0 5px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-          @apply fill-red;
-        }
-      }
-
-      &.sending {
-        margin-right: 5px;
-      }
-
-      &.failed {
-        margin-right: 7px;
-      }
-
-      .sender-message-wrapper {
-        box-sizing: content-box;
-        border-radius: 10px 0px 10px 10px;
-        max-width: 300px;
-        word-wrap: break-word;
-
-        @include themify(day) {
-          background-color: rgb(0, 132, 255);
-          @apply text-white;
-        }
-        @include themify(night) {
-          @apply text-white bg-gray-charcoal;
-        }
-
-        &.gif {
-          background: none;
-
-          padding: 0;
-
-          img {
-            max-width: 100%;
-          }
-        }
-
-        &.chat-image {
-          background: none;
-          padding: 0;
-
-          img {
-            max-width: 100%;
-          }
-        }
-
-        &.gif,
-        &.chat-image {
-          .sender-message-time {
-            color: rgb(138, 141, 145);
-          }
-
-          .sender-message-content {
-            padding: 10px 0 0 5px;
-
-            img {
-              padding-bottom: 10px;
-            }
-          }
-        }
-
-        .sender-message-content {
-          max-width: 100%;
-          margin-bottom: 0;
-          @apply text-gray-charcoal;
-          font-size: 16px;
-          font-weight: 400;
-          padding: 8px 8px 8px 12px;
-          @apply text-white;
-          a {
-            text-decoration: underline;
-            color: white;
-          }
-        }
-
-        .sender-message-time {
-          @apply text-white;
-          margin-bottom: 3px;
-          font-size: 10px;
-          display: flex;
-          justify-content: flex-end;
-          margin-right: 7px;
-          margin-left: 45px;
-          margin-top: -5px;
-        }
-
-        &.same-user-message {
-          border-radius: 10px;
-        }
-      }
-    }
-  }
-
-  .hide-msg {
-    margin-right: 15px;
-    margin-top: 5px;
-
-    svg {
-      height: 14px;
-      width: 14px;
-    }
-
-    .hide-msg-svg {
-      cursor: pointer;
-      margin-bottom: 0;
-    }
-
-    &.receiver {
-      margin-top: 5px;
-      margin-left: 10px;
-    }
-  }
-}
-
-.profile-box {
-  padding: 15px;
-
-  .profile-box-content {
-    .user-avatar.large {
-      margin-bottom: 20px;
-    }
-
-    .profile-name {
-      margin: 5px 0 10px 0;
-      font-size: 18px;
-      font-weight: 800;
-    }
-
-    .profile-box-buttons {
-      padding: 0 5px;
-    }
-  }
-}
-
-.medium-zoom-overlay,
-.medium-zoom-image--opened {
-  z-index: 999;
-}
diff --git a/src/common/features/chats/mutations/hide-message-in-channel.ts b/src/common/features/chats/mutations/hide-message-in-channel.ts
new file mode 100644
index 00000000000..8721692ac08
--- /dev/null
+++ b/src/common/features/chats/mutations/hide-message-in-channel.ts
@@ -0,0 +1,53 @@
+import { Channel } from "../managers/message-manager-types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUpdateCommunityChannel } from "./update-community-channel";
+import { ChatQueries, useChannelsQuery } from "../queries";
+
+interface Payload {
+  hide: boolean;
+  messageId: string;
+}
+
+export function useHideMessageInChannel(channel?: Channel) {
+  const queryClient = useQueryClient();
+
+  const { data: channels } = useChannelsQuery();
+  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
+
+  return useMutation(
+    ["chats/hide-message-in-channel", channel?.name],
+    async ({ hide, messageId }: Payload) => {
+      if (!channel) {
+        console.error("[Chat][Nostr] – trying to update not existing channel");
+        return;
+      }
+
+      const newUpdatedChannel: Channel = { ...channel };
+
+      if (hide) {
+        newUpdatedChannel.hiddenMessageIds = [
+          ...(newUpdatedChannel.hiddenMessageIds ?? []),
+          messageId
+        ];
+      } else {
+        newUpdatedChannel.hiddenMessageIds = newUpdatedChannel.hiddenMessageIds?.filter(
+          (id) => id === messageId
+        );
+      }
+
+      await updateChannel(newUpdatedChannel);
+      return newUpdatedChannel;
+    },
+    {
+      onSuccess: (channel) => {
+        const channelsTemp = [...(channels ?? [])];
+        const index = channelsTemp.findIndex((c) => c.id === channel?.id);
+        if (index > -1 && channel) {
+          channelsTemp[index] = channel;
+          queryClient.setQueryData([ChatQueries.MESSAGES, channel?.communityName], []);
+          queryClient.invalidateQueries([ChatQueries.MESSAGES, channel?.communityName]);
+        }
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index d66abbecf55..8d1f44b94ff 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -10,3 +10,4 @@ export * from "./update-channel-moderator";
 export * from "./fetch-previous-messages";
 export * from "./update-channel-blocked-users";
 export * from "./import-chat-by-key";
+export * from "./hide-message-in-channel";
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index c87717e1e99..7435ec27f64 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -43,18 +43,21 @@ export const Chats = (props: Props) => {
           channel.communityName === props.match.params.username &&
           !leftCommunityChannelsIds?.includes(channel.name)
       ),
-    [channels, leftCommunityChannelsIds]
+    [channels, leftCommunityChannelsIds, props.match.params.username]
   );
 
-  const isReady = useMemo(() => !!(activeUser && publicKey && privateKey), [publicKey, privateKey]);
+  const isReady = useMemo(
+    () => !!(activeUser && publicKey && privateKey),
+    [publicKey, privateKey, activeUser]
+  );
   const isShowManageKey = useMemo(() => isReady && revealPrivKey, [isReady, revealPrivKey]);
   const isShowChatRoom = useMemo(
     () => isReady && !showSpinner && (!!receiverPubKey || isChannel) && !revealPrivKey,
-    [isReady, showSpinner, receiverPubKey, revealPrivKey]
+    [isReady, showSpinner, receiverPubKey, revealPrivKey, isChannel]
   );
   const isShowDefaultScreen = useMemo(
     () => isReady && !receiverPubKey && !isChannel && !revealPrivKey && !showSpinner,
-    [isReady, receiverPubKey, revealPrivKey, showSpinner]
+    [isReady, receiverPubKey, revealPrivKey, showSpinner, isChannel]
   );
   const isShowImportChats = useMemo(() => !isReady && !showSpinner, [isReady, showSpinner]);
 
diff --git a/src/common/features/ui/dropdown/index.tsx b/src/common/features/ui/dropdown/index.tsx
index b15688e8322..56a907eac53 100644
--- a/src/common/features/ui/dropdown/index.tsx
+++ b/src/common/features/ui/dropdown/index.tsx
@@ -2,21 +2,41 @@ import React, { HTMLProps, useRef, useState } from "react";
 import { DropdownContext } from "@ui/dropdown/dropdown-context";
 import { classNameObject } from "../../../helper/class-name-object";
 import useClickAway from "react-use/lib/useClickAway";
+import { useFilteredProps } from "../../../util/props-filter";
 
 export * from "./dropdown-item";
 export * from "./dropdown-menu";
 export * from "./dropdown-toggle";
 
-export function Dropdown(props: HTMLProps<HTMLDivElement>) {
+interface Props {
+  show?: boolean;
+  setShow?: (v: boolean) => void;
+  closeOnClickOutside?: boolean;
+}
+
+export function Dropdown(props: HTMLProps<HTMLDivElement> & Props) {
   const [show, setShow] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
 
-  useClickAway(ref, () => setShow(false));
+  useClickAway(ref, () => {
+    if (props.closeOnClickOutside ?? true) {
+      setShow(false);
+    }
+  });
+  const nativeProps = useFilteredProps(props, ["show", "setShow", "closeOnClickOutside"]);
 
   return (
-    <DropdownContext.Provider value={{ show, setShow }}>
+    <DropdownContext.Provider
+      value={{
+        show: props.show ?? show,
+        setShow: (v) => {
+          setShow(v);
+          props.setShow?.(v);
+        }
+      }}
+    >
       <div
-        {...props}
+        {...nativeProps}
         ref={ref}
         className={classNameObject({
           relative: true,
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 66fd284c0fb..78911f89cf5 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1881,7 +1881,9 @@
     "extended-view": "Extended View",
     "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting.",
     "invalid-private-key": "Invalid private key",
-    "enter-username": "Enter temporary username"
+    "enter-username": "Enter temporary username",
+    "hide-message": "Hide message",
+    "block-author": "Block author"
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index dc39c693c6f..547c7e1f36e 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2032,6 +2032,8 @@ export const hideSvg = (
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
+    width={16}
+    height={16}
   >
     <path
       strokeLinecap="round"
diff --git a/yarn.lock b/yarn.lock
index 8ca1b918ba3..f658a523346 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1262,6 +1262,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.2":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@@ -1655,6 +1662,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^29.4.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -1781,6 +1797,14 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.18":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -1820,6 +1844,33 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@noble/ciphers@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-0.2.0.tgz#a12cda60f3cf1ab5d7c77068c3711d2366649ed7"
+  integrity sha512-6YBxJDAapHSdd3bLDv6x2wRPwq4QFMUaB3HvljNBUTThDd12eSm7/3F+2lnfzx2jvM+S6Nsy0jEt9QbPqSwqRw==
+
+"@noble/curves@1.1.0", "@noble/curves@~1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d"
+  integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==
+  dependencies:
+    "@noble/hashes" "1.3.1"
+
+"@noble/hashes@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
+  integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
+
+"@noble/secp256k1@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1910,6 +1961,33 @@
   resolved "https://registry.yarnpkg.com/@redis/time-series/-/time-series-1.0.4.tgz#af85eb080f6934580e4d3b58046026b6c2b18717"
   integrity sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==
 
+"@scure/base@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@scure/base@~1.1.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.3.tgz#8584115565228290a6c6c4961973e0903bb3df2f"
+  integrity sha512-/+SgoRjLq7Xlf0CWuLHq2LUZeL/w65kfzAPG5NH9pcmBhs+nunQTn4gvdwgMTIXnt9b2C/1SeL2XiysZEyIC9Q==
+
+"@scure/bip32@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.1.tgz#7248aea723667f98160f593d621c47e208ccbb10"
+  integrity sha512-osvveYtyzdEVbt3OfwwXFr4P2iVBL5u1Q3q4ONBfDY/UpOuXmOlbgwc1xECEboY8wIays8Yt6onaWMUdUbfl0A==
+  dependencies:
+    "@noble/curves" "~1.1.0"
+    "@noble/hashes" "~1.3.1"
+    "@scure/base" "~1.1.0"
+
+"@scure/bip39@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.1.tgz#5cee8978656b272a917b7871c981e0541ad6ac2a"
+  integrity sha512-Z3/Fsz1yr904dduJD0NpiyRHhRYHdcnyh73FZWiV+/qhWi83wNJ3NWolYqCEN+ZWsUz2TWwajJggcRE9r1zUYg==
+  dependencies:
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -4781,6 +4859,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -6230,6 +6315,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -7275,6 +7365,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-ws@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
+  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -8830,6 +8925,28 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nostr-relaypool@^0.6.28:
+  version "0.6.28"
+  resolved "https://registry.yarnpkg.com/nostr-relaypool/-/nostr-relaypool-0.6.28.tgz#50f1dc21c11bda1fca2a6d785d78fd6f6ead9a57"
+  integrity sha512-kyLChBunf6IB2O3MSPHBe9iSokBGyqZHvAJXZ5+eh9C4znAu7iY8L/yh0V4Ta/P9TtzDna3QTEgFWVan4m0vBA==
+  dependencies:
+    "@jest/source-map" "^29.4.3"
+    isomorphic-ws "^5.0.0"
+    nostr-tools "^1.10.0"
+    safe-stable-stringify "^2.4.2"
+
+nostr-tools@^1.10.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.17.0.tgz#b6f62e32fedfd9e68ec0a7ce57f74c44fc768e8c"
+  integrity sha512-LZmR8GEWKZeElbFV5Xte75dOeE9EFUW/QLI1Ncn3JKn0kFddDKEfBbFN8Mu4TMs+L4HR/WTPha2l+PPuRnJcMw==
+  dependencies:
+    "@noble/ciphers" "0.2.0"
+    "@noble/curves" "1.1.0"
+    "@noble/hashes" "1.3.1"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.1"
+    "@scure/bip39" "1.2.1"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10778,6 +10895,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -11145,6 +11267,11 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
+safe-stable-stringify@^2.4.2:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"

From 614b7cb6e4d581da6f8f8c47dfac54d07534e2ea Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 9 Nov 2023 21:41:33 +0600
Subject: [PATCH 125/179] Tailwind migration: fixed message author blocking in
 a channel

---
 .../components/chat-channel-messages.tsx      | 122 +++---------------
 .../mutations/hide-message-in-channel.ts      |  20 +--
 src/common/i18n/locales/en-US.json            |   3 +-
 3 files changed, 25 insertions(+), 120 deletions(-)

diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 9ba1f64062f..585377ab3fc 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,11 +1,9 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import mediumZoom, { Zoom } from "medium-zoom";
+import { Zoom } from "medium-zoom";
 import { Channel, PublicMessage } from "../managers/message-manager-types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
-import ChatsConfirmationModal from "./chats-confirmation-modal";
-import { error } from "../../../components/feedback";
 import { Theme } from "../../../store/global/types";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../utils";
 import { ChatContext } from "../chat-context-provider";
@@ -13,7 +11,7 @@ import { ChatMessageItem } from "./chat-message-item";
 import { useKeysQuery } from "../queries/keys-query";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
 import { hideSvg, removeUserSvg } from "../../../img/svg";
-import { useHideMessageInChannel } from "../mutations";
+import { useHideMessageInChannel, useUpdateChannelBlockedUsers } from "../mutations";
 import { Spinner } from "@ui/spinner";
 
 interface Props {
@@ -35,7 +33,7 @@ export function ChatsChannelMessages({
 }: Props) {
   const { global, activeUser } = useMappedStore();
 
-  const { messageServiceInstance, isActiveUserRemoved } = useContext(ChatContext);
+  const { isActiveUserRemoved } = useContext(ChatContext);
   let prevGlobal = usePrevious(global);
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
@@ -43,21 +41,22 @@ export function ChatsChannelMessages({
   // Message where users interacted with context menu
   const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
 
-  const [step, setStep] = useState(0);
-  const [removedUserId, setRemovedUserID] = useState("");
-  const [hiddenMsgId, setHiddenMsgId] = useState("");
-  const [resendMessage, setResendMessage] = useState<PublicMessage>();
-
   const { publicKey } = useKeysQuery();
 
+  const { mutateAsync: updateBlockedUsers, isLoading: isUsersBlockingLoading } =
+    useUpdateChannelBlockedUsers(currentChannel);
   const { mutateAsync: hideMessage, isLoading: isHideMessageLoading } =
     useHideMessageInChannel(currentChannel);
 
   const messages = useMemo(
     () =>
-      publicMessages.filter((m) =>
-        currentChannel.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
-      ),
+      publicMessages
+        .filter((m) =>
+          currentChannel.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
+        )
+        .filter((m) =>
+          currentChannel.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
+        ),
     [publicMessages, currentChannel]
   );
 
@@ -69,26 +68,11 @@ export function ChatsChannelMessages({
   }, [global.theme, activeUser]);
 
   useEffect(() => {
-    if (messages.length !== 0) {
-      zoomInitializer();
-    }
     if (!isScrollToBottom && messages.length !== 0 && !isScrolled) {
       scrollToBottom && scrollToBottom();
     }
   }, [messages, isScrollToBottom, channelMessagesRef]);
 
-  useEffect(() => {
-    if (currentChannel) {
-      zoomInitializer();
-    }
-  }, [currentChannel]);
-
-  const zoomInitializer = () => {
-    const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
-    zoom = mediumZoom(elements);
-    setBackground();
-  };
-
   const setBackground = () => {
     if (global.theme === Theme.day) {
       zoom?.update({ background: "#ffffff" });
@@ -97,68 +81,6 @@ export function ChatsChannelMessages({
     }
   };
 
-  const handleConfirm = () => {
-    let updatedMetaData = {
-      name: currentChannel?.name!,
-      about: currentChannel?.about!,
-      picture: "",
-      communityName: currentChannel?.communityName!,
-      communityModerators: currentChannel?.communityModerators,
-      hiddenMessageIds: currentChannel?.hiddenMessageIds,
-      removedUserIds: currentChannel?.removedUserIds
-    };
-
-    switch (step) {
-      case 1:
-        const updatedHiddenMessages = [...(currentChannel?.hiddenMessageIds || []), hiddenMsgId!];
-        updatedMetaData.hiddenMessageIds = updatedHiddenMessages;
-        break;
-      case 2:
-        const updatedRemovedUsers = [...(currentChannel?.removedUserIds || []), removedUserId!];
-        updatedMetaData.removedUserIds = updatedRemovedUsers;
-
-        const isRemovedUserModerator = currentChannel?.communityModerators?.find(
-          (x) => x.pubkey === removedUserId
-        );
-        const isModerator = !!isRemovedUserModerator;
-        if (isModerator) {
-          const NewUpdatedRoles = currentChannel?.communityModerators?.filter(
-            (item) => item.pubkey !== removedUserId
-          );
-          updatedMetaData.communityModerators = NewUpdatedRoles;
-        }
-        break;
-      case 3:
-        const newUpdatedRemovedUsers =
-          currentChannel &&
-          currentChannel?.removedUserIds!.filter((item) => item !== removedUserId);
-
-        updatedMetaData.removedUserIds = newUpdatedRemovedUsers;
-        break;
-      case 4:
-        if (resendMessage) {
-          // // deletePublicMessage(currentChannel.id, resendMessage?.id);
-          // messageServiceInstance?.sendPublicMessage(
-          //   currentChannel!,
-          //   resendMessage?.content,
-          //   [],
-          //   ""
-          // );
-        }
-        break;
-      default:
-        break;
-    }
-
-    try {
-      messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
-      // currentChannelSetter({ ...currentChannel!, ...updatedMetaData });
-      setStep(0);
-    } catch (err) {
-      error(_t("chat.error-updating-community"));
-    }
-  };
-
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -205,7 +127,15 @@ export function ChatsChannelMessages({
                     })
                   }
                 />
-                <DropdownItemWithIcon icon={removeUserSvg} label={_t("chat.block-author")} />
+                <DropdownItemWithIcon
+                  icon={
+                    isUsersBlockingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
+                  }
+                  label={_t("chat.block-author")}
+                  onClick={() =>
+                    updateBlockedUsers([...(currentChannel.removedUserIds ?? []), message.creator])
+                  }
+                />
               </DropdownMenu>
             </Dropdown>
           </React.Fragment>
@@ -217,16 +147,6 @@ export function ChatsChannelMessages({
           </span>
         )}
       </div>
-      {step !== 0 && (
-        <ChatsConfirmationModal
-          actionType={"Confirmation"}
-          content={"Are you sure?"}
-          onClose={() => {
-            setStep(0);
-          }}
-          onConfirm={handleConfirm}
-        />
-      )}
     </>
   );
 }
diff --git a/src/common/features/chats/mutations/hide-message-in-channel.ts b/src/common/features/chats/mutations/hide-message-in-channel.ts
index 8721692ac08..6afd08c1d1c 100644
--- a/src/common/features/chats/mutations/hide-message-in-channel.ts
+++ b/src/common/features/chats/mutations/hide-message-in-channel.ts
@@ -1,7 +1,6 @@
 import { Channel } from "../managers/message-manager-types";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useUpdateCommunityChannel } from "./update-community-channel";
-import { ChatQueries, useChannelsQuery } from "../queries";
 
 interface Payload {
   hide: boolean;
@@ -9,9 +8,6 @@ interface Payload {
 }
 
 export function useHideMessageInChannel(channel?: Channel) {
-  const queryClient = useQueryClient();
-
-  const { data: channels } = useChannelsQuery();
   const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
 
   return useMutation(
@@ -35,19 +31,7 @@ export function useHideMessageInChannel(channel?: Channel) {
         );
       }
 
-      await updateChannel(newUpdatedChannel);
-      return newUpdatedChannel;
-    },
-    {
-      onSuccess: (channel) => {
-        const channelsTemp = [...(channels ?? [])];
-        const index = channelsTemp.findIndex((c) => c.id === channel?.id);
-        if (index > -1 && channel) {
-          channelsTemp[index] = channel;
-          queryClient.setQueryData([ChatQueries.MESSAGES, channel?.communityName], []);
-          queryClient.invalidateQueries([ChatQueries.MESSAGES, channel?.communityName]);
-        }
-      }
+      return updateChannel(newUpdatedChannel);
     }
   );
 }
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 78911f89cf5..6301a3a70fe 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1883,7 +1883,8 @@
     "invalid-private-key": "Invalid private key",
     "enter-username": "Enter temporary username",
     "hide-message": "Hide message",
-    "block-author": "Block author"
+    "block-author": "Block author",
+    "unblock-author": "Unblock author"
   },
   "add-image": {
     "title": "Add Image",

From eb861e660526a25d0f1ddff22fef51808c0e64d6 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 10 Nov 2023 13:15:14 +0600
Subject: [PATCH 126/179] Chats: added blocked users modal

---
 .../components/community-cover/index.tsx      |   2 +-
 .../features/chats/chat-context-provider.tsx  |  18 +-
 .../components/chat-channel-messages.tsx      |   1 -
 .../chat-message-channel-item-extension.tsx   |  11 +-
 .../chat-popup-contacts-and-channels.tsx      |   5 +-
 .../chat-popup/chat-popup-header.tsx          |   6 +-
 .../blocked-users-modal.tsx                   |  94 +++++
 .../edit-roles-modal.tsx                      |  15 +-
 .../chats-community-actions/index.scss        |  19 -
 .../chats-community-actions/index.tsx         | 362 +++---------------
 .../chats-confirmation-modal/index.tsx        |  35 +-
 .../components/join-community-chat-btn.tsx    |  38 +-
 .../chats/mutations/add-community-channel.ts  |   8 +-
 .../chats/mutations/import-chat-by-key.ts     |   4 +-
 .../features/chats/mutations/join-chat.ts     |   6 +-
 .../nostr/queries/get-user-profile-query.ts   |  15 +
 .../features/chats/queries/messages-query.ts  |   2 +
 .../features/ui/dropdown/dropdown-item.tsx    |   2 +-
 src/common/features/ui/dropdown/index.tsx     |   1 +
 src/common/i18n/locales/en-US.json            |   3 +-
 20 files changed, 248 insertions(+), 399 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
 delete mode 100644 src/common/features/chats/components/chats-community-actions/index.scss

diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 856d20b6a5f..5f1fbda55f9 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -195,7 +195,7 @@ export class CommunityCover extends Component<Props> {
           )}
         </div>
 
-        <div className="controls-holder">
+        <div className="controls-holder flex gap-3 px-3">
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
 
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index d1e5456ac25..a4d65449815 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Channel, Keys } from "./managers/message-manager-types";
+import { Keys } from "./managers/message-manager-types";
 import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
-import { NostrKeysType } from "./types";
 import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
 import { useJoinChat } from "./mutations";
@@ -16,8 +15,8 @@ interface Context {
   messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   windowWidth: number;
+  // TODO: it means is active usre removed from channe;
   isActiveUserRemoved: boolean;
-  setCurrentChannel: (channel: Channel) => void;
   setRevealPrivKey: (d: boolean) => void;
   setShowSpinner: (d: boolean) => void;
   setChatPrivKey: (key: string) => void;
@@ -39,7 +38,6 @@ export const ChatContext = React.createContext<Context>({
   hasUserJoinedChat: false,
   windowWidth: 0,
   isActiveUserRemoved: false,
-  setCurrentChannel: () => {},
   setRevealPrivKey: () => {},
   setShowSpinner: () => {},
   setChatPrivKey: () => {},
@@ -49,19 +47,16 @@ export const ChatContext = React.createContext<Context>({
 });
 
 export const ChatContextProvider = (props: Props) => {
-  // TODO: USE QUERY INTEAD
-  const [activeUserKeys, setActiveUserKeys] = useState<NostrKeysType>({ pub: "", priv: "" });
   const [showSpinner, setShowSpinner] = useState(true);
   const [chatPrivKey, setChatPrivKey] = useState("");
   const [revealPrivKey, setRevealPrivKey] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
   const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | null>(null);
   const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
-  const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
   const [windowWidth, setWindowWidth] = useState(0);
   const [isActiveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
-  const { privateKey, publicKey, refetch } = useKeysQuery();
+  const { privateKey, publicKey } = useKeysQuery();
 
   useJoinChat(() => {
     setHasUserJoinedChat(true);
@@ -83,12 +78,6 @@ export const ChatContextProvider = (props: Props) => {
     }
   }, [privateKey]);
 
-  useEffect(() => {
-    if (currentChannel && currentChannel.removedUserIds) {
-      setIsActiveUserRemoved(currentChannel.removedUserIds?.includes(activeUserKeys?.pub!));
-    }
-  }, [currentChannel]);
-
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
@@ -127,7 +116,6 @@ export const ChatContextProvider = (props: Props) => {
           hasUserJoinedChat,
           windowWidth,
           isActiveUserRemoved,
-          setCurrentChannel,
           setRevealPrivKey,
           setShowSpinner,
           setChatPrivKey,
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 585377ab3fc..06ad7136bcc 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -99,7 +99,6 @@ export function ChatsChannelMessages({
               setShow={(v) =>
                 setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
               }
-              closeOnClickOutside={false}
             >
               <ChatMessageItem
                 currentChannel={currentChannel}
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
index ecb8d4f4164..9e576edd882 100644
--- a/src/common/features/chats/components/chat-message-channel-item-extension.tsx
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -7,7 +7,7 @@ import ChatInput from "./chat-input";
 import { Channel } from "../managers/message-manager-types";
 import UserAvatar from "../../../components/user-avatar";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { COMMUNITYADMINROLES, PRIVILEGEDROLES } from "./chat-popup/chat-constants";
+import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
 import { useUpdateChannelBlockedUsers } from "../mutations";
 import { useNostrGetUserProfileQuery } from "../nostr/queries";
 
@@ -39,13 +39,6 @@ export function ChatMessageChannelItemExtension({
         .map((user) => user.name) ?? [],
     [currentChannel]
   );
-  const privilegedUsers = useMemo(
-    () =>
-      currentChannel?.communityModerators
-        ?.filter((user) => PRIVILEGEDROLES.includes(user.role))
-        .map((user) => user.name) ?? [],
-    [currentChannel]
-  );
 
   const { mutateAsync: updateBlockedUsers } = useUpdateChannelBlockedUsers(currentChannel);
 
@@ -58,7 +51,7 @@ export function ChatMessageChannelItemExtension({
     );
 
   return (
-    <Popover id={`profile-popover`} className="profile-popover">
+    <Popover id="profile-popover" className="profile-popover">
       <UserAvatar username={profile?.name ?? ""} />
       {children}
       <PopoverContent>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index ed334f393a4..3e696b77d50 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -69,9 +69,8 @@ export function ChatPopupContactsAndChannels({
       ) : !privateKey ? (
         <ChatsImport />
       ) : showSpinner ? (
-        <div className="no-chat">
-          <Spinner />
-          <p className="mt-3 ml-2">Loading...</p>
+        <div className="flex items-center justify-center h-full">
+          <Spinner className="w-4 h-4" />
         </div>
       ) : (
         <>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index 422a0e55356..5d1c8c3fe03 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -114,11 +114,7 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        {isCommunity && (
-          <div className="community-menu">
-            <ChatsCommunityDropdownMenu history={history!} username={communityName} />
-          </div>
-        )}
+        {isCommunity && <ChatsCommunityDropdownMenu history={history!} username={communityName} />}
         {!isCommunity && !isCurrentUser && privateKey && (
           <div className="simple-menu" onClick={() => setExpanded(true)}>
             <ChatsDropdownMenu
diff --git a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
new file mode 100644
index 00000000000..3bcc5b6c7a7
--- /dev/null
+++ b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
@@ -0,0 +1,94 @@
+import { _t } from "../../../../i18n";
+import React, { useMemo } from "react";
+import { useChannelsQuery } from "../../queries";
+import UserAvatar from "../../../../components/user-avatar";
+import { useUpdateChannelBlockedUsers } from "../../mutations";
+import { Table, Td, Th, Tr } from "@ui/table";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { Button } from "@ui/button";
+import { useNostrGetUserProfilesQuery } from "../../nostr/queries";
+
+interface Props {
+  username: string;
+  show: boolean;
+  setShow: (v: boolean) => void;
+}
+
+export function BlockedUsersModal({ username, setShow, show }: Props) {
+  const { data: channels } = useChannelsQuery();
+
+  const currentChannel = useMemo(
+    () => channels?.find((c) => c.communityName === username),
+    [channels]
+  );
+
+  const { data: profiles } = useNostrGetUserProfilesQuery(currentChannel?.removedUserIds ?? []);
+
+  const { mutateAsync: updateBlockedUsers, isLoading: isBlockedUsersLoading } =
+    useUpdateChannelBlockedUsers(currentChannel!!);
+
+  return (
+    <Modal centered={true} show={show} onHide={() => setShow(false)}>
+      <ModalHeader closeButton={true}>{_t("chat.edit-community-roles")}</ModalHeader>
+      <ModalBody>
+        <div className="flex flex-col mb-6 gap-6">
+          {currentChannel?.communityModerators?.length !== 0 ? (
+            <Table className="overflow-x-auto" full={true}>
+              <thead>
+                <Tr>
+                  <Th>{_t("g.username")}</Th>
+                  <Th>{_t("g.status")}</Th>
+                </Tr>
+              </thead>
+              <tbody>
+                {currentChannel?.removedUserIds!.map((user, i) => {
+                  return (
+                    <Tr key={i}>
+                      <Td>
+                        <div className="flex">
+                          <UserAvatar
+                            username={
+                              profiles?.find((profile) => profile.creator === user)?.name ?? ""
+                            }
+                            size="medium"
+                          />{" "}
+                          <span className="mt-2 ml-2 username">
+                            @{profiles?.find((profile) => profile.creator === user)}
+                          </span>
+                        </div>
+                      </Td>
+                      <Td>
+                        <Button
+                          size="sm"
+                          outline={!!currentChannel?.removedUserIds?.includes(user)}
+                          disabled={isBlockedUsersLoading}
+                          onClick={() => {
+                            if (currentChannel?.removedUserIds?.includes(user)) {
+                              updateBlockedUsers(
+                                currentChannel?.removedUserIds?.filter((id) => id !== user)
+                              );
+                            } else {
+                              updateBlockedUsers([...(currentChannel?.removedUserIds ?? []), user]);
+                            }
+                          }}
+                        >
+                          {currentChannel?.removedUserIds?.includes(user)
+                            ? _t("chat.unblock")
+                            : _t("chat.block")}
+                        </Button>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </tbody>
+            </Table>
+          ) : (
+            <div className="text-center">
+              <p>{_t("chat.no-admin")}</p>
+            </div>
+          )}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+}
diff --git a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
index cbb0613ccad..c21b1f4c43c 100644
--- a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
@@ -15,14 +15,17 @@ import { useMappedStore } from "../../../../store/use-mapped-store";
 import { useUpdateChannelModerator } from "../../mutations";
 import { Table, Td, Th, Tr } from "@ui/table";
 import { Spinner } from "@ui/spinner";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 
 interface Props {
   username: string;
+  show: boolean;
+  setShow: (v: boolean) => void;
 }
 
 const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
 
-export function EditRolesModal({ username }: Props) {
+export function EditRolesModal({ username, setShow, show }: Props) {
   const { activeUser } = useMappedStore();
   const { data: channels } = useChannelsQuery();
 
@@ -94,10 +97,10 @@ export function EditRolesModal({ username }: Props) {
   );
 
   return (
-    <>
-      <h4 className="pb-6">{_t("chat.edit-community-roles")}</h4>
+    <Modal centered={true} show={show} onHide={() => setShow(false)}>
+      <ModalHeader closeButton={true}>{_t("chat.edit-community-roles")}</ModalHeader>
       {inProgress && <LinearProgress />}
-      <div>
+      <ModalBody>
         <div className={`flex flex-col mb-6 gap-6 ${inProgress ? "in-progress" : ""}`}>
           <div className="grid grid-cols-12">
             <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.username")}</div>
@@ -205,7 +208,7 @@ export function EditRolesModal({ username }: Props) {
             <p>{_t("chat.no-admin")}</p>
           </div>
         )}
-      </div>
-    </>
+      </ModalBody>
+    </Modal>
   );
 }
diff --git a/src/common/features/chats/components/chats-community-actions/index.scss b/src/common/features/chats/components/chats-community-actions/index.scss
deleted file mode 100644
index fd409af6790..00000000000
--- a/src/common/features/chats/components/chats-community-actions/index.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "src/style/vars_mixins";
-
-.chats-dialog {
-  .chat-modals-body {
-    .community-chat-role-edit-dialog-content {
-      margin-top: 2rem;
-    }
-
-    .success-dialog-header {
-      .success-dialog-titles {
-        margin-top: 10px;
-      }
-    }
-
-    .success-dialog-body {
-      padding: 10px 20px 20px 10px;
-    }
-  }
-}
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index 8d9f773e198..4829f71a622 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -1,22 +1,16 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../../../components/dropdown";
-
 import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../../img/svg";
 import { _t } from "../../../../i18n";
-import { DropDownStyle, LEAVECOMMUNITY, UNBLOCKUSER } from "../chat-popup/chat-constants";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import { error, success } from "../../../../components/feedback";
-import UserAvatar from "../../../../components/user-avatar";
+import { success } from "../../../../components/feedback";
 import { copyToClipboard } from "../../utils";
-import { ChatContext } from "../../chat-context-provider";
-
-import "./index.scss";
-import { Button } from "@ui/button";
-import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { useLeaveCommunityChannel } from "../../mutations";
-import { EditRolesModal } from "./edit-roles-modal";
 import { useChannelsQuery } from "../../queries";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import { EditRolesModal } from "./edit-roles-modal";
+import { Button } from "@ui/button";
+import { BlockedUsersModal } from "./blocked-users-modal";
 
 interface Props {
   history: History;
@@ -24,303 +18,73 @@ interface Props {
   username: string;
 }
 
-const ChatsCommunityDropdownMenu = (props: Props) => {
+const ChatsCommunityDropdownMenu = ({ history, username }: Props) => {
   const { activeUser } = useMappedStore();
-  const { history, from } = props;
-  const [step, setStep] = useState(0);
-  const [keyDialog, setKeyDialog] = useState(false);
-  const [communityAdmins, setCommunityAdmins] = useState<string[]>([]);
-  const [blockedUsers, setBlockedUsers] = useState<{ name: string; pubkey: string }[]>([]);
-  const [removedUserId, setRemovedUserID] = useState("");
+
+  const [showEditRolesModal, setShowEditRolesModal] = useState(false);
+  const [showBlockedUsersModal, setShowBlockedUsersModal] = useState(false);
 
   const { data: channels } = useChannelsQuery();
+
   const currentChannel = useMemo(
-    () => channels?.find((channel) => channel.communityName === props.username),
-    [channels, props.username]
+    () => channels?.find((channel) => channel.communityName === username),
+    [channels, username]
+  );
+  const communityAdmins = useMemo(
+    () => (currentChannel?.communityModerators ?? []).map((mod) => mod.name),
+    [currentChannel]
   );
 
-  const { mutateAsync: leaveChannel } = useLeaveCommunityChannel(() => {
-    setKeyDialog(false);
-    setStep(0);
-    history?.push("/chats");
-  });
-
-  const { messageServiceInstance } = useContext(ChatContext);
-
-  useEffect(() => {
-    getCommunityAdmins();
-
-    if (currentChannel && currentChannel?.removedUserIds) {
-      // getBlockedUsers(currentChannel?.removedUserIds!);
-    }
-  }, [currentChannel, removedUserId]);
-
-  const handleEditRoles = () => {
-    setKeyDialog(true);
-    setStep(2);
-  };
-
-  const toggleKeyDialog = () => {
-    setKeyDialog(!keyDialog);
-  };
-
-  const getCommunityAdmins = () => {
-    const communityAdminRoles = ["owner", "admin"];
-    const communityAdmins = currentChannel?.communityModerators?.filter((user) =>
-      communityAdminRoles.includes(user.role)
-    );
-    const communityAdminNames = communityAdmins?.map((user) => user.name);
-    setCommunityAdmins(communityAdminNames!);
-  };
-
-  // const getBlockedUsers = (blockedUser: string[]) => {
-  //   const blockedUsers = profiles
-  //     .filter((item) => blockedUser.includes(item.creator))
-  //     .map((item) => ({ name: item.name, pubkey: item.creator }));
-  //   setBlockedUsers(blockedUsers);
-  // };
-
-  const handleBlockedUsers = () => {
-    setKeyDialog(true);
-    setStep(3);
-  };
-
-  const finish = () => {
-    setStep(0);
-    setKeyDialog(false);
-  };
-
-  const communityMenuItems: MenuItem[] = [
-    {
-      label: _t("chat.invite"),
-      onClick: () => {
-        copyToClipboard(
-          `https://ecency.com/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
-        );
-        success("Link copied into clipboard.");
-      },
-
-      icon: linkSvg
-    },
-    {
-      label: _t("chat.leave"),
-      onClick: () => {
-        setStep(1);
-        setKeyDialog(true);
-      },
-      icon: chatLeaveSvg
-    },
-    ...(activeUser?.username === currentChannel?.communityName
-      ? [
-          {
-            label: _t("chat.edit-roles"),
-            onClick: handleEditRoles,
-            icon: editSVG
-          }
-        ]
-      : []),
-    ...(communityAdmins && communityAdmins.includes(activeUser?.username!)
-      ? [
-          {
-            label: _t("chat.blocked-users"),
-            onClick: handleBlockedUsers,
-            icon: removeUserSvg
-          }
-        ]
-      : [])
-  ];
-
-  const communityMenuConfig = {
-    history: props.history,
-    label: "",
-    icon: kebabMenuSvg,
-    items: communityMenuItems
-  };
-
-  const confirmationModal = (actionType: string) => {
-    return (
-      <>
-        <div className="join-community-dialog-header border-bottom">
-          <div className="join-community-dialog-titles">
-            <h2 className="join-community-main-title">{_t("communities-create.confirmation")}</h2>
-          </div>
-        </div>
-        <div className="text-lg mt-4">{_t("confirm.title")}</div>
-        <p className="text-right mt-8">
-          <Button
-            outline={true}
-            className="mr-6"
-            onClick={() => {
-              setStep(0);
-              setKeyDialog(false);
-            }}
-          >
-            {_t("chat.close")}
-          </Button>
-          <Button
-            outline={true}
-            className="confirm-btn"
-            onClick={() => handleConfirmButton(actionType)}
-          >
-            {_t("chat.confirm")}
-          </Button>
-        </p>
-      </>
-    );
-  };
-
-  const blockedUsersModal = () => {
-    return (
-      <>
-        <div className="blocked-user-header" style={{ marginBottom: "1rem" }}>
-          <h4 className="blocked-user-title">{_t("chat.blocked-users")}</h4>
-        </div>
-
-        {blockedUsers.length !== 0 ? (
-          <>
-            <table className="table table-striped table-bordered table-roles">
-              <thead>
-                <tr>
-                  <th style={{ width: "50%" }}>{_t("community.roles-account")}</th>
-                  <th style={{ width: "50%" }}>{_t("chat.action")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {blockedUsers &&
-                  blockedUsers.map((user, i) => {
-                    return (
-                      <tr key={i}>
-                        <td>
-                          <span className="flex user">
-                            <UserAvatar username={user.name} size="medium" />{" "}
-                            <span className="username" style={{ margin: "10px 0 0 10px" }}>
-                              @{user.name}
-                            </span>
-                          </span>
-                        </td>
-                        <td>
-                          <Button
-                            outline={true}
-                            onClick={() => {
-                              setKeyDialog(true);
-                              setStep(4);
-                              setRemovedUserID(user.pubkey);
-                            }}
-                          >
-                            {_t("chat.unblock")}
-                          </Button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-              </tbody>
-            </table>
-          </>
-        ) : (
-          <div className="text-center">
-            <p> {_t("chat.no-locked-user")}</p>
-          </div>
-        )}
-      </>
-    );
-  };
-
-  const successModal = (message: string) => {
-    return (
-      <>
-        <div className="success-dialog-header flex border-bottom">
-          <div className="step-no">2</div>
-          <div className="success-dialog-titles">
-            <div className="success-main-title">{_t("manage-authorities.success-title")}</div>
-            <div className="success-sub-title">{_t("manage-authorities.success-sub-title")}</div>
-          </div>
-        </div>
-        <div className="success-dialog-body">
-          <div className="success-dialog-content text-center">
-            <span>{message === UNBLOCKUSER ? "User unblock successfully" : ""}</span>
-          </div>
-          <div className="flex justify-center mt-3">
-            <span className="hr-6px-btn-spacer" />
-            <Button onClick={finish}>{_t("g.finish")}</Button>
-          </div>
-        </div>
-      </>
-    );
-  };
-
-  const handleConfirmButton = (actionType: string) => {
-    switch (actionType) {
-      case LEAVECOMMUNITY:
-        leaveChannel(currentChannel?.id!!);
-        break;
-      case UNBLOCKUSER:
-        handleChannelUpdate(UNBLOCKUSER);
-        break;
-    }
-  };
-
-  const handleChannelUpdate = (operationType: string) => {
-    let updatedMetaData = {
-      name: currentChannel?.name!,
-      about: currentChannel?.about!,
-      picture: "",
-      communityName: currentChannel?.communityName!,
-      communityModerators: currentChannel?.communityModerators,
-      hiddenMessageIds: currentChannel?.hiddenMessageIds,
-      removedUserIds: currentChannel?.removedUserIds
-    };
-    switch (operationType) {
-      case UNBLOCKUSER:
-        const NewUpdatedRemovedUsers = currentChannel?.removedUserIds?.filter(
-          (item) => item !== removedUserId
-        );
-        updatedMetaData.removedUserIds = NewUpdatedRemovedUsers;
-        break;
-      default:
-        break;
-    }
-    try {
-      messageServiceInstance?.updateChannel(currentChannel!, updatedMetaData);
-
-      if (operationType === UNBLOCKUSER) {
-        setStep(5);
-        setKeyDialog(true);
-        setRemovedUserID("");
-      }
-    } catch (err) {
-      error(_t("chat.error-updating-community"));
-    }
-  };
+  const { mutateAsync: leaveChannel } = useLeaveCommunityChannel(() => history?.push("/chats"));
 
   return (
     <>
-      <DropDown
-        {...communityMenuConfig}
-        style={DropDownStyle}
-        float="right"
-        alignBottom={false}
-        noMarginTop={true}
+      <Dropdown>
+        <DropdownToggle>
+          <Button icon={kebabMenuSvg} appearance="link" noPadding={true} />
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItemWithIcon
+            icon={linkSvg}
+            label={_t("chat.invite")}
+            onClick={() => {
+              copyToClipboard(
+                `https://ecency.com/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
+              );
+              success("Link copied into clipboard.");
+            }}
+          />
+          <DropdownItemWithIcon
+            icon={chatLeaveSvg}
+            label={_t("chat.leave")}
+            onClick={() => leaveChannel(currentChannel?.id!!)}
+          />
+          {activeUser?.username === currentChannel?.communityName && (
+            <DropdownItemWithIcon
+              icon={editSVG}
+              label={_t("chat.edit-roles")}
+              onClick={() => setShowEditRolesModal(true)}
+            />
+          )}
+          {communityAdmins && communityAdmins.includes(activeUser?.username!) && (
+            <DropdownItemWithIcon
+              icon={removeUserSvg}
+              label={_t("chat.blocked-users")}
+              onClick={() => setShowBlockedUsersModal(true)}
+            />
+          )}
+        </DropdownMenu>
+      </Dropdown>
+      <EditRolesModal
+        show={showEditRolesModal}
+        setShow={setShowEditRolesModal}
+        username={currentChannel?.communityName!!}
+      />
+      <BlockedUsersModal
+        username={currentChannel?.communityName!!}
+        show={showBlockedUsersModal}
+        setShow={setShowBlockedUsersModal}
       />
-
-      {keyDialog && (
-        <Modal
-          animation={false}
-          show={true}
-          centered={true}
-          onHide={toggleKeyDialog}
-          className="chats-dialog modal-thin-header"
-          size="lg"
-        >
-          <ModalHeader thin={true} closeButton={true} />
-          <ModalBody className="chat-modals-body">
-            {step === 1 && confirmationModal(LEAVECOMMUNITY)}
-            {step === 2 && <EditRolesModal username={props.username} />}
-            {step === 3 && blockedUsersModal()}
-            {step === 4 && confirmationModal(UNBLOCKUSER)}
-            {step === 5 && successModal(UNBLOCKUSER)}
-          </ModalBody>
-        </Modal>
-      )}
     </>
   );
 };
diff --git a/src/common/features/chats/components/chats-confirmation-modal/index.tsx b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
index a8bdd7306da..373a094c6d5 100644
--- a/src/common/features/chats/components/chats-confirmation-modal/index.tsx
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
@@ -5,7 +5,7 @@ import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { Button } from "@ui/button";
-import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
 
 interface Props {
   actionType: string;
@@ -33,7 +33,21 @@ const ChatsConfirmationModal = (props: Props) => {
       </div>
       {inProgress && <LinearProgress />}
       <div className="join-community-dialog-body">{content}</div>
-      <p className="join-community-confirm-buttons">
+    </>
+  );
+
+  return (
+    <Modal
+      animation={false}
+      show={true}
+      centered={true}
+      onHide={onClose}
+      className="chats-dialog"
+      size="lg"
+    >
+      <ModalHeader thin={true} closeButton={true} />
+      <ModalBody className="chat-modals-body">{confirmationModalContent}</ModalBody>
+      <ModalFooter className="flex justify-end gap-4 items-center">
         <Button
           outline={true}
           className="close-btn"
@@ -44,7 +58,6 @@ const ChatsConfirmationModal = (props: Props) => {
           {_t("chat.close")}
         </Button>
         <Button
-          outline={true}
           className="confirm-btn"
           onClick={() => {
             setInProgress(true);
@@ -53,21 +66,7 @@ const ChatsConfirmationModal = (props: Props) => {
         >
           {_t("chat.confirm")}
         </Button>
-      </p>
-    </>
-  );
-
-  return (
-    <Modal
-      animation={false}
-      show={true}
-      centered={true}
-      onHide={onClose}
-      className="chats-dialog"
-      size="lg"
-    >
-      <ModalHeader thin={true} closeButton={true} />
-      <ModalBody className="chat-modals-body">{confirmationModalContent}</ModalBody>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 845b247b78f..c953bc689e1 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -6,7 +6,12 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
-import { useAddCommunityChannel, useCreateCommunityChat, useJoinChat } from "../mutations";
+import {
+  useAddCommunityChannel,
+  useCreateCommunityChat,
+  useJoinChat,
+  useLeaveCommunityChannel
+} from "../mutations";
 import {
   useChannelsQuery,
   useCommunityChannelQuery,
@@ -28,13 +33,15 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { data: currentChannel } = useCommunityChannelQuery(props.community);
   const { data: channels } = useChannelsQuery();
   const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(props.community);
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
     useAddCommunityChannel(currentChannel?.id);
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
   const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
     useCreateCommunityChat(props.community);
-  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
+  const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
+    useLeaveCommunityChannel();
 
   const isChatEnabled = useMemo(() => !!currentChannel, [currentChannel]);
   const isCommunityChatJoined = useMemo(
@@ -42,9 +49,9 @@ export default function JoinCommunityChatBtn(props: Props) {
       channels?.some(
         (item) =>
           item.communityName === props.community.name &&
-          leftChannelsIds?.includes(currentChannel?.id!)
+          !leftChannelsIds?.includes(currentChannel?.id!)
       ),
-    [channels]
+    [channels, leftChannelsIds]
   );
 
   const join = async () => {
@@ -58,7 +65,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     <>
       {props.community.name === activeUser?.username ? (
         isCommunityChatJoined ? (
-          <Button outline={true}>{_t("chat.chat-joined")}</Button>
+          <Button appearance="secondary">{_t("chat.chat-joined")}</Button>
         ) : !isChatEnabled ? (
           <Button
             onClick={async () => {
@@ -81,7 +88,11 @@ export default function JoinCommunityChatBtn(props: Props) {
           <Button
             disabled={isJoinChatLoading || isAddCommunityChannelLoading}
             onClick={join}
-            icon={isJoinChatLoading ? <Spinner /> : <></>}
+            icon={
+              (isJoinChatLoading || isAddCommunityChannelLoading) && (
+                <Spinner className="w-3.5 h-3.5" />
+              )
+            }
             iconPlacement="left"
           >
             {_t("chat.join-community-chat")}
@@ -93,13 +104,24 @@ export default function JoinCommunityChatBtn(props: Props) {
         <Button
           disabled={isJoinChatLoading || isAddCommunityChannelLoading}
           onClick={join}
-          icon={isJoinChatLoading ? <Spinner /> : <></>}
+          icon={
+            (isJoinChatLoading || isAddCommunityChannelLoading) && (
+              <Spinner className="w-3.5 h-3.5" />
+            )
+          }
           iconPlacement="left"
         >
           {_t("community.join-community-chat")}
         </Button>
       ) : isCommunityChatJoined ? (
-        <Button outline={true}>{_t("chat.chat-joined")}</Button>
+        <Button
+          appearance="secondary"
+          disabled={isLeavingCommunityChannelLoading}
+          icon={isLeavingCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
+          onClick={() => leaveCommunityChannel(currentChannel!!.name)}
+        >
+          {_t("chat.chat-joined")}
+        </Button>
       ) : (
         <></>
       )}
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
index 96d38331cac..c7898becae9 100644
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -20,13 +20,8 @@ export function useAddCommunityChannel(name: string | undefined) {
         ids: name ? [name] : undefined
       },
       {
-        kinds: [Kind.ChannelMetadata],
+        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
         "#e": name ? [name] : undefined
-      },
-      {
-        kinds: [Kind.ChannelMessage],
-        "#e": name ? [name] : undefined,
-        limit: 30
       }
     ],
     {
@@ -38,7 +33,6 @@ export function useAddCommunityChannel(name: string | undefined) {
               const hasChannelAlready = channels?.some(({ id }) => id === channel?.id);
               if (!hasChannelAlready && channel) {
                 queryClient.setQueryData([ChatQueries.CHANNELS], [...(channels ?? []), channel]);
-                queryClient.invalidateQueries([ChatQueries.CHANNELS]);
               }
 
               // Remove the community from left list
diff --git a/src/common/features/chats/mutations/import-chat-by-key.ts b/src/common/features/chats/mutations/import-chat-by-key.ts
index 82c7237bfe8..86a7e903e3c 100644
--- a/src/common/features/chats/mutations/import-chat-by-key.ts
+++ b/src/common/features/chats/mutations/import-chat-by-key.ts
@@ -29,8 +29,8 @@ export function useImportChatByKey(onSuccess?: () => void) {
       }
 
       localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, key);
-      queryClient.invalidateQueries([ChatQueries.PUBLIC_KEY]);
-      queryClient.invalidateQueries([ChatQueries.PRIVATE_KEY]);
+      await queryClient.invalidateQueries([ChatQueries.PUBLIC_KEY]);
+      await queryClient.invalidateQueries([ChatQueries.PRIVATE_KEY]);
     },
     {
       onSuccess
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index 216db2bfd62..a87c5396bcb 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createNoStrAccount, uploadChatPublicKey } from "../utils";
-import * as ls from "../../../util/local-storage";
-import { setNostrkeys } from "../managers/message-manager";
+import { PREFIX } from "../../../util/local-storage";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatQueries } from "../queries";
 import { useNostrPublishMutation } from "../nostr";
@@ -32,10 +31,9 @@ export function useJoinChat(onSuccess?: () => void) {
 
   return useMutation(["chat-join-chat"], async () => createNoStrAccount(), {
     onSuccess: async (keys: ReturnType<typeof createNoStrAccount>) => {
-      ls.set(`${activeUser?.username}_nsPrivKey`, keys.priv);
+      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, keys.priv);
       await uploadPublicKey(keys.pub);
 
-      setNostrkeys(keys);
       queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
       queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
 
diff --git a/src/common/features/chats/nostr/queries/get-user-profile-query.ts b/src/common/features/chats/nostr/queries/get-user-profile-query.ts
index 70c2fa931da..8927ef58db6 100644
--- a/src/common/features/chats/nostr/queries/get-user-profile-query.ts
+++ b/src/common/features/chats/nostr/queries/get-user-profile-query.ts
@@ -15,3 +15,18 @@ export function useNostrGetUserProfileQuery(user: string) {
       events.map((event) => convertEvent<Kind.Metadata>(event)!!).filter((profile) => profile!!)
   );
 }
+
+export function useNostrGetUserProfilesQuery(users: string[]) {
+  return useNostrFetchQuery(
+    ["chats/nostr-get-user-profile", users.join("")],
+    users.map((user) => ({
+      kinds: [Kind.Metadata],
+      authors: [user]
+    })),
+    (events) =>
+      events.map((event) => convertEvent<Kind.Metadata>(event)!!).filter((profile) => profile!!),
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index cfba7602779..083d49f7e68 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -35,6 +35,8 @@ export function useMessagesQuery(username?: string) {
       const existingMessages =
         queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? [];
 
+      await queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
+
       if (existingMessages.length > 0) {
         return existingMessages;
       }
diff --git a/src/common/features/ui/dropdown/dropdown-item.tsx b/src/common/features/ui/dropdown/dropdown-item.tsx
index 69d55e5facf..e23706328b5 100644
--- a/src/common/features/ui/dropdown/dropdown-item.tsx
+++ b/src/common/features/ui/dropdown/dropdown-item.tsx
@@ -26,7 +26,7 @@ export function DropdownItemWithIcon(
 ) {
   return (
     <DropdownItem {...props}>
-      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky">
+      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky [&>div>svg]:w-4">
         <div>{props.icon}</div>
         <div className="text-sm font-semibold">{props.label}</div>
       </div>
diff --git a/src/common/features/ui/dropdown/index.tsx b/src/common/features/ui/dropdown/index.tsx
index 56a907eac53..92dd813b89f 100644
--- a/src/common/features/ui/dropdown/index.tsx
+++ b/src/common/features/ui/dropdown/index.tsx
@@ -21,6 +21,7 @@ export function Dropdown(props: HTMLProps<HTMLDivElement> & Props) {
   useClickAway(ref, () => {
     if (props.closeOnClickOutside ?? true) {
       setShow(false);
+      // props.setShow?.(false);
     }
   });
   const nativeProps = useFilteredProps(props, ["show", "setShow", "closeOnClickOutside"]);
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 6301a3a70fe..5aad30c20b4 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -80,7 +80,8 @@
     "ok": "OK",
     "join": "Join",
     "resend": "Resend",
-    "failed": "Failed"
+    "failed": "Failed",
+    "status": "Status"
   },
   "confirm": {
     "title": "Are you sure?",

From f0f2480538d99f661aa907ced8473eb2388b7c55 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 11 Nov 2023 02:44:19 +0600
Subject: [PATCH 127/179] Chats: added infinite message listener

---
 .../features/chats/chat-context-provider.tsx  |  2 +
 .../chats-confirmation-modal/index.tsx        |  2 -
 .../features/chats/mutations/send-message.ts  |  4 --
 src/common/features/chats/nostr/core/index.ts |  1 -
 .../chats/nostr/core/nostr-fetch-query.tsx    |  9 +---
 .../chats/nostr/core/nostr-listener-query.tsx | 46 -------------------
 .../nostr/queries/direct-messages-query.ts    |  3 +-
 .../nostr/queries/public-messages-query.ts    |  3 +-
 .../chats/nostr/utils/event-converter.ts      |  5 +-
 .../chats/queries/direct-contacts-query.ts    |  9 +---
 .../chats/queries/last-messages-query.ts      | 18 +++++---
 .../chats/queries/listen-messages-query.ts    | 32 +++++++++++++
 .../features/chats/queries/messages-query.ts  | 44 +++++++++---------
 13 files changed, 78 insertions(+), 100 deletions(-)
 delete mode 100644 src/common/features/chats/nostr/core/nostr-listener-query.tsx
 create mode 100644 src/common/features/chats/queries/listen-messages-query.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index a4d65449815..1310876a89a 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -6,6 +6,7 @@ import { useMount } from "react-use";
 import { useKeysQuery } from "./queries/keys-query";
 import { useJoinChat } from "./mutations";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
+import { useListenMessagesQuery } from "./queries/listen-messages-query";
 
 interface Context {
   showSpinner: boolean;
@@ -61,6 +62,7 @@ export const ChatContextProvider = (props: Props) => {
   useJoinChat(() => {
     setHasUserJoinedChat(true);
   });
+  useListenMessagesQuery();
 
   useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
 
diff --git a/src/common/features/chats/components/chats-confirmation-modal/index.tsx b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
index 373a094c6d5..9dfb84cc85f 100644
--- a/src/common/features/chats/components/chats-confirmation-modal/index.tsx
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
@@ -50,7 +50,6 @@ const ChatsConfirmationModal = (props: Props) => {
       <ModalFooter className="flex justify-end gap-4 items-center">
         <Button
           outline={true}
-          className="close-btn"
           onClick={() => {
             onClose();
           }}
@@ -58,7 +57,6 @@ const ChatsConfirmationModal = (props: Props) => {
           {_t("chat.close")}
         </Button>
         <Button
-          className="confirm-btn"
           onClick={() => {
             setInProgress(true);
             onConfirm();
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 5ff65b90356..0c24d79e9ab 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -66,10 +66,6 @@ export function useSendMessage(
           [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
           [...messages, message]
         );
-        queryClient.invalidateQueries([
-          ChatQueries.MESSAGES,
-          currentChannel?.communityName ?? currentUser
-        ]);
 
         onSuccess?.();
       }
diff --git a/src/common/features/chats/nostr/core/index.ts b/src/common/features/chats/nostr/core/index.ts
index 7c648295b36..47ae2fa4260 100644
--- a/src/common/features/chats/nostr/core/index.ts
+++ b/src/common/features/chats/nostr/core/index.ts
@@ -1,4 +1,3 @@
-export * from "./nostr-listener-query";
 export * from "./nostr-fetch-mutation";
 export * from "./nostr-fetch-query";
 export * from "./nostr-publish-mutation";
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
index cb045088d0a..6d0c47201ef 100644
--- a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
+++ b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
@@ -1,4 +1,4 @@
-import { QueryKey, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryKey, useQuery } from "@tanstack/react-query";
 import { Event, Kind } from "../../../../../lib/nostr-tools/event";
 import { useContext } from "react";
 import { NostrContext } from "../nostr-context";
@@ -13,19 +13,12 @@ export function useNostrFetchQuery<DATA>(
   dataResolver: (events: Event[]) => DATA | Promise<DATA>,
   queryOptions?: UseQueryOptions<DATA>
 ) {
-  const queryClient = useQueryClient();
-
   const { pool, readRelays } = useContext(NostrContext);
   const { publicKey } = useKeysQuery();
 
   return useQuery(
     key,
     async () => {
-      const queryData = queryClient.getQueryData<DATA>(key);
-      if (queryData && (Array.isArray(queryData) ? queryData.length > 0 : true)) {
-        return queryData;
-      }
-
       const kinds = kindsOrFilters.every((item) => typeof item === "number")
         ? (kindsOrFilters as Kind[])
         : [];
diff --git a/src/common/features/chats/nostr/core/nostr-listener-query.tsx b/src/common/features/chats/nostr/core/nostr-listener-query.tsx
deleted file mode 100644
index 0e261db80f9..00000000000
--- a/src/common/features/chats/nostr/core/nostr-listener-query.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { QueryKey, QueryObserverResult, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useContext, useMemo } from "react";
-import useDebounce from "react-use/lib/useDebounce";
-import { UseQueryOptions } from "@tanstack/react-query/src/types";
-import { MessageEvents } from "../../../../helper/message-service";
-import { ChatContext } from "../../chat-context-provider";
-import { NostrListenerQueriesContext } from "./nostr-listeners-provider";
-
-export function useNostrListenerQuery<TQData>(
-  key: QueryKey,
-  event: MessageEvents,
-  queryFn: (data: TQData, nextData: TQData, resolver: (data: TQData) => void) => void,
-  queryOptions?: UseQueryOptions<TQData>
-): QueryObserverResult<TQData> {
-  const { messageServiceInstance } = useContext(ChatContext);
-  const { set, get } = useContext(NostrListenerQueriesContext);
-  const queryClient = useQueryClient();
-
-  const query = useQuery<TQData>(key, () => queryClient.getQueryData<TQData>(key)!!, queryOptions);
-
-  const joinedKey = useMemo(() => key.join(""), [key]);
-
-  const listener = (nextData: TQData) => {
-    const resolver = (data: TQData) => queryClient.setQueryData(key, data);
-    queryFn(query.data!!, nextData, resolver);
-
-    queryClient.invalidateQueries(key);
-  };
-
-  useDebounce(
-    () => {
-      if (messageServiceInstance) {
-        if (get(joinedKey)) {
-          return;
-        }
-
-        messageServiceInstance.addListener(event, listener as any); // todo fix typings
-        set(joinedKey, true);
-      }
-    },
-    100,
-    [messageServiceInstance]
-  );
-
-  return query;
-}
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
index 2bbfffc010b..f7db64b0124 100644
--- a/src/common/features/chats/nostr/queries/direct-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/direct-messages-query.ts
@@ -35,7 +35,8 @@ export function useDirectMessagesQuery(
         )
       ),
     {
-      enabled: directContacts.length > 0
+      enabled: directContacts.length > 0,
+      initialData: []
     }
   );
 }
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
index 4d378ebe8f2..81ccc4bde7c 100644
--- a/src/common/features/chats/nostr/queries/public-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/public-messages-query.ts
@@ -22,7 +22,8 @@ export function usePublicMessagesQuery(channels: Channel[]) {
     (events) =>
       events.map((event) => convertEvent(event)).filter((message) => !!message) as Message[],
     {
-      enabled: channels.length > 0
+      enabled: channels.length > 0,
+      initialData: []
     }
   );
 }
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
index 3090f041014..e36cc3a4930 100644
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -62,7 +62,10 @@ export function convertEvent<KIND extends keyof EventConverterResult>(
           );
         }
 
-        const decryptedMessageContent = await decrypt(privateKey, peer, event.content);
+        let decryptedMessageContent = event.content;
+        try {
+          decryptedMessageContent = await decrypt(privateKey, peer, event.content);
+        } catch (e) {}
         resolve({
           ...encryptedMessage,
           content: decryptedMessageContent,
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index ac0a3e78494..8c1052d9798 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -1,17 +1,11 @@
 import { ChatQueries } from "./queries";
 import { DirectContact } from "../managers/message-manager-types";
 import { useKeysQuery } from "./keys-query";
-import { useChannelsQuery } from "./channels-query";
 import { useNostrFetchQuery } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 
 export function useDirectContactsQuery() {
   const { hasKeys } = useKeysQuery();
-  const {
-    data: channels,
-    isSuccess: isChannelsLoaded,
-    isError: isChannelsFailed
-  } = useChannelsQuery();
 
   return useNostrFetchQuery<DirectContact[]>(
     [ChatQueries.DIRECT_CONTACTS],
@@ -19,7 +13,6 @@ export function useDirectContactsQuery() {
     (events) => {
       // Get first event with profile info
       // note: events could be duplicated
-      // todo: think about duplications filtering
       const profileEvent = events.find((event) => event.kind === Kind.Contacts);
       if (profileEvent) {
         return profileEvent.tags.map(([pubkey, name]) => ({ pubkey, name }));
@@ -28,7 +21,7 @@ export function useDirectContactsQuery() {
     },
     {
       initialData: [],
-      enabled: hasKeys && (isChannelsLoaded || isChannelsFailed)
+      enabled: hasKeys
     }
   );
 }
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
index e23fcef2bc5..17c2c37d680 100644
--- a/src/common/features/chats/queries/last-messages-query.ts
+++ b/src/common/features/chats/queries/last-messages-query.ts
@@ -1,13 +1,15 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Message } from "../managers/message-manager-types";
 import { ChatQueries } from "./queries";
 import { getDirectLastMessage } from "../utils";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useChannelsQuery } from "./channels-query";
-import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
+import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { useKeysQuery } from "./keys-query";
 
 export function useLastMessagesQuery() {
+  const queryClient = useQueryClient();
+
   const { publicKey, privateKey } = useKeysQuery();
   const { data: contacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
@@ -20,15 +22,17 @@ export function useLastMessagesQuery() {
 
   const getContactsLastMessages = () =>
     (contacts ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
-      const currentMessages = initialDirectMessages?.filter((i) =>
-        "peer" in i ? i.peer === current?.pubkey : i.root === current?.pubkey
-      );
+      const currentMessages = queryClient
+        .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
+        ?.filter((i) => ("peer" in i ? i.peer === current?.pubkey : i.root === current?.pubkey));
       return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
     }, {});
 
   const getChannelsLastMessages = () =>
     (channels ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
-      const currentMessages = initialPublicMessages?.filter((i) => i.root === current.id);
+      const currentMessages = queryClient
+        .getQueryData<Message[]>([NostrQueries.PUBLIC_MESSAGES])
+        ?.filter((i) => i.root === current.id);
       return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
     }, {});
 
@@ -37,7 +41,7 @@ export function useLastMessagesQuery() {
     async () => ({ ...getContactsLastMessages(), ...getChannelsLastMessages() }),
     {
       initialData: {},
-      enabled: !!initialDirectMessages?.length && !!initialPublicMessages?.length
+      enabled: !!initialDirectMessages?.length || !!initialPublicMessages?.length
     }
   );
 }
diff --git a/src/common/features/chats/queries/listen-messages-query.ts b/src/common/features/chats/queries/listen-messages-query.ts
new file mode 100644
index 00000000000..504e9e38bae
--- /dev/null
+++ b/src/common/features/chats/queries/listen-messages-query.ts
@@ -0,0 +1,32 @@
+import { useQueryClient } from "@tanstack/react-query";
+import useInterval from "react-use/lib/useInterval";
+import { NostrQueries } from "../nostr/queries";
+import { ChatQueries } from "./queries";
+import { useDirectContactsQuery } from "./direct-contacts-query";
+import { useChannelsQuery } from "./channels-query";
+import { useMemo } from "react";
+
+export function useListenMessagesQuery() {
+  const queryClient = useQueryClient();
+  const { data: contacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+
+  const peers = useMemo(
+    () => [
+      ...(channels?.map((channel) => channel.communityName) ?? []),
+      ...(contacts?.map((contact) => contact.name) ?? [])
+    ],
+    [channels, contacts]
+  );
+
+  useInterval(async () => {
+    await queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
+    await queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
+    await queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
+
+    setTimeout(
+      () => peers.forEach((peer) => queryClient.invalidateQueries([ChatQueries.MESSAGES, peer])),
+      3000
+    );
+  }, 10000);
+}
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 083d49f7e68..9afd381f475 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -1,29 +1,30 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useMemo } from "react";
-import { useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
+import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { ChatQueries } from "./queries";
 import { Message } from "../managers/message-manager-types";
 import { useChannelsQuery } from "./channels-query";
-import { queryClient } from "../../../core";
 import { useKeysQuery } from "./keys-query";
 
 export function useMessagesQuery(username?: string) {
+  const queryClient = useQueryClient();
+
   const { privateKey, publicKey, hasKeys } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
 
-  const { data: initialDirectMessages } = useDirectMessagesQuery(
-    directContacts ?? [],
-    publicKey!!,
-    privateKey!!
-  );
-  const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
+  useDirectMessagesQuery(directContacts ?? [], publicKey!!, privateKey!!);
+  usePublicMessagesQuery(channels ?? []);
 
   const currentChannel = useMemo(
     () => channels?.find((channel) => channel.communityName === username),
     [channels, username]
   );
+  const currentContact = useMemo(
+    () => directContacts?.find((c) => c.name === username),
+    [directContacts, username]
+  );
 
   return useQuery<Message[]>(
     [ChatQueries.MESSAGES, username],
@@ -32,24 +33,25 @@ export function useMessagesQuery(username?: string) {
         return [];
       }
 
-      const existingMessages =
-        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? [];
-
-      await queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
-
-      if (existingMessages.length > 0) {
-        return existingMessages;
-      }
-
       if (!!currentChannel) {
-        return [...(initialPublicMessages ?? [])];
+        return (
+          queryClient
+            .getQueryData<Message[]>([NostrQueries.PUBLIC_MESSAGES])
+            ?.filter((i) => i.root === currentChannel.id) ?? []
+        );
       }
 
-      return [...(initialDirectMessages ?? [])];
+      return (
+        queryClient
+          .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
+          ?.filter((i) =>
+            "peer" in i ? i.peer === currentContact?.pubkey : i.root === currentContact?.pubkey
+          ) ?? []
+      );
     },
     {
       initialData: [],
-      enabled: hasKeys,
+      enabled: hasKeys && !!username,
       select: (messages) => {
         if (currentChannel) {
           return messages

From 1b56dc0348093860b9fc7038eb1234d5b41a7c73 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 12 Nov 2023 18:19:20 +0600
Subject: [PATCH 128/179] Chats: splitted types

---
 src/common/app.tsx                            |   3 -
 .../features/chats/chat-context-provider.tsx  |  25 +--
 .../components/chat-channel-messages.tsx      |   2 +-
 .../features/chats/components/chat-input.tsx  |   2 +-
 .../chat-message-channel-item-extension.tsx   |   2 +-
 .../chats/components/chat-message-item.tsx    |   2 +-
 .../chats/components/chat-messages-view.tsx   |   2 +-
 .../chat-popup/chat-popup-header.tsx          |  23 +--
 .../chat-popup/chat-popup-messages-list.tsx   |   2 +-
 .../chats/components/chat-popup/index.tsx     |  14 --
 .../edit-roles-modal.tsx                      |   2 +-
 .../chats-direct-messages/index.tsx           |   2 +-
 .../chats-sidebar/chat-sidebar-channel.tsx    |   2 +-
 .../chat-sidebar-direct-contact.tsx           |   2 +-
 .../chats-sidebar/chat-sidebar-header.tsx     |   7 +-
 .../chats/managers/message-manager-types.ts   |  73 --------
 .../chats/managers/message-manager.tsx        | 169 ------------------
 .../chats/mutations/add-direct-contact.ts     |   3 +-
 .../mutations/fetch-previous-messages.ts      |   3 +-
 .../mutations/hide-message-in-channel.ts      |   2 +-
 .../features/chats/mutations/send-message.ts  |   3 +-
 .../mutations/update-channel-blocked-users.ts |   2 +-
 .../mutations/update-channel-moderator.ts     |   2 +-
 .../mutations/update-community-channel.ts     |   3 +-
 .../nostr/core/nostr-publish-mutation.ts      |   2 +-
 src/common/features/chats/nostr/index.ts      |   1 +
 .../nostr/queries/direct-messages-query.ts    |   2 +-
 .../nostr/queries/public-messages-query.ts    |   2 +-
 .../features/chats/nostr/types/channel.ts     |   5 +
 .../chats/nostr/types/community-moderator.ts  |   5 +
 .../chats/nostr/types/direct-contact.ts       |   1 +
 .../features/chats/nostr/types/index.ts       |   6 +
 .../features/chats/nostr/types/messages.ts    |  24 +++
 .../features/chats/nostr/types/metadata.ts    |  11 ++
 .../features/chats/nostr/types/profile.ts     |   3 +
 .../chats/nostr/utils/event-converter.ts      |   2 +-
 .../features/chats/queries/channels-query.ts  |   3 +-
 .../chats/queries/community-channel-query.ts  |   2 +-
 .../chats/queries/direct-contacts-query.ts    |   3 +-
 .../chats/queries/last-messages-query.ts      |   2 +-
 .../features/chats/queries/messages-query.ts  |   2 +-
 .../nostr-joined-community-team-query.ts      |   2 +-
 src/common/features/chats/types/chat-types.ts |  11 --
 .../chats/utils/check-contiguous-message.ts   |   2 +-
 .../utils/format-message-date-and-day.ts      |   2 +-
 .../chats/utils/get-joined-communities.ts     |   2 +-
 .../utils/use-get-direct-last-message.ts      |   2 +-
 47 files changed, 92 insertions(+), 357 deletions(-)
 delete mode 100644 src/common/features/chats/managers/message-manager-types.ts
 delete mode 100644 src/common/features/chats/managers/message-manager.tsx
 create mode 100644 src/common/features/chats/nostr/types/channel.ts
 create mode 100644 src/common/features/chats/nostr/types/community-moderator.ts
 create mode 100644 src/common/features/chats/nostr/types/direct-contact.ts
 create mode 100644 src/common/features/chats/nostr/types/index.ts
 create mode 100644 src/common/features/chats/nostr/types/messages.ts
 create mode 100644 src/common/features/chats/nostr/types/metadata.ts
 create mode 100644 src/common/features/chats/nostr/types/profile.ts

diff --git a/src/common/app.tsx b/src/common/app.tsx
index fa301c026fe..70aece14db3 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Route, Switch } from "react-router-dom";
 import EntryIndexContainer from "./pages/index";
-import MessageManager from "./features/chats/managers/message-manager";
 import { EntryScreen } from "./pages/entry";
 import { SearchMorePageContainer, SearchPageContainer } from "./pages/search";
 import { ProposalDetailContainer, ProposalsIndexContainer } from "./pages/proposals";
@@ -27,7 +26,6 @@ import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
 import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
-
 import { UserActivityRecorder } from "./components/user-activity-recorder";
 import { ChatContextProvider } from "./features/chats/chat-context-provider";
 import { ChatPopUp } from "./features/chats/components/chat-popup";
@@ -198,7 +196,6 @@ const App = (props: any) => {
         <Announcement activeUser={props.activeUser} />
         <FloatingFAQ />
 
-        <MessageManager />
         <ChatPopUp {...props} />
       </ChatContextProvider>
       <div id="modal-overlay-container" />
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 1310876a89a..f3018a460c4 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Keys } from "./managers/message-manager-types";
 import useDebounce from "react-use/lib/useDebounce";
 import MessageService from "../../helper/message-service";
 import { useMount } from "react-use";
@@ -13,7 +12,6 @@ interface Context {
   revealPrivKey: boolean;
   chatPrivKey: string;
   receiverPubKey: string;
-  messageServiceInstance: MessageService | null;
   hasUserJoinedChat: boolean;
   windowWidth: number;
   // TODO: it means is active usre removed from channe;
@@ -23,7 +21,6 @@ interface Context {
   setChatPrivKey: (key: string) => void;
   setReceiverPubKey: (key: string) => void;
   setMessageServiceInstance: (instance: MessageService | null) => void;
-  initMessageServiceInstance: (keys: Keys) => MessageService | null;
 }
 
 interface Props {
@@ -35,7 +32,6 @@ export const ChatContext = React.createContext<Context>({
   revealPrivKey: false,
   chatPrivKey: "",
   receiverPubKey: "",
-  messageServiceInstance: null,
   hasUserJoinedChat: false,
   windowWidth: 0,
   isActiveUserRemoved: false,
@@ -43,8 +39,7 @@ export const ChatContext = React.createContext<Context>({
   setShowSpinner: () => {},
   setChatPrivKey: () => {},
   setReceiverPubKey: () => {},
-  setMessageServiceInstance: () => {},
-  initMessageServiceInstance: () => (({} as MessageService) || null)
+  setMessageServiceInstance: () => {}
 });
 
 export const ChatContextProvider = (props: Props) => {
@@ -92,20 +87,6 @@ export const ChatContextProvider = (props: Props) => {
     };
   }, []);
 
-  const initMessageServiceInstance = (keys: Keys) => {
-    if (messageServiceInstance) {
-      messageServiceInstance.close();
-      setMessageServiceInstance(null);
-    }
-
-    let newMessageService: MessageService | null = null;
-    if (keys) {
-      newMessageService = new MessageService(keys.priv, keys.pub);
-      setMessageServiceInstance(newMessageService);
-    }
-    return newMessageService;
-  };
-
   return (
     <NostrListenerQueriesProvider>
       <ChatContext.Provider
@@ -114,7 +95,6 @@ export const ChatContextProvider = (props: Props) => {
           revealPrivKey,
           receiverPubKey,
           chatPrivKey,
-          messageServiceInstance,
           hasUserJoinedChat,
           windowWidth,
           isActiveUserRemoved,
@@ -122,8 +102,7 @@ export const ChatContextProvider = (props: Props) => {
           setShowSpinner,
           setChatPrivKey,
           setReceiverPubKey,
-          setMessageServiceInstance,
-          initMessageServiceInstance
+          setMessageServiceInstance
         }}
       >
         <NostrProvider>{props.children}</NostrProvider>
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 06ad7136bcc..e1bf383e279 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Zoom } from "medium-zoom";
-import { Channel, PublicMessage } from "../managers/message-manager-types";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
@@ -13,6 +12,7 @@ import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
 import { hideSvg, removeUserSvg } from "../../../img/svg";
 import { useHideMessageInChannel, useUpdateChannelBlockedUsers } from "../mutations";
 import { Spinner } from "@ui/spinner";
+import { Channel, PublicMessage } from "../nostr";
 
 interface Props {
   publicMessages: PublicMessage[];
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index ad22779d8ba..2c3a206c1f4 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -17,9 +17,9 @@ import { useChatFileUpload, useSendMessage } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import GifPicker from "../../../components/gif-picker";
 import useClickAway from "react-use/lib/useClickAway";
-import { Channel } from "../managers/message-manager-types";
 import { Spinner } from "@ui/spinner";
 import { useChannelsQuery } from "../queries";
+import { Channel } from "../nostr";
 
 interface Props {
   currentChannel?: Channel;
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
index 9e576edd882..8e2275519f3 100644
--- a/src/common/features/chats/components/chat-message-channel-item-extension.tsx
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -4,12 +4,12 @@ import FollowControls from "../../../components/follow-controls";
 import { Button } from "@ui/button";
 import { _t } from "../../../i18n";
 import ChatInput from "./chat-input";
-import { Channel } from "../managers/message-manager-types";
 import UserAvatar from "../../../components/user-avatar";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
 import { useUpdateChannelBlockedUsers } from "../mutations";
 import { useNostrGetUserProfileQuery } from "../nostr/queries";
+import { Channel } from "../nostr";
 
 interface Props {
   currentChannel: Channel;
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index d1c6d9c7503..40a596e1bc8 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,4 +1,3 @@
-import { Channel, Message } from "../managers/message-manager-types";
 import Tooltip from "../../../components/tooltip";
 import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
 import { formatMessageTime, isMessageGif, isMessageImage } from "../utils";
@@ -9,6 +8,7 @@ import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
 import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
+import { Channel, Message } from "../nostr";
 
 interface Props {
   type: "sender" | "receiver";
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index dfe20e3e243..c6eba1aee46 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -5,11 +5,11 @@ import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
 import ChatsScroller from "./chats-scroller";
 import { classNameObject } from "../../../helper/class-name-object";
-import { Channel, DirectMessage, PublicMessage } from "../managers/message-manager-types";
 import { useMessagesQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
 import { useFetchPreviousMessages } from "../mutations";
 import { ChatsChannelMessages } from "./chat-channel-messages";
+import { Channel, DirectMessage, PublicMessage } from "../nostr";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index 5d1c8c3fe03..9cd6d92137c 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -1,13 +1,7 @@
 import Tooltip from "../../../../components/tooltip";
 import { _t } from "../../../../i18n";
 import { Button } from "@ui/button";
-import {
-  addMessageSvg,
-  arrowBackSvg,
-  duotoneRefreshSvg,
-  expandArrow,
-  extendedView
-} from "../../../../img/svg";
+import { addMessageSvg, arrowBackSvg, expandArrow, extendedView } from "../../../../img/svg";
 import ChatsCommunityDropdownMenu from "../chats-community-actions";
 import { history } from "../../../../store";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
@@ -27,7 +21,6 @@ interface Props {
   isCurrentUser: boolean;
   handleBackArrowSvg: () => void;
   handleMessageSvgClick: () => void;
-  handleRefreshSvgClick: () => void;
   handleExtendedView: () => void;
   setExpanded: (v: boolean) => void;
 }
@@ -42,11 +35,10 @@ export function ChatPopupHeader({
   isCurrentUser,
   handleBackArrowSvg,
   handleMessageSvgClick,
-  handleRefreshSvgClick,
   handleExtendedView,
   setExpanded
 }: Props) {
-  const { revealPrivKey, hasUserJoinedChat, setRevealPrivKey } = useContext(ChatContext);
+  const { revealPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
   const { privateKey } = useKeysQuery();
 
@@ -103,17 +95,6 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        {hasUserJoinedChat && privateKey && !revealPrivKey && (
-          <Tooltip content={_t("chat.refresh")}>
-            <Button
-              noPadding={true}
-              size="sm"
-              appearance="link"
-              icon={duotoneRefreshSvg}
-              onClick={handleRefreshSvgClick}
-            />
-          </Tooltip>
-        )}
         {isCommunity && <ChatsCommunityDropdownMenu history={history!} username={communityName} />}
         {!isCommunity && !isCurrentUser && privateKey && (
           <div className="simple-menu" onClick={() => setExpanded(true)}>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 24c1f3078a2..10c3ff8a7bc 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -2,10 +2,10 @@ import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
 import React, { useMemo } from "react";
-import { DirectMessage, PublicMessage } from "../../managers/message-manager-types";
 import { useChannelsQuery, useMessagesQuery } from "../../queries";
 import { useCommunityCache } from "../../../../core";
 import { ChatsChannelMessages } from "../chat-channel-messages";
+import { DirectMessage, PublicMessage } from "../../nostr";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 0b59afed9a9..5c4918913f7 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -9,7 +9,6 @@ import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
 import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import "./index.scss";
-import { getPrivateKey } from "../../utils";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
@@ -154,18 +153,6 @@ export const ChatPopUp = () => {
     setExpanded(true);
   };
 
-  const handleRefreshSvgClick = () => {
-    setExpanded(true);
-    handleBackArrowSvg();
-    if (getPrivateKey(activeUser?.username!)) {
-      setShowSpinner(true);
-      const keys = {
-        pub: publicKey!,
-        priv: privateKey
-      };
-    }
-  };
-
   const handleBackArrowSvg = () => {
     setCurrentUser("");
     setCommunityName("");
@@ -205,7 +192,6 @@ export const ChatPopUp = () => {
             handleBackArrowSvg={handleBackArrowSvg}
             handleExtendedView={handleExtendedView}
             handleMessageSvgClick={handleMessageSvgClick}
-            handleRefreshSvgClick={handleRefreshSvgClick}
             showSearchUser={showSearchUser}
           />
           {(isJoinChatLoading || isChannelsLoading || isFetchingMore) && <LinearProgress />}
diff --git a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
index c21b1f4c43c..17b73866ecf 100644
--- a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
@@ -7,7 +7,6 @@ import { NOSTRKEY } from "../chat-popup/chat-constants";
 import { useChannelsQuery } from "../../queries";
 import UserAvatar from "../../../../components/user-avatar";
 import { ROLES } from "../../../../store/communities";
-import { CommunityModerator } from "../../managers/message-manager-types";
 import { error } from "../../../../components/feedback";
 import useDebounce from "react-use/lib/useDebounce";
 import { getAccountFull } from "../../../../api/hive";
@@ -16,6 +15,7 @@ import { useUpdateChannelModerator } from "../../mutations";
 import { Table, Td, Th, Tr } from "@ui/table";
 import { Spinner } from "@ui/spinner";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { CommunityModerator } from "../../nostr";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 4364b457cae..1c7a3071b84 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -7,9 +7,9 @@ import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { _t } from "../../../../i18n";
 import "./index.scss";
-import { DirectMessage } from "../../managers/message-manager-types";
 import { ChatMessageItem } from "../chat-message-item";
 import { useKeysQuery } from "../../queries/keys-query";
+import { DirectMessage } from "../../nostr";
 
 interface Props {
   directMessages: DirectMessage[];
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index 9a2772d5970..a8a7959c36e 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -1,11 +1,11 @@
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
-import { Channel } from "../../managers/message-manager-types";
 import UserAvatar from "../../../../components/user-avatar";
 import { useLastMessagesQuery } from "../../queries";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { getRelativeDate } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
+import { Channel } from "../../nostr";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index f841b050ba2..4eeed01985b 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -4,8 +4,8 @@ import React, { useContext, useMemo } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { DirectContact } from "../../managers/message-manager-types";
 import { useLastMessagesQuery } from "../../queries";
+import { DirectContact } from "../../nostr";
 
 interface Props {
   contact: DirectContact;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index e701baea700..74461f97be8 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@ui/button";
-import { arrowBackSvg, syncSvg } from "../../../../img/svg";
+import { arrowBackSvg } from "../../../../img/svg";
 import Tooltip from "../../../../components/tooltip";
 import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
@@ -14,8 +14,6 @@ interface Props {
 export function ChatSidebarHeader({ history }: Props) {
   const { revealPrivKey, chatPrivKey, setRevealPrivKey } = useContext(ChatContext);
 
-  const handleRefreshChat = () => {};
-
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
       <div className="flex items-center gap-2">
@@ -35,9 +33,6 @@ export function ChatSidebarHeader({ history }: Props) {
         </div>
       </div>
       <div className="flex items-center">
-        <Tooltip content={_t("chat.refresh")}>
-          <Button icon={syncSvg} appearance="link" onClick={handleRefreshChat} />
-        </Tooltip>
         {chatPrivKey && (
           <div className="chat-menu">
             <ChatsDropdownMenu
diff --git a/src/common/features/chats/managers/message-manager-types.ts b/src/common/features/chats/managers/message-manager-types.ts
deleted file mode 100644
index f39388bc375..00000000000
--- a/src/common/features/chats/managers/message-manager-types.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-export type Keys =
-  | {
-      pub: string;
-      priv: string;
-    }
-  | {
-      pub: string;
-      priv: "nip07";
-    }
-  | null;
-
-export type Metadata = {
-  name: string;
-  about: string;
-  picture: string;
-  communityName?: string;
-  communityModerators?: CommunityModerator[];
-  hiddenMessageIds?: string[];
-  removedUserIds?: string[];
-};
-
-export type CommunityModerator = {
-  name: string;
-  pubkey: string;
-  role: string;
-};
-
-export type Profile = { id: string; creator: string; created: number } & Metadata;
-
-export type DirectContact = { name: string; pubkey: string };
-
-export type Channel = { id: string; creator: string; created: number } & Metadata;
-
-export type ChannelUpdate = { channelId: string } & Channel;
-
-export type EventDeletion = { eventId: string; why: string };
-
-export type PublicMessage = {
-  id: string;
-  root: string;
-  content: string;
-  creator: string;
-  created: number;
-  children?: PublicMessage[];
-  mentions: string[];
-  sent?: number;
-};
-
-export type DirectMessage = {
-  id: string;
-  root?: string;
-  content: string;
-  peer: string;
-  creator: string;
-  created: number;
-  children?: DirectMessage[];
-  decrypted: boolean;
-  sent?: number;
-};
-
-export type MessagesObject = {
-  [key: string]: PublicMessage;
-};
-
-export type Message = PublicMessage | DirectMessage;
-
-export type ChannelMessageHide = { id: string; reason: string };
-
-export type ChannelUserMute = { pubkey: string; reason: string };
-
-export type RelayDict = Record<string, { read: boolean; write: boolean }>;
-
-export type MuteList = { pubkeys: string[]; encrypted: string };
diff --git a/src/common/features/chats/managers/message-manager.tsx b/src/common/features/chats/managers/message-manager.tsx
deleted file mode 100644
index 2f3d2bd8707..00000000000
--- a/src/common/features/chats/managers/message-manager.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { useState } from "react";
-import { NostrKeysType } from "../types";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { usePrevious } from "../../../util/use-previous";
-
-export const setNostrkeys = (keys: NostrKeysType) => {
-  const detail: NostrKeysType = {
-    pub: keys.pub,
-    priv: keys.priv
-  };
-  const ev = new CustomEvent("createMSInstance", { detail });
-  window.dispatchEvent(ev);
-};
-
-const MessageManager = () => {
-  const { activeUser } = useMappedStore();
-  const prevActiveUser = usePrevious(activeUser);
-
-  const [messageServiceReady, setMessageServiceReady] = useState(false);
-
-  //Listen for events in an interval.
-  // useMessageServiceListener(messageServiceReady, messageService);
-
-  // // Ready state handler
-  const handleReadyState = () => {
-    setMessageServiceReady(true);
-  };
-  //
-  // useEffect(() => {
-  //   messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-  //   messageService?.addListener(MessageEvents.Ready, handleReadyState);
-  //
-  //   return () => {
-  //     messageService?.removeListener(MessageEvents.Ready, handleReadyState);
-  //   };
-  // }, [messageServiceReady, messageService]);
-
-  // const checkPublicMessageSending = (channelId: string, data: PublicMessage) => {
-  //   setTimeout(() => {
-  //     verifyPublicMessageSending(channelId, data);
-  //   }, 20000);
-  // };
-
-  //public message handle before sent
-
-  // const handlePublicMessageBeforeSent = (data: PublicMessage[]) => {
-  //   data.map((m) => {
-  //     const { id, root } = m;
-  //     setReplacedPublicMessagesBuffer((prevBuffer) => [...prevBuffer, id]);
-  //     addPublicMessage(root, m);
-  //     checkPublicMessageSending(root, m);
-  //   });
-  // };
-
-  // useEffect(() => {
-  //   messageService?.removeListener(
-  //     MessageEvents.PublicMessageBeforeSent,
-  //     handlePublicMessageBeforeSent
-  //   );
-  //   messageService?.addListener(
-  //     MessageEvents.PublicMessageBeforeSent,
-  //     handlePublicMessageBeforeSent
-  //   );
-  //
-  //   return () => {
-  //     messageService?.removeListener(
-  //       MessageEvents.PublicMessageBeforeSent,
-  //       handlePublicMessageBeforeSent
-  //     );
-  //   };
-  // }, [messageService, chat.profiles, chat.publicMessages]);
-
-  //Public Message handler after sent
-  // const handlePublicMessageAfterSent = (data: PublicMessage[]) => {
-  //   if (isCommunityCreated) {
-  //     data.forEach((message) => {
-  //       const { root, id } = message;
-  //       if (replacedPublicMessagesBuffer.includes(id)) {
-  //         setReplacedPublicMessagesBuffer((prevBuffer) =>
-  //           prevBuffer.filter((messageId) => messageId !== id)
-  //         );
-  //         replacePublicMessage(root, message);
-  //       } else {
-  //         addPublicMessage(root, message);
-  //       }
-  //     });
-  //   } else {
-  //     setPublicMessageBuffer((publicMessageBuffer) => [...publicMessageBuffer, ...data]);
-  //   }
-  //   let uniqueUsers: string[] = [];
-  //
-  //   for (const item of data) {
-  //     const isCreatorMatch = chat.profiles.find((profile) => profile.creator === item.creator);
-  //
-  //     if (!isCreatorMatch) {
-  //       if (!uniqueUsers.includes(item.creator)) {
-  //         uniqueUsers.push(item.creator);
-  //       }
-  //     }
-  //   }
-  //   messageServiceInstance?.loadProfiles(uniqueUsers);
-  // };
-
-  // useEffect(() => {
-  //   messageService?.removeListener(
-  //     MessageEvents.PublicMessageAfterSent,
-  //     handlePublicMessageAfterSent
-  //   );
-  //   messageService?.addListener(MessageEvents.PublicMessageAfterSent, handlePublicMessageAfterSent);
-  //
-  //   return () => {
-  //     messageService?.removeListener(
-  //       MessageEvents.PublicMessageAfterSent,
-  //       handlePublicMessageAfterSent
-  //     );
-  //   };
-  // }, [messageService, chat.profiles, chat.publicMessages]);
-
-  // useEffect(() => {
-  //   if (channels?.length !== 0 && publicMessageBuffer.length !== 0) {
-  //     setPublicMessages();
-  //   }
-  // }, [chat.publicMessages, publicMessageBuffer]);
-
-  // const setPublicMessages = () => {
-  //   publicMessageBuffer.forEach((obj) => {
-  //     const { root } = obj;
-  //     const matchingStateItem = chat.publicMessages.find(
-  //       (stateItem) => stateItem.channelId === root
-  //     );
-  //     if (matchingStateItem) {
-  //       addPublicMessage(root, obj);
-  //       setPublicMessageBuffer((prevMessageBuffer) =>
-  //         prevMessageBuffer.filter((message) => message.id !== obj.id)
-  //       );
-  //     }
-  //   });
-  // };
-
-  //previous public messages handler
-  // const handlePreviousPublicMessages = (data: PublicMessage[]) => {
-  //   const channelId = data[0].root;
-  //   const messagesObject: MessagesObject = data.reduce((result, message) => {
-  //     result[message.id] = message;
-  //     return result;
-  //   }, {});
-  //
-  //   addPreviousPublicMessages(channelId, messagesObject);
-  // };
-
-  // useEffect(() => {
-  //   messageService?.removeListener(
-  //     MessageEvents.PreviousPublicMessages,
-  //     handlePreviousPublicMessages
-  //   );
-  //   messageService?.addListener(MessageEvents.PreviousPublicMessages, handlePreviousPublicMessages);
-  //
-  //   return () => {
-  //     messageService?.removeListener(
-  //       MessageEvents.PreviousPublicMessages,
-  //       handlePreviousPublicMessages
-  //     );
-  //   };
-  // }, [messageService, chat.profiles, chat.publicMessages]);
-
-  return <>{}</>;
-};
-
-export default MessageManager;
diff --git a/src/common/features/chats/mutations/add-direct-contact.ts b/src/common/features/chats/mutations/add-direct-contact.ts
index c7bbd98482c..a85781c8e8c 100644
--- a/src/common/features/chats/mutations/add-direct-contact.ts
+++ b/src/common/features/chats/mutations/add-direct-contact.ts
@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useDirectContactsQuery } from "../queries";
-import { DirectContact } from "../managers/message-manager-types";
-import { useNostrPublishMutation } from "../nostr";
+import { DirectContact, useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 
 export function useAddDirectContact() {
diff --git a/src/common/features/chats/mutations/fetch-previous-messages.ts b/src/common/features/chats/mutations/fetch-previous-messages.ts
index cc1621ff52c..fbd11c18244 100644
--- a/src/common/features/chats/mutations/fetch-previous-messages.ts
+++ b/src/common/features/chats/mutations/fetch-previous-messages.ts
@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNostrFetchMutation } from "../nostr";
+import { Channel, useNostrFetchMutation } from "../nostr";
 import { Event, Kind } from "../../../../lib/nostr-tools/event";
-import { Channel } from "../managers/message-manager-types";
 import { ChatQueries, useMessagesQuery } from "../queries";
 import { convertEvent } from "../nostr/utils/event-converter";
 
diff --git a/src/common/features/chats/mutations/hide-message-in-channel.ts b/src/common/features/chats/mutations/hide-message-in-channel.ts
index 6afd08c1d1c..9389acaece9 100644
--- a/src/common/features/chats/mutations/hide-message-in-channel.ts
+++ b/src/common/features/chats/mutations/hide-message-in-channel.ts
@@ -1,6 +1,6 @@
-import { Channel } from "../managers/message-manager-types";
 import { useMutation } from "@tanstack/react-query";
 import { useUpdateCommunityChannel } from "./update-community-channel";
+import { Channel } from "../nostr";
 
 interface Payload {
   hide: boolean;
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 0c24d79e9ab..376df8e4aa6 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -2,9 +2,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { UPLOADING } from "../components/chat-popup/chat-constants";
 import { useContext } from "react";
 import { ChatContext } from "../chat-context-provider";
-import { Channel } from "../managers/message-manager-types";
 import isCommunity from "../../../helper/is-community";
-import { useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
+import { Channel, useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
 import { useAddDirectContact } from "./add-direct-contact";
 import { ChatQueries, useMessagesQuery } from "../queries";
 import { useKeysQuery } from "../queries/keys-query";
diff --git a/src/common/features/chats/mutations/update-channel-blocked-users.ts b/src/common/features/chats/mutations/update-channel-blocked-users.ts
index 644a5449c5c..7de84ad0c22 100644
--- a/src/common/features/chats/mutations/update-channel-blocked-users.ts
+++ b/src/common/features/chats/mutations/update-channel-blocked-users.ts
@@ -1,6 +1,6 @@
 import { useUpdateCommunityChannel } from "./update-community-channel";
 import { useMutation } from "@tanstack/react-query";
-import { Channel } from "../managers/message-manager-types";
+import { Channel } from "../nostr";
 
 export function useUpdateChannelBlockedUsers(channel: Channel) {
   const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
diff --git a/src/common/features/chats/mutations/update-channel-moderator.ts b/src/common/features/chats/mutations/update-channel-moderator.ts
index 57cfc8b183b..d1bd56502ce 100644
--- a/src/common/features/chats/mutations/update-channel-moderator.ts
+++ b/src/common/features/chats/mutations/update-channel-moderator.ts
@@ -1,6 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
-import { Channel, CommunityModerator } from "../managers/message-manager-types";
 import { useUpdateCommunityChannel } from "./update-community-channel";
+import { Channel, CommunityModerator } from "../nostr";
 
 export function useUpdateChannelModerator(channel?: Channel) {
   const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
diff --git a/src/common/features/chats/mutations/update-community-channel.ts b/src/common/features/chats/mutations/update-community-channel.ts
index ca4d8ccf439..14d3d2dfa6d 100644
--- a/src/common/features/chats/mutations/update-community-channel.ts
+++ b/src/common/features/chats/mutations/update-community-channel.ts
@@ -1,7 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Channel } from "../managers/message-manager-types";
 import { ChatQueries, useChannelsQuery } from "../queries";
-import { useNostrPublishMutation } from "../nostr";
+import { Channel, useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { useFindHealthyRelayQuery } from "../nostr/mutations/find-healthy-relay";
 
diff --git a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
index e4f7b1a64ff..06704075ac9 100644
--- a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
@@ -1,9 +1,9 @@
 import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { useContext } from "react";
-import { Metadata } from "../../managers/message-manager-types";
 import { Event, getEventHash, Kind, signEvent } from "../../../../../lib/nostr-tools/event";
 import { NostrContext } from "../nostr-context";
 import { useKeysQuery } from "../../queries/keys-query";
+import { Metadata } from "../types";
 
 type Payload = { eventMetadata: Metadata | string; tags: string[][] };
 
diff --git a/src/common/features/chats/nostr/index.ts b/src/common/features/chats/nostr/index.ts
index d6b884dc2be..31b2039bdbe 100644
--- a/src/common/features/chats/nostr/index.ts
+++ b/src/common/features/chats/nostr/index.ts
@@ -2,3 +2,4 @@ export * from "./nostr-provider";
 export * from "./nostr-context";
 export * from "./core";
 export * from "./mutations";
+export * from "./types";
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
index f7db64b0124..8afde288de8 100644
--- a/src/common/features/chats/nostr/queries/direct-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/direct-messages-query.ts
@@ -1,9 +1,9 @@
 import { useNostrFetchQuery } from "../core";
-import { DirectContact, Message } from "../../managers/message-manager-types";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
 import { Kind } from "../../../../../lib/nostr-tools/event";
 import { convertEvent } from "../utils/event-converter";
 import { NostrQueries } from "./queries";
+import { DirectContact, Message } from "../types";
 
 export function useDirectMessagesQuery(
   directContacts: DirectContact[],
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
index 81ccc4bde7c..094716ec9a4 100644
--- a/src/common/features/chats/nostr/queries/public-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/public-messages-query.ts
@@ -1,9 +1,9 @@
 import { useNostrFetchQuery } from "../core";
-import { Channel, Message } from "../../managers/message-manager-types";
 import { Filter } from "../../../../../lib/nostr-tools/filter";
 import { Kind } from "../../../../../lib/nostr-tools/event";
 import { convertEvent } from "../utils/event-converter";
 import { NostrQueries } from "./queries";
+import { Channel, Message } from "../types";
 
 export function usePublicMessagesQuery(channels: Channel[]) {
   return useNostrFetchQuery<Message[]>(
diff --git a/src/common/features/chats/nostr/types/channel.ts b/src/common/features/chats/nostr/types/channel.ts
new file mode 100644
index 00000000000..9d0e24d208f
--- /dev/null
+++ b/src/common/features/chats/nostr/types/channel.ts
@@ -0,0 +1,5 @@
+import { Metadata } from "./metadata";
+
+export type Channel = { id: string; creator: string; created: number } & Metadata;
+
+export type ChannelUpdate = { channelId: string } & Channel;
diff --git a/src/common/features/chats/nostr/types/community-moderator.ts b/src/common/features/chats/nostr/types/community-moderator.ts
new file mode 100644
index 00000000000..48cd7dc86ff
--- /dev/null
+++ b/src/common/features/chats/nostr/types/community-moderator.ts
@@ -0,0 +1,5 @@
+export type CommunityModerator = {
+  name: string;
+  pubkey: string;
+  role: string;
+};
diff --git a/src/common/features/chats/nostr/types/direct-contact.ts b/src/common/features/chats/nostr/types/direct-contact.ts
new file mode 100644
index 00000000000..0787b8a3a3f
--- /dev/null
+++ b/src/common/features/chats/nostr/types/direct-contact.ts
@@ -0,0 +1 @@
+export type DirectContact = { name: string; pubkey: string };
diff --git a/src/common/features/chats/nostr/types/index.ts b/src/common/features/chats/nostr/types/index.ts
new file mode 100644
index 00000000000..1348ead5d9c
--- /dev/null
+++ b/src/common/features/chats/nostr/types/index.ts
@@ -0,0 +1,6 @@
+export * from "./metadata";
+export * from "./community-moderator";
+export * from "./profile";
+export * from "./direct-contact";
+export * from "./channel";
+export * from "./messages";
diff --git a/src/common/features/chats/nostr/types/messages.ts b/src/common/features/chats/nostr/types/messages.ts
new file mode 100644
index 00000000000..55f39062f6b
--- /dev/null
+++ b/src/common/features/chats/nostr/types/messages.ts
@@ -0,0 +1,24 @@
+export type PublicMessage = {
+  id: string;
+  root: string;
+  content: string;
+  creator: string;
+  created: number;
+  children?: PublicMessage[];
+  mentions: string[];
+  sent?: number;
+};
+
+export type DirectMessage = {
+  id: string;
+  root?: string;
+  content: string;
+  peer: string;
+  creator: string;
+  created: number;
+  children?: DirectMessage[];
+  decrypted: boolean;
+  sent?: number;
+};
+
+export type Message = PublicMessage | DirectMessage;
diff --git a/src/common/features/chats/nostr/types/metadata.ts b/src/common/features/chats/nostr/types/metadata.ts
new file mode 100644
index 00000000000..b92f7244be2
--- /dev/null
+++ b/src/common/features/chats/nostr/types/metadata.ts
@@ -0,0 +1,11 @@
+import { CommunityModerator } from "./community-moderator";
+
+export type Metadata = {
+  name: string;
+  about: string;
+  picture: string;
+  communityName?: string;
+  communityModerators?: CommunityModerator[];
+  hiddenMessageIds?: string[];
+  removedUserIds?: string[];
+};
diff --git a/src/common/features/chats/nostr/types/profile.ts b/src/common/features/chats/nostr/types/profile.ts
new file mode 100644
index 00000000000..1f8a6b91191
--- /dev/null
+++ b/src/common/features/chats/nostr/types/profile.ts
@@ -0,0 +1,3 @@
+import { Metadata } from "./metadata";
+
+export type Profile = { id: string; creator: string; created: number } & Metadata;
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
index e36cc3a4930..4887ff7174a 100644
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ b/src/common/features/chats/nostr/utils/event-converter.ts
@@ -1,8 +1,8 @@
 import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import { Channel, Message, Profile } from "../../managers/message-manager-types";
 import { findTagValue } from "./find-tag-value";
 import { filterTagValue } from "./filter-tag-value";
 import { decrypt } from "../../../../../lib/nostr-tools/nip04";
+import { Channel, Message, Profile } from "../types";
 
 export interface EventConverterResult {
   [Kind.ChannelCreation]: Channel;
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
index 536df878e50..77e037f9fdf 100644
--- a/src/common/features/chats/queries/channels-query.ts
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -1,6 +1,5 @@
 import { ChatQueries } from "./queries";
-import { Channel } from "../managers/message-manager-types";
-import { useNostrFetchQuery } from "../nostr";
+import { Channel, useNostrFetchQuery } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { useKeysQuery } from "./keys-query";
 import { convertEvent } from "../nostr/utils/event-converter";
diff --git a/src/common/features/chats/queries/community-channel-query.ts b/src/common/features/chats/queries/community-channel-query.ts
index 10f350540ae..4dbc9ea815b 100644
--- a/src/common/features/chats/queries/community-channel-query.ts
+++ b/src/common/features/chats/queries/community-channel-query.ts
@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ChatQueries } from "./queries";
 import { Community } from "../../../store/communities";
 import { getProfileMetaData } from "../utils";
-import { Channel } from "../managers/message-manager-types";
+import { Channel } from "../nostr";
 
 /**
  * Get the community's channel information
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index 8c1052d9798..272766da791 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -1,7 +1,6 @@
 import { ChatQueries } from "./queries";
-import { DirectContact } from "../managers/message-manager-types";
 import { useKeysQuery } from "./keys-query";
-import { useNostrFetchQuery } from "../nostr";
+import { DirectContact, useNostrFetchQuery } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 
 export function useDirectContactsQuery() {
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
index 17c2c37d680..4bf9f2a35d5 100644
--- a/src/common/features/chats/queries/last-messages-query.ts
+++ b/src/common/features/chats/queries/last-messages-query.ts
@@ -1,11 +1,11 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Message } from "../managers/message-manager-types";
 import { ChatQueries } from "./queries";
 import { getDirectLastMessage } from "../utils";
 import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useChannelsQuery } from "./channels-query";
 import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { useKeysQuery } from "./keys-query";
+import { Message } from "../nostr";
 
 export function useLastMessagesQuery() {
   const queryClient = useQueryClient();
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 9afd381f475..73fbbced25b 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -3,9 +3,9 @@ import { useDirectContactsQuery } from "./direct-contacts-query";
 import { useMemo } from "react";
 import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
 import { ChatQueries } from "./queries";
-import { Message } from "../managers/message-manager-types";
 import { useChannelsQuery } from "./channels-query";
 import { useKeysQuery } from "./keys-query";
+import { Message } from "../nostr";
 
 export function useMessagesQuery(username?: string) {
   const queryClient = useQueryClient();
diff --git a/src/common/features/chats/queries/nostr-joined-community-team-query.ts b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
index 1380e0e09f9..3dd74c584a3 100644
--- a/src/common/features/chats/queries/nostr-joined-community-team-query.ts
+++ b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { ChatQueries } from "./queries";
-import { CommunityModerator } from "../managers/message-manager-types";
 import { getProfileMetaData } from "../utils";
 import { Community, ROLES } from "../../../store/communities";
 import { NOSTRKEY } from "../components/chat-popup/chat-constants";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { useKeysQuery } from "./keys-query";
+import { CommunityModerator } from "../nostr";
 
 /**
  * Get a community team members which joined to Nostr and available to create a chat
diff --git a/src/common/features/chats/types/chat-types.ts b/src/common/features/chats/types/chat-types.ts
index 1ccd0e3e5b5..a2b80edba76 100644
--- a/src/common/features/chats/types/chat-types.ts
+++ b/src/common/features/chats/types/chat-types.ts
@@ -1,14 +1,3 @@
-export interface NostrKeysType {
-  pub: string;
-  priv: string;
-}
-
-export interface profileData {
-  joiningData: string;
-  about: string | undefined;
-  followers: number | undefined;
-}
-
 export interface AccountWithReputation {
   account: string;
   reputation: number;
diff --git a/src/common/features/chats/utils/check-contiguous-message.ts b/src/common/features/chats/utils/check-contiguous-message.ts
index ae055d7ca62..7342faf5d73 100644
--- a/src/common/features/chats/utils/check-contiguous-message.ts
+++ b/src/common/features/chats/utils/check-contiguous-message.ts
@@ -1,4 +1,4 @@
-import { DirectMessage, PublicMessage } from "../managers/message-manager-types";
+import { DirectMessage, PublicMessage } from "../nostr";
 
 export const checkContiguousMessage = (
   msg: PublicMessage | DirectMessage,
diff --git a/src/common/features/chats/utils/format-message-date-and-day.ts b/src/common/features/chats/utils/format-message-date-and-day.ts
index a02a1e0dbd8..489e9cfc469 100644
--- a/src/common/features/chats/utils/format-message-date-and-day.ts
+++ b/src/common/features/chats/utils/format-message-date-and-day.ts
@@ -1,5 +1,5 @@
 import { formatMessageDate } from "./format-message-time";
-import { DirectMessage, PublicMessage } from "../managers/message-manager-types";
+import { DirectMessage, PublicMessage } from "../nostr";
 
 export const formatMessageDateAndDay = (
   msg: DirectMessage | PublicMessage,
diff --git a/src/common/features/chats/utils/get-joined-communities.ts b/src/common/features/chats/utils/get-joined-communities.ts
index d533d7c1491..e588beaf82b 100644
--- a/src/common/features/chats/utils/get-joined-communities.ts
+++ b/src/common/features/chats/utils/get-joined-communities.ts
@@ -1,4 +1,4 @@
-import { Channel } from "../managers/message-manager-types";
+import { Channel } from "../nostr";
 
 export const getJoinedCommunities = (channels: Channel[], leftChannels: string[]) => {
   return channels.filter((item) => !leftChannels.includes(item.id));
diff --git a/src/common/features/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
index 357b8182fa2..9d8db842fa7 100644
--- a/src/common/features/chats/utils/use-get-direct-last-message.ts
+++ b/src/common/features/chats/utils/use-get-direct-last-message.ts
@@ -1,4 +1,4 @@
-import { Message } from "../managers/message-manager-types";
+import { Message } from "../nostr";
 
 export const getDirectLastMessage = (directMessages: Message[]) => {
   if (!directMessages.length) {

From c7f3bf343eed615dff3d2bd1267711e374077f06 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 12 Nov 2023 18:33:46 +0600
Subject: [PATCH 129/179] Chats: cleaned chat context

---
 src/common/components/login/index.tsx         |  12 -
 .../features/chats/chat-context-provider.tsx  |  87 +-
 .../components/chat-channel-messages.tsx      |   6 +-
 .../features/chats/components/chat-input.tsx  |   6 +-
 .../chat-popup-contacts-and-channels.tsx      |   8 +-
 .../chat-popup/chat-popup-header.tsx          |   8 +-
 .../chats/components/chat-popup/index.tsx     |  12 +-
 .../chats-sidebar/chat-sidebar-channel.tsx    |   6 +-
 .../chat-sidebar-direct-contact.tsx           |   6 +-
 .../chats-sidebar/chat-sidebar-header.tsx     |  14 +-
 .../chats/components/chats-sidebar/index.tsx  |   4 +-
 .../chats/components/manage-chat-key.tsx      |  14 +-
 .../hooks/use-message-service-listener.tsx    |  36 -
 .../features/chats/mutations/send-message.ts  |   6 +-
 src/common/features/chats/screens/chats.tsx   |  22 +-
 src/common/helper/message-service-global.ts   |  16 -
 src/common/helper/message-service.ts          | 833 ------------------
 17 files changed, 61 insertions(+), 1035 deletions(-)
 delete mode 100644 src/common/features/chats/hooks/use-message-service-listener.tsx
 delete mode 100644 src/common/helper/message-service-global.ts
 delete mode 100644 src/common/helper/message-service.ts

diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 61a7b6ba1d6..58dfbe0b841 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -23,7 +23,6 @@ import { usrActivity } from "../../api/private-api";
 import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission } from "../../api/operations";
 import { getRefreshToken } from "../../helper/user-token";
-import { getPrivateKey, getProfileMetaData } from "../../features/chats/utils";
 
 import ReCAPTCHA from "react-google-recaptcha";
 import { addAccountAuthority, signBuffer } from "../../helper/keychain";
@@ -38,7 +37,6 @@ import { Spinner } from "@ui/spinner";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
-import { setNostrkeys } from "../../features/chats/managers/message-manager";
 
 declare var window: AppWindow;
 
@@ -721,8 +719,6 @@ class LoginDialog extends Component<Props> {
   }
 
   doLogin = async (hsCode: string, postingKey: null | undefined | string, account: Account) => {
-    const profile = await getProfileMetaData(account.name);
-
     const { global, setActiveUser, updateActiveUser, addUser } = this.props;
 
     // get access token from code
@@ -738,14 +734,6 @@ class LoginDialog extends Component<Props> {
       // add / update user data
       addUser(user);
 
-      //create new message service instance for newly logged in user
-      if (profile && profile.nsKey && getPrivateKey(account.name)) {
-        const keys = {
-          pub: profile.nsKey,
-          priv: getPrivateKey(account.name)!!
-        };
-        setNostrkeys(keys);
-      }
       // activate user
       setActiveUser(user.username);
 
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index f3018a460c4..3e54bcf5501 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,26 +1,14 @@
-import React, { useEffect, useState } from "react";
-import useDebounce from "react-use/lib/useDebounce";
-import MessageService from "../../helper/message-service";
-import { useMount } from "react-use";
+import React, { useState } from "react";
 import { useKeysQuery } from "./queries/keys-query";
-import { useJoinChat } from "./mutations";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 import { useListenMessagesQuery } from "./queries/listen-messages-query";
 
 interface Context {
-  showSpinner: boolean;
-  revealPrivKey: boolean;
-  chatPrivKey: string;
+  revealPrivateKey: boolean;
   receiverPubKey: string;
   hasUserJoinedChat: boolean;
-  windowWidth: number;
-  // TODO: it means is active usre removed from channe;
-  isActiveUserRemoved: boolean;
-  setRevealPrivKey: (d: boolean) => void;
-  setShowSpinner: (d: boolean) => void;
-  setChatPrivKey: (key: string) => void;
+  setRevealPrivateKey: (d: boolean) => void;
   setReceiverPubKey: (key: string) => void;
-  setMessageServiceInstance: (instance: MessageService | null) => void;
 }
 
 interface Props {
@@ -28,81 +16,30 @@ interface Props {
 }
 
 export const ChatContext = React.createContext<Context>({
-  showSpinner: false,
-  revealPrivKey: false,
-  chatPrivKey: "",
+  revealPrivateKey: false,
   receiverPubKey: "",
   hasUserJoinedChat: false,
-  windowWidth: 0,
-  isActiveUserRemoved: false,
-  setRevealPrivKey: () => {},
-  setShowSpinner: () => {},
-  setChatPrivKey: () => {},
-  setReceiverPubKey: () => {},
-  setMessageServiceInstance: () => {}
+  setRevealPrivateKey: () => {},
+  setReceiverPubKey: () => {}
 });
 
 export const ChatContextProvider = (props: Props) => {
-  const [showSpinner, setShowSpinner] = useState(true);
-  const [chatPrivKey, setChatPrivKey] = useState("");
-  const [revealPrivKey, setRevealPrivKey] = useState(false);
+  const [revealPrivateKey, setRevealPrivateKey] = useState(false);
   const [receiverPubKey, setReceiverPubKey] = useState("");
-  const [messageServiceInstance, setMessageServiceInstance] = useState<MessageService | null>(null);
-  const [hasUserJoinedChat, setHasUserJoinedChat] = useState(false);
-  const [windowWidth, setWindowWidth] = useState(0);
-  const [isActiveUserRemoved, setIsActiveUserRemoved] = useState(false);
 
-  const { privateKey, publicKey } = useKeysQuery();
+  const { hasKeys } = useKeysQuery();
 
-  useJoinChat(() => {
-    setHasUserJoinedChat(true);
-  });
   useListenMessagesQuery();
 
-  useDebounce(() => setShowSpinner(false), 5000, [showSpinner]);
-
-  useMount(() => {
-    setWindowWidth(window.innerWidth);
-  });
-
-  useEffect(() => {
-    setHasUserJoinedChat(!!publicKey);
-  }, [publicKey]);
-
-  useEffect(() => {
-    if (privateKey) {
-      setChatPrivKey(privateKey);
-    }
-  }, [privateKey]);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <NostrListenerQueriesProvider>
       <ChatContext.Provider
         value={{
-          showSpinner,
-          revealPrivKey,
+          revealPrivateKey,
           receiverPubKey,
-          chatPrivKey,
-          hasUserJoinedChat,
-          windowWidth,
-          isActiveUserRemoved,
-          setRevealPrivKey,
-          setShowSpinner,
-          setChatPrivKey,
-          setReceiverPubKey,
-          setMessageServiceInstance
+          hasUserJoinedChat: hasKeys,
+          setRevealPrivateKey,
+          setReceiverPubKey
         }}
       >
         <NostrProvider>{props.children}</NostrProvider>
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index e1bf383e279..02b50baadae 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,11 +1,10 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Zoom } from "medium-zoom";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
 import { Theme } from "../../../store/global/types";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../utils";
-import { ChatContext } from "../chat-context-provider";
 import { ChatMessageItem } from "./chat-message-item";
 import { useKeysQuery } from "../queries/keys-query";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
@@ -33,7 +32,6 @@ export function ChatsChannelMessages({
 }: Props) {
   const { global, activeUser } = useMappedStore();
 
-  const { isActiveUserRemoved } = useContext(ChatContext);
   let prevGlobal = usePrevious(global);
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
@@ -140,7 +138,7 @@ export function ChatsChannelMessages({
           </React.Fragment>
         ))}
         {/*TODO: CHeck it in messages query*/}
-        {isActiveUserRemoved && (
+        {false && (
           <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
           </span>
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 2c3a206c1f4..75775c6c9ad 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -33,7 +33,7 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
 
-  const { isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { receiverPubKey } = useContext(ChatContext);
 
   const [message, setMessage] = useState("");
   const [showGifPicker, setShowGifPicker] = useState(false);
@@ -51,8 +51,8 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
   const isCommunity = useMemo(() => !!currentChannel, [currentChannel]);
 
   const isDisabled = useMemo(
-    () => (isCurrentUser && !receiverPubKey) || isActiveUserRemoved,
-    [isCurrentUser, receiverPubKey, isActiveUserRemoved]
+    () => isCurrentUser && !receiverPubKey,
+    [isCurrentUser, receiverPubKey]
   );
 
   useClickAway(gifPickerRef, () => setShowGifPicker(false));
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 3e696b77d50..485698bdeeb 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useMemo } from "react";
 import { _t } from "../../../../i18n";
 import { getJoinedCommunities } from "../../utils";
 import { ChatsImport } from "../chats-import";
-import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectMessage } from "./chat-direct-message";
@@ -21,7 +20,7 @@ export function ChatPopupContactsAndChannels({
   userClicked,
   setShowSearchUser
 }: Props) {
-  const { showSpinner, setReceiverPubKey } = useContext(ChatContext);
+  const { setReceiverPubKey } = useContext(ChatContext);
 
   const { privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
@@ -37,7 +36,6 @@ export function ChatPopupContactsAndChannels({
   return (
     <>
       {(directContacts?.length !== 0 || (channels?.length !== 0 && joinedChannels.length !== 0)) &&
-      !showSpinner &&
       privateKey ? (
         <>
           {joinedChannels.length !== 0 && (
@@ -68,10 +66,6 @@ export function ChatPopupContactsAndChannels({
         </>
       ) : !privateKey ? (
         <ChatsImport />
-      ) : showSpinner ? (
-        <div className="flex items-center justify-center h-full">
-          <Spinner className="w-4 h-4" />
-        </div>
       ) : (
         <>
           <p className="no-chat">{_t("chat.no-chat")}</p>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index 9cd6d92137c..d69556bbad1 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -38,14 +38,14 @@ export function ChatPopupHeader({
   handleExtendedView,
   setExpanded
 }: Props) {
-  const { revealPrivKey, setRevealPrivKey } = useContext(ChatContext);
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
   const { privateKey } = useKeysQuery();
 
   return (
     <div className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2">
       <div className="flex items-center gap-2">
-        {(currentUser || communityName || showSearchUser || revealPrivKey) && expanded && (
+        {(currentUser || communityName || showSearchUser || revealPrivateKey) && expanded && (
           <Tooltip content={_t("chat.back")}>
             <Button
               size="sm"
@@ -68,7 +68,7 @@ export function ChatPopupHeader({
               ? communityName
               : showSearchUser
               ? _t("chat.new-message")
-              : revealPrivKey
+              : revealPrivateKey
               ? _t("chat.manage-chat-key")
               : _t("chat.messages")}
           </div>
@@ -100,7 +100,7 @@ export function ChatPopupHeader({
           <div className="simple-menu" onClick={() => setExpanded(true)}>
             <ChatsDropdownMenu
               history={history!}
-              onManageChatKey={() => setRevealPrivKey(!revealPrivKey)}
+              onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
             />
           </div>
         )}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 5c4918913f7..983cd5a6518 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -26,7 +26,7 @@ import { useKeysQuery } from "../../queries/keys-query";
 export const ChatPopUp = () => {
   const { activeUser, global } = useMappedStore();
 
-  const { receiverPubKey, revealPrivKey, hasUserJoinedChat, setRevealPrivKey, setShowSpinner } =
+  const { receiverPubKey, revealPrivateKey, hasUserJoinedChat, setRevealPrivateKey } =
     useContext(ChatContext);
   const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
 
@@ -61,8 +61,8 @@ export const ChatPopUp = () => {
   );
   const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
   const canSendMessage = useMemo(
-    () => !currentUser && hasUserJoinedChat && !!privateKey && !isCommunity && !revealPrivKey,
-    [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivKey]
+    () => !currentUser && hasUserJoinedChat && !!privateKey && !isCommunity && !revealPrivateKey,
+    [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivateKey]
   );
 
   const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingMore } =
@@ -159,7 +159,7 @@ export const ChatPopUp = () => {
     setIsCommunity(false);
     setShowSearchUser(false);
     setHasMore(true);
-    setRevealPrivKey(false);
+    setRevealPrivateKey(false);
   };
 
   const handleExtendedView = () => {
@@ -202,7 +202,7 @@ export const ChatPopUp = () => {
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
-            {hasUserJoinedChat && !revealPrivKey ? (
+            {hasUserJoinedChat && !revealPrivateKey ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
                   <ChatPopupMessagesList username={currentUser ? currentUser : communityName} />
@@ -219,7 +219,7 @@ export const ChatPopUp = () => {
                   />
                 )}
               </>
-            ) : revealPrivKey ? (
+            ) : revealPrivateKey ? (
               <div className="p-4">
                 <ManageChatKey />
               </div>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index a8a7959c36e..ea495f5af93 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export function ChatSidebarChannel({ channel, username }: Props) {
-  const { revealPrivKey, setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
+  const { revealPrivateKey, setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
 
   const { data: lastMessages } = useLastMessagesQuery();
 
@@ -32,8 +32,8 @@ export function ChatSidebarChannel({ channel, username }: Props) {
       })}
       to={`/chats/${channel.communityName}`}
       onClick={() => {
-        if (revealPrivKey) {
-          setRevealPrivKey(false);
+        if (revealPrivateKey) {
+          setRevealPrivateKey(false);
         }
       }}
     >
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 4eeed01985b..f07592a5583 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export function ChatSidebarDirectContact({ contact, username }: Props) {
-  const { setReceiverPubKey, revealPrivKey, setRevealPrivKey } = useContext(ChatContext);
+  const { setReceiverPubKey, revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
   const { data: lastMessages } = useLastMessagesQuery();
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
@@ -32,8 +32,8 @@ export function ChatSidebarDirectContact({ contact, username }: Props) {
       to={`/chats/@${contact.name}`}
       onClick={() => {
         setReceiverPubKey(contact.pubkey);
-        if (revealPrivKey) {
-          setRevealPrivKey(false);
+        if (revealPrivateKey) {
+          setRevealPrivateKey(false);
         }
       }}
     >
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index 74461f97be8..ddddb99b761 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -6,37 +6,39 @@ import ChatsDropdownMenu from "../chats-dropdown-menu";
 import React, { useContext } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import { History } from "history";
+import { useKeysQuery } from "../../queries/keys-query";
 
 interface Props {
   history: History;
 }
 
 export function ChatSidebarHeader({ history }: Props) {
-  const { revealPrivKey, chatPrivKey, setRevealPrivKey } = useContext(ChatContext);
+  const { privateKey } = useKeysQuery();
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
       <div className="flex items-center gap-2">
-        {revealPrivKey && (
+        {revealPrivateKey && (
           <Tooltip content={_t("chat.back")}>
             <Button
               className="hidden md:flex"
               noPadding={true}
               appearance="gray-link"
               icon={arrowBackSvg}
-              onClick={() => setRevealPrivKey(false)}
+              onClick={() => setRevealPrivateKey(false)}
             />
           </Tooltip>
         )}
         <div className="font-semibold text-gray-600 text-sm">
-          {revealPrivKey ? _t("chat.manage-chat-key") : _t("chat.title")}
+          {revealPrivateKey ? _t("chat.manage-chat-key") : _t("chat.title")}
         </div>
       </div>
       <div className="flex items-center">
-        {chatPrivKey && (
+        {!!privateKey && (
           <div className="chat-menu">
             <ChatsDropdownMenu
-              onManageChatKey={() => setRevealPrivKey(!revealPrivKey)}
+              onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
               history={history}
             />
           </div>
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 2708c83f7ef..5e3bd1c346e 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
-  const { setRevealPrivKey, setReceiverPubKey } = useContext(ChatContext);
+  const { setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
@@ -90,7 +90,7 @@ export default function ChatsSideBar(props: Props) {
               user={user}
               onClick={() => {
                 setSearchQuery("");
-                setRevealPrivKey(false);
+                setRevealPrivateKey(false);
                 getReceiverPubKey(user.account);
               }}
               key={user.account}
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index 30c0e8c37b4..2fa5499762a 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -1,19 +1,21 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { _t } from "../../../i18n";
-import { ChatContext } from "../chat-context-provider";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
+import { useKeysQuery } from "../queries/keys-query";
 
 export default function ManageChatKey() {
-  const { chatPrivKey } = useContext(ChatContext);
+  const { privateKey } = useKeysQuery();
 
   const qrImgRef = useRef<HTMLImageElement | null>(null);
   const [isQrShow, setIsQrShow] = useState(false);
 
   useEffect(() => {
-    compileQR(chatPrivKey);
-  }, [chatPrivKey]);
+    if (privateKey) {
+      compileQR(privateKey);
+    }
+  }, [privateKey]);
 
   const compileQR = async (key: string) => {
     if (qrImgRef.current) {
@@ -25,7 +27,7 @@ export default function ManageChatKey() {
   return (
     <div className="flex gap-4 flex-col w-full">
       <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
-      <InputGroupCopyClipboard value={chatPrivKey} />
+      <InputGroupCopyClipboard value={privateKey ?? ""} />
       <img
         ref={qrImgRef}
         className={classNameObject({
diff --git a/src/common/features/chats/hooks/use-message-service-listener.tsx b/src/common/features/chats/hooks/use-message-service-listener.tsx
deleted file mode 100644
index b266c375dee..00000000000
--- a/src/common/features/chats/hooks/use-message-service-listener.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect, useState } from "react";
-import MessageService from "../../../helper/message-service";
-import { useChannelsQuery } from "../queries";
-
-export const useMessageServiceListener = (
-  messageServiceReady: boolean,
-  messageService: MessageService | undefined
-) => {
-  const { data: channels } = useChannelsQuery();
-
-  const [since, setSince] = useState(0);
-
-  useEffect(() => {
-    if (!messageServiceReady) return;
-
-    const timer = setTimeout(
-      () => {
-        if (!channels || channels.length === 0) {
-          return;
-        }
-
-        // TODO THIS THING
-        messageService?.listen(
-          channels?.map((x) => x.id),
-          Math.floor((since || Date.now()) / 1000)
-        );
-        setSince(Date.now());
-      },
-      since === 0 ? 500 : 10000
-    );
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [since, messageServiceReady, messageService, channels]);
-};
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 376df8e4aa6..3d71b08104d 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -15,7 +15,7 @@ export function useSendMessage(
 ) {
   const queryClient = useQueryClient();
 
-  const { isActiveUserRemoved, receiverPubKey } = useContext(ChatContext);
+  const { receiverPubKey } = useContext(ChatContext);
   const { privateKey } = useKeysQuery();
   const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
 
@@ -37,10 +37,6 @@ export function useSendMessage(
         throw new Error("[Chat][SendMessage] – empty message or has uploading file");
       }
 
-      if (isActiveUserRemoved) {
-        throw new Error("[Chat][SendMessage] – no active user");
-      }
-
       if (!currentChannel && isCommunity(currentUser)) {
         throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
       }
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 7435ec27f64..1bde943892d 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -8,7 +8,6 @@ import ManageChatKey from "../components/manage-chat-key";
 import Feedback from "../../../components/feedback";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
-import { Spinner } from "@ui/spinner";
 import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
@@ -30,7 +29,7 @@ interface Props extends PageProps {
 
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
-  const { receiverPubKey, showSpinner, revealPrivKey } = useContext(ChatContext);
+  const { receiverPubKey, revealPrivateKey } = useContext(ChatContext);
 
   const { publicKey, privateKey } = useKeysQuery();
   const { data: channels } = useChannelsQuery();
@@ -50,16 +49,16 @@ export const Chats = (props: Props) => {
     () => !!(activeUser && publicKey && privateKey),
     [publicKey, privateKey, activeUser]
   );
-  const isShowManageKey = useMemo(() => isReady && revealPrivKey, [isReady, revealPrivKey]);
+  const isShowManageKey = useMemo(() => isReady && revealPrivateKey, [isReady, revealPrivateKey]);
   const isShowChatRoom = useMemo(
-    () => isReady && !showSpinner && (!!receiverPubKey || isChannel) && !revealPrivKey,
-    [isReady, showSpinner, receiverPubKey, revealPrivKey, isChannel]
+    () => isReady && (!!receiverPubKey || isChannel) && !revealPrivateKey,
+    [isReady, receiverPubKey, revealPrivateKey, isChannel]
   );
   const isShowDefaultScreen = useMemo(
-    () => isReady && !receiverPubKey && !isChannel && !revealPrivKey && !showSpinner,
-    [isReady, receiverPubKey, revealPrivKey, showSpinner, isChannel]
+    () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey,
+    [isReady, receiverPubKey, revealPrivateKey, isChannel]
   );
-  const isShowImportChats = useMemo(() => !isReady && !showSpinner, [isReady, showSpinner]);
+  const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
   const { match, history } = props;
 
@@ -96,11 +95,6 @@ export const Chats = (props: Props) => {
                 </div>
               </div>
             )}
-            {showSpinner && (
-              <div className="flex justify-center items-center h-full w-full">
-                <Spinner className="w-6 h-6" />
-              </div>
-            )}
             {isShowImportChats && activeUser && (
               <div className="h-full w-full flex items-center justify-center">
                 <ChatsImport />
@@ -115,7 +109,7 @@ export const Chats = (props: Props) => {
                 <div>Search a person or community and start messaging</div>
               </div>
             )}
-            {!isReady && !isShowImportChats && !showSpinner && (
+            {!isReady && !isShowImportChats && (
               <div className="flex justify-center items-center full-page">
                 <JoinChat />
               </div>
diff --git a/src/common/helper/message-service-global.ts b/src/common/helper/message-service-global.ts
deleted file mode 100644
index 7d1a6791ac4..00000000000
--- a/src/common/helper/message-service-global.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import MessageService from "./message-service";
-import { Event } from "../../lib/nostr-tools/event";
-
-declare global {
-  interface Window {
-    messageService?: MessageService;
-    nostr?: {
-      getPublicKey: () => Promise<string>;
-      signEvent: (event: Event) => Promise<Event>;
-      nip04: {
-        encrypt: (pubkey: string, content: string) => Promise<string>;
-        decrypt: (pubkey: string, content: string) => Promise<string>;
-      };
-    };
-  }
-}
diff --git a/src/common/helper/message-service.ts b/src/common/helper/message-service.ts
deleted file mode 100644
index 88cd0e37dfe..00000000000
--- a/src/common/helper/message-service.ts
+++ /dev/null
@@ -1,833 +0,0 @@
-import { Sub } from "../../lib/nostr-tools/relay";
-import { Event, getEventHash, Kind, signEvent } from "../../lib/nostr-tools/event";
-import { Filter } from "../../lib/nostr-tools/filter";
-import { TypedEventEmitter } from "./message-event-emitter";
-import {
-  Channel,
-  ChannelUpdate,
-  DirectContact,
-  DirectMessage,
-  Metadata,
-  Profile,
-  PublicMessage
-} from "../features/chats/managers/message-manager-types";
-import { decrypt, encrypt } from "../../lib/nostr-tools/nip04";
-import SimplePool from "../../lib/nostr-tools/pool";
-
-const relays = {
-  "wss://relay1.nostrchat.io": { read: true, write: true },
-  "wss://relay2.nostrchat.io": { read: true, write: true },
-  "wss://relay.damus.io": { read: true, write: true },
-  "wss://relay.snort.social": { read: true, write: true },
-  "wss://nos.lol": { read: true, write: true }
-};
-const MESSAGE_PAGE_SIZE = 30;
-
-enum NewKinds {
-  MuteList = 10000,
-  Arbitrary = 30078
-}
-
-export enum MessageEvents {
-  Ready = "ready",
-  ProfileUpdate = "profile_update",
-  LeftChannelList = "left_channel_list",
-  ChannelUpdate = "channel_update",
-  ChannelCreation = "channel_creation",
-  DirectMessageBeforeSent = "direct_message_before_sent",
-  DirectMessageAfterSent = "direct_message_after_sent",
-  DirectContact = "direct_contact",
-  PublicMessageBeforeSent = "public_message_before_sent",
-  PublicMessageAfterSent = "public_message_after_sent",
-  PreviousPublicMessages = "previous_public_messages"
-}
-
-type EventHandlerMap = {
-  [MessageEvents.Ready]: () => void;
-  [MessageEvents.ProfileUpdate]: (data: Profile[]) => void;
-  [MessageEvents.DirectMessageBeforeSent]: (data: DirectMessage[]) => void;
-  [MessageEvents.DirectMessageAfterSent]: (data: DirectMessage[]) => void;
-  [MessageEvents.ChannelCreation]: (data: Channel[]) => void;
-  [MessageEvents.ChannelUpdate]: (data: ChannelUpdate[]) => void;
-  [MessageEvents.PublicMessageBeforeSent]: (data: PublicMessage[]) => void;
-  [MessageEvents.PublicMessageAfterSent]: (data: PublicMessage[]) => void;
-  [MessageEvents.PreviousPublicMessages]: (data: PublicMessage[]) => void;
-  [MessageEvents.LeftChannelList]: (data: string[]) => void;
-  [MessageEvents.DirectContact]: (data: DirectContact[]) => void;
-};
-
-class MessageService extends TypedEventEmitter<MessageEvents, EventHandlerMap> {
-  public directContacts: any = [];
-  listenerSub: Sub | null = null;
-  messageListenerSub: Sub | null = null;
-  private pool: SimplePool;
-  private poolL: SimplePool;
-  private readonly priv: string | "nip07";
-  private readonly pub: string;
-  private readonly readRelays = Object.keys(relays).filter((r) => relays[r].read);
-  private readonly writeRelays = Object.keys(relays).filter((r) => relays[r].write);
-  private eventQueue: Event[] = [];
-  private eventQueueTimer: any;
-  private eventQueueFlag = true;
-  private eventQueueBuffer: Event[] = [];
-  private nameCache: Record<string, number> = {};
-
-  constructor(priv: string, pub: string) {
-    super();
-
-    this.priv = priv;
-    this.pub = pub;
-
-    this.pool = new SimplePool();
-    this.poolL = new SimplePool({ eoseSubTimeout: 10000 });
-
-    this.init().then();
-  }
-
-  static normalizeMetadata(meta: Metadata) {
-    return {
-      name: meta.name || "",
-      about: meta.about || "",
-      picture: meta.picture || ""
-    };
-  }
-
-  static parseJson(d: string) {
-    try {
-      return JSON.parse(d);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  static isSha256 = (s: string) => /^[a-f0-9]{64}$/gi.test(s);
-
-  static notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
-    return value !== null && value !== undefined;
-  }
-
-  static findTagValue(ev: Event, tag: "e" | "p" | "d") {
-    return ev.tags.find(([t]) => t === tag)?.[1];
-  }
-
-  static filterTagValue(ev: Event, tag: "e" | "p" | "d") {
-    return ev.tags.filter(([t]) => t === tag);
-  }
-
-  public fetchPrevMessages(channel: string, until: number) {
-    return this.fetchP(
-      [
-        {
-          kinds: [Kind.ChannelMessage],
-          "#e": [channel],
-          until,
-          limit: MESSAGE_PAGE_SIZE
-        }
-      ],
-      false
-    ).then((events) => {
-      if (events.length > 0) {
-        const formattedEvents = events
-          .map((ev) => {
-            const eTags = MessageService.filterTagValue(ev, "e");
-            const root = eTags.find((x) => x[3] === "root")?.[1];
-            const mentions = MessageService.filterTagValue(ev, "p")
-              .map((x) => x?.[1])
-              .filter(MessageService.notEmpty);
-            if (!root) return null;
-            return ev.content
-              ? {
-                  id: ev.id,
-                  root,
-                  content: ev.content,
-                  creator: ev.pubkey,
-                  mentions,
-                  created: ev.created_at,
-                  sent: 1
-                }
-              : null;
-          })
-          .filter(MessageService.notEmpty);
-        this.emit(MessageEvents.PreviousPublicMessages, formattedEvents);
-      }
-
-      return events.length;
-    });
-  }
-
-  public fetchChannels(channels: string[]) {
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.ChannelCreation],
-        ids: channels
-      },
-      ...channels.map((c) => ({
-        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": [c]
-      })),
-      ...channels.map((c) => ({
-        kinds: [Kind.ChannelMessage],
-        "#e": [c],
-        limit: MESSAGE_PAGE_SIZE
-      }))
-    ];
-
-    filters.forEach((c) => {
-      this.fetch([c]);
-    });
-  }
-
-  public fetchChannel(id: string) {
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.ChannelCreation],
-        ids: [id]
-      },
-      {
-        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": [id]
-      }
-    ];
-
-    this.fetch(filters);
-  }
-
-  public async updateLeftChannelList(channelIds: string[]) {
-    const tags = [["d", "left-channel-list"]];
-    return this.publish(NewKinds.Arbitrary, tags, JSON.stringify(channelIds));
-  }
-
-  public fetchMessages() {
-    this.directContacts.map((contact: any) => {
-      const filters: Filter[] = [
-        {
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [contact[0]],
-          authors: [this.pub]
-        },
-        {
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [this.pub],
-          authors: [contact[0]]
-        }
-      ];
-      this.fetch(filters);
-    });
-  }
-
-  public publishContacts(username: string, pubkey: string) {
-    const newUser = [pubkey, username];
-    newUser.forEach((element) => {
-      let nameExist = false;
-
-      // Check if the name exists in the first array
-      this.directContacts.forEach((existingElement: string[]) => {
-        if (existingElement[0] === element || existingElement[1] === element) {
-          nameExist = true;
-          return;
-        }
-      });
-
-      // If the name doesn't exist, add the element to the direct contacts array
-      if (!nameExist) {
-        this.directContacts.push(newUser);
-        this.publish(Kind.Contacts, this.directContacts, "");
-        return;
-      }
-    });
-  }
-
-  public getContacts() {
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.Contacts],
-        authors: [this.pub]
-      }
-    ];
-    this.fetch(filters);
-  }
-
-  public loadChannel(id: string) {
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.ChannelCreation],
-        ids: [id]
-      },
-      {
-        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": [id]
-      },
-      {
-        kinds: [Kind.ChannelMessage],
-        "#e": [id],
-        limit: MESSAGE_PAGE_SIZE
-      }
-    ];
-
-    this.fetch(filters);
-  }
-
-  public loadProfiles(pubs: string[]) {
-    pubs.forEach((p) => {
-      this.fetch(
-        [
-          {
-            kinds: [Kind.Metadata],
-            authors: [p]
-          }
-        ],
-        true,
-        false
-      );
-    });
-  }
-
-  public checkProfiles(pubs: string[]) {
-    pubs.forEach((p) => {
-      if (this.directContacts.length !== 0) {
-        this.directContacts.forEach((c: any) => {
-          if (p !== c[0]) {
-            this.fetch(
-              [
-                {
-                  kinds: [Kind.Metadata],
-                  authors: [p]
-                }
-              ],
-              true,
-              true
-            );
-          }
-        });
-      } else {
-        this.fetch(
-          [
-            {
-              kinds: [Kind.Metadata],
-              authors: [p]
-            }
-          ],
-          true,
-          true
-        );
-      }
-    });
-  }
-
-  public listen(channels: string[], since: number) {
-    if (this.listenerSub) {
-      this.listenerSub.unsub();
-    }
-
-    this.listenerSub = this.fetch(
-      [
-        {
-          authors: [this.pub],
-          since
-        },
-        {
-          kinds: [Kind.EventDeletion, Kind.ChannelMetadata, Kind.ChannelMessage],
-          "#e": channels,
-          since
-        },
-        {
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [this.pub],
-          since
-        }
-      ],
-      false
-    );
-  }
-
-  public async createChannel(meta: Metadata) {
-    return this.publish(Kind.ChannelCreation, [], JSON.stringify(meta));
-  }
-
-  public async updateChannel(channel: Channel, meta: Metadata) {
-    return this.findHealthyRelay(this.pool.seenOn(channel.id) as string[]).then((relay) => {
-      return this.publish(Kind.ChannelMetadata, [["e", channel.id, relay]], JSON.stringify(meta));
-    });
-  }
-
-  public emitPublicMessageBeforeSent(event: Event) {
-    let publiMessagesEventArray = [];
-
-    const eTags = MessageService.filterTagValue(event, "e");
-    const root = eTags.find((x) => x[3] === "root")?.[1];
-    const mentions = MessageService.filterTagValue(event, "p")
-      .map((x) => x?.[1])
-      .filter(MessageService.notEmpty);
-    const formattedEvent = event.content
-      ? {
-          id: event.id,
-          root,
-          content: event.content,
-          creator: event.pubkey,
-          mentions,
-          created: event.created_at,
-          sent: 0
-        }
-      : null;
-    publiMessagesEventArray.push(formattedEvent);
-    const filteredEventArray = publiMessagesEventArray.filter(
-      (item) => item !== null
-    ) as PublicMessage[];
-    this.emit(MessageEvents.PublicMessageBeforeSent, filteredEventArray);
-  }
-
-  public async emitDirectMessageBeforeSent(event: Event) {
-    const eventArray = [];
-    const receiver = MessageService.findTagValue(event, "p");
-
-    if (!receiver) {
-      return;
-    }
-
-    const eTags = MessageService.filterTagValue(event, "e");
-    const root = eTags.find((x) => x[3] === "root")?.[1];
-
-    const peer = receiver === this.pub ? event.pubkey : receiver;
-    const msg = {
-      id: event.id,
-      root,
-      content: event.content,
-      peer,
-      creator: event.pubkey,
-      created: event.created_at,
-      decrypted: false,
-      sent: 0
-    };
-    if (this.priv === "nip07") {
-      eventArray.push(msg);
-    }
-
-    try {
-      const content = await decrypt(this.priv, peer, event.content);
-      const decrypted = {
-        ...msg,
-        content,
-        decrypted: true
-      };
-      eventArray.push(decrypted);
-    } catch (error) {
-      console.error("Error decrypting:", error);
-    }
-    this.emit(MessageEvents.DirectMessageBeforeSent, eventArray);
-  }
-
-  public async updateProfile(profile: Metadata) {
-    return this.publish(Kind.Metadata, [], JSON.stringify(profile));
-  }
-
-  public async sendDirectMessage(toPubkey: string, message: string, parent?: string) {
-    const encrypted = await (this.priv === "nip07"
-      ? window.nostr!.nip04.encrypt(toPubkey, message)
-      : encrypt(this.priv, toPubkey, message));
-    const tags = [["p", toPubkey]];
-    if (parent) {
-      const relay = await this.findHealthyRelay(this.pool.seenOn(parent) as string[]);
-      tags.push(["e", parent, relay, "root"]);
-    }
-    return this.publish(Kind.EncryptedDirectMessage, tags, encrypted);
-  }
-
-  public async sendPublicMessage(
-    channel: Channel,
-    message: string,
-    mentions?: string[],
-    parent?: string
-  ) {
-    const root = parent || channel.id;
-    const relay = await this.findHealthyRelay(this.pool.seenOn(root) as string[]);
-    const tags = [["e", root, relay, "root"]];
-    if (mentions) {
-      mentions.forEach((m) => tags.push(["p", m]));
-    }
-    return this.publish(Kind.ChannelMessage, tags, message);
-  }
-
-  pushToEventBuffer(event: Event) {
-    const cacheKey = `${event.id}_emitted`;
-    if (this.nameCache[cacheKey] === undefined) {
-      if (this.eventQueueFlag) {
-        if (this.eventQueueBuffer.length > 0) {
-          this.eventQueue.push(...this.eventQueueBuffer);
-          this.eventQueueBuffer = [];
-        }
-        clearTimeout(this.eventQueueTimer);
-        this.eventQueue.push(event);
-        this.eventQueueTimer = setTimeout(() => {
-          this.processEventQueue().then();
-        }, 50);
-      } else {
-        this.eventQueueBuffer.push(event);
-      }
-
-      this.nameCache[cacheKey] = 1;
-    }
-  }
-
-  async processEventQueue() {
-    this.eventQueueFlag = false;
-    const directContacts = this.eventQueue
-      .filter((x) => x.kind === Kind.Contacts)
-      .map((e: any) => {
-        const profiles: Array<[string, string]> = e.tags;
-        return profiles.map(([pubkey, name]) => ({ pubkey, name }));
-      })
-      .filter(MessageService.notEmpty);
-
-    if (directContacts.length > 0) {
-      const directContactsProfile: Array<{ pubkey: string; name: string }> = directContacts[0];
-
-      if (directContactsProfile.length > 0) {
-        this.emit(MessageEvents.DirectContact, directContactsProfile);
-      }
-    }
-
-    const profileUpdates: Profile[] = this.eventQueue
-      .filter((x) => x.kind === Kind.Metadata)
-      .map((ev) => {
-        const content = MessageService.parseJson(ev.content);
-        return content
-          ? {
-              id: ev.id,
-              creator: ev.pubkey,
-              created: ev.created_at,
-              ...MessageService.normalizeMetadata(content)
-            }
-          : null;
-      })
-      .filter(MessageService.notEmpty);
-    if (profileUpdates.length > 0) {
-      this.emit(MessageEvents.ProfileUpdate, profileUpdates);
-    }
-
-    const leftChannelListEv = this.eventQueue
-      .filter(
-        (x) =>
-          x.kind.toString() === NewKinds.Arbitrary.toString() &&
-          MessageService.findTagValue(x, "d") === "left-channel-list"
-      )
-      .sort((a, b) => b.created_at - a.created_at)[0];
-
-    if (leftChannelListEv) {
-      const content = MessageService.parseJson(leftChannelListEv.content);
-      if (Array.isArray(content) && content.every((x) => MessageService.isSha256(x))) {
-        this.emit(MessageEvents.LeftChannelList, content);
-      }
-    }
-
-    const channelCreations: Channel[] = this.eventQueue
-      .filter((x) => x.kind === Kind.ChannelCreation)
-      .map((ev) => {
-        const content = MessageService.parseJson(ev.content);
-        return content
-          ? {
-              id: ev.id,
-              creator: ev.pubkey,
-              created: ev.created_at,
-              communityName: content.communityName,
-              communityModerators: content.communityModerators,
-              hiddenMessageIds: content.hiddenMessageIds,
-              removedUserIds: content.removedUserIds,
-              ...MessageService.normalizeMetadata(content)
-            }
-          : null;
-      })
-      .filter(MessageService.notEmpty);
-    if (channelCreations.length > 0) {
-      this.emit(MessageEvents.ChannelCreation, channelCreations);
-    }
-
-    const channelUpdates: ChannelUpdate[] = this.eventQueue
-      .filter((x) => x.kind === Kind.ChannelMetadata)
-      .map((ev) => {
-        const content = MessageService.parseJson(ev.content);
-        const channelId = MessageService.findTagValue(ev, "e");
-        if (!channelId) return null;
-        return content
-          ? {
-              id: ev.id,
-              creator: ev.pubkey,
-              created: ev.created_at,
-              communityName: content.communityName,
-              communityModerators: content.communityModerators,
-              hiddenMessageIds: content.hiddenMessageIds,
-              removedUserIds: content.removedUserIds,
-              channelId,
-              ...MessageService.normalizeMetadata(content)
-            }
-          : null;
-      })
-      .filter(MessageService.notEmpty);
-    if (channelUpdates.length > 0) {
-      this.emit(MessageEvents.ChannelUpdate, channelUpdates);
-    }
-
-    const publicMessages: PublicMessage[] = this.eventQueue
-      .filter((x) => x.kind === Kind.ChannelMessage)
-      .map((ev) => {
-        const eTags = MessageService.filterTagValue(ev, "e");
-        const root = eTags.find((x) => x[3] === "root")?.[1];
-        const mentions = MessageService.filterTagValue(ev, "p")
-          .map((x) => x?.[1])
-          .filter(MessageService.notEmpty);
-        if (!root) return null;
-        return ev.content
-          ? {
-              id: ev.id,
-              root,
-              content: ev.content,
-              creator: ev.pubkey,
-              mentions,
-              created: ev.created_at,
-              sent: 1
-            }
-          : null;
-      })
-      .filter(MessageService.notEmpty);
-    if (publicMessages.length > 0) {
-      this.emit(MessageEvents.PublicMessageAfterSent, publicMessages);
-    }
-
-    Promise.all(
-      this.eventQueue
-        .filter((x) => x.kind === Kind.EncryptedDirectMessage)
-        .map((ev) => {
-          const receiver = MessageService.findTagValue(ev, "p");
-          if (!receiver) return null;
-          const eTags = MessageService.filterTagValue(ev, "e");
-          const root = eTags.find((x) => x[3] === "root")?.[1];
-
-          const peer = receiver === this.pub ? ev.pubkey : receiver;
-          const msg = {
-            id: ev.id,
-            root,
-            content: ev.content,
-            peer,
-            creator: ev.pubkey,
-            created: ev.created_at,
-            decrypted: false,
-            sent: 1
-          };
-
-          if (this.priv === "nip07") {
-            return msg;
-          }
-
-          return decrypt(this.priv, peer, ev.content).then((content) => {
-            return {
-              ...msg,
-              content,
-              decrypted: true
-            };
-          });
-        })
-        .filter(MessageService.notEmpty)
-    ).then((directMessages: DirectMessage[]) => {
-      if (directMessages.length > 0) {
-        this.emit(MessageEvents.DirectMessageAfterSent, directMessages);
-      }
-    });
-
-    this.eventQueue = [];
-    this.eventQueueFlag = true;
-  }
-
-  public close = () => {
-    this.pool.close(this.readRelays);
-    this.removeAllListeners();
-  };
-
-  private async init() {
-    this.eventQueue = [];
-    this.eventQueueFlag = true;
-    this.eventQueueBuffer = [];
-
-    const filters: Filter[] = [
-      {
-        kinds: [Kind.Contacts],
-        authors: [this.pub]
-      },
-      {
-        kinds: [Kind.ChannelCreation, Kind.EventDeletion],
-        authors: [this.pub]
-      },
-      {
-        kinds: [Kind.ChannelMessage],
-        authors: [this.pub]
-      },
-      {
-        kinds: [NewKinds.Arbitrary],
-        authors: [this.pub],
-        "#d": ["left-channel-list", "read-mark-map"]
-      }
-    ];
-    this.fetchP(filters).then((resp) => {
-      const events = resp.sort((a, b) => b.created_at - a.created_at);
-      const deletions = resp
-        .filter((x) => x.kind === Kind.EventDeletion)
-        .map((x) => MessageService.findTagValue(x, "e"));
-      const profile = events.find((x) => x.kind === Kind.Contacts);
-      if (profile && profile?.tags.length !== 0) {
-        this.directContacts = profile?.tags;
-        this.pushToEventBuffer(profile!);
-      }
-
-      const leftChannelList = events.find(
-        (x) =>
-          x.kind.toString() === NewKinds.Arbitrary.toString() &&
-          MessageService.findTagValue(x, "d") === "left-channel-list"
-      );
-
-      if (leftChannelList) {
-        this.pushToEventBuffer(leftChannelList);
-      }
-
-      const channels = Array.from(
-        new Set(
-          events
-            .map((x) => {
-              if (x.kind === Kind.ChannelCreation) {
-                return x.id;
-              }
-
-              if (x.kind === Kind.ChannelMessage) {
-                return MessageService.findTagValue(x, "e");
-              }
-
-              return undefined;
-            })
-            .filter((x) => !deletions.includes(x))
-            .filter(MessageService.notEmpty)
-        )
-      );
-      if (channels.length !== 0) {
-        this.fetchChannels(channels);
-      }
-
-      this.fetchMessages();
-      this.emit(MessageEvents.Ready);
-    });
-  }
-
-  private addDirectContact(event: Event) {
-    let isAdded = false;
-    const user = {
-      id: event.id,
-      creator: event.pubkey,
-      created: event.created_at,
-      name: JSON.parse(event.content).name,
-      about: JSON.parse(event.content).about || "",
-      picture: JSON.parse(event.content).picture || ""
-    };
-    const { creator, name } = user;
-    if (!isAdded) {
-      this.publishContacts(name, creator);
-      isAdded = true;
-    }
-  }
-
-  private fetch(filters: Filter[], unsub: boolean = true, isDirectContact: boolean = false) {
-    const sub = this.pool.sub(this.readRelays, filters);
-
-    sub.on("event", (event: Event) => {
-      event.kind === Kind.Metadata && isDirectContact
-        ? this.addDirectContact(event)
-        : this.pushToEventBuffer(event);
-    });
-
-    sub.on("eose", () => {
-      if (unsub) {
-        sub.unsub();
-      }
-    });
-
-    return sub;
-  }
-
-  private fetchP(filters: Filter[], lowLatencyPool: boolean = false): Promise<Event[]> {
-    return new Promise((resolve) => {
-      const sub = (lowLatencyPool ? this.poolL : this.pool).sub(this.readRelays, filters);
-      const events: Event[] = [];
-
-      sub.on("event", (event: Event) => {
-        events.push(event);
-      });
-
-      sub.on("eose", () => {
-        sub.unsub();
-        resolve(events);
-      });
-    });
-  }
-
-  private async findHealthyRelay(relays: string[]) {
-    for (const relay of relays) {
-      try {
-        await this.pool.ensureRelay(relay);
-        return relay;
-      } catch (e) {}
-    }
-
-    throw new Error("Couldn't find a working relay");
-  }
-
-  private publish(kind: number, tags: Array<any>[], content: string): Promise<Event> {
-    return new Promise((resolve, reject) => {
-      this.signEvent({
-        kind,
-        tags,
-        pubkey: this.pub,
-        content,
-        created_at: Math.floor(Date.now() / 1000),
-        id: "",
-        sig: ""
-      })
-        .then((event) => {
-          if (!event) {
-            reject("Couldn't sign event!");
-            return;
-          }
-          if (event.kind === Kind.ChannelMessage) {
-            this.emitPublicMessageBeforeSent(event);
-          } else if (event.kind === Kind.EncryptedDirectMessage) {
-            this.emitDirectMessageBeforeSent(event);
-          }
-          const pub = this.pool.publish(this.writeRelays, event);
-          pub.on("ok", () => {
-            resolve(event);
-            if (event.kind === Kind.Contacts) {
-              this.getContacts();
-            }
-            if (event.kind === Kind.Metadata) {
-              this.pushToEventBuffer(event);
-            }
-          });
-
-          pub.on("failed", () => {
-            reject("Couldn't sign event!");
-          });
-        })
-        .catch(() => {
-          reject("Couldn't sign event!");
-        });
-    });
-  }
-
-  private async signEvent(event: Event): Promise<Event | undefined> {
-    if (this.priv === "nip07") {
-      return window.nostr?.signEvent(event);
-    } else {
-      return {
-        ...event,
-        id: getEventHash(event),
-        sig: await signEvent(event, this.priv)
-      };
-    }
-  }
-}
-
-export default MessageService;

From 18fd051b43df1545aacc9976ee3acf6ba37f696c Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 12 Nov 2023 20:17:19 +0600
Subject: [PATCH 130/179] Chats: cleaned UI

---
 .../chats/components/chat-message-item.tsx    |  2 +-
 .../chats/components/chat-messages-header.tsx |  2 +-
 .../chats/components/chat-messages-view.tsx   |  2 +-
 .../chat-popup/chat-popup-header.tsx          |  8 +--
 .../chats/components/chat-profile-box.tsx     |  2 +-
 .../chats-community-actions/index.tsx         |  2 +-
 .../chats/components/chats-dropdown-menu.tsx  | 49 +++++++------------
 .../chats-sidebar/chat-sidebar-search.tsx     |  2 +-
 8 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 40a596e1bc8..a308af1eeb6 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -75,7 +75,7 @@ export function ChatMessageItem({
           className={classNameObject({
             "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
             "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
-            "bg-gray-200 rounded-tr-2xl": type === "receiver",
+            "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver",
             "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
             "same-user-message": isSameUser
           })}
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 4d9212bfb4b..ab000e23810 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -43,7 +43,7 @@ export default function ChatsMessagesHeader(props: Props) {
           onClick={() => setReceiverPubKey("")}
         />
         <Link
-          className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800"
+          className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800 dark:text-white"
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
           target="_blank"
         >
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index c6eba1aee46..d2b62575141 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -145,7 +145,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
         )}
       </div>
 
-      <div className="sticky bottom-0 border-t border-[--border-color] bg-white">
+      <div className="sticky bottom-0 border-t border-[--border-color] bg-white pl-3">
         <ChatInput currentUser={directUser} currentChannel={currentChannel} />
       </div>
     </>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index d69556bbad1..b3c18fd0463 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -79,7 +79,7 @@ export function ChatPopupHeader({
           <Button
             noPadding={true}
             size="sm"
-            appearance="link"
+            appearance="gray-link"
             icon={extendedView}
             onClick={handleExtendedView}
           />
@@ -89,7 +89,7 @@ export function ChatPopupHeader({
             <Button
               noPadding={true}
               size="sm"
-              appearance="link"
+              appearance="gray-link"
               icon={addMessageSvg}
               onClick={handleMessageSvgClick}
             />
@@ -97,7 +97,7 @@ export function ChatPopupHeader({
         )}
         {isCommunity && <ChatsCommunityDropdownMenu history={history!} username={communityName} />}
         {!isCommunity && !isCurrentUser && privateKey && (
-          <div className="simple-menu" onClick={() => setExpanded(true)}>
+          <div className="flex items-center" onClick={() => setExpanded(true)}>
             <ChatsDropdownMenu
               history={history!}
               onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
@@ -108,7 +108,7 @@ export function ChatPopupHeader({
           <Button
             noPadding={true}
             size="sm"
-            appearance="link"
+            appearance="gray-link"
             className={classNameObject({
               "duration-300": true,
               "rotate-180": !expanded
diff --git a/src/common/features/chats/components/chat-profile-box.tsx b/src/common/features/chats/components/chat-profile-box.tsx
index d7f1c3520b4..7da13a3da6d 100644
--- a/src/common/features/chats/components/chat-profile-box.tsx
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -63,7 +63,7 @@ export default function ChatsProfileBox({ communityName, currentUser }: Props) {
     <div className="flex items-center justify-center p-4">
       <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-800">
         <UserAvatar username={profileData.username} size="large" />
-        <div className="text-gray-800 mt-2 font-semibold">{profileData.name}</div>
+        <div className="text-gray-800 dark:text-white mt-2 font-semibold">{profileData.name}</div>
         {profileData.about?.length !== 0 && <div>{profileData.about}</div>}
 
         <div className="grid grid-cols-2 text-center justify-center pt-4 gap-3 text-gray-600">
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index 4829f71a622..d1d07c5428c 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -41,7 +41,7 @@ const ChatsCommunityDropdownMenu = ({ history, username }: Props) => {
     <>
       <Dropdown>
         <DropdownToggle>
-          <Button icon={kebabMenuSvg} appearance="link" noPadding={true} />
+          <Button icon={kebabMenuSvg} appearance="gray-link" noPadding={true} />
         </DropdownToggle>
         <DropdownMenu>
           <DropdownItemWithIcon
diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
index 5a1ed185dd1..70581840848 100644
--- a/src/common/features/chats/components/chats-dropdown-menu.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { History } from "history";
-import DropDown, { MenuItem } from "../../../components/dropdown";
 import { chatKeySvg, kebabMenuSvg } from "../../../img/svg";
 import { _t } from "../../../i18n";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import { Button } from "@ui/button";
 
 interface Props {
   history: History | null;
@@ -10,37 +11,21 @@ interface Props {
 }
 
 const ChatsDropdownMenu = (props: Props) => {
-  const onManageChatKey = () => {
-    const { onManageChatKey } = props;
-    if (onManageChatKey) {
-      onManageChatKey();
-    }
-  };
-
-  const menuItems: MenuItem[] = useMemo(
-    () => [
-      {
-        label: _t("chat.manage-chat-key"),
-        onClick: onManageChatKey,
-        icon: chatKeySvg
-      }
-    ],
-    []
-  );
   return (
-    <DropDown
-      history={props.history}
-      label=""
-      icon={kebabMenuSvg}
-      items={menuItems}
-      style={{
-        width: "35px",
-        height: "35px"
-      }}
-      float="right"
-      alignBottom={false}
-      noMarginTop={true}
-    />
+    <Dropdown>
+      <DropdownToggle>
+        <Button size="sm" appearance="gray-link" noPadding={true}>
+          {kebabMenuSvg}
+        </Button>
+        <DropdownMenu align="right">
+          <DropdownItemWithIcon
+            label={_t("chat.manage-chat-key")}
+            icon={chatKeySvg}
+            onClick={() => props.onManageChatKey?.()}
+          />
+        </DropdownMenu>
+      </DropdownToggle>
+    </Dropdown>
   );
 };
 
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
index e525f3c8b10..183f04d45f2 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -30,7 +30,7 @@ export function ChatSidebarSearch({ setUserList, searchQuery, setSearchQuery }:
 
   return (
     <>
-      <div className="bg-gray-100 dark:bg-gray-900 p-3 border-b border-[--border-color]">
+      <div className="bg-gray-100 dark:bg-dark-200 p-3 border-b border-[--border-color]">
         <FormControl
           type="text"
           placeholder={_t("chat.search")}

From 5c682807263be1d74d6218cfc482cf079ecd8c5b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 12 Nov 2023 22:28:31 +0600
Subject: [PATCH 131/179] Chats: cleanup code, added user switching in chats

---
 .../features/chats/chat-context-provider.tsx  |  2 ++
 .../chats/components/chat-message-box.tsx     | 15 ++++++++-----
 .../chats/components/chat-messages-header.tsx |  2 +-
 src/common/features/chats/hooks/index.ts      |  1 +
 .../chats/hooks/use-active-user-switching.ts  | 22 +++++++++++++++++++
 .../chats/mutations/add-community-channel.ts  | 15 ++++++++-----
 .../features/chats/mutations/join-chat.ts     |  4 ++--
 .../mutations/update-community-channel.ts     |  5 +++--
 .../features/chats/queries/channels-query.ts  |  5 ++++-
 .../chats/queries/direct-contacts-query.ts    |  4 +++-
 .../features/chats/queries/keys-query.ts      |  4 ++--
 src/common/features/chats/queries/queries.ts  |  1 -
 src/common/features/chats/screens/chats.tsx   |  9 +++++---
 .../chats/utils/delete-chat-public-key.ts     | 21 ------------------
 .../chats/utils/get-chat-private-key.ts       |  5 -----
 src/common/features/chats/utils/index.ts      |  2 --
 16 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 src/common/features/chats/hooks/index.ts
 create mode 100644 src/common/features/chats/hooks/use-active-user-switching.ts
 delete mode 100644 src/common/features/chats/utils/delete-chat-public-key.ts
 delete mode 100644 src/common/features/chats/utils/get-chat-private-key.ts

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 3e54bcf5501..02998c42929 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useKeysQuery } from "./queries/keys-query";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 import { useListenMessagesQuery } from "./queries/listen-messages-query";
+import { useActiveUserSwitching } from "./hooks";
 
 interface Context {
   revealPrivateKey: boolean;
@@ -30,6 +31,7 @@ export const ChatContextProvider = (props: Props) => {
   const { hasKeys } = useKeysQuery();
 
   useListenMessagesQuery();
+  useActiveUserSwitching();
 
   return (
     <NostrListenerQueriesProvider>
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index b97e6acb16f..f088e58407b 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -10,6 +10,7 @@ import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useCommunityCache } from "../../../core";
 import { useAddCommunityChannel } from "../mutations";
+import ChatsProfileBox from "./chat-profile-box";
 
 interface MatchParams {
   filter: string;
@@ -33,7 +34,7 @@ export default function ChatsMessagesBox(props: Props) {
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
-    useAddCommunityChannel(props.match.params.name);
+    useAddCommunityChannel(communityChannel?.id);
 
   const { match } = props;
   const username = match.params.username;
@@ -41,10 +42,13 @@ export default function ChatsMessagesBox(props: Props) {
   const [inProgress, setInProgress] = useState(false);
 
   const currentChannel = useMemo(
-    () => channels?.find((c) => c.communityName === community?.name),
+    () =>
+      [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])]?.find(
+        (c) => c.communityName === community?.name
+      ),
     [channels, community]
   );
-  const hasCommunityChat = useMemo(() => !!communityChannel, [communityChannel]);
+  const hasCommunityChat = useMemo(() => !!currentChannel, [currentChannel]);
   const hasLeftCommunity = useMemo(
     () => leftCommunityChannelsIds?.includes(currentChannel?.id ?? ""),
     [currentChannel]
@@ -85,8 +89,9 @@ export default function ChatsMessagesBox(props: Props) {
           ) : hasCommunityChat && !isCommunityJoined ? (
             <>
               <div />
-              <div className="flex flex-col justify-center items-center">
-                <p className="info-message">
+              <div className="flex flex-col justify-center items-center mb-4">
+                <ChatsProfileBox communityName={community?.name} />
+                <p className="mb-4 text-gray-600">
                   {hasLeftCommunity
                     ? "You have left this community chat. Rejoin the chat now!"
                     : " You are not part of this community. Join the community chat now!"}
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index ab000e23810..4c5ffbd89a5 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -32,7 +32,7 @@ export default function ChatsMessagesHeader(props: Props) {
   };
 
   return (
-    <div className="flex sticky z-[10] top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[60px]">
+    <div className="flex sticky z-[10] top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[57px]">
       <div className="flex items-center gap-4">
         <Button
           appearance="gray-link"
diff --git a/src/common/features/chats/hooks/index.ts b/src/common/features/chats/hooks/index.ts
new file mode 100644
index 00000000000..3dd2b75c78c
--- /dev/null
+++ b/src/common/features/chats/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./use-active-user-switching";
diff --git a/src/common/features/chats/hooks/use-active-user-switching.ts b/src/common/features/chats/hooks/use-active-user-switching.ts
new file mode 100644
index 00000000000..0aeb9f3a064
--- /dev/null
+++ b/src/common/features/chats/hooks/use-active-user-switching.ts
@@ -0,0 +1,22 @@
+import { useMappedStore } from "../../../store/use-mapped-store";
+import usePrevious from "react-use/lib/usePrevious";
+import { useQueryClient } from "@tanstack/react-query";
+import { ChatQueries } from "../queries";
+import { NostrQueries } from "../nostr/queries";
+import { useEffect } from "react";
+
+export function useActiveUserSwitching() {
+  const { activeUser } = useMappedStore();
+  const previousActiveUser = usePrevious(activeUser);
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (activeUser?.username !== previousActiveUser?.username) {
+      queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
+      queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
+      queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
+      queryClient.invalidateQueries([ChatQueries.LEFT_CHANNELS]);
+    }
+  }, [activeUser, previousActiveUser]);
+}
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
index c7898becae9..24f61d66773 100644
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -4,9 +4,11 @@ import { convertEvent } from "../nostr/utils/event-converter";
 import { ChatQueries, useChannelsQuery } from "../queries";
 import { useQueryClient } from "@tanstack/react-query";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
-export function useAddCommunityChannel(name: string | undefined) {
+export function useAddCommunityChannel(id: string | undefined) {
   const { data: channels } = useChannelsQuery();
+  const { activeUser } = useMappedStore();
   const queryClient = useQueryClient();
 
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
@@ -17,11 +19,11 @@ export function useAddCommunityChannel(name: string | undefined) {
     [
       {
         kinds: [Kind.ChannelCreation],
-        ids: name ? [name] : undefined
+        ids: id ? [id] : undefined
       },
       {
         kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": name ? [name] : undefined
+        "#e": id ? [id] : undefined
       }
     ],
     {
@@ -32,14 +34,17 @@ export function useAddCommunityChannel(name: string | undefined) {
               const channel = convertEvent<Kind.ChannelCreation>(event);
               const hasChannelAlready = channels?.some(({ id }) => id === channel?.id);
               if (!hasChannelAlready && channel) {
-                queryClient.setQueryData([ChatQueries.CHANNELS], [...(channels ?? []), channel]);
+                queryClient.setQueryData(
+                  [ChatQueries.CHANNELS, activeUser?.username],
+                  [...(channels ?? []), channel]
+                );
               }
 
               // Remove the community from left list
               updateLeftChannels({
                 tags: [["d", "left-channel-list"]],
                 eventMetadata: JSON.stringify(
-                  leftCommunityChannelsIds?.filter((id) => name !== id) ?? []
+                  leftCommunityChannelsIds?.filter((id) => id !== id) ?? []
                 )
               });
           }
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index a87c5396bcb..c4736e888a7 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -34,8 +34,8 @@ export function useJoinChat(onSuccess?: () => void) {
       localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, keys.priv);
       await uploadPublicKey(keys.pub);
 
-      queryClient.setQueryData([ChatQueries.PUBLIC_KEY], keys.pub);
-      queryClient.setQueryData([ChatQueries.PRIVATE_KEY], keys.priv);
+      queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], keys.pub);
+      queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], keys.priv);
 
       await updateProfile({
         tags: [],
diff --git a/src/common/features/chats/mutations/update-community-channel.ts b/src/common/features/chats/mutations/update-community-channel.ts
index 14d3d2dfa6d..d327145dd03 100644
--- a/src/common/features/chats/mutations/update-community-channel.ts
+++ b/src/common/features/chats/mutations/update-community-channel.ts
@@ -3,10 +3,12 @@ import { ChatQueries, useChannelsQuery } from "../queries";
 import { Channel, useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { useFindHealthyRelayQuery } from "../nostr/mutations/find-healthy-relay";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 export function useUpdateCommunityChannel(channel?: Channel) {
   const queryClient = useQueryClient();
   const { data: channels } = useChannelsQuery();
+  const { activeUser } = useMappedStore();
 
   const { mutateAsync: updateChannel } = useNostrPublishMutation(
     ["chats/nostr-update-channel", channel?.communityName],
@@ -41,8 +43,7 @@ export function useUpdateCommunityChannel(channel?: Channel) {
         const index = tempChannels.findIndex((ch) => ch.id === updatedChannel?.id);
         tempChannels[index] = updatedChannel;
 
-        queryClient.setQueryData([ChatQueries.CHANNELS], tempChannels);
-        queryClient.invalidateQueries([ChatQueries.CHANNELS]);
+        queryClient.setQueryData([ChatQueries.CHANNELS, activeUser?.username], tempChannels);
       }
     }
   );
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
index 77e037f9fdf..971715b65ea 100644
--- a/src/common/features/chats/queries/channels-query.ts
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -3,11 +3,14 @@ import { Channel, useNostrFetchQuery } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { useKeysQuery } from "./keys-query";
 import { convertEvent } from "../nostr/utils/event-converter";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 export function useChannelsQuery() {
+  const { activeUser } = useMappedStore();
   const { hasKeys } = useKeysQuery();
+
   return useNostrFetchQuery<Channel[]>(
-    [ChatQueries.CHANNELS],
+    [ChatQueries.CHANNELS, activeUser?.username],
     [Kind.ChannelCreation],
     (events) =>
       events
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
index 272766da791..a8902af6020 100644
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ b/src/common/features/chats/queries/direct-contacts-query.ts
@@ -2,12 +2,14 @@ import { ChatQueries } from "./queries";
 import { useKeysQuery } from "./keys-query";
 import { DirectContact, useNostrFetchQuery } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 export function useDirectContactsQuery() {
+  const { activeUser } = useMappedStore();
   const { hasKeys } = useKeysQuery();
 
   return useNostrFetchQuery<DirectContact[]>(
-    [ChatQueries.DIRECT_CONTACTS],
+    [ChatQueries.DIRECT_CONTACTS, activeUser?.username],
     [Kind.Contacts],
     (events) => {
       // Get first event with profile info
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index a78d8be93b1..18ad43919a7 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -14,11 +14,11 @@ export function useKeysQuery() {
   ] = useQueries({
     queries: [
       {
-        queryKey: [ChatQueries.PUBLIC_KEY],
+        queryKey: [ChatQueries.PUBLIC_KEY, activeUser?.username],
         queryFn: async () => getUserChatPublicKey(activeUser?.username!)
       },
       {
-        queryKey: [ChatQueries.PRIVATE_KEY],
+        queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
         queryFn: () => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username)
       }
     ]
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index ff87e744088..d9de82888e1 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -5,7 +5,6 @@ export enum ChatQueries {
   DIRECT_CONTACTS = "chats/direct-contacts",
   LAST_MESSAGES = "chats/last-messages",
   MESSAGES = "chats/messages",
-  PROFILES = "chats/profiles",
   CHANNELS = "chats/channels",
   LEFT_CHANNELS = "chats/left-channels",
   COMMUNITY_CHANNEL = "chats/community-channel",
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 1bde943892d..50d4b90403d 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -12,10 +12,11 @@ import ChatsMessagesBox from "../components/chat-message-box";
 import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
-import { useChannelsQuery } from "../queries";
+import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useKeysQuery } from "../queries/keys-query";
 import { ChatsImport } from "../components/chats-import";
+import { useCommunityCache } from "../../../core";
 
 interface Props extends PageProps {
   match: match<{
@@ -30,19 +31,21 @@ interface Props extends PageProps {
 export const Chats = (props: Props) => {
   const { activeUser, global } = useMappedStore();
   const { receiverPubKey, revealPrivateKey } = useContext(ChatContext);
+  const { data: community } = useCommunityCache(props.match.params.username);
 
   const { publicKey, privateKey } = useKeysQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+  const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
   const isChannel = useMemo(
     () =>
-      channels?.some(
+      [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
         (channel) =>
           channel.communityName === props.match.params.username &&
           !leftCommunityChannelsIds?.includes(channel.name)
       ),
-    [channels, leftCommunityChannelsIds, props.match.params.username]
+    [channels, leftCommunityChannelsIds, props.match.params.username, communityChannel]
   );
 
   const isReady = useMemo(
diff --git a/src/common/features/chats/utils/delete-chat-public-key.ts b/src/common/features/chats/utils/delete-chat-public-key.ts
deleted file mode 100644
index 714e21d93af..00000000000
--- a/src/common/features/chats/utils/delete-chat-public-key.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getAccountFull } from "../../../api/hive";
-import { updateProfile } from "../../../api/operations";
-import { ActiveUser } from "../../../store/active-user/types";
-import { getProfileMetaData } from "./fetch-profile-metadata";
-import * as ls from "../../../util/local-storage";
-
-export const deleteChatPublicKey = (activeUser: ActiveUser | null) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const profile = await getProfileMetaData(activeUser?.username!);
-      delete profile.nsKey;
-      delete profile.channel;
-      ls.remove(`${activeUser?.username}_nsPrivKey`);
-      const response = await getAccountFull(activeUser?.username!);
-      const updatedProfile = await updateProfile(response, { ...profile });
-      resolve(updatedProfile);
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
diff --git a/src/common/features/chats/utils/get-chat-private-key.ts b/src/common/features/chats/utils/get-chat-private-key.ts
deleted file mode 100644
index c0f74216745..00000000000
--- a/src/common/features/chats/utils/get-chat-private-key.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as ls from "../../../util/local-storage";
-
-export const getPrivateKey = (username: string): string | null => {
-  return ls.get(`${username}_nsPrivKey`) ?? null;
-};
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index 30dab8fa017..68681e13a9f 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -1,5 +1,4 @@
 export * from "./fetch-profile-metadata";
-export * from "./delete-chat-public-key";
 export * from "./upload-chat-public-key";
 export * from "./create-nostr-account";
 export * from "./format-message-time";
@@ -8,7 +7,6 @@ export * from "./get-user-chat-public-key";
 export * from "./use-get-direct-last-message";
 export * from "./formatted-user-name";
 export * from "./is-message-image";
-export * from "./get-chat-private-key";
 export * from "./get-joined-communities";
 export * from "./copy-to-clipboard";
 export * from "./check-contiguous-message";

From 391e6ba7c81e48b59c894117c7aaf6b84e97adf0 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 14 Nov 2023 00:22:40 +0600
Subject: [PATCH 132/179] Chats: saving profile data to nostr

---
 .../nostr/core/nostr-publish-mutation.ts      | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
index 06704075ac9..56f261d2971 100644
--- a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
@@ -1,9 +1,15 @@
-import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
+import {
+  MutationKey,
+  useMutation,
+  UseMutationOptions,
+  useQueryClient
+} from "@tanstack/react-query";
 import { useContext } from "react";
 import { Event, getEventHash, Kind, signEvent } from "../../../../../lib/nostr-tools/event";
 import { NostrContext } from "../nostr-context";
-import { useKeysQuery } from "../../queries/keys-query";
 import { Metadata } from "../types";
+import { ChatQueries } from "../../queries";
+import { useMappedStore } from "../../../../store/use-mapped-store";
 
 type Payload = { eventMetadata: Metadata | string; tags: string[][] };
 
@@ -13,13 +19,17 @@ export function useNostrPublishMutation(
   onBeforeSend: (event: Event) => void,
   options?: UseMutationOptions<Event, Error, Payload>
 ) {
+  const { activeUser } = useMappedStore();
   const { pool, writeRelays } = useContext(NostrContext);
-  const { publicKey, privateKey } = useKeysQuery();
+  const queryClient = useQueryClient();
 
   const sign = async (event: Event) => ({
     ...event,
     id: getEventHash(event),
-    sig: await signEvent(event, privateKey!!)
+    sig: await signEvent(
+      event,
+      queryClient.getQueryData<string>([ChatQueries.PRIVATE_KEY, activeUser?.username])!!
+    )
   });
 
   return useMutation(
@@ -34,7 +44,10 @@ export function useNostrPublishMutation(
             sig: "",
             content:
               typeof eventMetadata === "object" ? JSON.stringify(eventMetadata) : eventMetadata,
-            pubkey: publicKey!!,
+            pubkey: queryClient.getQueryData<string>([
+              ChatQueries.PUBLIC_KEY,
+              activeUser?.username
+            ])!!,
             created_at: Math.floor(Date.now() / 1000),
             tags
           });

From e6ca5b59507d0f030984de29afd40c48e54683cc Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 14 Nov 2023 16:57:40 +0600
Subject: [PATCH 133/179] Chats: fixed joining to community channel

---
 src/common/features/chats/chat-context-provider.tsx            | 3 +--
 .../features/chats/nostr/queries/direct-messages-query.ts      | 3 ++-
 .../features/chats/nostr/queries/public-messages-query.ts      | 3 ++-
 src/common/features/chats/queries/channels-query.ts            | 3 ++-
 src/common/features/chats/queries/messages-query.ts            | 3 ++-
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 02998c42929..90508d70bde 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useKeysQuery } from "./queries/keys-query";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
-import { useListenMessagesQuery } from "./queries/listen-messages-query";
 import { useActiveUserSwitching } from "./hooks";
 
 interface Context {
@@ -30,7 +29,7 @@ export const ChatContextProvider = (props: Props) => {
 
   const { hasKeys } = useKeysQuery();
 
-  useListenMessagesQuery();
+  // useListenMessagesQuery();
   useActiveUserSwitching();
 
   return (
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
index 8afde288de8..80d21c0400d 100644
--- a/src/common/features/chats/nostr/queries/direct-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/direct-messages-query.ts
@@ -36,7 +36,8 @@ export function useDirectMessagesQuery(
       ),
     {
       enabled: directContacts.length > 0,
-      initialData: []
+      initialData: [],
+      refetchInterval: 10000
     }
   );
 }
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
index 094716ec9a4..26f550a8010 100644
--- a/src/common/features/chats/nostr/queries/public-messages-query.ts
+++ b/src/common/features/chats/nostr/queries/public-messages-query.ts
@@ -23,7 +23,8 @@ export function usePublicMessagesQuery(channels: Channel[]) {
       events.map((event) => convertEvent(event)).filter((message) => !!message) as Message[],
     {
       enabled: channels.length > 0,
-      initialData: []
+      initialData: [],
+      refetchInterval: 10000
     }
   );
 }
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
index 971715b65ea..dc4d408cee0 100644
--- a/src/common/features/chats/queries/channels-query.ts
+++ b/src/common/features/chats/queries/channels-query.ts
@@ -18,7 +18,8 @@ export function useChannelsQuery() {
         .filter((channel) => !!channel) as Channel[],
     {
       initialData: [],
-      enabled: hasKeys
+      enabled: hasKeys,
+      refetchOnMount: false
     }
   );
 }
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 73fbbced25b..8fb4c275d96 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -59,7 +59,8 @@ export function useMessagesQuery(username?: string) {
             .sort((a, b) => a.created - b.created);
         }
         return messages.sort((a, b) => a.created - b.created);
-      }
+      },
+      refetchInterval: 10000
     }
   );
 }

From 176f8c822f92ac74691437a3c4f119665193b748 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 14 Nov 2023 19:27:34 +0600
Subject: [PATCH 134/179] Chats: fixed dark theme

---
 ...> chat-direct-contact-or-channel-item.tsx} |  4 +-
 .../chat-popup-contacts-and-channels.tsx      | 26 +++++++-----
 .../chats/components/chat-popup/index.scss    | 40 ++-----------------
 .../chats/components/chat-popup/index.tsx     |  8 +++-
 .../chats/mutations/add-community-channel.ts  |  4 --
 src/common/features/chats/nostr/Readme.md     |  3 ++
 6 files changed, 30 insertions(+), 55 deletions(-)
 rename src/common/features/chats/components/chat-popup/{chat-direct-message.tsx => chat-direct-contact-or-channel-item.tsx} (86%)
 create mode 100644 src/common/features/chats/nostr/Readme.md

diff --git a/src/common/features/chats/components/chat-popup/chat-direct-message.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
similarity index 86%
rename from src/common/features/chats/components/chat-popup/chat-direct-message.tsx
rename to src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index 909edcba206..8936fb03ee6 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-message.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -8,10 +8,10 @@ interface Props {
   userClicked: (username: string) => void;
 }
 
-export function ChatDirectMessage({ username, userClicked, lastMessage }: Props) {
+export function ChatDirectContactOrChannelItem({ username, userClicked, lastMessage }: Props) {
   return (
     <div
-      className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800"
+      className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-300"
       onClick={() => userClicked(username)}
     >
       <Link to={`/@${username}`}>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 485698bdeeb..f96d620126b 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -4,7 +4,7 @@ import { getJoinedCommunities } from "../../utils";
 import { ChatsImport } from "../chats-import";
 import { Button } from "@ui/button";
 import { ChatContext } from "../../chat-context-provider";
-import { ChatDirectMessage } from "./chat-direct-message";
+import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
 import { useChannelsQuery, useDirectContactsQuery, useLastMessagesQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { useKeysQuery } from "../../queries/keys-query";
@@ -40,20 +40,26 @@ export function ChatPopupContactsAndChannels({
         <>
           {joinedChannels.length !== 0 && (
             <>
-              <div className="community-header">{_t("chat.communities")}</div>
+              <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
+                {_t("chat.communities")}
+              </div>
               {joinedChannels.map((channel) => (
-                <ChatDirectMessage
+                <ChatDirectContactOrChannelItem
                   key={channel.id}
                   username={channel.communityName!!}
                   lastMessage={directContactsLastMessages[channel.name]?.content}
                   userClicked={() => communityClicked(channel.communityName!)}
                 />
               ))}
-              {directContacts?.length !== 0 && <div className="dm-header">{_t("chat.dms")}</div>}
+              {directContacts?.length !== 0 && (
+                <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
+                  {_t("chat.dms")}
+                </div>
+              )}
             </>
           )}
           {directContacts?.map((user) => (
-            <ChatDirectMessage
+            <ChatDirectContactOrChannelItem
               username={user.name}
               userClicked={(v) => {
                 setReceiverPubKey(user.pubkey);
@@ -67,12 +73,10 @@ export function ChatPopupContactsAndChannels({
       ) : !privateKey ? (
         <ChatsImport />
       ) : (
-        <>
-          <p className="no-chat">{_t("chat.no-chat")}</p>
-          <div className="start-chat-btn">
-            <Button onClick={() => setShowSearchUser(true)}>{_t("chat.start-chat")}</Button>
-          </div>
-        </>
+        <div className="flex items-center justify-center h-full flex-col">
+          <p className="text-gray-600 dark:text-gray-400 mb-4">{_t("chat.no-chat")}</p>
+          <Button onClick={() => setShowSearchUser(true)}>{_t("chat.start-chat")}</Button>
+        </div>
       )}
     </>
   );
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
index 39514dff971..62ea031fcf0 100644
--- a/src/common/features/chats/components/chat-popup/index.scss
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -14,13 +14,11 @@
   transition: height 0.5s ease;
 
   @include themify(day) {
-    box-shadow: rgb(101 119 134 / 20%) 0px 0px 15px, rgb(101 119 134 / 15%) 0px 0px 3px 1px;
-    @apply bg-white;
+    @apply bg-white border-[--border-color] border shadow-2xl;
   }
 
   @include themify(night) {
-    @apply bg-dark-default;
-    box-shadow: rgb(255 255 255 / 20%) 0px 0px 15px, rgb(255 255 255 / 15%) 0px 0px 3px 1px;
+    @apply bg-dark-200 border-[--border-color] border shadow-2xl;
   }
 
   &.expanded {
@@ -30,18 +28,9 @@
   .chat-body {
     position: relative;
     height: 470px;
-    overflow: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
 
-    .community-header,
-    .dm-header {
-      padding: 10px;
-      border-bottom: 1px solid #e7e7e7;
-      padding-left: 14px;
-      font-family: Faktum, sans-serif;
-      font-weight: 700;
-    }
-
     &.current-user {
       padding-bottom: 10px;
       height: 412px;
@@ -69,29 +58,6 @@
       }
     }
 
-    &.no-scroll {
-      overflow: hidden;
-    }
-
-    &.join-chat {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .no-chat {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 20%;
-    }
-
-    .start-chat-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
     .user-search-suggestion-list {
       .search-content {
         padding: 0.7rem;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 983cd5a6518..272469da95d 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -198,7 +198,13 @@ export const ChatPopUp = () => {
           <div
             className={`chat-body ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
-            } ${!hasUserJoinedChat ? "join-chat" : isTop && hasMore ? "no-scroll" : ""}`}
+            } ${
+              !hasUserJoinedChat
+                ? "flex items-center justify-center"
+                : isTop && hasMore
+                ? "no-scroll"
+                : ""
+            }`}
             ref={chatBodyDivRef}
             onScroll={handleScroll}
           >
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
index 24f61d66773..2b80885ff13 100644
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ b/src/common/features/chats/mutations/add-community-channel.ts
@@ -20,10 +20,6 @@ export function useAddCommunityChannel(id: string | undefined) {
       {
         kinds: [Kind.ChannelCreation],
         ids: id ? [id] : undefined
-      },
-      {
-        kinds: [Kind.ChannelMetadata, Kind.EventDeletion],
-        "#e": id ? [id] : undefined
       }
     ],
     {
diff --git a/src/common/features/chats/nostr/Readme.md b/src/common/features/chats/nostr/Readme.md
new file mode 100644
index 00000000000..e403e5756c4
--- /dev/null
+++ b/src/common/features/chats/nostr/Readme.md
@@ -0,0 +1,3 @@
+### Documentation source
+
+https://github.com/nostr-protocol/nips/blob/master/README.md

From 1ec17fb05d4a116d1a2dd64a497d2251528a2905 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 14 Nov 2023 21:46:17 +0600
Subject: [PATCH 135/179] Chats: added auto-scrolling to latest message in
 chats page

---
 .../chats/components/chat-message-box.tsx        | 15 ++++++++-------
 .../chats/components/chat-message-item.tsx       |  2 +-
 .../chats/components/chat-popup/index.tsx        |  4 ++--
 .../chats/components/chat-profile-box.tsx        |  2 +-
 .../components/chats-community-actions/index.tsx |  2 +-
 src/common/features/chats/hooks/index.ts         |  1 +
 .../chats/hooks/use-auto-scroll-in-chat-box.ts   | 16 ++++++++++++++++
 7 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index f088e58407b..1ac81d823d8 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -11,6 +11,7 @@ import { useLeftCommunityChannelsQuery } from "../queries/left-community-channel
 import { useCommunityCache } from "../../../core";
 import { useAddCommunityChannel } from "../mutations";
 import ChatsProfileBox from "./chat-profile-box";
+import { useAutoScrollInChatBox } from "../hooks";
 
 interface MatchParams {
   filter: string;
@@ -26,6 +27,8 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
+  useAutoScrollInChatBox(props.match.params.username);
+
   const { data: community } = useCommunityCache(props.match.params.username);
 
   const { data: channels } = useChannelsQuery();
@@ -36,9 +39,6 @@ export default function ChatsMessagesBox(props: Props) {
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
     useAddCommunityChannel(communityChannel?.id);
 
-  const { match } = props;
-  const username = match.params.username;
-
   const [inProgress, setInProgress] = useState(false);
 
   const currentChannel = useMemo(
@@ -68,7 +68,7 @@ export default function ChatsMessagesBox(props: Props) {
         gridTemplateRows: "min-content 1fr min-content"
       }}
     >
-      {match.url === "/chats" ? (
+      {props.match.url === "/chats" ? (
         <div className="no-chat-select">
           <div className="start-chat-wrapper text-center ">
             <p className="start-chat ">Select a chat or start a new conversation</p>
@@ -76,12 +76,13 @@ export default function ChatsMessagesBox(props: Props) {
         </div>
       ) : (
         <>
-          {username.startsWith("@") || (hasCommunityChat && isCommunityJoined) ? (
+          {props.match.params.username.startsWith("@") ||
+          (hasCommunityChat && isCommunityJoined) ? (
             <>
-              <ChatsMessagesHeader username={username} history={props.history} />
+              <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
               {inProgress && <LinearProgress />}
               <ChatsMessagesView
-                username={username}
+                username={props.match.params.username}
                 currentChannel={currentChannel!}
                 setInProgress={setInProgress}
               />
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index a308af1eeb6..1f2701f0062 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -41,7 +41,7 @@ export function ChatMessageItem({
   );
 
   return (
-    <div key={message.id}>
+    <div key={message.id} data-message-id={message.id}>
       <div
         className={classNameObject({
           "flex flex-col px-4 mb-4": true,
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 272469da95d..ff9321bc4ef 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -124,8 +124,8 @@ export const ChatPopUp = () => {
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
-    let srollHeight: number = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= srollHeight;
+    let scrollHeight = (element.scrollHeight / 100) * 25;
+    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= scrollHeight;
     const isScrollToBottom =
       (isCurrentUser || isCommunity) &&
       element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
diff --git a/src/common/features/chats/components/chat-profile-box.tsx b/src/common/features/chats/components/chat-profile-box.tsx
index 7da13a3da6d..4b3d3e2776e 100644
--- a/src/common/features/chats/components/chat-profile-box.tsx
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -61,7 +61,7 @@ export default function ChatsProfileBox({ communityName, currentUser }: Props) {
 
   return profileData?.joiningData ? (
     <div className="flex items-center justify-center p-4">
-      <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-800">
+      <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-900">
         <UserAvatar username={profileData.username} size="large" />
         <div className="text-gray-800 dark:text-white mt-2 font-semibold">{profileData.name}</div>
         {profileData.about?.length !== 0 && <div>{profileData.about}</div>}
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index d1d07c5428c..9f9235e0e03 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -43,7 +43,7 @@ const ChatsCommunityDropdownMenu = ({ history, username }: Props) => {
         <DropdownToggle>
           <Button icon={kebabMenuSvg} appearance="gray-link" noPadding={true} />
         </DropdownToggle>
-        <DropdownMenu>
+        <DropdownMenu align="right">
           <DropdownItemWithIcon
             icon={linkSvg}
             label={_t("chat.invite")}
diff --git a/src/common/features/chats/hooks/index.ts b/src/common/features/chats/hooks/index.ts
index 3dd2b75c78c..e2a28937cdc 100644
--- a/src/common/features/chats/hooks/index.ts
+++ b/src/common/features/chats/hooks/index.ts
@@ -1 +1,2 @@
 export * from "./use-active-user-switching";
+export * from "./use-auto-scroll-in-chat-box";
diff --git a/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts b/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts
new file mode 100644
index 00000000000..61943f0b7ad
--- /dev/null
+++ b/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts
@@ -0,0 +1,16 @@
+import { useLayoutEffect } from "react";
+import { useMessagesQuery } from "../queries";
+
+export function useAutoScrollInChatBox(username: string) {
+  const { data } = useMessagesQuery(username);
+
+  useLayoutEffect(() => {
+    if (data.length > 0) {
+      const first = data[data.length - 1];
+      const messageElement = document.querySelector(`[data-message-id='${first.id}']`);
+      if (messageElement) {
+        messageElement.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [data]);
+}

From 6d6ba647c81a51d8fb69db5d2ec5db373f5fef7c Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 15 Nov 2023 19:31:38 +0600
Subject: [PATCH 136/179] Chats: added entering of PIN when creating new
 account

---
 .../chats/components/chats-import.tsx         | 30 ++++++---
 .../features/chats/mutations/join-chat.ts     | 31 +++++----
 .../features/chats/queries/keys-query.ts      | 12 +++-
 .../features/chats/utils/encryption-tools.ts  | 17 +++++
 .../chats/utils/get-user-chat-private-key.ts  | 16 +++++
 .../chats/utils/get-user-chat-public-key.ts   |  4 +-
 src/common/features/chats/utils/index.ts      |  4 +-
 ...chat-public-key.ts => upload-chat-keys.ts} | 12 +++-
 src/common/features/ui/input/code-input.tsx   | 65 +++++++++++++++++++
 src/common/features/ui/input/index.ts         |  1 +
 src/common/i18n/locales/en-US.json            |  5 +-
 11 files changed, 167 insertions(+), 30 deletions(-)
 create mode 100644 src/common/features/chats/utils/encryption-tools.ts
 create mode 100644 src/common/features/chats/utils/get-user-chat-private-key.ts
 rename src/common/features/chats/utils/{upload-chat-public-key.ts => upload-chat-keys.ts} (52%)
 create mode 100644 src/common/features/ui/input/code-input.tsx

diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
index 101c39f264c..da98e7f5198 100644
--- a/src/common/features/chats/components/chats-import.tsx
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -3,18 +3,20 @@ import { _t } from "../../../i18n";
 import { keySvg } from "../../../img/svg";
 import { ChatContext } from "../chat-context-provider";
 import LinearProgress from "../../../components/linear-progress";
-import ChatsConfirmationModal from "./chats-confirmation-modal";
 import { Button } from "@ui/button";
 import { Form } from "@ui/form";
-import { FormControl, InputGroup } from "@ui/input";
+import { CodeInput, FormControl, InputGroup } from "@ui/input";
 import { useImportChatByKey, useJoinChat } from "../mutations";
 import OrDivider from "../../../components/or-divider";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { Alert } from "@ui/alert";
 
 export function ChatsImport() {
   const [showImportChats, setShowImportChats] = useState(false);
   const [privateKeyInput, setPrivateKeyInput] = useState("");
   const [step, setStep] = useState(0);
   const [error, setError] = useState("");
+  const [pin, setPin] = useState("");
 
   const { hasUserJoinedChat } = useContext(ChatContext);
   const { mutateAsync: joinChat } = useJoinChat();
@@ -74,14 +76,22 @@ export function ChatsImport() {
         </div>
       </div>
       {step !== 0 && (
-        <ChatsConfirmationModal
-          actionType={"Warning"}
-          content={"creating new account will reset your chats"}
-          onClose={() => {
-            setStep(0);
-          }}
-          onConfirm={() => joinChat()}
-        />
+        <Modal centered={true} show={[1, 2].includes(step)} onHide={() => setStep(0)}>
+          <ModalHeader closeButton={true}>{_t("chat.create-an-account")}</ModalHeader>
+          <ModalBody>
+            <div className="text-gray-600 mb-4">{_t("chat.create-description")}</div>
+            <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
+            <CodeInput codeSize={8} value={pin} setValue={setPin} />
+          </ModalBody>
+          <ModalFooter className="flex justify-end items-center gap-3">
+            <Button appearance="secondary" onClick={() => setStep(0)}>
+              {_t("g.cancel")}
+            </Button>
+            <Button disabled={pin.length < 6} onClick={() => joinChat(pin)}>
+              {_t("chat.create-an-account")}
+            </Button>
+          </ModalFooter>
+        </Modal>
       )}
     </>
   );
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
index c4736e888a7..977aa8ac9cd 100644
--- a/src/common/features/chats/mutations/join-chat.ts
+++ b/src/common/features/chats/mutations/join-chat.ts
@@ -1,10 +1,12 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { createNoStrAccount, uploadChatPublicKey } from "../utils";
+import { createNoStrAccount, EncryptionTools, uploadChatKeys } from "../utils";
 import { PREFIX } from "../../../util/local-storage";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatQueries } from "../queries";
 import { useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
+import { ChatQueries } from "../queries";
+
+const crypto = require("crypto");
 
 /**
  * Custom React hook for joining a chat with some side effects.
@@ -20,8 +22,9 @@ export function useJoinChat(onSuccess?: () => void) {
   const queryClient = useQueryClient();
   const { activeUser } = useMappedStore();
 
-  const { mutateAsync: uploadPublicKey } = useMutation(["chats/upload-public-key"], (key: string) =>
-    uploadChatPublicKey(activeUser, key)
+  const { mutateAsync: uploadKeys } = useMutation(
+    ["chats/upload-public-key"],
+    (keys: Parameters<typeof uploadChatKeys>[1]) => uploadChatKeys(activeUser, keys)
   );
   const { mutateAsync: updateProfile } = useNostrPublishMutation(
     ["chats/update-nostr-profile"],
@@ -29,10 +32,15 @@ export function useJoinChat(onSuccess?: () => void) {
     () => {}
   );
 
-  return useMutation(["chat-join-chat"], async () => createNoStrAccount(), {
-    onSuccess: async (keys: ReturnType<typeof createNoStrAccount>) => {
-      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, keys.priv);
-      await uploadPublicKey(keys.pub);
+  return useMutation(
+    ["chat-join-chat"],
+    async (pin: string) => {
+      const keys = createNoStrAccount();
+      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
+
+      const initialVector = crypto.randomBytes(16);
+      const encryptedKey = EncryptionTools.encrypt(keys.priv, pin, initialVector);
+      await uploadKeys({ pub: keys.pub, priv: encryptedKey, iv: initialVector });
 
       queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], keys.pub);
       queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], keys.priv);
@@ -45,8 +53,9 @@ export function useJoinChat(onSuccess?: () => void) {
           picture: ""
         }
       });
-
-      onSuccess?.();
+    },
+    {
+      onSuccess
     }
-  });
+  );
 }
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 18ad43919a7..47190d0f9ee 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -1,6 +1,6 @@
 import { useQueries } from "@tanstack/react-query";
 import { ChatQueries } from "./queries";
-import { getUserChatPublicKey } from "../utils";
+import { EncryptionTools, getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { useMemo } from "react";
 import { PREFIX } from "../../../util/local-storage";
@@ -19,7 +19,15 @@ export function useKeysQuery() {
       },
       {
         queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
-        queryFn: () => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username)
+        queryFn: async () => {
+          const pin = localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username);
+          const { key, iv } = await getUserChatPrivateKey(activeUser?.username!);
+          if (key && pin && iv) {
+            return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
+          }
+
+          return undefined;
+        }
       }
     ]
   });
diff --git a/src/common/features/chats/utils/encryption-tools.ts b/src/common/features/chats/utils/encryption-tools.ts
new file mode 100644
index 00000000000..c246d498239
--- /dev/null
+++ b/src/common/features/chats/utils/encryption-tools.ts
@@ -0,0 +1,17 @@
+import crypto from "crypto";
+
+export namespace EncryptionTools {
+  export function encrypt(privateKey: string, pin: string, initialVector: Buffer) {
+    const cipher = crypto.createCipheriv("aes-256-cbc", pin + pin + pin + pin, initialVector);
+    let encryptedKey = cipher.update(privateKey, "utf8", "hex");
+    encryptedKey += cipher.final("hex");
+    return encryptedKey;
+  }
+
+  export function decrypt(encryptedData: string, pin: string, initialVector: Buffer) {
+    const decipher = crypto.createDecipheriv("aes-256-cbc", pin + pin + pin + pin, initialVector);
+    let decryptedKey = decipher.update(encryptedData, "hex", "utf8");
+    decryptedKey += decipher.final("utf8");
+    return decryptedKey;
+  }
+}
diff --git a/src/common/features/chats/utils/get-user-chat-private-key.ts b/src/common/features/chats/utils/get-user-chat-private-key.ts
new file mode 100644
index 00000000000..8d13dce149f
--- /dev/null
+++ b/src/common/features/chats/utils/get-user-chat-private-key.ts
@@ -0,0 +1,16 @@
+import { getAccountFull } from "../../../api/hive";
+
+export const getUserChatPrivateKey = async (
+  username: string
+): Promise<Record<string, string | undefined>> => {
+  const response = await getAccountFull(username);
+  if (response && response.posting_json_metadata) {
+    const { posting_json_metadata } = response;
+    const profile = JSON.parse(posting_json_metadata).profile;
+    if (profile) {
+      const { nsKey, nsIv } = profile || {};
+      return { key: nsKey, iv: nsIv };
+    }
+  }
+  return {};
+};
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index d20427e4fff..030008b898f 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -6,8 +6,8 @@ export const getUserChatPublicKey = async (username: string): Promise<string | u
     const { posting_json_metadata } = response;
     const profile = JSON.parse(posting_json_metadata).profile;
     if (profile) {
-      const { nsKey } = profile || {};
-      return nsKey;
+      const { nsPubKey } = profile || {};
+      return nsPubKey;
     }
   }
   return undefined;
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index 68681e13a9f..98074c71b6b 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -1,5 +1,5 @@
 export * from "./fetch-profile-metadata";
-export * from "./upload-chat-public-key";
+export * from "./upload-chat-keys";
 export * from "./create-nostr-account";
 export * from "./format-message-time";
 export * from "./is-message-gif";
@@ -12,3 +12,5 @@ export * from "./copy-to-clipboard";
 export * from "./check-contiguous-message";
 export * from "./format-message-date-and-day";
 export * from "./get-relative-date";
+export * from "./encryption-tools";
+export * from "./get-user-chat-private-key";
diff --git a/src/common/features/chats/utils/upload-chat-public-key.ts b/src/common/features/chats/utils/upload-chat-keys.ts
similarity index 52%
rename from src/common/features/chats/utils/upload-chat-public-key.ts
rename to src/common/features/chats/utils/upload-chat-keys.ts
index c96ae2d1e82..2a7024a0e7f 100644
--- a/src/common/features/chats/utils/upload-chat-public-key.ts
+++ b/src/common/features/chats/utils/upload-chat-keys.ts
@@ -1,12 +1,18 @@
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
 import { ActiveUser } from "../../../store/active-user/types";
+import { createNoStrAccount } from "./create-nostr-account";
 
-export const uploadChatPublicKey = async (activeUser: ActiveUser | null, noStrPubKey: string) => {
+export const uploadChatKeys = async (
+  activeUser: ActiveUser | null,
+  { pub, priv, iv }: ReturnType<typeof createNoStrAccount> & { iv: Buffer }
+) => {
   const response = await getAccountFull(activeUser?.username!);
 
   return await updateProfile(response, {
-    ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}"),
-    nsKey: noStrPubKey
+    ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}").profile,
+    nsPubKey: pub,
+    nsKey: priv,
+    nsIv: iv.toString("base64")
   });
 };
diff --git a/src/common/features/ui/input/code-input.tsx b/src/common/features/ui/input/code-input.tsx
new file mode 100644
index 00000000000..05bed893ff9
--- /dev/null
+++ b/src/common/features/ui/input/code-input.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { FormControl } from "@ui/input/form-controls";
+
+interface Props {
+  codeSize?: number;
+  value: string;
+  setValue: (v: string) => void;
+}
+
+export function CodeInput({ value, setValue, codeSize = 6 }: Props) {
+  const [code, setCode] = useState(new Array(codeSize).fill(""));
+
+  useEffect(() => {
+    setValue(code.join(""));
+  }, [code]);
+
+  useEffect(() => {
+    const nextCode = value.split("");
+    setCode(
+      new Array(codeSize).fill("").map((_, i) => {
+        if (nextCode[i]) {
+          return nextCode[i];
+        }
+        return "";
+      })
+    );
+  }, [value]);
+
+  return (
+    <div className="flex py-6 [&>input]:w-[44px] gap-2 justify-center [&>input]:text-center">
+      {code.map((item, i) => (
+        <FormControl
+          id={`code-input-${i}`}
+          key={i}
+          type="text"
+          value={item}
+          onKeyUp={(e) => {
+            if (e.key === "Backspace") {
+              const nextElement = document.querySelector(
+                `#code-input-${i - 1}`
+              ) as HTMLInputElement | null;
+              if (nextElement) {
+                nextElement.focus();
+              }
+            }
+          }}
+          onChange={(e) => {
+            const lastCharacter =
+              e.target.value.length > 0 ? e.target.value[e.target.value.length - 1] : "";
+            const tempCode = [...code];
+            tempCode[i] = lastCharacter;
+            setCode(tempCode);
+
+            const nextElement = document.querySelector(
+              `#code-input-${i + 1}`
+            ) as HTMLInputElement | null;
+            if (nextElement && lastCharacter) {
+              nextElement.focus();
+            }
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/common/features/ui/input/index.ts b/src/common/features/ui/input/index.ts
index a3bd8f6f97f..c55a778e1b0 100644
--- a/src/common/features/ui/input/index.ts
+++ b/src/common/features/ui/input/index.ts
@@ -1,3 +1,4 @@
 export * from "./input-group";
 export * from "./input-group-copy-clipboard";
 export * from "./form-controls";
+export * from "./code-input";
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 64cbcdae7e9..9051c88a759 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1886,7 +1886,10 @@
     "enter-username": "Enter temporary username",
     "hide-message": "Hide message",
     "block-author": "Block author",
-    "unblock-author": "Unblock author"
+    "unblock-author": "Unblock author",
+    "create-an-account": "Create chat account",
+    "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others. Need help? We're here for you. Happy chatting!",
+    "create-pin-description": "Please, set PIN for getting access to your chats from any device"
   },
   "add-image": {
     "title": "Add Image",

From 896367504edf524e3b5324966523cebbdc61494f Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 01:09:04 +0600
Subject: [PATCH 137/179] Chats: added importing chat account by keys and pin

---
 src/common/api/queries.ts                     |   7 ++
 src/common/core/react-query.ts                |   4 +-
 .../chat-popup-contacts-and-channels.tsx      |   4 +-
 .../chats/components/chat-popup/index.tsx     |  16 +--
 .../chats/components/chats-import.tsx         | 111 ++++++------------
 .../chats/components/chats-sidebar/index.tsx  |   6 +-
 .../chats/components/chats-welcome.tsx        |  77 ++++++++++++
 .../chats/components/create-an-account.tsx    |  38 ++++++
 .../features/chats/components/join-chat.tsx   |  23 ----
 .../components/join-community-chat-btn.tsx    |   8 +-
 .../chats/components/manage-chat-key.tsx      |  28 ++++-
 .../chats/mutations/import-chat-by-key.ts     |  39 ------
 .../chats/mutations/import-chat-by-keys.ts    |  59 ++++++++++
 src/common/features/chats/mutations/index.ts  |   2 +-
 .../chats/mutations/restore-chat-by-pin.ts    |  52 ++++++++
 .../features/chats/queries/keys-query.ts      |  11 +-
 src/common/features/chats/screens/chats.tsx   |  87 +++++++-------
 .../chats/utils/get-user-chat-private-key.ts  |  11 +-
 .../chats/utils/get-user-chat-public-key.ts   |   9 +-
 src/common/features/ui/button/index.tsx       |   3 +-
 src/common/features/ui/button/styles.ts       |   2 +-
 src/common/features/ui/input/code-input.tsx   |   6 +-
 src/common/i18n/locales/en-US.json            |  19 ++-
 src/common/pages/community-functional.tsx     |  18 +--
 24 files changed, 399 insertions(+), 241 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-welcome.tsx
 create mode 100644 src/common/features/chats/components/create-an-account.tsx
 delete mode 100644 src/common/features/chats/components/join-chat.tsx
 delete mode 100644 src/common/features/chats/mutations/import-chat-by-key.ts
 create mode 100644 src/common/features/chats/mutations/import-chat-by-keys.ts
 create mode 100644 src/common/features/chats/mutations/restore-chat-by-pin.ts

diff --git a/src/common/api/queries.ts b/src/common/api/queries.ts
index 0e87bd38c74..49a885eae85 100644
--- a/src/common/api/queries.ts
+++ b/src/common/api/queries.ts
@@ -5,6 +5,7 @@ import { useMappedStore } from "../store/use-mapped-store";
 import axios from "axios";
 import { catchPostImage } from "@ecency/render-helper";
 import { Entry } from "../store/entries/types";
+import { getAccountFull } from "./hive";
 
 const DEFAULT = {
   points: "0.000",
@@ -88,3 +89,9 @@ export function useImageDownloader(
     }
   );
 }
+
+export function useGetAccountFullQuery(username?: string) {
+  return useQuery([QueryIdentifiers.GET_ACCOUNT_FULL, username], () => getAccountFull(username!), {
+    enabled: !!username
+  });
+}
diff --git a/src/common/core/react-query.ts b/src/common/core/react-query.ts
index 663aff22236..b9cc66c7b69 100644
--- a/src/common/core/react-query.ts
+++ b/src/common/core/react-query.ts
@@ -26,5 +26,7 @@ export enum QueryIdentifiers {
   THREE_SPEAK_VIDEO_LIST = "three-speak-video-list",
   THREE_SPEAK_VIDEO_LIST_FILTERED = "three-speak-video-list-filtered",
   DRAFTS = "drafts",
-  BY_DRAFT_ID = "by-draft-id"
+  BY_DRAFT_ID = "by-draft-id",
+
+  GET_ACCOUNT_FULL = "get-account-full"
 }
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index f96d620126b..0bebe1fdaed 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from "react";
 import { _t } from "../../../../i18n";
 import { getJoinedCommunities } from "../../utils";
-import { ChatsImport } from "../chats-import";
+import { ChatsWelcome } from "../chats-welcome";
 import { Button } from "@ui/button";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
@@ -71,7 +71,7 @@ export function ChatPopupContactsAndChannels({
           ))}
         </>
       ) : !privateKey ? (
-        <ChatsImport />
+        <ChatsWelcome />
       ) : (
         <div className="flex items-center justify-center h-full flex-col">
           <p className="text-gray-600 dark:text-gray-400 mb-4">{_t("chat.no-chat")}</p>
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index ff9321bc4ef..f2c21900410 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -12,8 +12,6 @@ import "./index.scss";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
-import { Spinner } from "@ui/spinner";
-import { Button } from "@ui/button";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
@@ -22,16 +20,17 @@ import { ChatPopupContactsAndChannels } from "./chat-popup-contacts-and-channels
 import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
 import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
 import { useKeysQuery } from "../../queries/keys-query";
+import { ChatsWelcome } from "../chats-welcome";
 
 export const ChatPopUp = () => {
   const { activeUser, global } = useMappedStore();
 
   const { receiverPubKey, revealPrivateKey, hasUserJoinedChat, setRevealPrivateKey } =
     useContext(ChatContext);
-  const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
+  const { isLoading: isJoinChatLoading } = useJoinChat();
 
   const { privateKey, publicKey } = useKeysQuery();
-  const { data: directContacts, isLoading: isDirectContactsLoading } = useDirectContactsQuery();
+  const { data: directContacts } = useDirectContactsQuery();
   const directContact = useMemo(
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
     [directContacts, receiverPubKey]
@@ -230,14 +229,7 @@ export const ChatPopUp = () => {
                 <ManageChatKey />
               </div>
             ) : (
-              <Button
-                className="join-chat-btn"
-                onClick={() => joinChat()}
-                icon={isJoinChatLoading && <Spinner className="w-3.5 h-3.5" />}
-                iconPlacement="left"
-              >
-                {_t("chat.join-chat")}
-              </Button>
+              <ChatsWelcome />
             )}
 
             {((isScrollToTop && !isCurrentUser) ||
diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
index da98e7f5198..9939473ba12 100644
--- a/src/common/features/chats/components/chats-import.tsx
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -1,94 +1,61 @@
-import React, { useContext, useEffect, useState } from "react";
-import { _t } from "../../../i18n";
-import { keySvg } from "../../../img/svg";
-import { ChatContext } from "../chat-context-provider";
-import LinearProgress from "../../../components/linear-progress";
 import { Button } from "@ui/button";
-import { Form } from "@ui/form";
-import { CodeInput, FormControl, InputGroup } from "@ui/input";
-import { useImportChatByKey, useJoinChat } from "../mutations";
-import OrDivider from "../../../components/or-divider";
+import { _t } from "../../../i18n";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { CodeInput, FormControl } from "@ui/input";
+import React, { useState } from "react";
+import { useImportChatByKeys } from "../mutations";
 import { Alert } from "@ui/alert";
 
 export function ChatsImport() {
-  const [showImportChats, setShowImportChats] = useState(false);
-  const [privateKeyInput, setPrivateKeyInput] = useState("");
   const [step, setStep] = useState(0);
-  const [error, setError] = useState("");
+  const [publicKey, setPublicKey] = useState("");
+  const [privateKey, setPrivateKey] = useState("");
+  const [iv, setIv] = useState("");
   const [pin, setPin] = useState("");
 
-  const { hasUserJoinedChat } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
-
-  const { mutateAsync: importChatByKey, isLoading, error: importError } = useImportChatByKey();
-
-  useEffect(() => {
-    if (importError) {
-      setError(_t("chat.invalid-private-key"));
-    }
-  }, [importError]);
-
-  useEffect(() => {
-    if (hasUserJoinedChat) {
-      setStep(0);
-    }
-  }, [hasUserJoinedChat]);
+  const { mutateAsync: importChatByKey } = useImportChatByKeys();
 
   return (
     <>
-      <div className="flex flex-col items-center justify-center">
-        {showImportChats && (
-          <div className="private-key" style={{ margin: "15px 10px" }}>
-            <Form onSubmit={(e: React.FormEvent) => e.preventDefault()}>
-              <InputGroup
-                prepend={keySvg}
-                append={
-                  <Button onClick={() => importChatByKey({ key: privateKeyInput })}>
-                    {_t("chat.submit")}
-                  </Button>
-                }
-              >
-                <FormControl
-                  value={privateKeyInput}
-                  type="password"
-                  autoFocus={true}
-                  autoComplete="off"
-                  placeholder={_t("chat.enter-private-key")}
-                  aria-invalid={!!error}
-                  onChange={(e) => {
-                    setPrivateKeyInput(e.target.value);
-                    setError("");
-                  }}
-                />
-              </InputGroup>
-              {isLoading && <LinearProgress />}
-              {error && <div className="text-red text-xs p-4">{error}</div>}
-            </Form>
-          </div>
-        )}
-        <Button onClick={() => setShowImportChats(!showImportChats)}>
-          {_t("chat.import-chat")}
-        </Button>
-        <OrDivider />
-        <div className="flex justify-center">
-          <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
-        </div>
-      </div>
-      {step !== 0 && (
+      <Button outline={true} onClick={() => setStep(1)}>
+        {_t("chat.import.button")}
+      </Button>
+      {step === 1 && (
         <Modal centered={true} show={[1, 2].includes(step)} onHide={() => setStep(0)}>
-          <ModalHeader closeButton={true}>{_t("chat.create-an-account")}</ModalHeader>
+          <ModalHeader closeButton={true}>{_t("chat.import.title")}</ModalHeader>
           <ModalBody>
-            <div className="text-gray-600 mb-4">{_t("chat.create-description")}</div>
+            <div className="text-gray-600 mb-4">{_t("chat.import.description")}</div>
+            <div className="text-sm p-3">{_t("chat.public-key")}</div>
+            <FormControl
+              type="text"
+              value={publicKey}
+              onChange={(e) => setPublicKey(e.target.value)}
+            />
+            <div className="text-sm p-3">{_t("chat.private-key")}</div>
+            <FormControl
+              type="text"
+              value={privateKey}
+              onChange={(e) => setPrivateKey(e.target.value)}
+            />
+            <div className="text-sm p-3">{_t("chat.import.iv")}</div>
+            <FormControl
+              className="mb-6"
+              type="text"
+              value={iv}
+              onChange={(e) => setIv(e.target.value)}
+            />
             <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
-            <CodeInput codeSize={8} value={pin} setValue={setPin} />
+            <CodeInput value={pin} setValue={setPin} codeSize={8} />
           </ModalBody>
           <ModalFooter className="flex justify-end items-center gap-3">
             <Button appearance="secondary" onClick={() => setStep(0)}>
               {_t("g.cancel")}
             </Button>
-            <Button disabled={pin.length < 6} onClick={() => joinChat(pin)}>
-              {_t("chat.create-an-account")}
+            <Button
+              disabled={!publicKey || !privateKey || !pin || !iv}
+              onClick={() => importChatByKey({ publicKey, privateKey, pin, iv })}
+            >
+              {_t("chat.import.button")}
             </Button>
           </ModalFooter>
         </Modal>
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 5e3bd1c346e..5936e2bcb5c 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -12,6 +12,7 @@ import { _t } from "../../../../i18n";
 import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { ChatSidebarChannel } from "./chat-sidebar-channel";
+import { useGetAccountFullQuery } from "../../../../api/queries";
 
 interface Props {
   username: string;
@@ -22,6 +23,7 @@ export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
 
+  const { data: fullAccount } = useGetAccountFullQuery(username);
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
@@ -64,8 +66,8 @@ export default function ChatsSideBar(props: Props) {
     const peer = directContacts?.find((x) => x.name === username)?.pubkey ?? "";
     if (peer) {
       setReceiverPubKey(peer);
-    } else {
-      const pubkey = await getUserChatPublicKey(username);
+    } else if (fullAccount) {
+      const pubkey = getUserChatPublicKey(fullAccount);
       if (pubkey) {
         setReceiverPubKey(pubkey);
       } else {
diff --git a/src/common/features/chats/components/chats-welcome.tsx b/src/common/features/chats/components/chats-welcome.tsx
new file mode 100644
index 00000000000..5b76544d2ac
--- /dev/null
+++ b/src/common/features/chats/components/chats-welcome.tsx
@@ -0,0 +1,77 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { _t } from "../../../i18n";
+import { ChatContext } from "../chat-context-provider";
+import { CodeInput } from "@ui/input";
+import OrDivider from "../../../components/or-divider";
+import { useRestoreChatByPin } from "../mutations/restore-chat-by-pin";
+import { useGetAccountFullQuery } from "../../../api/queries";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
+import { CreateAnAccount } from "./create-an-account";
+import { ChatsImport } from "./chats-import";
+
+export function ChatsWelcome() {
+  const { activeUser } = useMappedStore();
+
+  const [step, setStep] = useState(0);
+  const [pin, setPin] = useState("");
+
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
+
+  const {
+    mutateAsync: restoreByPin,
+    isError: isRestoreFailed,
+    isLoading: isRestoreLoading
+  } = useRestoreChatByPin();
+
+  const isAlreadyRegisteredInChats = useMemo(() => {
+    if (!fullAccount) {
+      return false;
+    }
+    const publicKey = getUserChatPublicKey(fullAccount);
+    const { key, iv } = getUserChatPrivateKey(fullAccount);
+    return !!key && !!iv && !!publicKey;
+  }, [fullAccount]);
+
+  useEffect(() => {
+    // Handle PIN on account restoring
+    if (step === 0 && pin.length === 8) {
+      restoreByPin(pin);
+    }
+  }, [pin]);
+
+  useEffect(() => {
+    if (hasUserJoinedChat) {
+      setStep(0);
+    }
+  }, [hasUserJoinedChat]);
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center p-4">
+        <div className="flex flex-col items-center mb-6">
+          <div className="font-bold">{_t("chat.welcome.title")}</div>
+        </div>
+
+        {isAlreadyRegisteredInChats ? (
+          <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+            <div>{_t("chat.welcome.already-joined-title")}</div>
+            <div>{_t("chat.welcome.already-joined-hint")}</div>
+            <CodeInput value={pin} setValue={setPin} codeSize={8} disabled={isRestoreLoading} />
+            {isRestoreFailed && <div className="text-red">{_t("chat.welcome.pin-failed")}</div>}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+            <div>{_t("chat.welcome.description")}</div>
+          </div>
+        )}
+        <OrDivider />
+        <div className="flex justify-center gap-4">
+          <CreateAnAccount />
+          <ChatsImport />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/create-an-account.tsx b/src/common/features/chats/components/create-an-account.tsx
new file mode 100644
index 00000000000..7f8d6af63d7
--- /dev/null
+++ b/src/common/features/chats/components/create-an-account.tsx
@@ -0,0 +1,38 @@
+import { _t } from "../../../i18n";
+import { Button } from "@ui/button";
+import React, { useState } from "react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { Alert } from "@ui/alert";
+import { CodeInput } from "@ui/input";
+import { useJoinChat } from "../mutations";
+
+export function CreateAnAccount() {
+  const [step, setStep] = useState(0);
+  const [pin, setPin] = useState("");
+
+  const { mutateAsync: joinChat } = useJoinChat();
+
+  return (
+    <>
+      <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
+      {step === 1 && (
+        <Modal centered={true} show={[1, 2].includes(step)} onHide={() => setStep(0)}>
+          <ModalHeader closeButton={true}>{_t("chat.create-an-account")}</ModalHeader>
+          <ModalBody>
+            <div className="text-gray-600 mb-4">{_t("chat.create-description")}</div>
+            <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
+            <CodeInput codeSize={8} value={pin} setValue={setPin} />
+          </ModalBody>
+          <ModalFooter className="flex justify-end items-center gap-3">
+            <Button appearance="secondary" onClick={() => setStep(0)}>
+              {_t("g.cancel")}
+            </Button>
+            <Button disabled={pin.length < 8} onClick={() => joinChat(pin)}>
+              {_t("chat.create-an-account")}
+            </Button>
+          </ModalFooter>
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/join-chat.tsx b/src/common/features/chats/components/join-chat.tsx
deleted file mode 100644
index 5f075e6d127..00000000000
--- a/src/common/features/chats/components/join-chat.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { Button } from "@ui/button";
-import { Spinner } from "@ui/spinner";
-import { _t } from "../../../i18n";
-import { useJoinChat } from "../mutations";
-
-export default function JoinChat() {
-  const { mutateAsync: joinChat, isLoading } = useJoinChat();
-
-  return (
-    <div className="no-chat text-center">
-      <p>{_t("chat.you-haven-t-joined")}</p>
-      <Button
-        onClick={() => joinChat()}
-        disabled={isLoading}
-        icon={isLoading ? <Spinner /> : <></>}
-        iconPlacement="left"
-      >
-        {_t("chat.join-chat")}
-      </Button>
-    </div>
-  );
-}
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index c953bc689e1..5d828e53de6 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -56,7 +56,7 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const join = async () => {
     if (!hasUserJoinedChat) {
-      await joinChat();
+      return;
     }
     await addCommunityChannel();
   };
@@ -70,7 +70,7 @@ export default function JoinCommunityChatBtn(props: Props) {
           <Button
             onClick={async () => {
               if (!hasUserJoinedChat) {
-                await joinChat();
+                return;
               }
 
               if (communityTeam.some((role) => role.pubkey === publicKey)) {
@@ -87,7 +87,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         ) : !isCommunityChatJoined && isChatEnabled && hasUserJoinedChat ? (
           <Button
             disabled={isJoinChatLoading || isAddCommunityChannelLoading}
-            onClick={join}
+            to={`/chats/${props.community.name}`}
             icon={
               (isJoinChatLoading || isAddCommunityChannelLoading) && (
                 <Spinner className="w-3.5 h-3.5" />
@@ -103,7 +103,7 @@ export default function JoinCommunityChatBtn(props: Props) {
       ) : isChatEnabled && !isCommunityChatJoined ? (
         <Button
           disabled={isJoinChatLoading || isAddCommunityChannelLoading}
-          onClick={join}
+          to={`/chats/${props.community.name}`}
           icon={
             (isJoinChatLoading || isAddCommunityChannelLoading) && (
               <Spinner className="w-3.5 h-3.5" />
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index 2fa5499762a..2b039c7985c 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -1,25 +1,38 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { _t } from "../../../i18n";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
 import { useKeysQuery } from "../queries/keys-query";
+import { useGetAccountFullQuery } from "../../../api/queries";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { getUserChatPrivateKey } from "../utils";
 
 export default function ManageChatKey() {
-  const { privateKey } = useKeysQuery();
+  const { activeUser } = useMappedStore();
+  const { privateKey, publicKey } = useKeysQuery();
 
+  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
   const qrImgRef = useRef<HTMLImageElement | null>(null);
   const [isQrShow, setIsQrShow] = useState(false);
 
+  const { iv } = useMemo(
+    () => (fullAccount ? getUserChatPrivateKey(fullAccount) : { iv: undefined }),
+    [fullAccount]
+  );
+
   useEffect(() => {
     if (privateKey) {
-      compileQR(privateKey);
+      compileQR();
     }
   }, [privateKey]);
 
-  const compileQR = async (key: string) => {
+  const compileQR = async () => {
     if (qrImgRef.current) {
-      qrImgRef.current.src = await qrcode.toDataURL(key, { width: 300 });
+      qrImgRef.current.src = await qrcode.toDataURL(
+        `Private key: ${privateKey}. Public key: ${publicKey}. Initial vector value: ${iv}`,
+        { width: 300 }
+      );
       setIsQrShow(true);
     }
   };
@@ -27,7 +40,12 @@ export default function ManageChatKey() {
   return (
     <div className="flex gap-4 flex-col w-full">
       <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
+      <div className="text-sm">{_t("chat.public-key")}</div>
+      <InputGroupCopyClipboard value={publicKey ?? ""} />
+      <div className="text-sm">{_t("chat.private-key")}</div>
       <InputGroupCopyClipboard value={privateKey ?? ""} />
+      <div className="text-sm">{_t("chat.import.iv")}</div>
+      <InputGroupCopyClipboard value={iv ?? ""} />
       <img
         ref={qrImgRef}
         className={classNameObject({
diff --git a/src/common/features/chats/mutations/import-chat-by-key.ts b/src/common/features/chats/mutations/import-chat-by-key.ts
deleted file mode 100644
index 86a7e903e3c..00000000000
--- a/src/common/features/chats/mutations/import-chat-by-key.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getPublicKey } from "../../../../lib/nostr-tools/keys";
-import { ChatQueries } from "../queries";
-import { PREFIX } from "../../../util/local-storage";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { getUserChatPublicKey } from "../utils";
-
-interface Payload {
-  key: string;
-}
-
-export function useImportChatByKey(onSuccess?: () => void) {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  return useMutation(
-    ["chats/import-chat-by-key"],
-    async ({ key }: Payload) => {
-      const publicKey = getPublicKey(key);
-
-      if (activeUser) {
-        const activeUserExistingPublicKey = await getUserChatPublicKey(activeUser.username);
-
-        if (activeUserExistingPublicKey !== publicKey) {
-          throw new Error(
-            "[Chat][Nostr] – account public key doesn't match to generated from private"
-          );
-        }
-      }
-
-      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, key);
-      await queryClient.invalidateQueries([ChatQueries.PUBLIC_KEY]);
-      await queryClient.invalidateQueries([ChatQueries.PRIVATE_KEY]);
-    },
-    {
-      onSuccess
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/import-chat-by-keys.ts b/src/common/features/chats/mutations/import-chat-by-keys.ts
new file mode 100644
index 00000000000..ff7add2e0c7
--- /dev/null
+++ b/src/common/features/chats/mutations/import-chat-by-keys.ts
@@ -0,0 +1,59 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ChatQueries } from "../queries";
+import { PREFIX } from "../../../util/local-storage";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { EncryptionTools, uploadChatKeys } from "../utils";
+import { useNostrPublishMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+
+interface Payload {
+  publicKey: string;
+  privateKey: string;
+  pin: string;
+  iv: string;
+}
+
+export function useImportChatByKeys(onSuccess?: () => void) {
+  const queryClient = useQueryClient();
+  const { activeUser } = useMappedStore();
+
+  const { mutateAsync: uploadKeys } = useMutation(
+    ["chats/upload-public-key"],
+    (keys: Parameters<typeof uploadChatKeys>[1]) => uploadChatKeys(activeUser, keys)
+  );
+  const { mutateAsync: updateProfile } = useNostrPublishMutation(
+    ["chats/update-nostr-profile"],
+    Kind.Metadata,
+    () => {}
+  );
+
+  return useMutation(
+    ["chats/import-chat-by-key"],
+    async ({ publicKey, privateKey, pin, iv }: Payload) => {
+      if (!activeUser) {
+        return;
+      }
+
+      const initialVector = Buffer.from(iv, "base64");
+      const encryptedKey = EncryptionTools.encrypt(privateKey, pin, initialVector);
+
+      await uploadKeys({ pub: publicKey, priv: encryptedKey, iv: initialVector });
+
+      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
+      queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], publicKey);
+      queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], privateKey);
+
+      await updateProfile({
+        tags: [],
+        eventMetadata: {
+          name: activeUser?.username!,
+          about: "",
+          picture: ""
+        }
+      });
+    },
+    {
+      onSuccess
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 8d1f44b94ff..b81f0f7ceac 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -9,5 +9,5 @@ export * from "./update-community-channel";
 export * from "./update-channel-moderator";
 export * from "./fetch-previous-messages";
 export * from "./update-channel-blocked-users";
-export * from "./import-chat-by-key";
+export * from "./import-chat-by-keys";
 export * from "./hide-message-in-channel";
diff --git a/src/common/features/chats/mutations/restore-chat-by-pin.ts b/src/common/features/chats/mutations/restore-chat-by-pin.ts
new file mode 100644
index 00000000000..0bc6a22861d
--- /dev/null
+++ b/src/common/features/chats/mutations/restore-chat-by-pin.ts
@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { PREFIX } from "../../../util/local-storage";
+import { EncryptionTools, getUserChatPrivateKey } from "../utils";
+import { ChatQueries } from "../queries";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { useNostrPublishMutation } from "../nostr";
+import { Kind } from "../../../../lib/nostr-tools/event";
+import { useKeysQuery } from "../queries/keys-query";
+import { useGetAccountFullQuery } from "../../../api/queries";
+
+export function useRestoreChatByPin() {
+  const queryClient = useQueryClient();
+  const { activeUser } = useMappedStore();
+
+  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
+  const { mutateAsync: updateProfile } = useNostrPublishMutation(
+    ["chats/update-nostr-profile"],
+    Kind.Metadata,
+    () => {}
+  );
+  const { publicKey } = useKeysQuery();
+
+  return useMutation(["chats/restore-chat-by-pin"], async (pin: string) => {
+    if (!pin || !publicKey || !fullAccount) {
+      throw new Error("[Chat][Nostr] – no pin, public key or account information");
+    }
+
+    const { iv: initialVector, key: privateKey } = getUserChatPrivateKey(fullAccount!!);
+
+    if (!initialVector || !privateKey) {
+      throw new Error("[Chat][Nostr] – no initial vector or private key");
+    }
+
+    const decryptedKey = EncryptionTools.decrypt(
+      privateKey,
+      pin,
+      Buffer.from(initialVector, "base64")
+    );
+    queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], decryptedKey);
+
+    localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
+
+    await updateProfile({
+      tags: [],
+      eventMetadata: {
+        name: activeUser?.username!,
+        about: "",
+        picture: ""
+      }
+    });
+  });
+}
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 47190d0f9ee..70a76cf4b21 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -4,10 +4,13 @@ import { EncryptionTools, getUserChatPrivateKey, getUserChatPublicKey } from "..
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { useMemo } from "react";
 import { PREFIX } from "../../../util/local-storage";
+import { useGetAccountFullQuery } from "../../../api/queries";
 
 export function useKeysQuery() {
   const { activeUser } = useMappedStore();
 
+  const { data } = useGetAccountFullQuery(activeUser?.username);
+
   const [
     { data: publicKey, refetch: refetchPublicKey },
     { data: privateKey, refetch: refetchPrivateKey }
@@ -15,19 +18,21 @@ export function useKeysQuery() {
     queries: [
       {
         queryKey: [ChatQueries.PUBLIC_KEY, activeUser?.username],
-        queryFn: async () => getUserChatPublicKey(activeUser?.username!)
+        queryFn: async () => getUserChatPublicKey(data!!),
+        enabled: !!data
       },
       {
         queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
         queryFn: async () => {
           const pin = localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username);
-          const { key, iv } = await getUserChatPrivateKey(activeUser?.username!);
+          const { key, iv } = await getUserChatPrivateKey(data!!);
           if (key && pin && iv) {
             return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
           }
 
           return undefined;
-        }
+        },
+        enabled: !!data
       }
     ]
   });
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 50d4b90403d..214f6968271 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -9,14 +9,14 @@ import Feedback from "../../../components/feedback";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ChatsMessagesBox from "../components/chat-message-box";
-import JoinChat from "../components/join-chat";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
 import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
 import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useKeysQuery } from "../queries/keys-query";
-import { ChatsImport } from "../components/chats-import";
+import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
+import SSRSuspense from "../../../components/ssr-suspense";
 
 interface Props extends PageProps {
   match: match<{
@@ -74,53 +74,54 @@ export const Chats = (props: Props) => {
   }, []);
 
   return (
-    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
-      <Feedback activeUser={activeUser} />
-      <NavBar history={props.history} />
+    <SSRSuspense fallback={<></>}>
+      <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
+        <Feedback activeUser={activeUser} />
+        <NavBar history={props.history} />
 
-      <div className="container mx-auto md:py-6">
-        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
-          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
-            {isReady ? <ChatsSideBar history={history} username={match.params.username} /> : <></>}
-          </div>
-          <div
-            className={classNameObject({
-              "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
-                true,
-              "left-0": isShowChatRoom || isShowManageKey,
-              "left-[100%]": !isShowChatRoom && !isShowManageKey
-            })}
-          >
-            {isShowManageKey && (
-              <div className="flex h-full items-center justify-center">
-                <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full p-4 rounded-2xl border border-[--border-color] p-4">
-                  <ManageChatKey />
+        <div className="container mx-auto md:py-6">
+          <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
+            <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
+              {isReady ? (
+                <ChatsSideBar history={history} username={match.params.username} />
+              ) : (
+                <></>
+              )}
+            </div>
+            <div
+              className={classNameObject({
+                "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+                  true,
+                "left-0": isShowChatRoom || isShowManageKey,
+                "left-[100%]": !isShowChatRoom && !isShowManageKey
+              })}
+            >
+              {isShowManageKey && (
+                <div className="flex h-full items-start justify-center my-6">
+                  <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full p-4 rounded-2xl border border-[--border-color] p-4">
+                    <ManageChatKey />
+                  </div>
+                </div>
+              )}
+              {isShowImportChats && activeUser && (
+                <div className="h-full w-full flex items-center justify-center">
+                  <ChatsWelcome />
                 </div>
-              </div>
-            )}
-            {isShowImportChats && activeUser && (
-              <div className="h-full w-full flex items-center justify-center">
-                <ChatsImport />
-              </div>
-            )}
-            {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
-            {isShowDefaultScreen && (
-              <div className="flex flex-col justify-center items-center w-full h-full">
-                <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
-                  Hello, @{activeUser?.username}
+              )}
+              {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
+              {isShowDefaultScreen && (
+                <div className="flex flex-col justify-center items-center w-full h-full">
+                  <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
+                    Hello, @{activeUser?.username}
+                  </div>
+                  <div>Search a person or community and start messaging</div>
                 </div>
-                <div>Search a person or community and start messaging</div>
-              </div>
-            )}
-            {!isReady && !isShowImportChats && (
-              <div className="flex justify-center items-center full-page">
-                <JoinChat />
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </SSRSuspense>
   );
 };
 export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/features/chats/utils/get-user-chat-private-key.ts b/src/common/features/chats/utils/get-user-chat-private-key.ts
index 8d13dce149f..6baeeec1764 100644
--- a/src/common/features/chats/utils/get-user-chat-private-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-private-key.ts
@@ -1,11 +1,8 @@
-import { getAccountFull } from "../../../api/hive";
+import { FullAccount } from "../../../store/accounts/types";
 
-export const getUserChatPrivateKey = async (
-  username: string
-): Promise<Record<string, string | undefined>> => {
-  const response = await getAccountFull(username);
-  if (response && response.posting_json_metadata) {
-    const { posting_json_metadata } = response;
+export const getUserChatPrivateKey = (account: FullAccount): Record<string, string | undefined> => {
+  if (account.posting_json_metadata) {
+    const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
     if (profile) {
       const { nsKey, nsIv } = profile || {};
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index 030008b898f..3b391ea4626 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -1,9 +1,8 @@
-import { getAccountFull } from "../../../api/hive";
+import { FullAccount } from "../../../store/accounts/types";
 
-export const getUserChatPublicKey = async (username: string): Promise<string | undefined> => {
-  const response = await getAccountFull(username);
-  if (response && response.posting_json_metadata) {
-    const { posting_json_metadata } = response;
+export const getUserChatPublicKey = (account: FullAccount): string | undefined => {
+  if (account.posting_json_metadata) {
+    const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
     if (profile) {
       const { nsPubKey } = profile || {};
diff --git a/src/common/features/ui/button/index.tsx b/src/common/features/ui/button/index.tsx
index 43be501c9d7..7f32c0ef23d 100644
--- a/src/common/features/ui/button/index.tsx
+++ b/src/common/features/ui/button/index.tsx
@@ -24,7 +24,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement | NavLink
       // Outline basics
       "border-[1.25px] border-solid": props.outline ?? false,
       // With icon
-      "flex items-center justify-center gap-2": !!props.icon,
+      "flex items-center justify-center gap-2":
+        !!props.icon || ("to" in props ? !!props.to : false),
       "flex-row-reverse": props.iconPlacement === "left",
 
       // Styles
diff --git a/src/common/features/ui/button/styles.ts b/src/common/features/ui/button/styles.ts
index ea9dece6776..f4d7a25f811 100644
--- a/src/common/features/ui/button/styles.ts
+++ b/src/common/features/ui/button/styles.ts
@@ -2,7 +2,7 @@ import { ButtonAppearance, ButtonSize } from "@ui/button/props";
 
 export const BUTTON_STYLES: Record<ButtonAppearance, string> = {
   primary:
-    "bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky",
+    "bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky",
   secondary: "bg-gray-600 hover:bg-gray-700 focus:bg-gray-800 text-white",
   link: "text-blue-dark-sky hover:text-blue-dark-sky-hover focus:text-blue-dark-sky-active",
   danger: "bg-red hover:bg-red-020 focus:bg-red-030 text-white",
diff --git a/src/common/features/ui/input/code-input.tsx b/src/common/features/ui/input/code-input.tsx
index 05bed893ff9..88b5c50b4af 100644
--- a/src/common/features/ui/input/code-input.tsx
+++ b/src/common/features/ui/input/code-input.tsx
@@ -5,9 +5,10 @@ interface Props {
   codeSize?: number;
   value: string;
   setValue: (v: string) => void;
+  disabled?: boolean;
 }
 
-export function CodeInput({ value, setValue, codeSize = 6 }: Props) {
+export function CodeInput({ value, setValue, codeSize = 6, disabled }: Props) {
   const [code, setCode] = useState(new Array(codeSize).fill(""));
 
   useEffect(() => {
@@ -27,9 +28,10 @@ export function CodeInput({ value, setValue, codeSize = 6 }: Props) {
   }, [value]);
 
   return (
-    <div className="flex py-6 [&>input]:w-[44px] gap-2 justify-center [&>input]:text-center">
+    <div className="flex py-6 [&>input]:w-[36px] [&>input]:h-[36px] gap-2 justify-center [&>input]:text-center">
       {code.map((item, i) => (
         <FormControl
+          disabled={disabled}
           id={`code-input-${i}`}
           key={i}
           type="text"
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 9051c88a759..e661db431f6 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1878,7 +1878,9 @@
     "start-community-chat": "Start Community Chat",
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
-    "chat-priv-key": "Please, copy this key or save QR code to your device for joining to same account in another devices",
+    "chat-priv-key": "Please, copy thess key or save QR code to your device for joining to same account in another devices",
+    "public-key": "Public key",
+    "private-key": "Private key",
     "copy-priv-key": "Copy Private key",
     "extended-view": "Extended View",
     "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting.",
@@ -1889,7 +1891,20 @@
     "unblock-author": "Unblock author",
     "create-an-account": "Create chat account",
     "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others. Need help? We're here for you. Happy chatting!",
-    "create-pin-description": "Please, set PIN for getting access to your chats from any device"
+    "create-pin-description": "Please, set PIN for getting access to your chats from any device",
+    "welcome": {
+      "title": "Welcome to chats",
+      "description": "Create an account or import chats with private key to start using chats",
+      "already-joined-title": "We found We've joined to chats already",
+      "already-joined-hint": "Please, verify your account and get access by entering PIN",
+      "pin-failed": "Invalid PIN. Failed to verify."
+    },
+    "import": {
+      "title": "Importing account",
+      "description": "Please, enter public and private key pair to import your existing account",
+      "button": "Import",
+      "iv": "Initial vector value"
+    }
   },
   "add-image": {
     "title": "Add Image",
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index 2080ee49704..d1dab46e4bf 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -1,6 +1,6 @@
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
 import { match } from "react-router";
-import React, { Fragment, useContext, useEffect, useMemo, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
@@ -38,12 +38,10 @@ import "./community.scss";
 import LoginRequired from "../components/login-required";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
-import { ChatContext } from "../features/chats/chat-context-provider";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { useChannelsQuery } from "../features/chats/queries";
 import { useLeftCommunityChannelsQuery } from "../features/chats/queries/left-community-channels-query";
-import { useAddCommunityChannel, useJoinChat } from "../features/chats/mutations";
 
 interface MatchParams {
   filter: string;
@@ -83,10 +81,6 @@ export const CommunityPage = (props: Props) => {
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
-  const { hasUserJoinedChat } = useContext(ChatContext);
-  const { mutateAsync: joinChat } = useJoinChat();
-  const { mutateAsync: addCommunityChannel } = useAddCommunityChannel(community?.name);
-
   const isCommunityAlreadyJoined = useMemo(
     () =>
       getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
@@ -218,14 +212,6 @@ export const CommunityPage = (props: Props) => {
     return { title, description, url, rss, image, canonical };
   };
 
-  const joinCommunityChat = async () => {
-    if (!hasUserJoinedChat) {
-      setInProgress(true);
-      await joinChat();
-    }
-    await addCommunityChannel();
-  };
-
   const joinCommunityModal = () => {
     if (isCommunityAlreadyJoined) {
       return (
@@ -259,7 +245,7 @@ export const CommunityPage = (props: Props) => {
             <Button outline={true} className="mr-4" onClick={() => setIsJoinCommunity(false)}>
               {_t("g.close")}
             </Button>
-            <Button outline={true} className="confirm-btn" onClick={() => joinCommunityChat()}>
+            <Button outline={true} className="confirm-btn" to={`/chats/${community?.name}`}>
               {_t("g.join")}
             </Button>
           </p>

From 4eaa06f0e163e124431b43afa71562fb082d328b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 14:22:09 +0600
Subject: [PATCH 138/179] Chats: added logging out from account in chats

---
 .../chats/components/chats-dropdown-menu.tsx    |  6 +++++-
 src/common/features/chats/mutations/index.ts    |  1 +
 .../chats/mutations/logout-from-chats.tsx       | 17 +++++++++++++++++
 src/common/features/chats/queries/keys-query.ts | 17 ++++++++---------
 src/common/i18n/locales/en-US.json              |  3 ++-
 5 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 src/common/features/chats/mutations/logout-from-chats.tsx

diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
index 70581840848..4b78d7d553b 100644
--- a/src/common/features/chats/components/chats-dropdown-menu.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { History } from "history";
-import { chatKeySvg, kebabMenuSvg } from "../../../img/svg";
+import { chatKeySvg, kebabMenuSvg, keySvg } from "../../../img/svg";
 import { _t } from "../../../i18n";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { Button } from "@ui/button";
+import { useLogoutFromChats } from "../mutations";
 
 interface Props {
   history: History | null;
@@ -11,6 +12,8 @@ interface Props {
 }
 
 const ChatsDropdownMenu = (props: Props) => {
+  const { mutateAsync: logout } = useLogoutFromChats();
+
   return (
     <Dropdown>
       <DropdownToggle>
@@ -23,6 +26,7 @@ const ChatsDropdownMenu = (props: Props) => {
             icon={chatKeySvg}
             onClick={() => props.onManageChatKey?.()}
           />
+          <DropdownItemWithIcon icon={keySvg} label={_t("chat.logout")} onClick={() => logout()} />
         </DropdownMenu>
       </DropdownToggle>
     </Dropdown>
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index b81f0f7ceac..66a67e794ef 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -11,3 +11,4 @@ export * from "./fetch-previous-messages";
 export * from "./update-channel-blocked-users";
 export * from "./import-chat-by-keys";
 export * from "./hide-message-in-channel";
+export * from "./logout-from-chats";
diff --git a/src/common/features/chats/mutations/logout-from-chats.tsx b/src/common/features/chats/mutations/logout-from-chats.tsx
new file mode 100644
index 00000000000..7ca4e8397fc
--- /dev/null
+++ b/src/common/features/chats/mutations/logout-from-chats.tsx
@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ChatQueries } from "../queries";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { PREFIX } from "../../../util/local-storage";
+
+export function useLogoutFromChats() {
+  const queryClient = useQueryClient();
+  const { activeUser } = useMappedStore();
+
+  return useMutation(["chats/logout-from-chats"], async () => {
+    localStorage.removeItem(PREFIX + "_nostr_pr_" + activeUser?.username);
+    queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], "");
+    queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], "");
+    queryClient.setQueryData([ChatQueries.CHANNELS, activeUser?.username], []);
+    queryClient.setQueryData([ChatQueries.DIRECT_CONTACTS, activeUser?.username], []);
+  });
+}
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 70a76cf4b21..25faa8df11b 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -39,13 +39,12 @@ export function useKeysQuery() {
 
   const hasKeys = useMemo(() => !!publicKey && !!privateKey, [publicKey, privateKey]);
 
-  return {
-    publicKey,
-    privateKey,
-    hasKeys,
-    refetch: () => {
-      refetchPublicKey();
-      refetchPrivateKey();
-    }
-  };
+  return useMemo(
+    () => ({
+      publicKey,
+      privateKey,
+      hasKeys
+    }),
+    [publicKey, privateKey, hasKeys]
+  );
 }
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index e661db431f6..0907b356637 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1892,10 +1892,11 @@
     "create-an-account": "Create chat account",
     "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others. Need help? We're here for you. Happy chatting!",
     "create-pin-description": "Please, set PIN for getting access to your chats from any device",
+    "logout": "Logout",
     "welcome": {
       "title": "Welcome to chats",
       "description": "Create an account or import chats with private key to start using chats",
-      "already-joined-title": "We found We've joined to chats already",
+      "already-joined-title": "We found You've joined to chats already",
       "already-joined-hint": "Please, verify your account and get access by entering PIN",
       "pin-failed": "Invalid PIN. Failed to verify."
     },

From d11c44be1a3b58028a3ba5025aa46642256e24a6 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 15:42:34 +0600
Subject: [PATCH 139/179] Chats: fixed direct contact opening via UR:

---
 .../chats/mutations/add-direct-contact.ts     | 53 +++++++++++++------
 src/common/features/chats/screens/chats.tsx   | 30 ++++++-----
 2 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/common/features/chats/mutations/add-direct-contact.ts b/src/common/features/chats/mutations/add-direct-contact.ts
index a85781c8e8c..bfcaf0d4155 100644
--- a/src/common/features/chats/mutations/add-direct-contact.ts
+++ b/src/common/features/chats/mutations/add-direct-contact.ts
@@ -1,29 +1,48 @@
-import { useMutation } from "@tanstack/react-query";
-import { useDirectContactsQuery } from "../queries";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ChatQueries, useDirectContactsQuery } from "../queries";
 import { DirectContact, useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 export function useAddDirectContact() {
+  const queryClient = useQueryClient();
+
+  const { activeUser } = useMappedStore();
+  const { data: directContacts } = useDirectContactsQuery();
   const { mutateAsync: publishDirectContact } = useNostrPublishMutation(
     ["chats/nostr-publish-direct-contact"],
     Kind.Contacts,
     () => {}
   );
-  const { data: directContacts } = useDirectContactsQuery();
 
-  return useMutation(["chats/add-direct-contact"], async (contact: DirectContact) => {
-    const hasInDirectContactsAlready = directContacts?.some(
-      (c) => c.name === contact.name && c.pubkey === contact.pubkey
-    );
-    if (!hasInDirectContactsAlready) {
-      return publishDirectContact({
-        tags: [
-          ...(directContacts ?? []).map((contact) => [contact.pubkey, contact.name]),
-          [contact.pubkey, contact.name]
-        ],
-        eventMetadata: ""
-      });
+  return useMutation(
+    ["chats/add-direct-contact"],
+    async (contact: DirectContact) => {
+      const hasInDirectContactsAlready = directContacts?.some(
+        (c) => c.name === contact.name && c.pubkey === contact.pubkey
+      );
+      if (!hasInDirectContactsAlready) {
+        await publishDirectContact({
+          tags: [
+            ...(directContacts ?? []).map((contact) => [contact.pubkey, contact.name]),
+            [contact.pubkey, contact.name]
+          ],
+          eventMetadata: ""
+        });
+
+        return contact;
+      }
+      return;
+    },
+    {
+      onSuccess: (contact) => {
+        if (contact) {
+          queryClient.setQueryData(
+            [ChatQueries.DIRECT_CONTACTS, activeUser?.username],
+            [...(directContacts ?? []), contact]
+          );
+        }
+      }
     }
-    return;
-  });
+  );
 }
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 214f6968271..be7345db070 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -17,6 +17,8 @@ import { useKeysQuery } from "../queries/keys-query";
 import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
 import SSRSuspense from "../../../components/ssr-suspense";
+import { useGetAccountFullQuery } from "../../../api/queries";
+import { getUserChatPublicKey } from "../utils";
 
 interface Props extends PageProps {
   match: match<{
@@ -28,12 +30,13 @@ interface Props extends PageProps {
   }>;
 }
 
-export const Chats = (props: Props) => {
+export const Chats = ({ match, history }: Props) => {
   const { activeUser, global } = useMappedStore();
-  const { receiverPubKey, revealPrivateKey } = useContext(ChatContext);
-  const { data: community } = useCommunityCache(props.match.params.username);
+  const { receiverPubKey, revealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
+  const { data: community } = useCommunityCache(match.params.username);
 
   const { publicKey, privateKey } = useKeysQuery();
+  const { data: userAccount } = useGetAccountFullQuery(match.params.username.replace("@", ""));
   const { data: channels } = useChannelsQuery();
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
@@ -42,10 +45,10 @@ export const Chats = (props: Props) => {
     () =>
       [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
         (channel) =>
-          channel.communityName === props.match.params.username &&
+          channel.communityName === match.params.username &&
           !leftCommunityChannelsIds?.includes(channel.name)
       ),
-    [channels, leftCommunityChannelsIds, props.match.params.username, communityChannel]
+    [channels, leftCommunityChannelsIds, match.params.username, communityChannel]
   );
 
   const isReady = useMemo(
@@ -63,21 +66,20 @@ export const Chats = (props: Props) => {
   );
   const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
-  const { match, history } = props;
-
   useEffect(() => {
-    document.body.style.overflow = "hidden";
-
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, []);
+    if (userAccount) {
+      const key = getUserChatPublicKey(userAccount);
+      if (key) {
+        setReceiverPubKey(key);
+      }
+    }
+  }, [userAccount]);
 
   return (
     <SSRSuspense fallback={<></>}>
       <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
         <Feedback activeUser={activeUser} />
-        <NavBar history={props.history} />
+        <NavBar history={history} />
 
         <div className="container mx-auto md:py-6">
           <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">

From adec0e5a950de52cc09acc965223ccda8bc94338 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 19:34:04 +0600
Subject: [PATCH 140/179] Chats: added fallback screen for user not joined
 chats

---
 .../chats/components/chat-message-box.tsx     |  66 ++++-------
 .../chat-message-channel-item-extension.tsx   | 106 +++++++++--------
 .../chats/components/chat-message-item.tsx    |  70 +++++------
 .../chats/components/chats-sidebar/index.tsx  |  30 +----
 src/common/features/chats/screens/chats.tsx   | 111 ++++++++++--------
 src/common/i18n/locales/en-US.json            |   6 +-
 6 files changed, 188 insertions(+), 201 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 1ac81d823d8..07cd81900b8 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -68,48 +68,34 @@ export default function ChatsMessagesBox(props: Props) {
         gridTemplateRows: "min-content 1fr min-content"
       }}
     >
-      {props.match.url === "/chats" ? (
-        <div className="no-chat-select">
-          <div className="start-chat-wrapper text-center ">
-            <p className="start-chat ">Select a chat or start a new conversation</p>
-          </div>
-        </div>
-      ) : (
+      {props.match.params.username.startsWith("@") || (hasCommunityChat && isCommunityJoined) ? (
+        <>
+          <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
+          {inProgress && <LinearProgress />}
+          <ChatsMessagesView
+            username={props.match.params.username}
+            currentChannel={currentChannel!}
+            setInProgress={setInProgress}
+          />
+        </>
+      ) : hasCommunityChat && !isCommunityJoined ? (
         <>
-          {props.match.params.username.startsWith("@") ||
-          (hasCommunityChat && isCommunityJoined) ? (
-            <>
-              <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
-              {inProgress && <LinearProgress />}
-              <ChatsMessagesView
-                username={props.match.params.username}
-                currentChannel={currentChannel!}
-                setInProgress={setInProgress}
-              />
-            </>
-          ) : hasCommunityChat && !isCommunityJoined ? (
-            <>
-              <div />
-              <div className="flex flex-col justify-center items-center mb-4">
-                <ChatsProfileBox communityName={community?.name} />
-                <p className="mb-4 text-gray-600">
-                  {hasLeftCommunity
-                    ? "You have left this community chat. Rejoin the chat now!"
-                    : " You are not part of this community. Join the community chat now!"}
-                </p>
-                <Button
-                  onClick={() => addCommunityChannel()}
-                  disabled={isAddCommunityChannelLoading}
-                >
-                  {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
-                </Button>
-              </div>
-              <div />
-            </>
-          ) : (
-            <p className="no-chat-select">Community chat not started yet</p>
-          )}
+          <div />
+          <div className="flex flex-col justify-center items-center mb-4">
+            <ChatsProfileBox communityName={community?.name} />
+            <p className="mb-4 text-gray-600">
+              {hasLeftCommunity
+                ? "You have left this community chat. Rejoin the chat now!"
+                : " You are not part of this community. Join the community chat now!"}
+            </p>
+            <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
+              {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
+            </Button>
+          </div>
+          <div />
         </>
+      ) : (
+        <p className="flex h-full justify-center items-center">Community chat not started yet</p>
       )}
     </div>
   );
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
index 8e2275519f3..80dcf5e4e42 100644
--- a/src/common/features/chats/components/chat-message-channel-item-extension.tsx
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -51,61 +51,63 @@ export function ChatMessageChannelItemExtension({
     );
 
   return (
-    <Popover id="profile-popover" className="profile-popover">
-      <UserAvatar username={profile?.name ?? ""} />
-      {children}
-      <PopoverContent>
-        <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
-          <div className="profile-box-content">
-            <div className="profile-box-logo flex justify-center">
-              <UserAvatar username={profile?.name ?? ""} size="large" />
-            </div>
+    <>
+      <UserAvatar username={profile?.name ?? ""} size="w-[2rem] h-[2rem]" />
+      <Popover id="profile-popover" className="profile-popover">
+        {children}
+        <PopoverContent>
+          <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
+            <div className="profile-box-content">
+              <div className="profile-box-logo flex justify-center">
+                <UserAvatar username={profile?.name ?? ""} size="large" />
+              </div>
 
-            <p className="flex justify-center profile-name">{`@${profile?.name}`}</p>
-            <div
-              className={`flex mb-3 ${
-                communityAdmins.includes(activeUser?.username!) &&
-                profile?.name !== currentChannel.communityName
-                  ? "justify-between"
-                  : "justify-center"
-              }  profile-box-buttons`}
-            >
-              <FollowControls
-                setActiveUser={setActiveUser}
-                updateActiveUser={updateActiveUser}
-                deleteUser={deleteUser}
-                toggleUIProp={toggleUIProp}
-                activeUser={activeUser}
-                targetUsername={profile?.name ?? ""}
-                where={"chat-box"}
-                ui={ui}
-                users={users}
-              />
+              <p className="flex justify-center profile-name">{`@${profile?.name}`}</p>
+              <div
+                className={`flex mb-3 ${
+                  communityAdmins.includes(activeUser?.username!) &&
+                  profile?.name !== currentChannel.communityName
+                    ? "justify-between"
+                    : "justify-center"
+                }  profile-box-buttons`}
+              >
+                <FollowControls
+                  setActiveUser={setActiveUser}
+                  updateActiveUser={updateActiveUser}
+                  deleteUser={deleteUser}
+                  toggleUIProp={toggleUIProp}
+                  activeUser={activeUser}
+                  targetUsername={profile?.name ?? ""}
+                  where={"chat-box"}
+                  ui={ui}
+                  users={users}
+                />
 
-              {communityAdmins.includes(activeUser?.username!) &&
-                profile?.name !== currentChannel.communityName && (
-                  <>
-                    {currentChannel?.removedUserIds?.includes(profile?.creator ?? "") ? (
-                      <>
-                        <Button onClick={() => unBlock(profile?.creator ?? "")}>
-                          {_t("chat.unblock")}
-                        </Button>
-                      </>
-                    ) : (
-                      <>
-                        <Button onClick={() => block(profile?.creator ?? "")}>
-                          {_t("chat.block")}
-                        </Button>
-                      </>
-                    )}
-                  </>
-                )}
-            </div>
+                {communityAdmins.includes(activeUser?.username!) &&
+                  profile?.name !== currentChannel.communityName && (
+                    <>
+                      {currentChannel?.removedUserIds?.includes(profile?.creator ?? "") ? (
+                        <>
+                          <Button onClick={() => unBlock(profile?.creator ?? "")}>
+                            {_t("chat.unblock")}
+                          </Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button onClick={() => block(profile?.creator ?? "")}>
+                            {_t("chat.block")}
+                          </Button>
+                        </>
+                      )}
+                    </>
+                  )}
+              </div>
 
-            <ChatInput currentChannel={currentChannel} currentUser="" />
+              <ChatInput currentChannel={currentChannel} currentUser="" />
+            </div>
           </div>
-        </div>
-      </PopoverContent>
-    </Popover>
+        </PopoverContent>
+      </Popover>
+    </>
   );
 }
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 1f2701f0062..8b1be70abe9 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -9,6 +9,7 @@ import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
 import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
 import { Channel, Message } from "../nostr";
+import { useKeysQuery } from "../queries/keys-query";
 
 interface Props {
   type: "sender" | "receiver";
@@ -27,6 +28,7 @@ export function ChatMessageItem({
   onContextMenu
 }: Props) {
   const { global } = useMappedStore();
+  const { publicKey } = useKeysQuery();
 
   const isFailed = useMemo(() => message.sent === 2, [message]);
   const isSending = useMemo(() => message.sent === 0, [message]);
@@ -44,9 +46,9 @@ export function ChatMessageItem({
     <div key={message.id} data-message-id={message.id}>
       <div
         className={classNameObject({
-          "flex flex-col px-4 mb-4": true,
-          "items-start": type === "receiver",
-          "items-end": type === "sender",
+          "flex gap-1 mb-4 px-4": true,
+          "justify-start": type === "receiver",
+          "justify-end": type === "sender",
           failed: isFailed,
           sending: isSending
         })}
@@ -58,6 +60,12 @@ export function ChatMessageItem({
           }
         }}
       >
+        {currentChannel && message.creator !== publicKey && (
+          <ChatMessageChannelItemExtension
+            creator={message.creator}
+            currentChannel={currentChannel}
+          />
+        )}
         {message.sent === 2 && (
           <Tooltip content={_t("g.resend")}>
             <span
@@ -71,39 +79,35 @@ export function ChatMessageItem({
             </span>
           </Tooltip>
         )}
-        <div
-          className={classNameObject({
-            "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
-            "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
-            "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver",
-            "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
-            "same-user-message": isSameUser
-          })}
-        >
-          {currentChannel && (
-            <ChatMessageChannelItemExtension
-              creator={message.creator}
-              currentChannel={currentChannel}
+        <div>
+          <div
+            className={classNameObject({
+              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
+              "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
+              "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver",
+              "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
+              "same-user-message": isSameUser
+            })}
+          >
+            <div
+              className="sender-message-content"
+              dangerouslySetInnerHTML={{ __html: renderedPreview }}
             />
+          </div>
+          <div className="text-gray-600 dark:text-gray-400 text-xs px-2 pt-1">
+            {formatMessageTime(message.created)}
+          </div>
+          {message.sent === 0 && (
+            <span style={{ margin: "10px 0 0 5px" }}>
+              <Spinner />
+            </span>
+          )}
+          {message.sent === 2 && (
+            <Tooltip content={"Failed"}>
+              <span className="failed-svg">{failedMessageSvg}</span>
+            </Tooltip>
           )}
-          <div
-            className="sender-message-content"
-            dangerouslySetInnerHTML={{ __html: renderedPreview }}
-          />
-        </div>
-        <div className="text-gray-600 dark:text-gray-400 text-xs px-2 pt-1">
-          {formatMessageTime(message.created)}
         </div>
-        {message.sent === 0 && (
-          <span style={{ margin: "10px 0 0 5px" }}>
-            <Spinner />
-          </span>
-        )}
-        {message.sent === 2 && (
-          <Tooltip content={"Failed"}>
-            <span className="failed-svg">{failedMessageSvg}</span>
-          </Tooltip>
-        )}
       </div>
     </div>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 5936e2bcb5c..c4ed92e1519 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { History } from "history";
-import { formattedUserName, getJoinedCommunities, getUserChatPublicKey } from "../../utils";
+import { getJoinedCommunities } from "../../utils";
 import ChatsScroller from "../chats-scroller";
 import { AccountWithReputation } from "../../types";
 import { ChatContext } from "../../chat-context-provider";
@@ -12,7 +12,6 @@ import { _t } from "../../../../i18n";
 import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { ChatSidebarChannel } from "./chat-sidebar-channel";
-import { useGetAccountFullQuery } from "../../../../api/queries";
 
 interface Props {
   username: string;
@@ -23,7 +22,6 @@ export default function ChatsSideBar(props: Props) {
   const { username } = props;
   const { setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
 
-  const { data: fullAccount } = useGetAccountFullQuery(username);
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
@@ -40,14 +38,6 @@ export default function ChatsSideBar(props: Props) {
     [channels, leftChannelsIds]
   );
 
-  useEffect(() => {
-    if (username) {
-      if (username.startsWith("@")) {
-        getReceiverPubKey(formattedUserName(username));
-      }
-    }
-  }, [username]);
-
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
     var element = event.currentTarget;
     if (element.scrollTop > 2) {
@@ -62,20 +52,6 @@ export default function ChatsSideBar(props: Props) {
     setIsScrollToTop(isScrollToTop);
   };
 
-  const getReceiverPubKey = async (username: string) => {
-    const peer = directContacts?.find((x) => x.name === username)?.pubkey ?? "";
-    if (peer) {
-      setReceiverPubKey(peer);
-    } else if (fullAccount) {
-      const pubkey = getUserChatPublicKey(fullAccount);
-      if (pubkey) {
-        setReceiverPubKey(pubkey);
-      } else {
-        setReceiverPubKey("");
-      }
-    }
-  };
-
   return (
     <div className="flex flex-col">
       <ChatSidebarHeader history={props.history} />
@@ -93,7 +69,7 @@ export default function ChatsSideBar(props: Props) {
               onClick={() => {
                 setSearchQuery("");
                 setRevealPrivateKey(false);
-                getReceiverPubKey(user.account);
+                props.history.push(`/chats/@${user.account}`);
               }}
               key={user.account}
             />
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index be7345db070..2cdcc659f35 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -16,9 +16,11 @@ import { useLeftCommunityChannelsQuery } from "../queries/left-community-channel
 import { useKeysQuery } from "../queries/keys-query";
 import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
-import SSRSuspense from "../../../components/ssr-suspense";
 import { useGetAccountFullQuery } from "../../../api/queries";
 import { getUserChatPublicKey } from "../utils";
+import useMountedState from "react-use/lib/useMountedState";
+import ChatsProfileBox from "../components/chat-profile-box";
+import { _t } from "../../../i18n";
 
 interface Props extends PageProps {
   match: match<{
@@ -36,7 +38,7 @@ export const Chats = ({ match, history }: Props) => {
   const { data: community } = useCommunityCache(match.params.username);
 
   const { publicKey, privateKey } = useKeysQuery();
-  const { data: userAccount } = useGetAccountFullQuery(match.params.username.replace("@", ""));
+  const { data: userAccount } = useGetAccountFullQuery(match.params.username?.replace("@", ""));
   const { data: channels } = useChannelsQuery();
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
@@ -61,69 +63,82 @@ export const Chats = ({ match, history }: Props) => {
     [isReady, receiverPubKey, revealPrivateKey, isChannel]
   );
   const isShowDefaultScreen = useMemo(
-    () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey,
+    () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey && !match.params.username,
     [isReady, receiverPubKey, revealPrivateKey, isChannel]
   );
   const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
+  const isMounted = useMountedState();
+
   useEffect(() => {
     if (userAccount) {
       const key = getUserChatPublicKey(userAccount);
-      if (key) {
-        setReceiverPubKey(key);
-      }
+      setReceiverPubKey(key ?? "");
     }
   }, [userAccount]);
 
-  return (
-    <SSRSuspense fallback={<></>}>
-      <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
-        <Feedback activeUser={activeUser} />
-        <NavBar history={history} />
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
 
-        <div className="container mx-auto md:py-6">
-          <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
-            <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
-              {isReady ? (
-                <ChatsSideBar history={history} username={match.params.username} />
-              ) : (
-                <></>
-              )}
-            </div>
-            <div
-              className={classNameObject({
-                "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
-                  true,
-                "left-0": isShowChatRoom || isShowManageKey,
-                "left-[100%]": !isShowChatRoom && !isShowManageKey
-              })}
-            >
-              {isShowManageKey && (
-                <div className="flex h-full items-start justify-center my-6">
-                  <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full p-4 rounded-2xl border border-[--border-color] p-4">
-                    <ManageChatKey />
-                  </div>
+  return isMounted() ? (
+    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
+      <Feedback activeUser={activeUser} />
+      <NavBar history={history} />
+
+      <div className="container mx-auto md:py-6">
+        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
+          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
+            {isReady ? <ChatsSideBar history={history} username={match.params.username} /> : <></>}
+          </div>
+          <div
+            className={classNameObject({
+              "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+                true,
+              "left-0": isShowChatRoom || isShowManageKey,
+              "left-[100%]": !isShowChatRoom && !isShowManageKey
+            })}
+          >
+            {isShowManageKey && (
+              <div className="flex h-full items-start justify-center my-6">
+                <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
+                  <ManageChatKey />
                 </div>
-              )}
-              {isShowImportChats && activeUser && (
-                <div className="h-full w-full flex items-center justify-center">
-                  <ChatsWelcome />
+              </div>
+            )}
+            {isShowImportChats && activeUser && (
+              <div className="h-full w-full flex items-center justify-center">
+                <ChatsWelcome />
+              </div>
+            )}
+            {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
+            {!isShowChatRoom && isReady && match.params.username && (
+              <div className="flex flex-col justify-center h-full items-center">
+                <div className="font-bold">{_t("chat.welcome.oops")}</div>
+                <div className="text-gray-600 dark:text-gray-400 mb-4">
+                  {_t("chat.welcome.user-not-joined-yet")}
                 </div>
-              )}
-              {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
-              {isShowDefaultScreen && (
-                <div className="flex flex-col justify-center items-center w-full h-full">
-                  <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
-                    Hello, @{activeUser?.username}
-                  </div>
-                  <div>Search a person or community and start messaging</div>
+                <ChatsProfileBox currentUser={match.params.username} />
+              </div>
+            )}
+            {isShowDefaultScreen && (
+              <div className="flex flex-col justify-center items-center w-full h-full">
+                <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
+                  {_t("chat.welcome.hello")}, @{activeUser?.username}
                 </div>
-              )}
-            </div>
+                <div>{_t("chat.welcome.start-description")}</div>
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </SSRSuspense>
+    </div>
+  ) : (
+    <></>
   );
 };
 export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 0907b356637..cc8f8d0be02 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1898,7 +1898,11 @@
       "description": "Create an account or import chats with private key to start using chats",
       "already-joined-title": "We found You've joined to chats already",
       "already-joined-hint": "Please, verify your account and get access by entering PIN",
-      "pin-failed": "Invalid PIN. Failed to verify."
+      "pin-failed": "Invalid PIN. Failed to verify.",
+      "oops": "Oops!",
+      "user-not-joined-yet": "You can't send a message. This user or channel isn't joined to chats yet.",
+      "hello": "Hello",
+      "start-description": "Search a person or community and start messaging"
     },
     "import": {
       "title": "Importing account",

From 36872656cf1d564956228a2b2ea06773e4c9ad49 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 22:36:55 +0600
Subject: [PATCH 141/179] Chats: fixed opening community channel from search
 list

---
 .../chats/components/chat-message-box.tsx     | 31 +++++++------------
 .../chat-sidebar-search-item.tsx              |  3 +-
 .../chats/components/chats-sidebar/index.tsx  |  1 -
 src/common/features/chats/screens/chats.tsx   | 12 +++----
 src/common/i18n/locales/en-US.json            |  4 ++-
 5 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 07cd81900b8..4f930eb55bc 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -12,6 +12,8 @@ import { useCommunityCache } from "../../../core";
 import { useAddCommunityChannel } from "../mutations";
 import ChatsProfileBox from "./chat-profile-box";
 import { useAutoScrollInChatBox } from "../hooks";
+import { Channel } from "../nostr";
+import { _t } from "../../../i18n";
 
 interface MatchParams {
   filter: string;
@@ -24,6 +26,7 @@ interface MatchParams {
 interface Props {
   match: match<MatchParams>;
   history: History;
+  channel: Channel;
 }
 
 export default function ChatsMessagesBox(props: Props) {
@@ -41,24 +44,16 @@ export default function ChatsMessagesBox(props: Props) {
 
   const [inProgress, setInProgress] = useState(false);
 
-  const currentChannel = useMemo(
-    () =>
-      [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])]?.find(
-        (c) => c.communityName === community?.name
-      ),
-    [channels, community]
-  );
-  const hasCommunityChat = useMemo(() => !!currentChannel, [currentChannel]);
   const hasLeftCommunity = useMemo(
-    () => leftCommunityChannelsIds?.includes(currentChannel?.id ?? ""),
-    [currentChannel]
+    () => leftCommunityChannelsIds?.includes(props.channel?.id ?? ""),
+    [props.channel]
   );
   const isCommunityJoined = useMemo(
     () =>
       getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
-        (channel) => channel.id === currentChannel?.id
+        (channel) => channel.id === props.channel?.id
       ),
-    [channels, currentChannel, leftChannelsIds]
+    [channels, props.channel, leftChannelsIds]
   );
 
   return (
@@ -68,25 +63,25 @@ export default function ChatsMessagesBox(props: Props) {
         gridTemplateRows: "min-content 1fr min-content"
       }}
     >
-      {props.match.params.username.startsWith("@") || (hasCommunityChat && isCommunityJoined) ? (
+      {props.match.params.username.startsWith("@") || isCommunityJoined ? (
         <>
           <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
           {inProgress && <LinearProgress />}
           <ChatsMessagesView
             username={props.match.params.username}
-            currentChannel={currentChannel!}
+            currentChannel={props.channel}
             setInProgress={setInProgress}
           />
         </>
-      ) : hasCommunityChat && !isCommunityJoined ? (
+      ) : (
         <>
           <div />
           <div className="flex flex-col justify-center items-center mb-4">
             <ChatsProfileBox communityName={community?.name} />
             <p className="mb-4 text-gray-600">
               {hasLeftCommunity
-                ? "You have left this community chat. Rejoin the chat now!"
-                : " You are not part of this community. Join the community chat now!"}
+                ? _t("chat.welcome.rejoin-description")
+                : _t("chat.welcome.join-description")}
             </p>
             <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
               {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
@@ -94,8 +89,6 @@ export default function ChatsMessagesBox(props: Props) {
           </div>
           <div />
         </>
-      ) : (
-        <p className="flex h-full justify-center items-center">Community chat not started yet</p>
       )}
     </div>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
index 70a9181f14e..7ec5a5aa1a1 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import React from "react";
 import { AccountWithReputation } from "../../types";
 import UserAvatar from "../../../../components/user-avatar";
+import isCommunity from "../../../../helper/is-community";
 
 interface Props {
   user: AccountWithReputation;
@@ -12,7 +13,7 @@ interface Props {
 export function ChatSidebarSearchItem({ user, onClick }: Props) {
   return (
     <Link
-      to={`/chats/@${user.account}`}
+      to={`/chats/${isCommunity(user.account) ? user.account : "@" + user.account}`}
       className="flex items-center gap-3 p-3 border-b border[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800"
       onClick={onClick}
     >
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index c4ed92e1519..009c7349d98 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -69,7 +69,6 @@ export default function ChatsSideBar(props: Props) {
               onClick={() => {
                 setSearchQuery("");
                 setRevealPrivateKey(false);
-                props.history.push(`/chats/@${user.account}`);
               }}
               key={user.account}
             />
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 2cdcc659f35..583d70ab883 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -12,7 +12,6 @@ import ChatsMessagesBox from "../components/chat-message-box";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
 import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
-import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useKeysQuery } from "../queries/keys-query";
 import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
@@ -40,17 +39,14 @@ export const Chats = ({ match, history }: Props) => {
   const { publicKey, privateKey } = useKeysQuery();
   const { data: userAccount } = useGetAccountFullQuery(match.params.username?.replace("@", ""));
   const { data: channels } = useChannelsQuery();
-  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
   const isChannel = useMemo(
     () =>
       [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
-        (channel) =>
-          channel.communityName === match.params.username &&
-          !leftCommunityChannelsIds?.includes(channel.name)
+        (channel) => channel.communityName === match.params.username
       ),
-    [channels, leftCommunityChannelsIds, match.params.username, communityChannel]
+    [channels, match.params.username, communityChannel]
   );
 
   const isReady = useMemo(
@@ -115,7 +111,9 @@ export const Chats = ({ match, history }: Props) => {
                 <ChatsWelcome />
               </div>
             )}
-            {isShowChatRoom && <ChatsMessagesBox match={match} history={history} />}
+            {isShowChatRoom && (
+              <ChatsMessagesBox match={match} history={history} channel={communityChannel!!} />
+            )}
             {!isShowChatRoom && isReady && match.params.username && (
               <div className="flex flex-col justify-center h-full items-center">
                 <div className="font-bold">{_t("chat.welcome.oops")}</div>
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index cc8f8d0be02..9dd6149df8b 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1902,7 +1902,9 @@
       "oops": "Oops!",
       "user-not-joined-yet": "You can't send a message. This user or channel isn't joined to chats yet.",
       "hello": "Hello",
-      "start-description": "Search a person or community and start messaging"
+      "start-description": "Search a person or community and start messaging",
+      "join-description": "You are not part of this community. Join the community chat now!",
+      "rejoin-description": "You have left this community chat. Rejoin the chat now!"
     },
     "import": {
       "title": "Importing account",

From da7576b0d9ef27928d0d72108540ccfdd6082c91 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 16 Nov 2023 22:47:06 +0600
Subject: [PATCH 142/179] Chats: added loader while message sending

---
 .../chats/components/chat-message-item.tsx    | 20 +++++++++++--------
 .../features/chats/mutations/send-message.ts  |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 8b1be70abe9..82344c15cb4 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -79,7 +79,13 @@ export function ChatMessageItem({
             </span>
           </Tooltip>
         )}
-        <div>
+        <div
+          className={classNameObject({
+            "flex gap-1 flex-col": true,
+            "items-start": type === "receiver",
+            "items-end": type === "sender"
+          })}
+        >
           <div
             className={classNameObject({
               "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
@@ -94,14 +100,12 @@ export function ChatMessageItem({
               dangerouslySetInnerHTML={{ __html: renderedPreview }}
             />
           </div>
-          <div className="text-gray-600 dark:text-gray-400 text-xs px-2 pt-1">
-            {formatMessageTime(message.created)}
-          </div>
-          {message.sent === 0 && (
-            <span style={{ margin: "10px 0 0 5px" }}>
-              <Spinner />
-            </span>
+          {message.sent == 1 && (
+            <div className="text-gray-600 dark:text-gray-400 text-xs px-2">
+              {formatMessageTime(message.created)}
+            </div>
           )}
+          {message.sent === 0 && <Spinner className="w-3 h-3 mx-2" />}
           {message.sent === 2 && (
             <Tooltip content={"Failed"}>
               <span className="failed-svg">{failedMessageSvg}</span>
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 3d71b08104d..020df6338c7 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -57,6 +57,7 @@ export function useSendMessage(
     },
     {
       onSuccess: (message) => {
+        message.sent = 0;
         queryClient.setQueryData(
           [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
           [...messages, message]

From f16502383edc0158a3ca24787c0256c109bcc852 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 18:01:16 +0600
Subject: [PATCH 143/179] Chats: fixed community chat creation button and
 styling issues

---
 .../components/community-card/_index.scss     |  9 +-
 .../components/community-card/index.tsx       | 12 ++-
 .../components/community-cover/index.tsx      |  3 -
 .../features/chats/chat-context-provider.tsx  |  4 +-
 .../chat-popup/chat-popup-header.tsx          | 66 ++++++++++----
 .../chat-sidebar-search-item.tsx              |  2 +-
 .../components/join-community-chat-btn.tsx    | 40 ++++-----
 .../chats/mutations/create-community-chat.ts  | 86 +++++++++++--------
 8 files changed, 133 insertions(+), 89 deletions(-)

diff --git a/src/common/components/community-card/_index.scss b/src/common/components/community-card/_index.scss
index 72d538a7b77..46d0a0c5c8e 100644
--- a/src/common/components/community-card/_index.scss
+++ b/src/common/components/community-card/_index.scss
@@ -147,6 +147,7 @@
         font-size: 90%;
         @apply text-gray-steel;
         max-width: 95%;
+
         p {
           word-break: break-all;
         }
@@ -156,7 +157,10 @@
 
   .community-controls {
     display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     justify-content: center;
+    padding-bottom: 1rem;
 
     @media (min-width: $md-break) {
       justify-content: flex-start;
@@ -182,6 +186,7 @@
   .community-rewards {
     display: flex;
     justify-content: center;
+    padding-bottom: 1rem;
 
     @media (min-width: $md-break) {
       justify-content: flex-start;
@@ -199,6 +204,7 @@
     display: flex;
     flex-wrap: wrap;
     max-width: 95%;
+
     .username {
       margin-right: 6px;
     }
@@ -216,11 +222,12 @@
       word-break: break-all;
     }
   }
+
   .description-wrapper {
     height: auto;
     max-height: 350px;
     overflow-y: auto;
     border-radius: 10px;
-    padding: 0.5rem ;
+    padding: 0.5rem;
   }
 }
diff --git a/src/common/components/community-card/index.tsx b/src/common/components/community-card/index.tsx
index f8fd9ecb08a..abb02bc3ea7 100644
--- a/src/common/components/community-card/index.tsx
+++ b/src/common/components/community-card/index.tsx
@@ -29,6 +29,7 @@ import { renderPostBody } from "@ecency/render-helper";
 import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { Button } from "@ui/button";
+import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
 
 interface EditPicProps {
   activeUser: ActiveUser;
@@ -317,17 +318,20 @@ export class CommunityCard extends Component<Props, State> {
         )}
         {global.usePrivate && roleInTeam === ROLES.OWNER.toString() && (
           <p className="community-rewards">
-            <a
-              href="#"
-              onClick={(e) => {
+            <Button
+              size="sm"
+              outline={true}
+              type="button"
+              onClick={(e: { preventDefault: () => void }) => {
                 e.preventDefault();
                 this.toggleRewards();
               }}
             >
               {_t("community-card.community-rewards")}
-            </a>
+            </Button>
           </p>
         )}
+        <JoinCommunityChatBtn community={this.props.community} history={this.props.history} />
         {info && (
           <Modal
             show={true}
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index 5f1fbda55f9..7c82d857a88 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -13,7 +13,6 @@ import { setProxyBase } from "@ecency/render-helper";
 import BaseComponent from "../base";
 import SubscriptionBtn from "../subscription-btn";
 import CommunityPostBtn from "../community-post-btn";
-import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
 import Tooltip from "../tooltip";
 import ImageUploadDialog from "../image-upload";
 
@@ -198,8 +197,6 @@ export class CommunityCover extends Component<Props> {
         <div className="controls-holder flex gap-3 px-3">
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
-
-          <JoinCommunityChatBtn community={this.props.community} history={this.props.history} />
         </div>
         {canUpdateCoverImage && (
           <EditCoverImage
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 90508d70bde..2977031fc81 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useKeysQuery } from "./queries/keys-query";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 import { useActiveUserSwitching } from "./hooks";
@@ -38,7 +38,7 @@ export const ChatContextProvider = (props: Props) => {
         value={{
           revealPrivateKey,
           receiverPubKey,
-          hasUserJoinedChat: hasKeys,
+          hasUserJoinedChat: useMemo(() => hasKeys, [hasKeys]),
           setRevealPrivateKey,
           setReceiverPubKey
         }}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index b3c18fd0463..1ce3205b9d9 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -6,7 +6,7 @@ import ChatsCommunityDropdownMenu from "../chats-community-actions";
 import { history } from "../../../../store";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { classNameObject } from "../../../../helper/class-name-object";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { ChatContext } from "../../chat-context-provider";
 import { useKeysQuery } from "../../queries/keys-query";
@@ -41,9 +41,31 @@ export function ChatPopupHeader({
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
   const { privateKey } = useKeysQuery();
+  const title = useMemo(() => {
+    if (revealPrivateKey) {
+      return _t("chat.manage-chat-key");
+    }
+
+    if (currentUser) {
+      return currentUser;
+    }
+
+    if (isCommunity) {
+      return communityName;
+    }
+
+    if (showSearchUser) {
+      return _t("chat.new-message");
+    }
+
+    return _t("chat.messages");
+  }, [currentUser, isCommunity, communityName, showSearchUser, revealPrivateKey]);
 
   return (
-    <div className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2">
+    <div
+      className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2 cursor-pointer"
+      onClick={() => setExpanded(!expanded)}
+    >
       <div className="flex items-center gap-2">
         {(currentUser || communityName || showSearchUser || revealPrivateKey) && expanded && (
           <Tooltip content={_t("chat.back")}>
@@ -51,7 +73,10 @@ export function ChatPopupHeader({
               size="sm"
               noPadding={true}
               appearance="link"
-              onClick={handleBackArrowSvg}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleBackArrowSvg();
+              }}
               icon={arrowBackSvg}
             />
           </Tooltip>
@@ -61,17 +86,7 @@ export function ChatPopupHeader({
             <UserAvatar username={isCurrentUser ? currentUser : communityName || ""} size="small" />
           )}
 
-          <div className="text-lg truncate max-w-[180px] font-semibold">
-            {currentUser
-              ? currentUser
-              : isCommunity
-              ? communityName
-              : showSearchUser
-              ? _t("chat.new-message")
-              : revealPrivateKey
-              ? _t("chat.manage-chat-key")
-              : _t("chat.messages")}
-          </div>
+          <div className="text-lg truncate max-w-[180px] font-semibold">{title}</div>
         </div>
       </div>
       <div className="flex items-center gap-4">
@@ -81,7 +96,10 @@ export function ChatPopupHeader({
             size="sm"
             appearance="gray-link"
             icon={extendedView}
-            onClick={handleExtendedView}
+            onClick={(e: { stopPropagation: () => void }) => {
+              e.stopPropagation();
+              handleExtendedView();
+            }}
           />
         </Tooltip>
         {canSendMessage && (
@@ -91,13 +109,22 @@ export function ChatPopupHeader({
               size="sm"
               appearance="gray-link"
               icon={addMessageSvg}
-              onClick={handleMessageSvgClick}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleMessageSvgClick();
+              }}
             />
           </Tooltip>
         )}
         {isCommunity && <ChatsCommunityDropdownMenu history={history!} username={communityName} />}
         {!isCommunity && !isCurrentUser && privateKey && (
-          <div className="flex items-center" onClick={() => setExpanded(true)}>
+          <div
+            className="flex items-center"
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(true);
+            }}
+          >
             <ChatsDropdownMenu
               history={history!}
               onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
@@ -113,7 +140,10 @@ export function ChatPopupHeader({
               "duration-300": true,
               "rotate-180": !expanded
             })}
-            onClick={() => setExpanded(!expanded)}
+            onClick={(e: { stopPropagation: () => void }) => {
+              e.stopPropagation();
+              setExpanded(!expanded);
+            }}
             icon={expandArrow}
           />
         </Tooltip>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
index 7ec5a5aa1a1..295ab33f03e 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -14,7 +14,7 @@ export function ChatSidebarSearchItem({ user, onClick }: Props) {
   return (
     <Link
       to={`/chats/${isCommunity(user.account) ? user.account : "@" + user.account}`}
-      className="flex items-center gap-3 p-3 border-b border[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800"
+      className="flex items-center gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800"
       onClick={onClick}
     >
       <UserAvatar username={user.account} size="medium" />
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 5d828e53de6..3af275d5ce0 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -9,7 +9,6 @@ import { Button } from "@ui/button";
 import {
   useAddCommunityChannel,
   useCreateCommunityChat,
-  useJoinChat,
   useLeaveCommunityChannel
 } from "../mutations";
 import {
@@ -37,7 +36,6 @@ export default function JoinCommunityChatBtn(props: Props) {
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
     useAddCommunityChannel(currentChannel?.id);
-  const { mutateAsync: joinChat, isLoading: isJoinChatLoading } = useJoinChat();
   const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
     useCreateCommunityChat(props.community);
   const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
@@ -61,38 +59,34 @@ export default function JoinCommunityChatBtn(props: Props) {
     await addCommunityChannel();
   };
 
-  return (
+  return hasUserJoinedChat ? (
     <>
       {props.community.name === activeUser?.username ? (
         isCommunityChatJoined ? (
-          <Button appearance="secondary">{_t("chat.chat-joined")}</Button>
+          <Button size="sm" appearance="secondary">
+            {_t("chat.chat-joined")}
+          </Button>
         ) : !isChatEnabled ? (
           <Button
+            size="sm"
             onClick={async () => {
-              if (!hasUserJoinedChat) {
-                return;
-              }
-
               if (communityTeam.some((role) => role.pubkey === publicKey)) {
                 await createCommunityChat();
                 await join();
               }
             }}
-            disabled={isCreateCommunityChatLoading || isJoinChatLoading}
-            icon={isCreateCommunityChatLoading || isJoinChatLoading ? <Spinner /> : <></>}
+            disabled={isCreateCommunityChatLoading}
+            icon={isCreateCommunityChatLoading && <Spinner />}
             iconPlacement="left"
           >
             {_t("chat.start-community-chat")}
           </Button>
-        ) : !isCommunityChatJoined && isChatEnabled && hasUserJoinedChat ? (
+        ) : !isCommunityChatJoined && isChatEnabled ? (
           <Button
-            disabled={isJoinChatLoading || isAddCommunityChannelLoading}
+            size="sm"
+            disabled={isAddCommunityChannelLoading}
             to={`/chats/${props.community.name}`}
-            icon={
-              (isJoinChatLoading || isAddCommunityChannelLoading) && (
-                <Spinner className="w-3.5 h-3.5" />
-              )
-            }
+            icon={isAddCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
             iconPlacement="left"
           >
             {_t("chat.join-community-chat")}
@@ -102,19 +96,17 @@ export default function JoinCommunityChatBtn(props: Props) {
         )
       ) : isChatEnabled && !isCommunityChatJoined ? (
         <Button
-          disabled={isJoinChatLoading || isAddCommunityChannelLoading}
+          size="sm"
+          disabled={isAddCommunityChannelLoading}
           to={`/chats/${props.community.name}`}
-          icon={
-            (isJoinChatLoading || isAddCommunityChannelLoading) && (
-              <Spinner className="w-3.5 h-3.5" />
-            )
-          }
+          icon={isAddCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
           iconPlacement="left"
         >
           {_t("community.join-community-chat")}
         </Button>
       ) : isCommunityChatJoined ? (
         <Button
+          size="sm"
           appearance="secondary"
           disabled={isLeavingCommunityChannelLoading}
           icon={isLeavingCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
@@ -126,5 +118,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         <></>
       )}
     </>
+  ) : (
+    <></>
   );
 }
diff --git a/src/common/features/chats/mutations/create-community-chat.ts b/src/common/features/chats/mutations/create-community-chat.ts
index b144fb0217a..1d3a9c274dd 100644
--- a/src/common/features/chats/mutations/create-community-chat.ts
+++ b/src/common/features/chats/mutations/create-community-chat.ts
@@ -1,16 +1,20 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 import { Community } from "../../../store/communities";
-import { useNostrJoinedCommunityTeamQuery } from "../queries";
+import { ChatQueries, useNostrJoinedCommunityTeamQuery } from "../queries";
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
+import { useMappedStore } from "../../../store/use-mapped-store";
 
 /**
  * A custom React Query hook for creating a chat channel within a community.
  * This hook allows you to create a chat channel associated with a specific community.
  */
 export function useCreateCommunityChat(community: Community) {
+  const queryClient = useQueryClient();
+  const { activeUser } = useMappedStore();
+
   const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(community);
   const { mutateAsync: createChannel } = useNostrPublishMutation(
     ["chats/nostr-create-channel"],
@@ -19,43 +23,51 @@ export function useCreateCommunityChat(community: Community) {
     {}
   );
 
-  return useMutation(["chats/create-community-chat"], async () => {
-    // Step 1: Create a chat channel using the `createChannel` mutation.
-    const data = await createChannel({
-      eventMetadata: {
-        name: community.title,
-        about: community.description,
-        communityName: community.name,
-        picture: "",
-        communityModerators: communityTeam,
-        hiddenMessageIds: [],
-        removedUserIds: []
-      },
-      tags: []
-    });
+  return useMutation(
+    ["chats/create-community-chat"],
+    async () => {
+      // Step 1: Create a chat channel using the `createChannel` mutation.
+      const data = await createChannel({
+        eventMetadata: {
+          name: community.title,
+          about: community.description,
+          communityName: community.name,
+          picture: "",
+          communityModerators: communityTeam,
+          hiddenMessageIds: [],
+          removedUserIds: []
+        },
+        tags: []
+      });
 
-    // Step 2: Extract and format channel metadata from the response.
-    const content = JSON.parse(data?.content!);
-    const channelMetaData = {
-      id: data?.id as string,
-      creator: data?.pubkey as string,
-      created: data?.created_at!,
-      communityName: content.communityName,
-      name: content.name,
-      about: content.about,
-      picture: content.picture
-    };
+      // Step 2: Extract and format channel metadata from the response.
+      const content = JSON.parse(data?.content!);
+      const channelMetaData = {
+        id: data?.id as string,
+        creator: data?.pubkey as string,
+        created: data?.created_at!,
+        communityName: content.communityName,
+        name: content.name,
+        about: content.about,
+        picture: content.picture
+      };
 
-    // Step 3: Retrieve the user's profile information.
-    const response = await getAccountFull(community.name!);
-    const { posting_json_metadata } = response;
+      // Step 3: Retrieve the user's profile information.
+      const response = await getAccountFull(community.name!);
+      const { posting_json_metadata } = response;
 
-    // Step 4: Update the user's profile with the new channel information.
-    const profile = JSON.parse(posting_json_metadata!).profile;
-    const newProfile = {
-      channel: channelMetaData
-    };
+      // Step 4: Update the user's profile with the new channel information.
+      const profile = JSON.parse(posting_json_metadata!).profile;
+      const newProfile = {
+        channel: channelMetaData
+      };
 
-    return await updateProfile(response, { ...profile, ...newProfile });
-  });
+      return await updateProfile(response, { ...profile, ...newProfile });
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([ChatQueries.CHANNELS, activeUser?.username]);
+      }
+    }
+  );
 }

From 9be60904b69556ba62e18122d27baf34bf450e4e Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 21:02:25 +0600
Subject: [PATCH 144/179] Chats: fixed opening user from search in widget

---
 .../chats/components/chat-popup/index.tsx     | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index f2c21900410..7a4c8ca3685 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -21,15 +21,24 @@ import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../.
 import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
 import { useKeysQuery } from "../../queries/keys-query";
 import { ChatsWelcome } from "../chats-welcome";
+import { useGetAccountFullQuery } from "../../../../api/queries";
+import { getUserChatPublicKey } from "../../utils";
 
 export const ChatPopUp = () => {
   const { activeUser, global } = useMappedStore();
 
-  const { receiverPubKey, revealPrivateKey, hasUserJoinedChat, setRevealPrivateKey } =
-    useContext(ChatContext);
+  const {
+    receiverPubKey,
+    revealPrivateKey,
+    hasUserJoinedChat,
+    setRevealPrivateKey,
+    setReceiverPubKey
+  } = useContext(ChatContext);
   const { isLoading: isJoinChatLoading } = useJoinChat();
 
-  const { privateKey, publicKey } = useKeysQuery();
+  const [currentUser, setCurrentUser] = useState("");
+
+  const { privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const directContact = useMemo(
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
@@ -37,13 +46,13 @@ export const ChatPopUp = () => {
   );
   const { data: messages } = useMessagesQuery(directContact?.name);
   const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
+  const { data: currentUserAccount } = useGetAccountFullQuery(currentUser);
 
   const routerLocation = useLocation();
   const prevActiveUser = usePrevious(activeUser);
   const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
 
   const [expanded, setExpanded] = useState(false);
-  const [currentUser, setCurrentUser] = useState("");
   const [isScrollToTop, setIsScrollToTop] = useState(false);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
@@ -71,6 +80,12 @@ export const ChatPopUp = () => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   });
 
+  useEffect(() => {
+    if (currentUserAccount) {
+      setReceiverPubKey(getUserChatPublicKey(currentUserAccount) ?? "");
+    }
+  }, [currentUserAccount]);
+
   // Show or hide the popup if current pathname was changed or user changed
   useEffect(() => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);

From dc7b5dda7741dc018d0a50230a13390e0a04c374 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 21:07:41 +0600
Subject: [PATCH 145/179] Chats: fixed not joined users in widget

---
 src/common/features/chats/components/chat-popup/index.tsx  | 2 +-
 .../chats/components/chats-direct-messages/index.tsx       | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 7a4c8ca3685..781956e4000 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -265,7 +265,7 @@ export const ChatPopUp = () => {
             )}
           </div>
           <div className="pl-2">
-            {(isCurrentUser || isCommunity) && (
+            {((isCurrentUser && receiverPubKey) || isCommunity) && (
               <ChatInput currentUser={currentUser} currentChannel={currentChannel ?? undefined} />
             )}
           </div>
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 1c7a3071b84..8435802ddc2 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -86,7 +86,12 @@ export default function ChatsDirectMessages(props: Props) {
             })}
           </>
         ) : (
-          <p className="not-joined">{_t("chat.not-joined")}</p>
+          <div className="flex flex-col justify-center text-center items-center p-4">
+            <div className="font-bold">{_t("chat.welcome.oops")}</div>
+            <div className="text-gray-600 dark:text-gray-400 mb-4">
+              {_t("chat.welcome.user-not-joined-yet")}
+            </div>
+          </div>
         )}
       </div>
     </>

From 382d4520c167066089f2570d3b9181ae485ae151 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 21:10:56 +0600
Subject: [PATCH 146/179] Chats: show only PIN in manage chat key

---
 .../chats/components/manage-chat-key.tsx      | 29 +++++--------------
 src/common/i18n/locales/en-US.json            |  2 +-
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index 2b039c7985c..77f8d5af764 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -3,36 +3,25 @@ import { _t } from "../../../i18n";
 import { InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
-import { useKeysQuery } from "../queries/keys-query";
-import { useGetAccountFullQuery } from "../../../api/queries";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { getUserChatPrivateKey } from "../utils";
+import { PREFIX } from "../../../util/local-storage";
 
 export default function ManageChatKey() {
   const { activeUser } = useMappedStore();
-  const { privateKey, publicKey } = useKeysQuery();
 
-  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
+  const pin = useMemo(() => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username), []);
   const qrImgRef = useRef<HTMLImageElement | null>(null);
   const [isQrShow, setIsQrShow] = useState(false);
 
-  const { iv } = useMemo(
-    () => (fullAccount ? getUserChatPrivateKey(fullAccount) : { iv: undefined }),
-    [fullAccount]
-  );
-
   useEffect(() => {
-    if (privateKey) {
+    if (pin) {
       compileQR();
     }
-  }, [privateKey]);
+  }, [pin]);
 
   const compileQR = async () => {
     if (qrImgRef.current) {
-      qrImgRef.current.src = await qrcode.toDataURL(
-        `Private key: ${privateKey}. Public key: ${publicKey}. Initial vector value: ${iv}`,
-        { width: 300 }
-      );
+      qrImgRef.current.src = await qrcode.toDataURL(pin!!, { width: 300 });
       setIsQrShow(true);
     }
   };
@@ -40,12 +29,8 @@ export default function ManageChatKey() {
   return (
     <div className="flex gap-4 flex-col w-full">
       <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
-      <div className="text-sm">{_t("chat.public-key")}</div>
-      <InputGroupCopyClipboard value={publicKey ?? ""} />
-      <div className="text-sm">{_t("chat.private-key")}</div>
-      <InputGroupCopyClipboard value={privateKey ?? ""} />
-      <div className="text-sm">{_t("chat.import.iv")}</div>
-      <InputGroupCopyClipboard value={iv ?? ""} />
+      <div className="text-sm">PIN</div>
+      <InputGroupCopyClipboard value={pin ?? ""} />
       <img
         ref={qrImgRef}
         className={classNameObject({
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 9dd6149df8b..5d41846fc75 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1878,7 +1878,7 @@
     "start-community-chat": "Start Community Chat",
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
-    "chat-priv-key": "Please, copy thess key or save QR code to your device for joining to same account in another devices",
+    "chat-priv-key": "Please, copy this PIN or save QR code to your device for joining to same account in another devices",
     "public-key": "Public key",
     "private-key": "Private key",
     "copy-priv-key": "Copy Private key",

From 016d32545ed2217e6c8f85744751b66b06bb5ec5 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 21:21:40 +0600
Subject: [PATCH 147/179] Chats: fixed titles

---
 .../chat-popup/chat-popup-header.tsx          |  2 +-
 .../chats/components/chats-welcome.tsx        | 35 +++++++++++--------
 src/common/features/chats/screens/chats.tsx   | 14 ++++++++
 src/common/i18n/locales/en-US.json            |  3 +-
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index 1ce3205b9d9..cf7a09dac94 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -58,7 +58,7 @@ export function ChatPopupHeader({
       return _t("chat.new-message");
     }
 
-    return _t("chat.messages");
+    return _t("chat.page-title");
   }, [currentUser, isCommunity, communityName, showSearchUser, revealPrivateKey]);
 
   return (
diff --git a/src/common/features/chats/components/chats-welcome.tsx b/src/common/features/chats/components/chats-welcome.tsx
index 5b76544d2ac..c3a3cd8a1e5 100644
--- a/src/common/features/chats/components/chats-welcome.tsx
+++ b/src/common/features/chats/components/chats-welcome.tsx
@@ -8,7 +8,6 @@ import { useGetAccountFullQuery } from "../../../api/queries";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
 import { CreateAnAccount } from "./create-an-account";
-import { ChatsImport } from "./chats-import";
 
 export function ChatsWelcome() {
   const { activeUser } = useMappedStore();
@@ -55,22 +54,28 @@ export function ChatsWelcome() {
         </div>
 
         {isAlreadyRegisteredInChats ? (
-          <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
-            <div>{_t("chat.welcome.already-joined-title")}</div>
-            <div>{_t("chat.welcome.already-joined-hint")}</div>
-            <CodeInput value={pin} setValue={setPin} codeSize={8} disabled={isRestoreLoading} />
-            {isRestoreFailed && <div className="text-red">{_t("chat.welcome.pin-failed")}</div>}
-          </div>
+          <>
+            <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+              <div>{_t("chat.welcome.already-joined-title")}</div>
+              <div>{_t("chat.welcome.already-joined-hint")}</div>
+              <CodeInput value={pin} setValue={setPin} codeSize={8} disabled={isRestoreLoading} />
+              {isRestoreFailed && <div className="text-red">{_t("chat.welcome.pin-failed")}</div>}
+            </div>
+            <OrDivider />
+            <div className="flex justify-center gap-4">
+              <CreateAnAccount />
+            </div>
+          </>
         ) : (
-          <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
-            <div>{_t("chat.welcome.description")}</div>
-          </div>
+          <>
+            <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+              <div>{_t("chat.welcome.description")}</div>
+            </div>
+            <div className="flex justify-center gap-4">
+              <CreateAnAccount />
+            </div>
+          </>
         )}
-        <OrDivider />
-        <div className="flex justify-center gap-4">
-          <CreateAnAccount />
-          <ChatsImport />
-        </div>
       </div>
     </>
   );
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 583d70ab883..506c036064c 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -20,6 +20,7 @@ import { getUserChatPublicKey } from "../utils";
 import useMountedState from "react-use/lib/useMountedState";
 import ChatsProfileBox from "../components/chat-profile-box";
 import { _t } from "../../../i18n";
+import Meta from "../../../components/meta";
 
 interface Props extends PageProps {
   match: match<{
@@ -66,6 +67,18 @@ export const Chats = ({ match, history }: Props) => {
 
   const isMounted = useMountedState();
 
+  const title = useMemo(() => {
+    let title = _t("chat.page-title");
+
+    if (community) {
+      title = `${community.title} | ${title}`;
+    } else if (userAccount) {
+      title = `${userAccount.name} | ${title}`;
+    }
+
+    return title;
+  }, [community, userAccount]);
+
   useEffect(() => {
     if (userAccount) {
       const key = getUserChatPublicKey(userAccount);
@@ -85,6 +98,7 @@ export const Chats = ({ match, history }: Props) => {
     <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
       <Feedback activeUser={activeUser} />
       <NavBar history={history} />
+      <Meta title={title || _t("chat.page-title")} />
 
       <div className="container mx-auto md:py-6">
         <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 5d41846fc75..1ec8b213637 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1831,6 +1831,7 @@
     "update-success-message": "Your Recovery email has been updated successfully"
   },
   "chat": {
+    "page-title": "Conversations",
     "title": "Chats",
     "messages": "Messages",
     "new-message": "New Message",
@@ -1894,7 +1895,7 @@
     "create-pin-description": "Please, set PIN for getting access to your chats from any device",
     "logout": "Logout",
     "welcome": {
-      "title": "Welcome to chats",
+      "title": "Welcome to conversations",
       "description": "Create an account or import chats with private key to start using chats",
       "already-joined-title": "We found You've joined to chats already",
       "already-joined-hint": "Please, verify your account and get access by entering PIN",

From f1e68993a18538f88e3a63a5bc06602730b84f32 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 20 Nov 2023 22:50:54 +0600
Subject: [PATCH 148/179] Chats: added invitation links if user not joined yet

---
 .../chats-direct-messages/index.tsx           | 49 ++++++++++++++++++-
 src/common/features/chats/mutations/index.ts  |  1 +
 .../mutations/invite-via-post-comment.ts      | 40 +++++++++++++++
 src/common/i18n/locales/en-US.json            |  4 ++
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/common/features/chats/mutations/invite-via-post-comment.ts

diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 8435802ddc2..7ebc581c46e 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import usePrevious from "react-use/lib/usePrevious";
 import mediumZoom, { Zoom } from "medium-zoom";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
@@ -10,6 +10,10 @@ import "./index.scss";
 import { ChatMessageItem } from "../chat-message-item";
 import { useKeysQuery } from "../../queries/keys-query";
 import { DirectMessage } from "../../nostr";
+import { Button } from "@ui/button";
+import { useInviteViaPostComment } from "../../mutations";
+import { FormControl } from "@ui/input";
+import { Alert } from "@ui/alert";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -26,10 +30,20 @@ export default function ChatsDirectMessages(props: Props) {
   const { global, activeUser } = useMappedStore();
   const { receiverPubKey } = useContext(ChatContext);
 
+  const [initiatedInviting, setInitiatedInviting] = useState(false);
+  const [invitationText, setInvitationText] = useState(
+    "Hi! Let's start messaging. Follow to [Conversations](https://ecency.com/chats) and register an account."
+  );
   let prevGlobal = usePrevious(global);
 
   const { publicKey } = useKeysQuery();
 
+  const {
+    mutateAsync: invite,
+    isLoading: isInviting,
+    isSuccess: isInvited
+  } = useInviteViaPostComment(props.currentUser);
+
   useEffect(() => {
     if (prevGlobal?.theme !== global.theme) {
       setBackground();
@@ -91,6 +105,39 @@ export default function ChatsDirectMessages(props: Props) {
             <div className="text-gray-600 dark:text-gray-400 mb-4">
               {_t("chat.welcome.user-not-joined-yet")}
             </div>
+            {!isInvited &&
+              (initiatedInviting ? (
+                <div className="flex flex-col gap-4 items-center">
+                  <Alert>{_t("chat.specify-invitation-message")}</Alert>
+                  <FormControl
+                    type="textarea"
+                    value={invitationText}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                      setInvitationText(e.target.value)
+                    }
+                  />
+                  <Button
+                    outline={true}
+                    size="sm"
+                    disabled={isInviting}
+                    onClick={async () => {
+                      await invite(invitationText);
+                      setInitiatedInviting(false);
+                    }}
+                  >
+                    {_t("chat.send-invite")}
+                  </Button>
+                </div>
+              ) : (
+                <Button outline={true} size="sm" onClick={() => setInitiatedInviting(true)}>
+                  {_t("chat.invite")}
+                </Button>
+              ))}
+            {isInvited && (
+              <Alert className="my-4" appearance="success">
+                {_t("chat.successfully-invited")}
+              </Alert>
+            )}
           </div>
         )}
       </div>
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 66a67e794ef..9bca7e0d777 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -12,3 +12,4 @@ export * from "./update-channel-blocked-users";
 export * from "./import-chat-by-keys";
 export * from "./hide-message-in-channel";
 export * from "./logout-from-chats";
+export * from "./invite-via-post-comment";
diff --git a/src/common/features/chats/mutations/invite-via-post-comment.ts b/src/common/features/chats/mutations/invite-via-post-comment.ts
new file mode 100644
index 00000000000..974c20f4e10
--- /dev/null
+++ b/src/common/features/chats/mutations/invite-via-post-comment.ts
@@ -0,0 +1,40 @@
+import { useMutation } from "@tanstack/react-query";
+import { getAccountPosts } from "../../../api/bridge";
+import { comment } from "../../../api/operations";
+import tempEntry from "../../../helper/temp-entry";
+import { FullAccount } from "../../../store/accounts/types";
+import { createReplyPermlink } from "../../../helper/posting";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { error } from "../../../components/feedback";
+import { _t } from "../../../i18n";
+
+export function useInviteViaPostComment(username: string) {
+  const { activeUser, addReply } = useMappedStore();
+
+  return useMutation(["chats/invite-via-post-comment"], async (text: string) => {
+    const response = await getAccountPosts("posts", username);
+    if (response && response.length > 0) {
+      const firstPost = response[0];
+
+      const { author: parentAuthor, permlink: parentPermlink } = firstPost;
+      const author = activeUser!!.username;
+      const permlink = createReplyPermlink(author);
+      await comment(author, parentAuthor, parentPermlink, permlink, "", text, {}, null, true);
+      addReply(
+        tempEntry({
+          author: activeUser!!.data as FullAccount,
+          permlink,
+          parentAuthor,
+          parentPermlink,
+          title: "",
+          body: text,
+          tags: [],
+          description: null
+        })
+      );
+    } else {
+      error(_t("chat.no-posts-for-invite"));
+      throw new Error(_t("chat.no-posts-for-invite"));
+    }
+  });
+}
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 1ec8b213637..8c5a0a829ec 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1850,6 +1850,7 @@
     "not-joined": "This user hasn't joined the chat yet",
     "subscribers": "Subscribers",
     "invite": "Invite",
+    "send-invite": "Send invitation",
     "leave:": "Leave",
     "refresh": "Refresh",
     "message-warning": "You cannot send messages in this group.",
@@ -1894,6 +1895,9 @@
     "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others. Need help? We're here for you. Happy chatting!",
     "create-pin-description": "Please, set PIN for getting access to your chats from any device",
     "logout": "Logout",
+    "specify-invitation-message": "This invitation message will be sent as comment to latest user post",
+    "successfully-invited": "Successfully invited!",
+    "no-posts-for-invite": "Unfortunately, User hasn't posts.",
     "welcome": {
       "title": "Welcome to conversations",
       "description": "Create an account or import chats with private key to start using chats",

From f12afbde1c4c08340bf79660a6f4165f8582df0d Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 25 Nov 2023 20:08:54 +0600
Subject: [PATCH 149/179] Added managing one single key instead of multiple

---
 .../chats/components/chats-import.tsx         | 28 ++++---------
 .../chats-sidebar/chat-sidebar-header.tsx     | 18 +--------
 .../chats/components/chats-welcome.tsx        |  5 ++-
 .../chats/components/manage-chat-key.tsx      | 39 +++++++++++++++++--
 .../chats/mutations/import-chat-by-keys.ts    | 26 +++++++++++--
 .../features/chats/queries/keys-query.ts      | 15 ++++---
 src/common/features/chats/queries/queries.ts  |  1 +
 src/common/features/chats/screens/chats.tsx   | 20 ++++++++--
 .../chats/utils/get-user-chat-private-key.ts  |  8 ++--
 .../chats/utils/get-user-chat-public-key.ts   |  8 ++--
 .../features/chats/utils/upload-chat-keys.ts  |  8 ++--
 src/common/i18n/locales/en-US.json            |  6 ++-
 12 files changed, 115 insertions(+), 67 deletions(-)

diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
index 9939473ba12..80dec872636 100644
--- a/src/common/features/chats/components/chats-import.tsx
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -8,9 +8,7 @@ import { Alert } from "@ui/alert";
 
 export function ChatsImport() {
   const [step, setStep] = useState(0);
-  const [publicKey, setPublicKey] = useState("");
-  const [privateKey, setPrivateKey] = useState("");
-  const [iv, setIv] = useState("");
+  const [ecencyChatKey, setEcencyChatKey] = useState("");
   const [pin, setPin] = useState("");
 
   const { mutateAsync: importChatByKey } = useImportChatByKeys();
@@ -25,24 +23,12 @@ export function ChatsImport() {
           <ModalHeader closeButton={true}>{_t("chat.import.title")}</ModalHeader>
           <ModalBody>
             <div className="text-gray-600 mb-4">{_t("chat.import.description")}</div>
-            <div className="text-sm p-3">{_t("chat.public-key")}</div>
+            <div className="text-sm p-3">{_t("chat.key")}</div>
             <FormControl
+              className="mb-4"
               type="text"
-              value={publicKey}
-              onChange={(e) => setPublicKey(e.target.value)}
-            />
-            <div className="text-sm p-3">{_t("chat.private-key")}</div>
-            <FormControl
-              type="text"
-              value={privateKey}
-              onChange={(e) => setPrivateKey(e.target.value)}
-            />
-            <div className="text-sm p-3">{_t("chat.import.iv")}</div>
-            <FormControl
-              className="mb-6"
-              type="text"
-              value={iv}
-              onChange={(e) => setIv(e.target.value)}
+              value={ecencyChatKey}
+              onChange={(e) => setEcencyChatKey(e.target.value)}
             />
             <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
             <CodeInput value={pin} setValue={setPin} codeSize={8} />
@@ -52,8 +38,8 @@ export function ChatsImport() {
               {_t("g.cancel")}
             </Button>
             <Button
-              disabled={!publicKey || !privateKey || !pin || !iv}
-              onClick={() => importChatByKey({ publicKey, privateKey, pin, iv })}
+              disabled={!ecencyChatKey || pin.length < 7}
+              onClick={() => importChatByKey({ ecencyChatKey, pin })}
             >
               {_t("chat.import.button")}
             </Button>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index ddddb99b761..0cfcaad53bb 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -1,6 +1,3 @@
-import { Button } from "@ui/button";
-import { arrowBackSvg } from "../../../../img/svg";
-import Tooltip from "../../../../components/tooltip";
 import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import React, { useContext } from "react";
@@ -19,20 +16,7 @@ export function ChatSidebarHeader({ history }: Props) {
   return (
     <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
       <div className="flex items-center gap-2">
-        {revealPrivateKey && (
-          <Tooltip content={_t("chat.back")}>
-            <Button
-              className="hidden md:flex"
-              noPadding={true}
-              appearance="gray-link"
-              icon={arrowBackSvg}
-              onClick={() => setRevealPrivateKey(false)}
-            />
-          </Tooltip>
-        )}
-        <div className="font-semibold text-gray-600 text-sm">
-          {revealPrivateKey ? _t("chat.manage-chat-key") : _t("chat.title")}
-        </div>
+        <div className="font-semibold text-gray-600 text-sm">{_t("chat.title")}</div>
       </div>
       <div className="flex items-center">
         {!!privateKey && (
diff --git a/src/common/features/chats/components/chats-welcome.tsx b/src/common/features/chats/components/chats-welcome.tsx
index c3a3cd8a1e5..6e7df51583a 100644
--- a/src/common/features/chats/components/chats-welcome.tsx
+++ b/src/common/features/chats/components/chats-welcome.tsx
@@ -8,6 +8,7 @@ import { useGetAccountFullQuery } from "../../../api/queries";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
 import { CreateAnAccount } from "./create-an-account";
+import { ChatsImport } from "./chats-import";
 
 export function ChatsWelcome() {
   const { activeUser } = useMappedStore();
@@ -63,15 +64,17 @@ export function ChatsWelcome() {
             </div>
             <OrDivider />
             <div className="flex justify-center gap-4">
+              <ChatsImport />
               <CreateAnAccount />
             </div>
           </>
         ) : (
           <>
-            <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+            <div className="flex flex-col items-center mb-4 text-gray-600 dark:text-gray-400 text-center">
               <div>{_t("chat.welcome.description")}</div>
             </div>
             <div className="flex justify-center gap-4">
+              <ChatsImport />
               <CreateAnAccount />
             </div>
           </>
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index 77f8d5af764..a1fbf412406 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -5,23 +5,39 @@ import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { PREFIX } from "../../../util/local-storage";
+import { useKeysQuery } from "../queries/keys-query";
+import { Button } from "@ui/button";
 
 export default function ManageChatKey() {
   const { activeUser } = useMappedStore();
 
-  const pin = useMemo(() => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username), []);
   const qrImgRef = useRef<HTMLImageElement | null>(null);
   const [isQrShow, setIsQrShow] = useState(false);
 
+  const { publicKey, privateKey, iv } = useKeysQuery();
+
+  const pin = useMemo(() => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username), []);
+  const ecencyKey = useMemo(
+    () =>
+      Buffer.from(
+        JSON.stringify({
+          pub: publicKey,
+          priv: privateKey,
+          iv
+        })
+      ).toString("base64"),
+    [publicKey, privateKey]
+  );
+
   useEffect(() => {
-    if (pin) {
+    if (ecencyKey) {
       compileQR();
     }
-  }, [pin]);
+  }, [ecencyKey]);
 
   const compileQR = async () => {
     if (qrImgRef.current) {
-      qrImgRef.current.src = await qrcode.toDataURL(pin!!, { width: 300 });
+      qrImgRef.current.src = await qrcode.toDataURL(ecencyKey!!, { width: 300 });
       setIsQrShow(true);
     }
   };
@@ -31,6 +47,8 @@ export default function ManageChatKey() {
       <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
       <div className="text-sm">PIN</div>
       <InputGroupCopyClipboard value={pin ?? ""} />
+      <div className="text-sm mt-4">Ecency key</div>
+      <InputGroupCopyClipboard value={ecencyKey ?? ""} />
       <img
         ref={qrImgRef}
         className={classNameObject({
@@ -39,6 +57,19 @@ export default function ManageChatKey() {
           block: isQrShow
         })}
       />
+      <Button
+        className="mx-auto"
+        onClick={() => {
+          const blob = new Blob([ecencyKey], { type: "text/plain" });
+          const a = document.createElement("a");
+          a.href = window.URL.createObjectURL(new File([blob], "ecency-key.txt"));
+          a.download = "ecency-key.txt";
+          a.click();
+          document.removeChild(a);
+        }}
+      >
+        {_t("g.download")}
+      </Button>
     </div>
   );
 }
diff --git a/src/common/features/chats/mutations/import-chat-by-keys.ts b/src/common/features/chats/mutations/import-chat-by-keys.ts
index ff7add2e0c7..9f9149fb225 100644
--- a/src/common/features/chats/mutations/import-chat-by-keys.ts
+++ b/src/common/features/chats/mutations/import-chat-by-keys.ts
@@ -7,10 +7,8 @@ import { useNostrPublishMutation } from "../nostr";
 import { Kind } from "../../../../lib/nostr-tools/event";
 
 interface Payload {
-  publicKey: string;
-  privateKey: string;
+  ecencyChatKey: string;
   pin: string;
-  iv: string;
 }
 
 export function useImportChatByKeys(onSuccess?: () => void) {
@@ -29,10 +27,30 @@ export function useImportChatByKeys(onSuccess?: () => void) {
 
   return useMutation(
     ["chats/import-chat-by-key"],
-    async ({ publicKey, privateKey, pin, iv }: Payload) => {
+    async ({ ecencyChatKey, pin }: Payload) => {
       if (!activeUser) {
         return;
       }
+      let publicKey;
+      let privateKey;
+      let iv;
+
+      try {
+        const parsedObject = JSON.parse(Buffer.from(ecencyChatKey, "base64").toString());
+        publicKey = parsedObject.pub;
+        privateKey = parsedObject.priv;
+        iv = parsedObject.iv;
+      } catch (e) {
+        throw new Error(
+          "[Chat][Nostr] – no private, public keys or initial vector value in importing"
+        );
+      }
+
+      if (!privateKey || !publicKey || !iv) {
+        throw new Error(
+          "[Chat][Nostr] – no private, public keys or initial vector value in importing"
+        );
+      }
 
       const initialVector = Buffer.from(iv, "base64");
       const encryptedKey = EncryptionTools.encrypt(privateKey, pin, initialVector);
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 25faa8df11b..80d80ce2323 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -11,10 +11,7 @@ export function useKeysQuery() {
 
   const { data } = useGetAccountFullQuery(activeUser?.username);
 
-  const [
-    { data: publicKey, refetch: refetchPublicKey },
-    { data: privateKey, refetch: refetchPrivateKey }
-  ] = useQueries({
+  const [{ data: publicKey }, { data: privateKey }, { data: iv }] = useQueries({
     queries: [
       {
         queryKey: [ChatQueries.PUBLIC_KEY, activeUser?.username],
@@ -25,7 +22,7 @@ export function useKeysQuery() {
         queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
         queryFn: async () => {
           const pin = localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username);
-          const { key, iv } = await getUserChatPrivateKey(data!!);
+          const { key, iv } = getUserChatPrivateKey(data!!);
           if (key && pin && iv) {
             return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
           }
@@ -33,6 +30,11 @@ export function useKeysQuery() {
           return undefined;
         },
         enabled: !!data
+      },
+      {
+        queryKey: [ChatQueries.ACCOUNT_IV, activeUser?.username],
+        queryFn: async () => getUserChatPrivateKey(data!!).iv,
+        enabled: !!data
       }
     ]
   });
@@ -43,7 +45,8 @@ export function useKeysQuery() {
     () => ({
       publicKey,
       privateKey,
-      hasKeys
+      hasKeys,
+      iv
     }),
     [publicKey, privateKey, hasKeys]
   );
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index d9de82888e1..62a4a9d9b2d 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -2,6 +2,7 @@ export enum ChatQueries {
   SEARCH_USER = "chats/search-user",
   PUBLIC_KEY = "chats/public-key",
   PRIVATE_KEY = "chats/private-key",
+  ACCOUNT_IV = "chats/account-iv",
   DIRECT_CONTACTS = "chats/direct-contacts",
   LAST_MESSAGES = "chats/last-messages",
   MESSAGES = "chats/messages",
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 506c036064c..339c6150f5a 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -21,6 +21,8 @@ import useMountedState from "react-use/lib/useMountedState";
 import ChatsProfileBox from "../components/chat-profile-box";
 import { _t } from "../../../i18n";
 import Meta from "../../../components/meta";
+import { Button } from "@ui/button";
+import { arrowBackSvg } from "../../../img/svg";
 
 interface Props extends PageProps {
   match: match<{
@@ -34,7 +36,8 @@ interface Props extends PageProps {
 
 export const Chats = ({ match, history }: Props) => {
   const { activeUser, global } = useMappedStore();
-  const { receiverPubKey, revealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
+  const { receiverPubKey, revealPrivateKey, setReceiverPubKey, setRevealPrivateKey } =
+    useContext(ChatContext);
   const { data: community } = useCommunityCache(match.params.username);
 
   const { publicKey, privateKey } = useKeysQuery();
@@ -114,10 +117,21 @@ export const Chats = ({ match, history }: Props) => {
             })}
           >
             {isShowManageKey && (
-              <div className="flex h-full items-start justify-center my-6">
-                <div className="max-w-[400px] bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
+              <div className="h-full">
+                <div className="flex gap-4 items-center sticky z-[10] top-0 bg-white border-b border-[--border-color] px-4 h-[57px]">
+                  <Button
+                    className="hidden md:flex"
+                    noPadding={true}
+                    appearance="gray-link"
+                    icon={arrowBackSvg}
+                    onClick={() => setRevealPrivateKey(false)}
+                  />
+                  {_t("chat.manage-chat-key")}
+                </div>
+                <div className="max-w-[400px] mx-auto my-6 bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
                   <ManageChatKey />
                 </div>
+                <div className="h-[1rem]" />
               </div>
             )}
             {isShowImportChats && activeUser && (
diff --git a/src/common/features/chats/utils/get-user-chat-private-key.ts b/src/common/features/chats/utils/get-user-chat-private-key.ts
index 6baeeec1764..9ffbd7583fd 100644
--- a/src/common/features/chats/utils/get-user-chat-private-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-private-key.ts
@@ -4,9 +4,11 @@ export const getUserChatPrivateKey = (account: FullAccount): Record<string, stri
   if (account.posting_json_metadata) {
     const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
-    if (profile) {
-      const { nsKey, nsIv } = profile || {};
-      return { key: nsKey, iv: nsIv };
+    if (profile?.echat) {
+      const {
+        echat: { key, iv }
+      } = profile || { echat: {} };
+      return { key, iv };
     }
   }
   return {};
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index 3b391ea4626..a8ae1ea0581 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -4,9 +4,11 @@ export const getUserChatPublicKey = (account: FullAccount): string | undefined =
   if (account.posting_json_metadata) {
     const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
-    if (profile) {
-      const { nsPubKey } = profile || {};
-      return nsPubKey;
+    if (profile?.echat) {
+      const {
+        echat: { pubKey }
+      } = profile || { echat: {} };
+      return pubKey;
     }
   }
   return undefined;
diff --git a/src/common/features/chats/utils/upload-chat-keys.ts b/src/common/features/chats/utils/upload-chat-keys.ts
index 2a7024a0e7f..31fa21d1e87 100644
--- a/src/common/features/chats/utils/upload-chat-keys.ts
+++ b/src/common/features/chats/utils/upload-chat-keys.ts
@@ -11,8 +11,10 @@ export const uploadChatKeys = async (
 
   return await updateProfile(response, {
     ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}").profile,
-    nsPubKey: pub,
-    nsKey: priv,
-    nsIv: iv.toString("base64")
+    echat: {
+      pubKey: pub,
+      iv: iv.toString("base64"),
+      key: priv
+    }
   });
 };
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 8c5a0a829ec..484a012e0ea 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -81,7 +81,8 @@
     "join": "Join",
     "resend": "Resend",
     "failed": "Failed",
-    "status": "Status"
+    "status": "Status",
+    "download": "Download"
   },
   "confirm": {
     "title": "Are you sure?",
@@ -1834,6 +1835,7 @@
     "page-title": "Conversations",
     "title": "Chats",
     "messages": "Messages",
+    "key": "Ecency chat key",
     "new-message": "New Message",
     "direct-messages": "Direct messages",
     "collapse": "Collapse",
@@ -1880,7 +1882,7 @@
     "start-community-chat": "Start Community Chat",
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
-    "chat-priv-key": "Please, copy this PIN or save QR code to your device for joining to same account in another devices",
+    "chat-priv-key": "Please, save Ecency key by clicking on download button or scanning QR code to restore your conversation if there will disappeared.",
     "public-key": "Public key",
     "private-key": "Private key",
     "copy-priv-key": "Copy Private key",

From 4b5fb2595ceee8e05b9f9a6834b30432a17dc400 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 25 Nov 2023 20:36:33 +0600
Subject: [PATCH 150/179] Added reminder on main screen with information about
 saving chat keys

---
 src/common/features/chats/screens/chats.tsx | 32 +++++++++++++++++++++
 src/common/i18n/locales/en-US.json          |  2 ++
 2 files changed, 34 insertions(+)

diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 339c6150f5a..8dafeb302ee 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -23,6 +23,10 @@ import { _t } from "../../../i18n";
 import Meta from "../../../components/meta";
 import { Button } from "@ui/button";
 import { arrowBackSvg } from "../../../img/svg";
+import moment from "moment/moment";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import { PREFIX } from "../../../util/local-storage";
+import { Alert } from "@ui/alert";
 
 interface Props extends PageProps {
   match: match<{
@@ -45,6 +49,8 @@ export const Chats = ({ match, history }: Props) => {
   const { data: channels } = useChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
+  const [lastKeysSavingTime, setLastKeysSaving] = useLocalStorage<string>(PREFIX + "_chats_lkst");
+
   const isChannel = useMemo(
     () =>
       [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
@@ -68,6 +74,15 @@ export const Chats = ({ match, history }: Props) => {
   );
   const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
+  // We offer user to save account credentials each month
+  const isLastKeysSavingTimeExpired = useMemo(
+    () =>
+      lastKeysSavingTime
+        ? moment(new Date(lastKeysSavingTime)).isBefore(moment().subtract(30, "days"))
+        : true,
+    [lastKeysSavingTime]
+  );
+
   const isMounted = useMountedState();
 
   const title = useMemo(() => {
@@ -157,6 +172,23 @@ export const Chats = ({ match, history }: Props) => {
                   {_t("chat.welcome.hello")}, @{activeUser?.username}
                 </div>
                 <div>{_t("chat.welcome.start-description")}</div>
+                {isLastKeysSavingTimeExpired && (
+                  <Alert
+                    appearance="primary"
+                    className="max-w-[550px] flex items-center mt-4 gap-4"
+                  >
+                    <span>{_t("chat.warn-key-saving")}</span>
+                    <Button
+                      className="whitespace-nowrap"
+                      onClick={() => {
+                        setRevealPrivateKey(true);
+                        setLastKeysSaving(moment().toDate().toISOString());
+                      }}
+                    >
+                      {_t("chat.view-and-save")}
+                    </Button>
+                  </Alert>
+                )}
               </div>
             )}
           </div>
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 484a012e0ea..053126a16dd 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1900,6 +1900,8 @@
     "specify-invitation-message": "This invitation message will be sent as comment to latest user post",
     "successfully-invited": "Successfully invited!",
     "no-posts-for-invite": "Unfortunately, User hasn't posts.",
+    "warn-key-saving": "Save the Ecency key to access your messages. Keep it secure for uninterrupted service. Thank you!",
+    "view-and-save": "Show keys and save",
     "welcome": {
       "title": "Welcome to conversations",
       "description": "Create an account or import chats with private key to start using chats",

From f88e36be615b35bfc2374eb313d8b0d0635e89b1 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 25 Nov 2023 20:58:21 +0600
Subject: [PATCH 151/179] Improved mobile version of chats page

---
 .../chats/components/chats-default-screen.tsx | 55 +++++++++++
 .../screens/chats-manage-key-section.tsx      | 28 ++++++
 .../screens/chats-user-not-joined-section.tsx | 25 +++++
 src/common/features/chats/screens/chats.tsx   | 99 +++++--------------
 4 files changed, 132 insertions(+), 75 deletions(-)
 create mode 100644 src/common/features/chats/components/chats-default-screen.tsx
 create mode 100644 src/common/features/chats/screens/chats-manage-key-section.tsx
 create mode 100644 src/common/features/chats/screens/chats-user-not-joined-section.tsx

diff --git a/src/common/features/chats/components/chats-default-screen.tsx b/src/common/features/chats/components/chats-default-screen.tsx
new file mode 100644
index 00000000000..e3a81a21897
--- /dev/null
+++ b/src/common/features/chats/components/chats-default-screen.tsx
@@ -0,0 +1,55 @@
+import { _t } from "../../../i18n";
+import { Alert } from "@ui/alert";
+import { Button } from "@ui/button";
+import moment from "moment";
+import React, { HTMLProps, useContext, useMemo } from "react";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import { PREFIX } from "../../../util/local-storage";
+import { ChatContext } from "../chat-context-provider";
+import { classNameObject } from "../../../helper/class-name-object";
+
+export function ChatsDefaultScreen(props: HTMLProps<HTMLDivElement>) {
+  const { activeUser } = useMappedStore();
+  const { setRevealPrivateKey } = useContext(ChatContext);
+
+  const [lastKeysSavingTime, setLastKeysSaving] = useLocalStorage<string>(PREFIX + "_chats_lkst");
+
+  // We offer user to save account credentials each month
+  const isLastKeysSavingTimeExpired = useMemo(
+    () =>
+      lastKeysSavingTime
+        ? moment(new Date(lastKeysSavingTime)).isBefore(moment().subtract(30, "days"))
+        : true,
+    [lastKeysSavingTime]
+  );
+
+  return (
+    <div
+      {...props}
+      className={classNameObject({
+        "flex flex-col justify-center items-center px-4 w-full h-full": true,
+        [props.className ?? ""]: !!props.className
+      })}
+    >
+      <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
+        {_t("chat.welcome.hello")}, @{activeUser?.username}
+      </div>
+      <div>{_t("chat.welcome.start-description")}</div>
+      {isLastKeysSavingTimeExpired && (
+        <Alert appearance="primary" className="max-w-[550px] flex items-center mt-4 gap-4">
+          <span>{_t("chat.warn-key-saving")}</span>
+          <Button
+            className="whitespace-nowrap"
+            onClick={() => {
+              setRevealPrivateKey(true);
+              setLastKeysSaving(moment().toDate().toISOString());
+            }}
+          >
+            {_t("chat.view-and-save")}
+          </Button>
+        </Alert>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/screens/chats-manage-key-section.tsx b/src/common/features/chats/screens/chats-manage-key-section.tsx
new file mode 100644
index 00000000000..89d4b9b2589
--- /dev/null
+++ b/src/common/features/chats/screens/chats-manage-key-section.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@ui/button";
+import { arrowBackSvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
+import ManageChatKey from "../components/manage-chat-key";
+import React, { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
+
+export function ChatsManageKeySection() {
+  const { setRevealPrivateKey } = useContext(ChatContext);
+
+  return (
+    <div className="h-full">
+      <div className="flex gap-4 items-center sticky z-[10] top-0 bg-white border-b border-[--border-color] px-4 h-[57px]">
+        <Button
+          noPadding={true}
+          appearance="gray-link"
+          icon={arrowBackSvg}
+          onClick={() => setRevealPrivateKey(false)}
+        />
+        {_t("chat.manage-chat-key")}
+      </div>
+      <div className="max-w-[400px] mx-auto my-6 bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
+        <ManageChatKey />
+      </div>
+      <div className="h-[1rem]" />
+    </div>
+  );
+}
diff --git a/src/common/features/chats/screens/chats-user-not-joined-section.tsx b/src/common/features/chats/screens/chats-user-not-joined-section.tsx
new file mode 100644
index 00000000000..d380f283c89
--- /dev/null
+++ b/src/common/features/chats/screens/chats-user-not-joined-section.tsx
@@ -0,0 +1,25 @@
+import { _t } from "../../../i18n";
+import ChatsProfileBox from "../components/chat-profile-box";
+import React, { HTMLProps } from "react";
+import { match } from "react-router";
+import { classNameObject } from "../../../helper/class-name-object";
+
+export function ChatsUserNotJoinedSection({
+  match,
+  className
+}: HTMLProps<HTMLDivElement> & { match: match<{ username: string }> }) {
+  return (
+    <div
+      className={classNameObject({
+        "flex flex-col justify-center h-full items-center px-4": true,
+        [className ?? ""]: !!className
+      })}
+    >
+      <div className="font-bold">{_t("chat.welcome.oops")}</div>
+      <div className="text-gray-600 dark:text-gray-400 mb-4">
+        {_t("chat.welcome.user-not-joined-yet")}
+      </div>
+      <ChatsProfileBox currentUser={match.params.username} />
+    </div>
+  );
+}
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 8dafeb302ee..aae194bb7d2 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -4,29 +4,24 @@ import { match } from "react-router";
 import NavBar from "../../../components/navbar";
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../../../pages/common";
 import ChatsSideBar from "../components/chats-sidebar";
-import ManageChatKey from "../components/manage-chat-key";
 import Feedback from "../../../components/feedback";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { ChatContext } from "../chat-context-provider";
 import ChatsMessagesBox from "../components/chat-message-box";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
-import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
+import { useChannelsQuery, useCommunityChannelQuery, useDirectContactsQuery } from "../queries";
 import { useKeysQuery } from "../queries/keys-query";
 import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
 import { useGetAccountFullQuery } from "../../../api/queries";
 import { getUserChatPublicKey } from "../utils";
 import useMountedState from "react-use/lib/useMountedState";
-import ChatsProfileBox from "../components/chat-profile-box";
 import { _t } from "../../../i18n";
 import Meta from "../../../components/meta";
-import { Button } from "@ui/button";
-import { arrowBackSvg } from "../../../img/svg";
-import moment from "moment/moment";
-import useLocalStorage from "react-use/lib/useLocalStorage";
-import { PREFIX } from "../../../util/local-storage";
-import { Alert } from "@ui/alert";
+import { ChatsDefaultScreen } from "../components/chats-default-screen";
+import { ChatsManageKeySection } from "./chats-manage-key-section";
+import { ChatsUserNotJoinedSection } from "./chats-user-not-joined-section";
 
 interface Props extends PageProps {
   match: match<{
@@ -46,11 +41,10 @@ export const Chats = ({ match, history }: Props) => {
 
   const { publicKey, privateKey } = useKeysQuery();
   const { data: userAccount } = useGetAccountFullQuery(match.params.username?.replace("@", ""));
+  const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
-  const [lastKeysSavingTime, setLastKeysSaving] = useLocalStorage<string>(PREFIX + "_chats_lkst");
-
   const isChannel = useMemo(
     () =>
       [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
@@ -70,19 +64,10 @@ export const Chats = ({ match, history }: Props) => {
   );
   const isShowDefaultScreen = useMemo(
     () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey && !match.params.username,
-    [isReady, receiverPubKey, revealPrivateKey, isChannel]
+    [isReady, receiverPubKey, revealPrivateKey, isChannel, match]
   );
   const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
-  // We offer user to save account credentials each month
-  const isLastKeysSavingTimeExpired = useMemo(
-    () =>
-      lastKeysSavingTime
-        ? moment(new Date(lastKeysSavingTime)).isBefore(moment().subtract(30, "days"))
-        : true,
-    [lastKeysSavingTime]
-  );
-
   const isMounted = useMountedState();
 
   const title = useMemo(() => {
@@ -120,35 +105,29 @@ export const Chats = ({ match, history }: Props) => {
 
       <div className="container mx-auto md:py-6">
         <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
-          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] h-[calc(100vh-3rem-69px)] overflow-y-auto">
+          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
             {isReady ? <ChatsSideBar history={history} username={match.params.username} /> : <></>}
+            {(!directContacts?.length || !channels?.length) && isShowDefaultScreen && (
+              <ChatsDefaultScreen className="md:hidden" />
+            )}
+            {(!directContacts?.length || !channels?.length) && isShowImportChats && activeUser && (
+              <div className="h-full w-full flex items-center justify-center md:hidden">
+                <ChatsWelcome />
+              </div>
+            )}
+            {!isShowChatRoom && isReady && match.params.username && (
+              <ChatsUserNotJoinedSection match={match} className="md:hidden" />
+            )}
           </div>
           <div
             className={classNameObject({
-              "col-span-12 md:col-span-8 xl:col-span-9 h-[calc(100vh-3rem-69px)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+              "col-span-12 md:col-span-8 xl:col-span-9 max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
                 true,
-              "left-0": isShowChatRoom || isShowManageKey,
-              "left-[100%]": !isShowChatRoom && !isShowManageKey
+              "translate-x-0": isShowChatRoom || isShowManageKey,
+              "translate-x-[100%] md:translate-x-0": !isShowChatRoom && !isShowManageKey
             })}
           >
-            {isShowManageKey && (
-              <div className="h-full">
-                <div className="flex gap-4 items-center sticky z-[10] top-0 bg-white border-b border-[--border-color] px-4 h-[57px]">
-                  <Button
-                    className="hidden md:flex"
-                    noPadding={true}
-                    appearance="gray-link"
-                    icon={arrowBackSvg}
-                    onClick={() => setRevealPrivateKey(false)}
-                  />
-                  {_t("chat.manage-chat-key")}
-                </div>
-                <div className="max-w-[400px] mx-auto my-6 bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
-                  <ManageChatKey />
-                </div>
-                <div className="h-[1rem]" />
-              </div>
-            )}
+            {isShowManageKey && <ChatsManageKeySection />}
             {isShowImportChats && activeUser && (
               <div className="h-full w-full flex items-center justify-center">
                 <ChatsWelcome />
@@ -158,39 +137,9 @@ export const Chats = ({ match, history }: Props) => {
               <ChatsMessagesBox match={match} history={history} channel={communityChannel!!} />
             )}
             {!isShowChatRoom && isReady && match.params.username && (
-              <div className="flex flex-col justify-center h-full items-center">
-                <div className="font-bold">{_t("chat.welcome.oops")}</div>
-                <div className="text-gray-600 dark:text-gray-400 mb-4">
-                  {_t("chat.welcome.user-not-joined-yet")}
-                </div>
-                <ChatsProfileBox currentUser={match.params.username} />
-              </div>
-            )}
-            {isShowDefaultScreen && (
-              <div className="flex flex-col justify-center items-center w-full h-full">
-                <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
-                  {_t("chat.welcome.hello")}, @{activeUser?.username}
-                </div>
-                <div>{_t("chat.welcome.start-description")}</div>
-                {isLastKeysSavingTimeExpired && (
-                  <Alert
-                    appearance="primary"
-                    className="max-w-[550px] flex items-center mt-4 gap-4"
-                  >
-                    <span>{_t("chat.warn-key-saving")}</span>
-                    <Button
-                      className="whitespace-nowrap"
-                      onClick={() => {
-                        setRevealPrivateKey(true);
-                        setLastKeysSaving(moment().toDate().toISOString());
-                      }}
-                    >
-                      {_t("chat.view-and-save")}
-                    </Button>
-                  </Alert>
-                )}
-              </div>
+              <ChatsUserNotJoinedSection match={match} />
             )}
+            {isShowDefaultScreen && <ChatsDefaultScreen />}
           </div>
         </div>
       </div>

From daa0ffce0646f88413a4ef06d0fcdf3a8b7880b1 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 29 Nov 2023 23:41:20 +0600
Subject: [PATCH 152/179] Chats: fixed minor bugs

---
 .../chat-popup/chat-popup-header.tsx          | 53 ++++++++-----------
 .../chats/components/chat-popup/index.tsx     | 12 -----
 .../blocked-users-modal.tsx                   |  2 +-
 .../chats-direct-messages/index.tsx           |  2 +-
 .../chats/components/chats-dropdown-menu.tsx  | 27 +++++++++-
 src/common/features/chats/screens/chats.tsx   |  5 +-
 src/common/i18n/locales/en-US.json            | 13 ++---
 7 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index cf7a09dac94..de9192ced13 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -1,7 +1,7 @@
 import Tooltip from "../../../../components/tooltip";
 import { _t } from "../../../../i18n";
 import { Button } from "@ui/button";
-import { addMessageSvg, arrowBackSvg, expandArrow, extendedView } from "../../../../img/svg";
+import { addMessageSvg, arrowBackSvg, expandArrow } from "../../../../img/svg";
 import ChatsCommunityDropdownMenu from "../chats-community-actions";
 import { history } from "../../../../store";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
@@ -21,7 +21,6 @@ interface Props {
   isCurrentUser: boolean;
   handleBackArrowSvg: () => void;
   handleMessageSvgClick: () => void;
-  handleExtendedView: () => void;
   setExpanded: (v: boolean) => void;
 }
 
@@ -35,7 +34,6 @@ export function ChatPopupHeader({
   isCurrentUser,
   handleBackArrowSvg,
   handleMessageSvgClick,
-  handleExtendedView,
   setExpanded
 }: Props) {
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
@@ -81,27 +79,32 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        <div className="flex items-center gap-3" onClick={() => setExpanded(!expanded)}>
+        <div className="flex items-center gap-2" onClick={() => setExpanded(!expanded)}>
           {(currentUser || isCommunity) && (
             <UserAvatar username={isCurrentUser ? currentUser : communityName || ""} size="small" />
           )}
 
           <div className="text-lg truncate max-w-[180px] font-semibold">{title}</div>
+
+          <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+            <Button
+              noPadding={true}
+              size="sm"
+              appearance="gray-link"
+              className={classNameObject({
+                "duration-300": true,
+                "rotate-180": !expanded
+              })}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                setExpanded(!expanded);
+              }}
+              icon={expandArrow}
+            />
+          </Tooltip>
         </div>
       </div>
       <div className="flex items-center gap-4">
-        <Tooltip content={_t("chat.extended-view")}>
-          <Button
-            noPadding={true}
-            size="sm"
-            appearance="gray-link"
-            icon={extendedView}
-            onClick={(e: { stopPropagation: () => void }) => {
-              e.stopPropagation();
-              handleExtendedView();
-            }}
-          />
-        </Tooltip>
         {canSendMessage && (
           <Tooltip content={_t("chat.new-message")}>
             <Button
@@ -127,26 +130,12 @@ export function ChatPopupHeader({
           >
             <ChatsDropdownMenu
               history={history!}
+              communityName={communityName}
+              currentUser={currentUser}
               onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
             />
           </div>
         )}
-        <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
-          <Button
-            noPadding={true}
-            size="sm"
-            appearance="gray-link"
-            className={classNameObject({
-              "duration-300": true,
-              "rotate-180": !expanded
-            })}
-            onClick={(e: { stopPropagation: () => void }) => {
-              e.stopPropagation();
-              setExpanded(!expanded);
-            }}
-            icon={expandArrow}
-          />
-        </Tooltip>
       </div>
     </div>
   );
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 781956e4000..8ac08d26dc0 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
-import { history } from "../../../../store";
 import Tooltip from "../../../../components/tooltip";
 import LinearProgress from "../../../../components/linear-progress";
 import ManageChatKey from "../manage-chat-key";
@@ -176,16 +175,6 @@ export const ChatPopUp = () => {
     setRevealPrivateKey(false);
   };
 
-  const handleExtendedView = () => {
-    if (!isCurrentUser && !isCommunity) {
-      history?.push("/chats");
-    } else if (isCurrentUser) {
-      history?.push(`/chats/@${currentUser}`);
-    } else {
-      history?.push(`/chats/${communityName}`);
-    }
-  };
-
   return (
     <>
       {show && (
@@ -204,7 +193,6 @@ export const ChatPopUp = () => {
             communityName={communityName}
             isCommunity={isCommunity}
             handleBackArrowSvg={handleBackArrowSvg}
-            handleExtendedView={handleExtendedView}
             handleMessageSvgClick={handleMessageSvgClick}
             showSearchUser={showSearchUser}
           />
diff --git a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
index 3bcc5b6c7a7..5a5ccb4885d 100644
--- a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
@@ -29,7 +29,7 @@ export function BlockedUsersModal({ username, setShow, show }: Props) {
 
   return (
     <Modal centered={true} show={show} onHide={() => setShow(false)}>
-      <ModalHeader closeButton={true}>{_t("chat.edit-community-roles")}</ModalHeader>
+      <ModalHeader closeButton={true}>{_t("chat.blocked-users-management")}</ModalHeader>
       <ModalBody>
         <div className="flex flex-col mb-6 gap-6">
           {currentChannel?.communityModerators?.length !== 0 ? (
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 7ebc581c46e..8dba9a3d346 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -32,7 +32,7 @@ export default function ChatsDirectMessages(props: Props) {
 
   const [initiatedInviting, setInitiatedInviting] = useState(false);
   const [invitationText, setInvitationText] = useState(
-    "Hi! Let's start messaging. Follow to [Conversations](https://ecency.com/chats) and register an account."
+    "Hi! Let's start messaging privately. Register an account on [https://ecency.com/chats](https://ecency.com/chats)"
   );
   let prevGlobal = usePrevious(global);
 
diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
index 4b78d7d553b..2b03a438ae3 100644
--- a/src/common/features/chats/components/chats-dropdown-menu.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -1,18 +1,33 @@
 import React from "react";
 import { History } from "history";
-import { chatKeySvg, kebabMenuSvg, keySvg } from "../../../img/svg";
+import { chatKeySvg, extendedView, kebabMenuSvg, keySvg } from "../../../img/svg";
 import { _t } from "../../../i18n";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { Button } from "@ui/button";
 import { useLogoutFromChats } from "../mutations";
+import { history } from "../../../store";
+import { useLocation } from "react-router";
 
 interface Props {
   history: History | null;
   onManageChatKey?: () => void;
+  currentUser?: string;
+  communityName?: string;
 }
 
 const ChatsDropdownMenu = (props: Props) => {
   const { mutateAsync: logout } = useLogoutFromChats();
+  const location = useLocation();
+
+  const handleExtendedView = () => {
+    if (props.currentUser) {
+      history?.push(`/chats/@${props.currentUser}`);
+    } else if (props.communityName) {
+      history?.push(`/chats/${props.communityName}`);
+    } else {
+      history?.push("/chats");
+    }
+  };
 
   return (
     <Dropdown>
@@ -21,6 +36,16 @@ const ChatsDropdownMenu = (props: Props) => {
           {kebabMenuSvg}
         </Button>
         <DropdownMenu align="right">
+          {!location.pathname.startsWith("/chats") && (
+            <DropdownItemWithIcon
+              icon={extendedView}
+              label={_t("chat.extended-view")}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleExtendedView();
+              }}
+            />
+          )}
           <DropdownItemWithIcon
             label={_t("chat.manage-chat-key")}
             icon={chatKeySvg}
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index aae194bb7d2..4f51c17a7f4 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -59,8 +59,9 @@ export const Chats = ({ match, history }: Props) => {
   );
   const isShowManageKey = useMemo(() => isReady && revealPrivateKey, [isReady, revealPrivateKey]);
   const isShowChatRoom = useMemo(
-    () => isReady && (!!receiverPubKey || isChannel) && !revealPrivateKey,
-    [isReady, receiverPubKey, revealPrivateKey, isChannel]
+    () =>
+      isReady && (!!receiverPubKey || isChannel) && !revealPrivateKey && !!match.params.username,
+    [isReady, receiverPubKey, revealPrivateKey, isChannel, match]
   );
   const isShowDefaultScreen = useMemo(
     () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey && !match.params.username,
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 053126a16dd..000e1060d79 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1848,11 +1848,11 @@
     "join-chat": "Join chat",
     "back": "Back",
     "no-chat": "No conversation found",
-    "start-chat": "Start chat",
+    "start-chat": "Start chatting",
     "not-joined": "This user hasn't joined the chat yet",
     "subscribers": "Subscribers",
     "invite": "Invite",
-    "send-invite": "Send invitation",
+    "send-invite": "Send an invite",
     "leave:": "Leave",
     "refresh": "Refresh",
     "message-warning": "You cannot send messages in this group.",
@@ -1894,7 +1894,7 @@
     "block-author": "Block author",
     "unblock-author": "Unblock author",
     "create-an-account": "Create chat account",
-    "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others. Need help? We're here for you. Happy chatting!",
+    "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others privately.",
     "create-pin-description": "Please, set PIN for getting access to your chats from any device",
     "logout": "Logout",
     "specify-invitation-message": "This invitation message will be sent as comment to latest user post",
@@ -1902,14 +1902,15 @@
     "no-posts-for-invite": "Unfortunately, User hasn't posts.",
     "warn-key-saving": "Save the Ecency key to access your messages. Keep it secure for uninterrupted service. Thank you!",
     "view-and-save": "Show keys and save",
+    "blocked-users-management": "Blocked users management",
     "welcome": {
-      "title": "Welcome to conversations",
-      "description": "Create an account or import chats with private key to start using chats",
+      "title": "Welcome to Chats",
+      "description": "Create or import an account start using Chats",
       "already-joined-title": "We found You've joined to chats already",
       "already-joined-hint": "Please, verify your account and get access by entering PIN",
       "pin-failed": "Invalid PIN. Failed to verify.",
       "oops": "Oops!",
-      "user-not-joined-yet": "You can't send a message. This user or channel isn't joined to chats yet.",
+      "user-not-joined-yet": "You can't send a message. This user or channel hasn't joined to chats yet.",
       "hello": "Hello",
       "start-description": "Search a person or community and start messaging",
       "join-description": "You are not part of this community. Join the community chat now!",

From 4e75b7d43c54b62e3b04573398f9acfe85844ea6 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 29 Nov 2023 23:52:42 +0600
Subject: [PATCH 153/179] Chats: require the PIN when opening credentials
 management

---
 .../chats/components/manage-chat-key.tsx      | 77 ++++++++++++-------
 src/common/i18n/locales/en-US.json            |  3 +-
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index a1fbf412406..4611b843bcd 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { _t } from "../../../i18n";
-import { InputGroupCopyClipboard } from "@ui/input";
+import { CodeInput, InputGroupCopyClipboard } from "@ui/input";
 import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -12,6 +12,9 @@ export default function ManageChatKey() {
   const { activeUser } = useMappedStore();
 
   const qrImgRef = useRef<HTMLImageElement | null>(null);
+
+  const [isUnlocked, setIsUnlocked] = useState(false);
+  const [validationPin, setValidationPin] = useState("");
   const [isQrShow, setIsQrShow] = useState(false);
 
   const { publicKey, privateKey, iv } = useKeysQuery();
@@ -29,6 +32,12 @@ export default function ManageChatKey() {
     [publicKey, privateKey]
   );
 
+  useEffect(() => {
+    if (validationPin === pin) {
+      setIsUnlocked(true);
+    }
+  }, [validationPin, pin]);
+
   useEffect(() => {
     if (ecencyKey) {
       compileQR();
@@ -44,32 +53,46 @@ export default function ManageChatKey() {
 
   return (
     <div className="flex gap-4 flex-col w-full">
-      <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
-      <div className="text-sm">PIN</div>
-      <InputGroupCopyClipboard value={pin ?? ""} />
-      <div className="text-sm mt-4">Ecency key</div>
-      <InputGroupCopyClipboard value={ecencyKey ?? ""} />
-      <img
-        ref={qrImgRef}
-        className={classNameObject({
-          "self-center border rounded-xl border-[--border-color]": true,
-          hidden: !isQrShow,
-          block: isQrShow
-        })}
-      />
-      <Button
-        className="mx-auto"
-        onClick={() => {
-          const blob = new Blob([ecencyKey], { type: "text/plain" });
-          const a = document.createElement("a");
-          a.href = window.URL.createObjectURL(new File([blob], "ecency-key.txt"));
-          a.download = "ecency-key.txt";
-          a.click();
-          document.removeChild(a);
-        }}
-      >
-        {_t("g.download")}
-      </Button>
+      {isUnlocked ? (
+        <>
+          <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
+          <div className="text-sm">PIN</div>
+          <InputGroupCopyClipboard value={pin ?? ""} />
+          <div className="text-sm mt-4">Ecency key</div>
+          <InputGroupCopyClipboard value={ecencyKey ?? ""} />
+          <img
+            ref={qrImgRef}
+            className={classNameObject({
+              "self-center border rounded-xl border-[--border-color]": true,
+              hidden: !isQrShow,
+              block: isQrShow
+            })}
+          />
+          <Button
+            className="mx-auto"
+            onClick={() => {
+              const blob = new Blob([ecencyKey], { type: "text/plain" });
+              const a = document.createElement("a");
+              a.href = window.URL.createObjectURL(new File([blob], "ecency-key.txt"));
+              a.download = "ecency-key.txt";
+              a.click();
+              document.removeChild(a);
+            }}
+          >
+            {_t("g.download")}
+          </Button>
+        </>
+      ) : (
+        <>
+          <div className="text-center text-gray-600 dark:text-gray-400">
+            {_t("chat.unlock-the-section")}
+          </div>
+          <CodeInput value={validationPin} setValue={setValidationPin} codeSize={8} />
+          {validationPin !== pin && validationPin.length === pin?.length && (
+            <div className="text-red text-sm">{_t("chat.welcome.pin-failed")}</div>
+          )}
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 000e1060d79..0991c937920 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1870,7 +1870,7 @@
     "error-updating-community": "Error occurred while updating community",
     "leave": "Leave",
     "edit-roles": "Edit Roles",
-    "manage-chat-key": "Manage chat key",
+    "manage-chat-key": "Credentials info",
     "block": "Block",
     "communities": "Communities",
     "dms": "DMs",
@@ -1903,6 +1903,7 @@
     "warn-key-saving": "Save the Ecency key to access your messages. Keep it secure for uninterrupted service. Thank you!",
     "view-and-save": "Show keys and save",
     "blocked-users-management": "Blocked users management",
+    "unlock-the-section": "Please, enter your PIN to see your credentials information",
     "welcome": {
       "title": "Welcome to Chats",
       "description": "Create or import an account start using Chats",

From 21ec09c7eb94b055de4a1f1c20ba641cba1a62f1 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 00:27:53 +0600
Subject: [PATCH 154/179] Chats: autofocus to input after messaging sending

---
 .../features/chats/components/chat-input.tsx  | 10 +++++--
 .../features/ui/input/form-controls/index.tsx | 27 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 75775c6c9ad..71ef6557801 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -29,6 +29,7 @@ interface Props {
 export default function ChatInput({ currentChannel, currentUser }: Props) {
   useChannelsQuery();
 
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
   const gifPickerRef = useRef<HTMLDivElement | null>(null);
@@ -104,10 +105,14 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
       />
 
       <Form
-        onSubmit={(e: React.FormEvent) => {
+        onSubmit={(e) => {
           e.preventDefault();
           e.stopPropagation();
-          sendMessage(message);
+          sendMessage(message).then(() => {
+            // Re-focus to input because when DOM changes and input position changes then
+            //  focus is lost
+            setTimeout(() => inputRef.current?.focus(), 1);
+          });
         }}
         className="w-full flex items-center gap-2 p-2"
       >
@@ -129,6 +134,7 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
           </DropdownMenu>
         </Dropdown>
         <FormControl
+          ref={inputRef}
           value={message}
           autoFocus={true}
           onChange={(e) => {
diff --git a/src/common/features/ui/input/form-controls/index.tsx b/src/common/features/ui/input/form-controls/index.tsx
index efae39dc3b6..9e6f0206d86 100644
--- a/src/common/features/ui/input/form-controls/index.tsx
+++ b/src/common/features/ui/input/form-controls/index.tsx
@@ -1,26 +1,31 @@
-import React, { MutableRefObject } from "react";
+import React, { forwardRef } from "react";
 import { Textarea, TextareaProps } from "./textarea";
 import { Select, SelectProps } from "./select";
 import { Input, InputProps } from "./input";
 import { Checkbox, CheckboxProps } from "./checkbox";
 import { Toggle } from "@ui/input/form-controls/toggle";
 
-type Props = (InputProps | TextareaProps | SelectProps | CheckboxProps) & {
-  ref?: MutableRefObject<any>;
-};
+type Props = InputProps | TextareaProps | SelectProps | CheckboxProps;
 
-export function FormControl(props: Props) {
+export const FormControl = forwardRef<any, Props>((props, ref) => {
   switch (props.type) {
     case "textarea":
-      return <Textarea {...props} />;
+      return <Textarea {...props} ref={ref} />;
     case "select":
-      return <Select {...props}>{props.children}</Select>;
+      return (
+        <Select {...props} ref={ref}>
+          {props.children}
+        </Select>
+      );
     case "checkbox":
       if (props.isToggle) {
-        return <Toggle {...props} />;
+        return <Toggle {...props} ref={ref} />;
       }
-      return <Checkbox {...props} />;
+      return <Checkbox {...props} ref={ref} />;
     default:
-      return <Input {...props} />;
+      return <Input {...props} ref={ref} />;
   }
-}
+}) as React.FC<Props>;
+
+// https://github.com/storybookjs/storybook/issues/21898
+// This actually relates of our version of React. Need to upgrade the package

From 2a1c2f54bf75ae81882635027583bdca2c7001f7 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 00:42:49 +0600
Subject: [PATCH 155/179] Chats: made keys query values null instead of
 undefined

---
 .../features/chats/queries/keys-query.ts      | 22 ++++++++++++++-----
 .../chats/utils/get-user-chat-private-key.ts  |  6 ++---
 .../chats/utils/get-user-chat-public-key.ts   |  4 ++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
index 80d80ce2323..993b8a8794c 100644
--- a/src/common/features/chats/queries/keys-query.ts
+++ b/src/common/features/chats/queries/keys-query.ts
@@ -16,25 +16,37 @@ export function useKeysQuery() {
       {
         queryKey: [ChatQueries.PUBLIC_KEY, activeUser?.username],
         queryFn: async () => getUserChatPublicKey(data!!),
-        enabled: !!data
+        enabled: !!data,
+        initialData: null
       },
       {
         queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
         queryFn: async () => {
           const pin = localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username);
+
+          if (!pin) {
+            return null;
+          }
+
           const { key, iv } = getUserChatPrivateKey(data!!);
           if (key && pin && iv) {
-            return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
+            try {
+              return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
+            } catch (e) {
+              return null;
+            }
           }
 
-          return undefined;
+          return null;
         },
-        enabled: !!data
+        enabled: !!data,
+        initialData: null
       },
       {
         queryKey: [ChatQueries.ACCOUNT_IV, activeUser?.username],
         queryFn: async () => getUserChatPrivateKey(data!!).iv,
-        enabled: !!data
+        enabled: !!data,
+        initialData: null
       }
     ]
   });
diff --git a/src/common/features/chats/utils/get-user-chat-private-key.ts b/src/common/features/chats/utils/get-user-chat-private-key.ts
index 9ffbd7583fd..efc7092ffb7 100644
--- a/src/common/features/chats/utils/get-user-chat-private-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-private-key.ts
@@ -1,6 +1,6 @@
 import { FullAccount } from "../../../store/accounts/types";
 
-export const getUserChatPrivateKey = (account: FullAccount): Record<string, string | undefined> => {
+export const getUserChatPrivateKey = (account: FullAccount) => {
   if (account.posting_json_metadata) {
     const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
@@ -8,8 +8,8 @@ export const getUserChatPrivateKey = (account: FullAccount): Record<string, stri
       const {
         echat: { key, iv }
       } = profile || { echat: {} };
-      return { key, iv };
+      return { key: key ?? null, iv: iv ?? null };
     }
   }
-  return {};
+  return { key: null, iv: null };
 };
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
index a8ae1ea0581..a35bf55c7e1 100644
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ b/src/common/features/chats/utils/get-user-chat-public-key.ts
@@ -1,6 +1,6 @@
 import { FullAccount } from "../../../store/accounts/types";
 
-export const getUserChatPublicKey = (account: FullAccount): string | undefined => {
+export const getUserChatPublicKey = (account: FullAccount): string | null => {
   if (account.posting_json_metadata) {
     const { posting_json_metadata } = account;
     const profile = JSON.parse(posting_json_metadata).profile;
@@ -11,5 +11,5 @@ export const getUserChatPublicKey = (account: FullAccount): string | undefined =
       return pubKey;
     }
   }
-  return undefined;
+  return null;
 };

From 1bdfd4db7f51356947276ba8a8e6a5efbf322b09 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 01:05:15 +0600
Subject: [PATCH 156/179] Chats: fixed leakage of messages while switching an
 account

---
 .../features/chats/hooks/use-active-user-switching.ts       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/common/features/chats/hooks/use-active-user-switching.ts b/src/common/features/chats/hooks/use-active-user-switching.ts
index 0aeb9f3a064..794db491e59 100644
--- a/src/common/features/chats/hooks/use-active-user-switching.ts
+++ b/src/common/features/chats/hooks/use-active-user-switching.ts
@@ -13,10 +13,16 @@ export function useActiveUserSwitching() {
 
   useEffect(() => {
     if (activeUser?.username !== previousActiveUser?.username) {
+      queryClient.setQueryData([NostrQueries.PUBLIC_MESSAGES], []);
+      queryClient.setQueryData([NostrQueries.DIRECT_MESSAGES], []);
+      queryClient.setQueryData([ChatQueries.LAST_MESSAGES], []);
+      queryClient.setQueryData([ChatQueries.LEFT_CHANNELS], []);
+
       queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
       queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
       queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
       queryClient.invalidateQueries([ChatQueries.LEFT_CHANNELS]);
+      queryClient.invalidateQueries([ChatQueries.MESSAGES]);
     }
   }, [activeUser, previousActiveUser]);
 }

From f66a8f8d0d407bd7236220e51139aed5a3023903 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 20:58:01 +0600
Subject: [PATCH 157/179] Chats: fixed last messages in a list

---
 .../chat-direct-contact-or-channel-item.tsx   | 12 +++--
 .../chat-popup-contacts-and-channels.tsx      |  5 +-
 .../chat-popup/chat-popup-messages-list.tsx   |  2 +-
 .../chats/components/chat-popup/index.scss    |  7 ++-
 .../chats/components/chat-popup/index.tsx     |  2 +-
 .../chats-sidebar/chat-sidebar-channel.tsx    | 17 +++----
 .../chat-sidebar-direct-contact.tsx           | 15 +++---
 .../chats/hooks/use-active-user-switching.ts  |  2 -
 .../features/chats/mutations/send-message.ts  |  1 -
 src/common/features/chats/queries/index.ts    |  1 -
 .../chats/queries/last-messages-query.ts      | 47 -------------------
 .../chats/queries/listen-messages-query.ts    |  1 -
 .../features/chats/queries/messages-query.ts  |  2 +-
 src/common/features/chats/queries/queries.ts  |  1 -
 14 files changed, 35 insertions(+), 80 deletions(-)
 delete mode 100644 src/common/features/chats/queries/last-messages-query.ts

diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index 8936fb03ee6..d8d1bfd0a40 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -1,14 +1,20 @@
 import { Link } from "react-router-dom";
-import React from "react";
+import React, { useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
+import { useMessagesQuery } from "../../queries";
 
 interface Props {
   username: string;
-  lastMessage?: string;
   userClicked: (username: string) => void;
 }
 
-export function ChatDirectContactOrChannelItem({ username, userClicked, lastMessage }: Props) {
+export function ChatDirectContactOrChannelItem({ username, userClicked }: Props) {
+  const { data: messages } = useMessagesQuery(username);
+  const lastMessage = useMemo(
+    () => (messages.length > 0 ? messages[messages.length - 1].content : undefined),
+    [messages]
+  );
+
   return (
     <div
       className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-300"
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 0bebe1fdaed..1a85d7335ba 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -5,7 +5,7 @@ import { ChatsWelcome } from "../chats-welcome";
 import { Button } from "@ui/button";
 import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
-import { useChannelsQuery, useDirectContactsQuery, useLastMessagesQuery } from "../../queries";
+import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
 import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { useKeysQuery } from "../../queries/keys-query";
 
@@ -24,7 +24,6 @@ export function ChatPopupContactsAndChannels({
 
   const { privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
-  const { data: directContactsLastMessages } = useLastMessagesQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
@@ -47,7 +46,6 @@ export function ChatPopupContactsAndChannels({
                 <ChatDirectContactOrChannelItem
                   key={channel.id}
                   username={channel.communityName!!}
-                  lastMessage={directContactsLastMessages[channel.name]?.content}
                   userClicked={() => communityClicked(channel.communityName!)}
                 />
               ))}
@@ -66,7 +64,6 @@ export function ChatPopupContactsAndChannels({
                 userClicked(v);
               }}
               key={user.pubkey}
-              lastMessage={directContactsLastMessages[user.name]?.content}
             />
           ))}
         </>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 10c3ff8a7bc..80d0c5d3f82 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -21,7 +21,7 @@ export function ChatPopupMessagesList({ username }: Props) {
   );
 
   return (
-    <div className="chats">
+    <div className="chats h-full">
       {" "}
       <Link to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${username}`}>
         <ChatsProfileBox communityName={username} currentUser={username} />
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
index 62ea031fcf0..e2b85b113cd 100644
--- a/src/common/features/chats/components/chat-popup/index.scss
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -33,10 +33,13 @@
 
     &.current-user {
       padding-bottom: 10px;
-      height: 412px;
       margin-bottom: 8px;
       @apply border-b;
 
+      @include media-breakpoint-up(md) {
+        height: 412px;
+      }
+
       @include themify(day) {
         @apply border-light-300;
       }
@@ -167,7 +170,7 @@
     right: 0;
     width: 100vw;
     display: grid;
-    grid-template-rows: repeat(100, 1fr);
+    grid-template-rows: min-content 1fr min-content;
     grid-template-columns: repeat(1, 1fr);
 
     .chat-header {
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 8ac08d26dc0..a67f3fc11ca 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -198,7 +198,7 @@ export const ChatPopUp = () => {
           />
           {(isJoinChatLoading || isChannelsLoading || isFetchingMore) && <LinearProgress />}
           <div
-            className={`chat-body ${
+            className={`chat-body h-full ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
             } ${
               !hasUserJoinedChat
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index ea495f5af93..edf20a597f0 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { useLastMessagesQuery } from "../../queries";
+import { useMessagesQuery } from "../../queries";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { getRelativeDate } from "../../utils";
 import { ChatContext } from "../../chat-context-provider";
@@ -13,15 +13,16 @@ interface Props {
 }
 
 export function ChatSidebarChannel({ channel, username }: Props) {
-  const { revealPrivateKey, setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
-  const { data: lastMessages } = useLastMessagesQuery();
+  const { data: messages } = useMessagesQuery(channel.communityName);
 
-  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
-  const lastMessageDate = useMemo(
-    () => getRelativeDate(lastMessages[channel.name]?.created),
-    [lastMessages]
+  const lastMessage = useMemo(
+    () => (messages.length > 0 ? messages[messages.length - 1] : undefined),
+    [messages]
   );
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
+  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
   return (
     <Link
@@ -43,7 +44,7 @@ export function ChatSidebarChannel({ channel, username }: Props) {
           <div className="font-semibold truncate dark:text-white">{channel.name}</div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
-        <div className="text-sm text-gray-600 truncate">{lastMessages[channel.name]?.content}</div>
+        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
       </div>
     </Link>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index f07592a5583..e126dea6cd0 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useMemo } from "react";
 import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { useLastMessagesQuery } from "../../queries";
+import { useMessagesQuery } from "../../queries";
 import { DirectContact } from "../../nostr";
 
 interface Props {
@@ -15,12 +15,13 @@ interface Props {
 export function ChatSidebarDirectContact({ contact, username }: Props) {
   const { setReceiverPubKey, revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
-  const { data: lastMessages } = useLastMessagesQuery();
-  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
-  const lastMessageDate = useMemo(
-    () => getRelativeDate(lastMessages[contact.name]?.created),
-    [lastMessages]
+  const { data: messages } = useMessagesQuery(contact.name);
+  const lastMessage = useMemo(
+    () => (messages.length > 0 ? messages[messages.length - 1] : undefined),
+    [messages]
   );
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
+  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
   return (
     <Link
@@ -43,7 +44,7 @@ export function ChatSidebarDirectContact({ contact, username }: Props) {
           <div className="font-semibold truncate dark:text-white">{contact.name}</div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
-        <div className="text-sm text-gray-600 truncate">{lastMessages[contact.name]?.content}</div>
+        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
       </div>
     </Link>
   );
diff --git a/src/common/features/chats/hooks/use-active-user-switching.ts b/src/common/features/chats/hooks/use-active-user-switching.ts
index 794db491e59..5a9693540db 100644
--- a/src/common/features/chats/hooks/use-active-user-switching.ts
+++ b/src/common/features/chats/hooks/use-active-user-switching.ts
@@ -15,12 +15,10 @@ export function useActiveUserSwitching() {
     if (activeUser?.username !== previousActiveUser?.username) {
       queryClient.setQueryData([NostrQueries.PUBLIC_MESSAGES], []);
       queryClient.setQueryData([NostrQueries.DIRECT_MESSAGES], []);
-      queryClient.setQueryData([ChatQueries.LAST_MESSAGES], []);
       queryClient.setQueryData([ChatQueries.LEFT_CHANNELS], []);
 
       queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
       queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
-      queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
       queryClient.invalidateQueries([ChatQueries.LEFT_CHANNELS]);
       queryClient.invalidateQueries([ChatQueries.MESSAGES]);
     }
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index 020df6338c7..f10270d2ab3 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -62,7 +62,6 @@ export function useSendMessage(
           [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
           [...messages, message]
         );
-
         onSuccess?.();
       }
     }
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 83a9aa74aaa..4c975d3f740 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -5,4 +5,3 @@ export * from "./messages-query";
 export * from "./channels-query";
 export * from "./nostr-joined-community-team-query";
 export * from "./community-channel-query";
-export * from "./last-messages-query";
diff --git a/src/common/features/chats/queries/last-messages-query.ts b/src/common/features/chats/queries/last-messages-query.ts
deleted file mode 100644
index 4bf9f2a35d5..00000000000
--- a/src/common/features/chats/queries/last-messages-query.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChatQueries } from "./queries";
-import { getDirectLastMessage } from "../utils";
-import { useDirectContactsQuery } from "./direct-contacts-query";
-import { useChannelsQuery } from "./channels-query";
-import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
-import { useKeysQuery } from "./keys-query";
-import { Message } from "../nostr";
-
-export function useLastMessagesQuery() {
-  const queryClient = useQueryClient();
-
-  const { publicKey, privateKey } = useKeysQuery();
-  const { data: contacts } = useDirectContactsQuery();
-  const { data: channels } = useChannelsQuery();
-  const { data: initialDirectMessages } = useDirectMessagesQuery(
-    contacts ?? [],
-    publicKey!!,
-    privateKey!!
-  );
-  const { data: initialPublicMessages } = usePublicMessagesQuery(channels ?? []);
-
-  const getContactsLastMessages = () =>
-    (contacts ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
-      const currentMessages = queryClient
-        .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
-        ?.filter((i) => ("peer" in i ? i.peer === current?.pubkey : i.root === current?.pubkey));
-      return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
-    }, {});
-
-  const getChannelsLastMessages = () =>
-    (channels ?? []).reduce<Record<string, Message | undefined>>((acc, current) => {
-      const currentMessages = queryClient
-        .getQueryData<Message[]>([NostrQueries.PUBLIC_MESSAGES])
-        ?.filter((i) => i.root === current.id);
-      return { ...acc, [current.name]: getDirectLastMessage(currentMessages ?? []) };
-    }, {});
-
-  return useQuery<Record<string, Message | undefined>>(
-    [ChatQueries.LAST_MESSAGES],
-    async () => ({ ...getContactsLastMessages(), ...getChannelsLastMessages() }),
-    {
-      initialData: {},
-      enabled: !!initialDirectMessages?.length || !!initialPublicMessages?.length
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/listen-messages-query.ts b/src/common/features/chats/queries/listen-messages-query.ts
index 504e9e38bae..7aa6dc8bf5f 100644
--- a/src/common/features/chats/queries/listen-messages-query.ts
+++ b/src/common/features/chats/queries/listen-messages-query.ts
@@ -22,7 +22,6 @@ export function useListenMessagesQuery() {
   useInterval(async () => {
     await queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
     await queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
-    await queryClient.invalidateQueries([ChatQueries.LAST_MESSAGES]);
 
     setTimeout(
       () => peers.forEach((peer) => queryClient.invalidateQueries([ChatQueries.MESSAGES, peer])),
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 8fb4c275d96..0aef622188d 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -60,7 +60,7 @@ export function useMessagesQuery(username?: string) {
         }
         return messages.sort((a, b) => a.created - b.created);
       },
-      refetchInterval: 10000
+      refetchInterval: 3000
     }
   );
 }
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
index 62a4a9d9b2d..c3a06276d2c 100644
--- a/src/common/features/chats/queries/queries.ts
+++ b/src/common/features/chats/queries/queries.ts
@@ -4,7 +4,6 @@ export enum ChatQueries {
   PRIVATE_KEY = "chats/private-key",
   ACCOUNT_IV = "chats/account-iv",
   DIRECT_CONTACTS = "chats/direct-contacts",
-  LAST_MESSAGES = "chats/last-messages",
   MESSAGES = "chats/messages",
   CHANNELS = "chats/channels",
   LEFT_CHANNELS = "chats/left-channels",

From 3a6ae33dd8f6cc8573c3fb4297ac3e337a66e57b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 21:42:06 +0600
Subject: [PATCH 158/179] Chats: added scrolling to the end of messages

---
 .../components/chat-channel-messages.tsx      | 35 +++++----------
 .../chats/components/chat-message-item.tsx    |  7 ++-
 .../chats-direct-messages/index.tsx           | 44 +++++--------------
 3 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 02b50baadae..62a27e15535 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Zoom } from "medium-zoom";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import usePrevious from "react-use/lib/usePrevious";
 import { _t } from "../../../i18n";
-import { Theme } from "../../../store/global/types";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../utils";
 import { ChatMessageItem } from "./chat-message-item";
 import { useKeysQuery } from "../queries/keys-query";
@@ -21,8 +18,6 @@ interface Props {
   scrollToBottom?: () => void;
 }
 
-let zoom: Zoom | null = null;
-
 export function ChatsChannelMessages({
   publicMessages,
   isScrollToBottom,
@@ -30,9 +25,7 @@ export function ChatsChannelMessages({
   currentChannel,
   scrollToBottom
 }: Props) {
-  const { global, activeUser } = useMappedStore();
-
-  let prevGlobal = usePrevious(global);
+  const { activeUser } = useMappedStore();
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
 
@@ -58,27 +51,12 @@ export function ChatsChannelMessages({
     [publicMessages, currentChannel]
   );
 
-  useEffect(() => {
-    if (prevGlobal?.theme !== global.theme) {
-      setBackground();
-    }
-    prevGlobal = global;
-  }, [global.theme, activeUser]);
-
   useEffect(() => {
     if (!isScrollToBottom && messages.length !== 0 && !isScrolled) {
       scrollToBottom && scrollToBottom();
     }
   }, [messages, isScrollToBottom, channelMessagesRef]);
 
-  const setBackground = () => {
-    if (global.theme === Theme.day) {
-      zoom?.update({ background: "#ffffff" });
-    } else {
-      zoom?.update({ background: "#131111" });
-    }
-  };
-
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -108,6 +86,17 @@ export function ChatsChannelMessages({
                     setCurrentInteractingMessageId(message.id);
                   }
                 }}
+                onAppear={() =>
+                  setTimeout(
+                    () =>
+                      publicMessages?.length - 1 === i
+                        ? document
+                            .querySelector(`[data-message-id="${message.id}"]`)
+                            ?.scrollIntoView({ behavior: "smooth" })
+                        : {},
+                    100
+                  )
+                }
               />
               <DropdownMenu
                 className="top-[70%]"
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 82344c15cb4..55662a7c10d 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -10,6 +10,7 @@ import { _t } from "../../../i18n";
 import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
 import { Channel, Message } from "../nostr";
 import { useKeysQuery } from "../queries/keys-query";
+import useMount from "react-use/lib/useMount";
 
 interface Props {
   type: "sender" | "receiver";
@@ -17,6 +18,7 @@ interface Props {
   isSameUser: boolean;
   currentChannel?: Channel;
   onContextMenu?: () => void;
+  onAppear?: () => void;
 }
 
 // TODO: Add resend
@@ -25,7 +27,8 @@ export function ChatMessageItem({
   message,
   isSameUser,
   currentChannel,
-  onContextMenu
+  onContextMenu,
+  onAppear
 }: Props) {
   const { global } = useMappedStore();
   const { publicKey } = useKeysQuery();
@@ -42,6 +45,8 @@ export function ChatMessageItem({
     [message]
   );
 
+  useMount(() => onAppear?.());
+
   return (
     <div key={message.id} data-message-id={message.id}>
       <div
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 8dba9a3d346..fff1376be17 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,9 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import usePrevious from "react-use/lib/usePrevious";
-import mediumZoom, { Zoom } from "medium-zoom";
 import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
-import { Theme } from "../../../../store/global/types";
-import { useMappedStore } from "../../../../store/use-mapped-store";
 import { ChatContext } from "../../chat-context-provider";
 import { _t } from "../../../../i18n";
 import "./index.scss";
@@ -23,18 +19,15 @@ interface Props {
   scrollToBottom?: () => void;
 }
 
-let zoom: Zoom | null = null;
 export default function ChatsDirectMessages(props: Props) {
   const { directMessages, isScrolled, isScrollToBottom, scrollToBottom } = props;
 
-  const { global, activeUser } = useMappedStore();
   const { receiverPubKey } = useContext(ChatContext);
 
   const [initiatedInviting, setInitiatedInviting] = useState(false);
   const [invitationText, setInvitationText] = useState(
     "Hi! Let's start messaging privately. Register an account on [https://ecency.com/chats](https://ecency.com/chats)"
   );
-  let prevGlobal = usePrevious(global);
 
   const { publicKey } = useKeysQuery();
 
@@ -45,35 +38,11 @@ export default function ChatsDirectMessages(props: Props) {
   } = useInviteViaPostComment(props.currentUser);
 
   useEffect(() => {
-    if (prevGlobal?.theme !== global.theme) {
-      setBackground();
-    }
-    prevGlobal = global;
-  }, [global.theme, activeUser]);
-
-  useEffect(() => {
-    if (directMessages && directMessages.length !== 0) {
-      zoomInitializer();
-    }
     if (!isScrollToBottom && directMessages && directMessages.length !== 0 && !isScrolled) {
-      scrollToBottom && scrollToBottom();
+      scrollToBottom?.();
     }
   }, [directMessages, isScrollToBottom, scrollToBottom, receiverPubKey]);
 
-  const zoomInitializer = () => {
-    const elements: HTMLElement[] = [...document.querySelectorAll<HTMLElement>(".chat-image img")];
-    zoom = mediumZoom(elements);
-    setBackground();
-  };
-
-  const setBackground = () => {
-    if (global.theme === Theme.day) {
-      zoom?.update({ background: "#ffffff" });
-    } else {
-      zoom?.update({ background: "#131111" });
-    }
-  };
-
   return (
     <>
       <div className="direct-messages">
@@ -94,6 +63,17 @@ export default function ChatsDirectMessages(props: Props) {
                     type={msg.creator !== publicKey ? "receiver" : "sender"}
                     message={msg}
                     isSameUser={checkContiguousMessage(msg, i, directMessages)}
+                    onAppear={() =>
+                      setTimeout(
+                        () =>
+                          directMessages?.length - 1 === i
+                            ? document
+                                .querySelector(`[data-message-id="${msg.id}"]`)
+                                ?.scrollIntoView({ behavior: "smooth" })
+                            : {},
+                        100
+                      )
+                    }
                   />
                 </React.Fragment>
               );

From 9255174a7dd2fc484e28188806ee7fce3640a0b4 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 21:53:43 +0600
Subject: [PATCH 159/179] Chats: added single emoji view

---
 .../chats/components/chat-message-item.tsx         | 14 ++++++++------
 src/common/features/chats/utils/index.ts           |  1 +
 src/common/features/chats/utils/is-single-emoji.ts |  5 +++++
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 src/common/features/chats/utils/is-single-emoji.ts

diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 55662a7c10d..e1ff8b293b3 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,6 +1,6 @@
 import Tooltip from "../../../components/tooltip";
 import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
-import { formatMessageTime, isMessageGif, isMessageImage } from "../utils";
+import { formatMessageTime, isMessageGif, isMessageImage, isSingleEmoji } from "../utils";
 import { Spinner } from "@ui/spinner";
 import React, { useMemo } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
@@ -37,6 +37,7 @@ export function ChatMessageItem({
   const isSending = useMemo(() => message.sent === 0, [message]);
   const isGif = useMemo(() => isMessageGif(message.content), [message]);
   const isImage = useMemo(() => isMessageImage(message.content), [message]);
+  const isEmoji = useMemo(() => isSingleEmoji(message.content), [message]);
   const renderedPreview = useMemo(
     () =>
       renderPostBody(message.content, false, global.canUseWebp)
@@ -93,11 +94,12 @@ export function ChatMessageItem({
         >
           <div
             className={classNameObject({
-              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage,
-              "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender",
-              "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver",
-              "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage,
-              "same-user-message": isSameUser
+              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage && !isEmoji,
+              "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender" && !isEmoji,
+              "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver" && !isEmoji,
+              "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage || isEmoji,
+              "same-user-message": isSameUser,
+              "text-[4rem]": isEmoji
             })}
           >
             <div
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index 98074c71b6b..de8e0863feb 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -14,3 +14,4 @@ export * from "./format-message-date-and-day";
 export * from "./get-relative-date";
 export * from "./encryption-tools";
 export * from "./get-user-chat-private-key";
+export * from "./is-single-emoji";
diff --git a/src/common/features/chats/utils/is-single-emoji.ts b/src/common/features/chats/utils/is-single-emoji.ts
new file mode 100644
index 00000000000..edfcaa9e6e3
--- /dev/null
+++ b/src/common/features/chats/utils/is-single-emoji.ts
@@ -0,0 +1,5 @@
+export function isSingleEmoji(input: string) {
+  const emojiRegex = /^\p{Emoji}$/u; // Unicode property escapes for emoji
+
+  return emojiRegex.test(input);
+}

From 8f8feea01b257c93b1acf574b05c0420179db311 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 23:01:08 +0600
Subject: [PATCH 160/179] Chats: added re-sending of failed messages

---
 src/common/components/emoji-picker/index.tsx  | 10 ++-
 .../components/chat-channel-messages.tsx      |  2 +-
 .../features/chats/components/chat-input.tsx  |  9 ++-
 .../chats/components/chat-message-item.tsx    | 38 +++++-----
 .../chats-direct-messages/index.tsx           |  3 +-
 src/common/features/chats/mutations/index.ts  |  1 +
 .../chats/mutations/resend-message.ts         | 73 +++++++++++++++++++
 .../features/chats/mutations/send-message.ts  | 19 ++++-
 .../nostr/core/nostr-publish-mutation.ts      | 10 ++-
 .../features/chats/nostr/errors/index.ts      |  1 +
 .../chats/nostr/errors/publish-nostr-error.ts | 10 +++
 .../features/chats/queries/messages-query.ts  | 27 ++++---
 src/common/features/chats/screens/_chats.scss |  4 +-
 src/common/img/svg.tsx                        |  7 +-
 14 files changed, 173 insertions(+), 41 deletions(-)
 create mode 100644 src/common/features/chats/mutations/resend-message.ts
 create mode 100644 src/common/features/chats/nostr/errors/index.ts
 create mode 100644 src/common/features/chats/nostr/errors/publish-nostr-error.ts

diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index cbba7cf3f0f..29891566783 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -11,6 +11,7 @@ interface Props {
   anchor: Element | null;
   onSelect: (e: string) => void;
   position?: "top" | "bottom";
+  isDisabled?: boolean;
 }
 
 /**
@@ -21,7 +22,7 @@ interface Props {
  * @param position
  * @return The rendered emoji picker dialog.
  */
-export function EmojiPicker({ anchor, onSelect, position }: Props) {
+export function EmojiPicker({ anchor, onSelect, position, isDisabled }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { global } = useMappedStore();
@@ -62,7 +63,12 @@ export function EmojiPicker({ anchor, onSelect, position }: Props) {
     >
       <Picker
         dynamicWidth={true}
-        onEmojiSelect={(e: { native: string }) => onSelect(e.native)}
+        onEmojiSelect={(e: { native: string }) => {
+          if (isDisabled) {
+            return;
+          }
+          onSelect(e.native);
+        }}
         previewPosition="none"
         set="apple"
         theme={global.theme === "day" ? "light" : "dark"}
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 62a27e15535..15a0fcb6868 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -92,7 +92,7 @@ export function ChatsChannelMessages({
                       publicMessages?.length - 1 === i
                         ? document
                             .querySelector(`[data-message-id="${message.id}"]`)
-                            ?.scrollIntoView({ behavior: "smooth" })
+                            ?.scrollIntoView()
                         : {},
                     100
                   )
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 71ef6557801..4ea50a6db35 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -118,7 +118,13 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
       >
         <Dropdown>
           <DropdownToggle>
-            <Button className="mr-2" noPadding={true} icon={attachFileSvg} appearance="gray-link" />
+            <Button
+              disabled={isDisabled || isSendMessageLoading}
+              className="mr-2"
+              noPadding={true}
+              icon={attachFileSvg}
+              appearance="gray-link"
+            />
           </DropdownToggle>
           <DropdownMenu align="top">
             <DropdownItemWithIcon
@@ -156,6 +162,7 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
               icon={emoticonHappyOutlineSvg}
             />
             <EmojiPicker
+              isDisabled={isDisabled || isSendMessageLoading}
               position="top"
               anchor={emojiButtonRef.current}
               onSelect={(e: string) => setMessage((prevMessage) => prevMessage + e)}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index e1ff8b293b3..86783868a71 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,5 +1,3 @@
-import Tooltip from "../../../components/tooltip";
-import { failedMessageSvg, resendMessageSvg } from "../../../img/svg";
 import { formatMessageTime, isMessageGif, isMessageImage, isSingleEmoji } from "../utils";
 import { Spinner } from "@ui/spinner";
 import React, { useMemo } from "react";
@@ -11,21 +9,25 @@ import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-ext
 import { Channel, Message } from "../nostr";
 import { useKeysQuery } from "../queries/keys-query";
 import useMount from "react-use/lib/useMount";
+import { Button } from "@ui/button";
+import { failedMessageSvg } from "../../../img/svg";
+import { useResendMessage } from "../mutations";
 
 interface Props {
   type: "sender" | "receiver";
   message: Message;
   isSameUser: boolean;
+  currentUser?: string;
   currentChannel?: Channel;
   onContextMenu?: () => void;
   onAppear?: () => void;
 }
 
-// TODO: Add resend
 export function ChatMessageItem({
   type,
   message,
   isSameUser,
+  currentUser,
   currentChannel,
   onContextMenu,
   onAppear
@@ -46,6 +48,8 @@ export function ChatMessageItem({
     [message]
   );
 
+  const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentUser);
+
   useMount(() => onAppear?.());
 
   return (
@@ -72,19 +76,6 @@ export function ChatMessageItem({
             currentChannel={currentChannel}
           />
         )}
-        {message.sent === 2 && (
-          <Tooltip content={_t("g.resend")}>
-            <span
-              className="resend-svg"
-              onClick={() => {
-                // setStep(1);
-                // setResendMessage(message);
-              }}
-            >
-              {resendMessageSvg}
-            </span>
-          </Tooltip>
-        )}
         <div
           className={classNameObject({
             "flex gap-1 flex-col": true,
@@ -114,9 +105,18 @@ export function ChatMessageItem({
           )}
           {message.sent === 0 && <Spinner className="w-3 h-3 mx-2" />}
           {message.sent === 2 && (
-            <Tooltip content={"Failed"}>
-              <span className="failed-svg">{failedMessageSvg}</span>
-            </Tooltip>
+            <div className="flex items-center gap-1">
+              {failedMessageSvg}
+              <Button
+                size="xs"
+                className="text-xs"
+                appearance="link"
+                noPadding={true}
+                onClick={() => resendMessage(message)}
+              >
+                {_t("g.resend")}
+              </Button>
+            </div>
           )}
         </div>
       </div>
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index fff1376be17..378e74712c9 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -60,6 +60,7 @@ export default function ChatsDirectMessages(props: Props) {
                     </div>
                   )}
                   <ChatMessageItem
+                    currentUser={props.currentUser}
                     type={msg.creator !== publicKey ? "receiver" : "sender"}
                     message={msg}
                     isSameUser={checkContiguousMessage(msg, i, directMessages)}
@@ -69,7 +70,7 @@ export default function ChatsDirectMessages(props: Props) {
                           directMessages?.length - 1 === i
                             ? document
                                 .querySelector(`[data-message-id="${msg.id}"]`)
-                                ?.scrollIntoView({ behavior: "smooth" })
+                                ?.scrollIntoView()
                             : {},
                         100
                       )
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 9bca7e0d777..5c539979514 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -13,3 +13,4 @@ export * from "./import-chat-by-keys";
 export * from "./hide-message-in-channel";
 export * from "./logout-from-chats";
 export * from "./invite-via-post-comment";
+export * from "./resend-message";
diff --git a/src/common/features/chats/mutations/resend-message.ts b/src/common/features/chats/mutations/resend-message.ts
new file mode 100644
index 00000000000..dc5f838ed90
--- /dev/null
+++ b/src/common/features/chats/mutations/resend-message.ts
@@ -0,0 +1,73 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useContext } from "react";
+import { ChatContext } from "../chat-context-provider";
+import isCommunity from "../../../helper/is-community";
+import { Channel, Message, useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
+import { ChatQueries, useMessagesQuery } from "../queries";
+import { useKeysQuery } from "../queries/keys-query";
+import { PublishNostrError } from "../nostr/errors";
+import { convertEvent } from "../nostr/utils/event-converter";
+import { Kind } from "../../../../lib/nostr-tools/event";
+
+export function useResendMessage(
+  currentChannel?: Channel,
+  currentUser?: string,
+  onSuccess?: () => void
+) {
+  const queryClient = useQueryClient();
+
+  const { receiverPubKey } = useContext(ChatContext);
+  const { privateKey, publicKey } = useKeysQuery();
+  const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
+
+  const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
+    privateKey!!,
+    receiverPubKey,
+    undefined
+  );
+  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(
+    currentChannel?.id,
+    undefined
+  );
+
+  return useMutation(
+    ["chats/send-message"],
+    async (message: Message) => {
+      if (!currentChannel && isCommunity(currentUser)) {
+        throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
+      }
+
+      if (currentChannel) {
+        return sendPublicMessage({ message: message.content });
+      } else if (currentUser) {
+        return sendDirectMessage(message.content);
+      } else {
+        throw new Error("[Chat][SendMessage] – no receiver");
+      }
+    },
+    {
+      onSuccess: (message) => {
+        message.sent = 0;
+        queryClient.setQueryData(
+          [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
+          [...messages.filter((m) => m.content !== message.content && m.sent !== 2), message]
+        );
+        onSuccess?.();
+      },
+      onError: async (error: PublishNostrError | Error) => {
+        if ("event" in error) {
+          const message = await convertEvent<Kind.EncryptedDirectMessage | Kind.ChannelMessage>(
+            error.event,
+            publicKey!!,
+            privateKey!!
+          )!!;
+          message.sent = 2;
+          queryClient.setQueryData(
+            [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
+            [...messages.filter((m) => m.content !== message.content && m.sent !== 2), message]
+          );
+        }
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
index f10270d2ab3..7b73e4b0b20 100644
--- a/src/common/features/chats/mutations/send-message.ts
+++ b/src/common/features/chats/mutations/send-message.ts
@@ -7,6 +7,9 @@ import { Channel, useNostrSendDirectMessage, useNostrSendPublicMessage } from ".
 import { useAddDirectContact } from "./add-direct-contact";
 import { ChatQueries, useMessagesQuery } from "../queries";
 import { useKeysQuery } from "../queries/keys-query";
+import { PublishNostrError } from "../nostr/errors";
+import { convertEvent } from "../nostr/utils/event-converter";
+import { Kind } from "../../../../lib/nostr-tools/event";
 
 export function useSendMessage(
   currentChannel?: Channel,
@@ -16,7 +19,7 @@ export function useSendMessage(
   const queryClient = useQueryClient();
 
   const { receiverPubKey } = useContext(ChatContext);
-  const { privateKey } = useKeysQuery();
+  const { privateKey, publicKey } = useKeysQuery();
   const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
 
   const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
@@ -63,6 +66,20 @@ export function useSendMessage(
           [...messages, message]
         );
         onSuccess?.();
+      },
+      onError: async (error: PublishNostrError | Error) => {
+        if ("event" in error) {
+          const message = await convertEvent<Kind.EncryptedDirectMessage | Kind.ChannelMessage>(
+            error.event,
+            publicKey!!,
+            privateKey!!
+          )!!;
+          message.sent = 2;
+          queryClient.setQueryData(
+            [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
+            [...messages, message]
+          );
+        }
       }
     }
   );
diff --git a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
index 56f261d2971..b2df1eaae9b 100644
--- a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
+++ b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
@@ -10,6 +10,7 @@ import { NostrContext } from "../nostr-context";
 import { Metadata } from "../types";
 import { ChatQueries } from "../../queries";
 import { useMappedStore } from "../../../../store/use-mapped-store";
+import { PublishNostrError } from "../errors";
 
 type Payload = { eventMetadata: Metadata | string; tags: string[][] };
 
@@ -17,7 +18,7 @@ export function useNostrPublishMutation(
   key: MutationKey,
   kind: Kind,
   onBeforeSend: (event: Event) => void,
-  options?: UseMutationOptions<Event, Error, Payload>
+  options?: UseMutationOptions<Event, PublishNostrError | Error, Payload>
 ) {
   const { activeUser } = useMappedStore();
   const { pool, writeRelays } = useContext(NostrContext);
@@ -64,7 +65,12 @@ export function useNostrPublishMutation(
         const publishInfo = pool?.publish(writeRelays, signedEvent);
         publishInfo?.on("ok", () => resolve(signedEvent!!));
         publishInfo?.on("failed", () =>
-          reject(new Error("[Chat][Nostr] – failed to publish event (kind: " + signedEvent!!.kind))
+          reject(
+            new PublishNostrError(
+              "[Chat][Nostr] – failed to publish event (kind: " + signedEvent!!.kind,
+              signedEvent!!
+            )
+          )
         );
       }),
     options
diff --git a/src/common/features/chats/nostr/errors/index.ts b/src/common/features/chats/nostr/errors/index.ts
new file mode 100644
index 00000000000..7cabd297375
--- /dev/null
+++ b/src/common/features/chats/nostr/errors/index.ts
@@ -0,0 +1 @@
+export * from "./publish-nostr-error";
diff --git a/src/common/features/chats/nostr/errors/publish-nostr-error.ts b/src/common/features/chats/nostr/errors/publish-nostr-error.ts
new file mode 100644
index 00000000000..c338dc447e1
--- /dev/null
+++ b/src/common/features/chats/nostr/errors/publish-nostr-error.ts
@@ -0,0 +1,10 @@
+import { Event } from "../../../../../lib/nostr-tools/event";
+
+export class PublishNostrError extends Error {
+  public event: Event;
+
+  constructor(message: string, event: Event) {
+    super(message);
+    this.event = event;
+  }
+}
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
index 0aef622188d..36df374195f 100644
--- a/src/common/features/chats/queries/messages-query.ts
+++ b/src/common/features/chats/queries/messages-query.ts
@@ -33,21 +33,28 @@ export function useMessagesQuery(username?: string) {
         return [];
       }
 
+      let initialMessages: Message[];
       if (!!currentChannel) {
-        return (
+        initialMessages =
           queryClient
             .getQueryData<Message[]>([NostrQueries.PUBLIC_MESSAGES])
-            ?.filter((i) => i.root === currentChannel.id) ?? []
-        );
+            ?.filter((i) => i.root === currentChannel.id) ?? [];
+      } else {
+        initialMessages =
+          queryClient
+            .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
+            ?.filter((i) =>
+              "peer" in i ? i.peer === currentContact?.pubkey : i.root === currentContact?.pubkey
+            ) ?? [];
       }
+      const pendingMessages = (
+        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? []
+      ).filter((m) => m.sent === 0 && !initialMessages.some((im) => im.id === m.id));
+      const failedMessages = (
+        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? []
+      ).filter((m) => m.sent === 2 && !initialMessages.some((im) => im.id === m.id));
 
-      return (
-        queryClient
-          .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
-          ?.filter((i) =>
-            "peer" in i ? i.peer === currentContact?.pubkey : i.root === currentContact?.pubkey
-          ) ?? []
-      );
+      return [...initialMessages, ...failedMessages, ...pendingMessages];
     },
     {
       initialData: [],
diff --git a/src/common/features/chats/screens/_chats.scss b/src/common/features/chats/screens/_chats.scss
index 1b8d2d69980..14d6760d3a3 100644
--- a/src/common/features/chats/screens/_chats.scss
+++ b/src/common/features/chats/screens/_chats.scss
@@ -2,7 +2,7 @@
   .gif-picker {
     max-height: 300px;
     overflow-y: auto;
-    @apply bg-white border-b border-[--border-color] w-full flex flex-col gap-3 mb-4;
+    @apply bg-white dark:bg-dark-200 border-b border-[--border-color] w-[calc(100%+0.75rem)] flex flex-col gap-3 mb-4 -mx-3;
 
     &::-webkit-scrollbar {
       display: none;
@@ -18,7 +18,7 @@
     .search-box {
       position: sticky;
       top: 0;
-      @apply bg-white border-b border-[--border-color] p-3;
+      @apply bg-white dark:bg-dark-200 border-b border-[--border-color] p-3;
     }
   }
 }
\ No newline at end of file
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 9ab74caa912..f0dbc57f681 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -2069,8 +2069,11 @@ export const resendMessageSvg = (
 );
 
 export const failedMessageSvg = (
-  <svg viewBox="0 0 24 24">
-    <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
+  <svg width={16} viewBox="0 0 24 24">
+    <path
+      fill="#e05e5e"
+      d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+    />
   </svg>
 );
 

From 01a527281295f038cee4b21c197c731004cddb1e Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 30 Nov 2023 23:07:57 +0600
Subject: [PATCH 161/179] Chats: call context menu by clicking/tapping and
 holding

---
 .../chats/components/chat-message-item.tsx    | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 86783868a71..56e7247c223 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,6 +1,6 @@
 import { formatMessageTime, isMessageGif, isMessageImage, isSingleEmoji } from "../utils";
 import { Spinner } from "@ui/spinner";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -12,6 +12,7 @@ import useMount from "react-use/lib/useMount";
 import { Button } from "@ui/button";
 import { failedMessageSvg } from "../../../img/svg";
 import { useResendMessage } from "../mutations";
+import useDebounce from "react-use/lib/useDebounce";
 
 interface Props {
   type: "sender" | "receiver";
@@ -35,6 +36,8 @@ export function ChatMessageItem({
   const { global } = useMappedStore();
   const { publicKey } = useKeysQuery();
 
+  const [holdStarted, setHoldStarted] = useState(false);
+
   const isFailed = useMemo(() => message.sent === 2, [message]);
   const isSending = useMemo(() => message.sent === 0, [message]);
   const isGif = useMemo(() => isMessageGif(message.content), [message]);
@@ -52,6 +55,15 @@ export function ChatMessageItem({
 
   useMount(() => onAppear?.());
 
+  useDebounce(
+    () => {
+      setHoldStarted(false);
+      onContextMenu?.();
+    },
+    1000,
+    [holdStarted]
+  );
+
   return (
     <div key={message.id} data-message-id={message.id}>
       <div
@@ -62,6 +74,10 @@ export function ChatMessageItem({
           failed: isFailed,
           sending: isSending
         })}
+        onMouseDown={() => setHoldStarted(true)}
+        onMouseUp={() => setHoldStarted(false)}
+        onTouchStart={() => setHoldStarted(true)}
+        onTouchEnd={() => setHoldStarted(false)}
         onContextMenu={(e) => {
           if (onContextMenu) {
             e.stopPropagation();
@@ -85,12 +101,13 @@ export function ChatMessageItem({
         >
           <div
             className={classNameObject({
-              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage && !isEmoji,
+              "text-sm p-2.5 rounded-b-2xl duration-300": !isGif && !isImage && !isEmoji,
               "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender" && !isEmoji,
               "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver" && !isEmoji,
               "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage || isEmoji,
               "same-user-message": isSameUser,
-              "text-[4rem]": isEmoji
+              "text-[4rem]": isEmoji,
+              "scale-90": holdStarted && !!onContextMenu
             })}
           >
             <div

From 33af53e1d0a2daab4198116f2ce11d809ad0cd2b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 1 Dec 2023 21:57:20 +0600
Subject: [PATCH 162/179] Chats: fixed join community button showing

---
 .../features/chats/chat-context-provider.tsx  |  4 +-
 .../chats/components/chat-message-item.tsx    | 15 ++--
 .../blocked-users-modal.tsx                   |  2 +-
 .../components/join-community-chat-btn.tsx    | 86 ++++++++-----------
 4 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
index 2977031fc81..90508d70bde 100644
--- a/src/common/features/chats/chat-context-provider.tsx
+++ b/src/common/features/chats/chat-context-provider.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useKeysQuery } from "./queries/keys-query";
 import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
 import { useActiveUserSwitching } from "./hooks";
@@ -38,7 +38,7 @@ export const ChatContextProvider = (props: Props) => {
         value={{
           revealPrivateKey,
           receiverPubKey,
-          hasUserJoinedChat: useMemo(() => hasKeys, [hasKeys]),
+          hasUserJoinedChat: hasKeys,
           setRevealPrivateKey,
           setReceiverPubKey
         }}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 56e7247c223..09884231c54 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -57,18 +57,20 @@ export function ChatMessageItem({
 
   useDebounce(
     () => {
-      setHoldStarted(false);
-      onContextMenu?.();
+      if (holdStarted) {
+        setHoldStarted(false);
+        onContextMenu?.();
+      }
     },
-    1000,
+    500,
     [holdStarted]
   );
 
   return (
-    <div key={message.id} data-message-id={message.id}>
+    <div key={message.id} data-message-id={message.id} className="inline-flex">
       <div
         className={classNameObject({
-          "flex gap-1 mb-4 px-4": true,
+          "inline-flex gap-1 mb-4 px-4": true,
           "justify-start": type === "receiver",
           "justify-end": type === "sender",
           failed: isFailed,
@@ -101,7 +103,8 @@ export function ChatMessageItem({
         >
           <div
             className={classNameObject({
-              "text-sm p-2.5 rounded-b-2xl duration-300": !isGif && !isImage && !isEmoji,
+              "duration-300": true,
+              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage && !isEmoji,
               "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender" && !isEmoji,
               "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver" && !isEmoji,
               "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage || isEmoji,
diff --git a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
index 5a5ccb4885d..99df6845f5c 100644
--- a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
@@ -41,7 +41,7 @@ export function BlockedUsersModal({ username, setShow, show }: Props) {
                 </Tr>
               </thead>
               <tbody>
-                {currentChannel?.removedUserIds!.map((user, i) => {
+                {currentChannel?.removedUserIds?.map((user, i) => {
                   return (
                     <Tr key={i}>
                       <Td>
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 3af275d5ce0..295af2b9dd1 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -41,8 +41,8 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
     useLeaveCommunityChannel();
 
-  const isChatEnabled = useMemo(() => !!currentChannel, [currentChannel]);
-  const isCommunityChatJoined = useMemo(
+  const isCommunityChannelCreated = useMemo(() => !!currentChannel, [currentChannel]);
+  const isCommunityChannelJoined = useMemo(
     () =>
       channels?.some(
         (item) =>
@@ -51,6 +51,11 @@ export default function JoinCommunityChatBtn(props: Props) {
       ),
     [channels, leftChannelsIds]
   );
+  // Todo: all admin team should be able to create a channel
+  const isAbleToCreateChannel = useMemo(
+    () => props.community.name === activeUser?.username,
+    [activeUser, props.community]
+  );
 
   const join = async () => {
     if (!hasUserJoinedChat) {
@@ -59,52 +64,9 @@ export default function JoinCommunityChatBtn(props: Props) {
     await addCommunityChannel();
   };
 
-  return hasUserJoinedChat ? (
+  return (
     <>
-      {props.community.name === activeUser?.username ? (
-        isCommunityChatJoined ? (
-          <Button size="sm" appearance="secondary">
-            {_t("chat.chat-joined")}
-          </Button>
-        ) : !isChatEnabled ? (
-          <Button
-            size="sm"
-            onClick={async () => {
-              if (communityTeam.some((role) => role.pubkey === publicKey)) {
-                await createCommunityChat();
-                await join();
-              }
-            }}
-            disabled={isCreateCommunityChatLoading}
-            icon={isCreateCommunityChatLoading && <Spinner />}
-            iconPlacement="left"
-          >
-            {_t("chat.start-community-chat")}
-          </Button>
-        ) : !isCommunityChatJoined && isChatEnabled ? (
-          <Button
-            size="sm"
-            disabled={isAddCommunityChannelLoading}
-            to={`/chats/${props.community.name}`}
-            icon={isAddCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
-            iconPlacement="left"
-          >
-            {_t("chat.join-community-chat")}
-          </Button>
-        ) : (
-          <></>
-        )
-      ) : isChatEnabled && !isCommunityChatJoined ? (
-        <Button
-          size="sm"
-          disabled={isAddCommunityChannelLoading}
-          to={`/chats/${props.community.name}`}
-          icon={isAddCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
-          iconPlacement="left"
-        >
-          {_t("community.join-community-chat")}
-        </Button>
-      ) : isCommunityChatJoined ? (
+      {isCommunityChannelJoined && (
         <Button
           size="sm"
           appearance="secondary"
@@ -114,11 +76,33 @@ export default function JoinCommunityChatBtn(props: Props) {
         >
           {_t("chat.chat-joined")}
         </Button>
-      ) : (
-        <></>
+      )}
+      {!isCommunityChannelCreated && isAbleToCreateChannel && (
+        <Button
+          size="sm"
+          onClick={async () => {
+            if (communityTeam.some((role) => role.pubkey === publicKey)) {
+              await createCommunityChat();
+              await join();
+            }
+          }}
+          disabled={isCreateCommunityChatLoading}
+          icon={isCreateCommunityChatLoading && <Spinner />}
+          iconPlacement="left"
+        >
+          {_t("chat.start-community-chat")}
+        </Button>
+      )}
+      {!isCommunityChannelJoined && (
+        <Button
+          size="sm"
+          disabled={isAddCommunityChannelLoading}
+          to={`/chats/${props.community.name}`}
+          iconPlacement="left"
+        >
+          {_t("chat.join-community-chat")}
+        </Button>
       )}
     </>
-  ) : (
-    <></>
   );
 }

From 306e37b68362496235609e6a76df1ff5f32b3cd7 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 1 Dec 2023 22:00:26 +0600
Subject: [PATCH 163/179] Chats: show join community button in community-user
 profile

---
 src/common/components/profile-card/index.tsx        | 13 ++++++++++---
 .../features/chats/components/chat-message-item.tsx |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/common/components/profile-card/index.tsx b/src/common/components/profile-card/index.tsx
index 3c0fa0930ee..63fe892646f 100644
--- a/src/common/components/profile-card/index.tsx
+++ b/src/common/components/profile-card/index.tsx
@@ -34,6 +34,8 @@ import { Subscription } from "../../store/subscriptions/types";
 import { ResourceCreditsInfo } from "../rc-info";
 import "./_index.scss";
 import { Button } from "@ui/button";
+import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
+import { useCommunityCache } from "../../core";
 
 interface Props {
   global: Global;
@@ -57,6 +59,8 @@ export const ProfileCard = (props: Props) => {
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({} as any), []);
 
+  const { data: community } = useCommunityCache(props.account.name);
+
   const { activeUser, account, section, global } = props;
 
   useEffect(() => {
@@ -258,9 +262,12 @@ export const ProfileCard = (props: Props) => {
       )}
       <div className="btn-controls flex gap-3">
         {isCommunity(account?.name) && (
-          <Link to={`/created/${account?.name}`}>
-            <Button size="sm">{_t("profile.go-community")}</Button>
-          </Link>
+          <>
+            <Link to={`/created/${account?.name}`}>
+              <Button size="sm">{_t("profile.go-community")}</Button>
+            </Link>
+            {!!community && <JoinCommunityChatBtn history={props.history} community={community} />}
+          </>
         )}
         {isMyProfile && (
           <>
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 09884231c54..64be1916bbf 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -67,10 +67,10 @@ export function ChatMessageItem({
   );
 
   return (
-    <div key={message.id} data-message-id={message.id} className="inline-flex">
+    <div key={message.id} data-message-id={message.id}>
       <div
         className={classNameObject({
-          "inline-flex gap-1 mb-4 px-4": true,
+          "flex gap-1 mb-4 px-4": true,
           "justify-start": type === "receiver",
           "justify-end": type === "sender",
           failed: isFailed,

From ecaf3f904cfc59d5f4cc87d853d2dd9107cbb979 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sat, 2 Dec 2023 22:13:31 +0600
Subject: [PATCH 164/179] Chats: migrated to package

---
 package.json                                  |   9 +-
 src/common/api/queries.ts                     |  12 +-
 src/common/app.tsx                            |   9 +-
 .../components/emoji-picker/index-old.tsx     |   2 +-
 .../features/chats/chat-context-provider.tsx  |  50 ---
 .../components/chat-channel-messages.tsx      |  13 +-
 .../features/chats/components/chat-input.tsx  |   6 +-
 .../chats/components/chat-message-box.tsx     |  22 +-
 .../chat-message-channel-item-extension.tsx   |  13 +-
 .../chats/components/chat-message-item.tsx    |  14 +-
 .../chats/components/chat-messages-header.tsx |   4 +-
 .../chats/components/chat-messages-view.tsx   |  10 +-
 .../chat-direct-contact-or-channel-item.tsx   |   2 +-
 .../chat-popup-contacts-and-channels.tsx      |  13 +-
 .../chat-popup/chat-popup-header.tsx          |   3 +-
 .../chat-popup/chat-popup-messages-list.tsx   |   3 +-
 .../chats/components/chat-popup/index.tsx     |  18 +-
 .../blocked-users-modal.tsx                   |   8 +-
 .../edit-roles-modal.tsx                      |   4 +-
 .../chats-community-actions/index.tsx         |   4 +-
 .../chats-confirmation-modal/index.tsx        |   2 +-
 .../chats/components/chats-default-screen.tsx |   2 +-
 .../chats-direct-messages/index.tsx           |  11 +-
 .../chats/components/chats-dropdown-menu.tsx  |   2 +-
 .../chats/components/chats-import.tsx         |   5 +-
 .../chats-sidebar/chat-sidebar-channel.tsx    |   5 +-
 .../chat-sidebar-direct-contact.tsx           |   5 +-
 .../chats-sidebar/chat-sidebar-header.tsx     |   3 +-
 .../chat-sidebar-search-item.tsx              |   2 +-
 .../chats-sidebar/chat-sidebar-search.tsx     |   2 +-
 .../chats/components/chats-sidebar/index.tsx  |  13 +-
 .../chats/components/chats-welcome.tsx        |   9 +-
 .../chats/components/create-an-account.tsx    |   5 +-
 .../components/join-community-chat-btn.tsx    |  28 +-
 .../chats/components/manage-chat-key.tsx      |   2 +-
 src/common/features/chats/hooks/index.ts      |   2 -
 .../chats/hooks/use-active-user-switching.ts  |  26 --
 .../hooks/use-auto-scroll-in-chat-box.ts      |  16 -
 .../chats/mutations/add-community-channel.ts  |  51 ---
 .../chats/mutations/add-direct-contact.ts     |  48 ---
 .../chats/mutations/create-community-chat.ts  |  73 ----
 .../mutations/fetch-previous-messages.ts      |  35 --
 .../mutations/hide-message-in-channel.ts      |  37 --
 .../chats/mutations/import-chat-by-keys.ts    |  77 -----
 src/common/features/chats/mutations/index.ts  |  14 -
 .../features/chats/mutations/join-chat.ts     |  61 ----
 .../mutations/leave-community-channel.ts      |  20 --
 .../chats/mutations/logout-from-chats.tsx     |  17 -
 .../chats/mutations/resend-message.ts         |  73 ----
 .../chats/mutations/restore-chat-by-pin.ts    |  52 ---
 .../features/chats/mutations/send-message.ts  |  86 -----
 .../mutations/update-channel-blocked-users.ts |  23 --
 .../mutations/update-channel-moderator.ts     |  29 --
 .../mutations/update-community-channel.ts     |  50 ---
 src/common/features/chats/nostr/Readme.md     |   3 -
 src/common/features/chats/nostr/core/index.ts |   4 -
 .../chats/nostr/core/nostr-fetch-mutation.ts  |  22 --
 .../chats/nostr/core/nostr-fetch-query.tsx    |  33 --
 .../nostr/core/nostr-listeners-provider.tsx   |  20 --
 .../nostr/core/nostr-publish-mutation.ts      |  78 -----
 .../features/chats/nostr/errors/index.ts      |   1 -
 .../chats/nostr/errors/publish-nostr-error.ts |  10 -
 src/common/features/chats/nostr/index.ts      |   5 -
 .../nostr/mutations/find-healthy-relay.ts     |  20 --
 .../features/chats/nostr/mutations/index.ts   |   3 -
 .../nostr/mutations/send-direct-message.ts    |  45 ---
 .../nostr/mutations/send-public-message.ts    |  44 ---
 .../nostr/mutations/update-left-channels.ts   |   5 -
 .../features/chats/nostr/nostr-context.ts     |  12 -
 .../features/chats/nostr/nostr-filters.ts     |   0
 .../features/chats/nostr/nostr-provider.tsx   |  32 --
 .../nostr/queries/direct-messages-query.ts    |  43 ---
 .../nostr/queries/get-user-profile-query.ts   |  32 --
 .../features/chats/nostr/queries/index.ts     |   4 -
 .../nostr/queries/public-messages-query.ts    |  30 --
 .../features/chats/nostr/queries/queries.ts   |   4 -
 .../features/chats/nostr/types/channel.ts     |   5 -
 .../chats/nostr/types/community-moderator.ts  |   5 -
 .../chats/nostr/types/direct-contact.ts       |   1 -
 .../features/chats/nostr/types/index.ts       |   6 -
 .../features/chats/nostr/types/messages.ts    |  24 --
 .../features/chats/nostr/types/metadata.ts    |  11 -
 .../features/chats/nostr/types/profile.ts     |   3 -
 .../chats/nostr/utils/event-converter.ts      | 111 ------
 .../chats/nostr/utils/filter-tag-value.ts     |   5 -
 .../chats/nostr/utils/find-tag-value.ts       |   5 -
 .../features/chats/nostr/utils/index.ts       |   4 -
 .../features/chats/nostr/utils/is-sha256.ts   |   3 -
 .../chats/nostr/utils/listen-while-finish.ts  |  34 --
 src/common/features/chats/queries/Roadmap.md  |  23 --
 .../features/chats/queries/channels-query.ts  |  25 --
 .../chats/queries/community-channel-query.ts  |  26 --
 .../chats/queries/direct-contacts-query.ts    |  28 --
 src/common/features/chats/queries/index.ts    |   6 -
 .../features/chats/queries/keys-query.ts      |  65 ----
 .../queries/left-community-channels-query.ts  |  36 --
 .../chats/queries/listen-messages-query.ts    |  31 --
 .../features/chats/queries/messages-query.ts  |  73 ----
 .../nostr-joined-community-team-query.ts      |  52 ---
 src/common/features/chats/queries/queries.ts  |  12 -
 .../chats/queries/search-users-query.ts       |   3 +-
 .../screens/chats-manage-key-section.tsx      |   2 +-
 src/common/features/chats/screens/chats.tsx   |  12 +-
 src/common/features/chats/types/chat-types.ts |  14 -
 src/common/features/chats/types/index.ts      |   1 -
 .../chats/utils/check-contiguous-message.ts   |  12 -
 .../features/chats/utils/copy-to-clipboard.ts |   8 -
 .../chats/utils/create-nostr-account.ts       |   7 -
 .../features/chats/utils/encryption-tools.ts  |  17 -
 .../chats/utils/fetch-profile-metadata.ts     |   9 -
 .../utils/format-message-date-and-day.ts      |  16 -
 .../chats/utils/format-message-time.ts        |   5 -
 .../chats/utils/formatted-user-name.ts        |   6 -
 .../chats/utils/get-joined-communities.ts     |   5 -
 .../features/chats/utils/get-relative-date.ts |  20 --
 .../chats/utils/get-user-chat-private-key.ts  |  15 -
 .../chats/utils/get-user-chat-public-key.ts   |  15 -
 src/common/features/chats/utils/index.ts      |  16 -
 .../features/chats/utils/is-message-image.ts  |   3 -
 .../features/chats/utils/is-single-emoji.ts   |   5 -
 .../features/chats/utils/upload-chat-keys.ts  |   7 +-
 .../utils/use-get-direct-last-message.ts      |  11 -
 src/common/pages/community-functional.tsx     |   8 +-
 src/lib/nostr-tools/event.ts                  |  98 ------
 src/lib/nostr-tools/filter.ts                 |  45 ---
 src/lib/nostr-tools/index.ts                  |   7 -
 src/lib/nostr-tools/keys.ts                   |   9 -
 src/lib/nostr-tools/nip04.ts                  |  42 ---
 src/lib/nostr-tools/nip05.ts                  |  48 ---
 src/lib/nostr-tools/nip06.ts                  |  19 --
 src/lib/nostr-tools/nip19.ts                  | 127 -------
 src/lib/nostr-tools/nip26.ts                  |  71 ----
 src/lib/nostr-tools/nip42.ts                  |  46 ---
 src/lib/nostr-tools/path.ts                   | 223 ------------
 src/lib/nostr-tools/pool.ts                   | 183 ----------
 src/lib/nostr-tools/relay.ts                  | 318 ------------------
 src/lib/nostr-tools/utils.ts                  |   2 -
 yarn.lock                                     | 117 +++++--
 138 files changed, 271 insertions(+), 3450 deletions(-)
 delete mode 100644 src/common/features/chats/chat-context-provider.tsx
 delete mode 100644 src/common/features/chats/hooks/index.ts
 delete mode 100644 src/common/features/chats/hooks/use-active-user-switching.ts
 delete mode 100644 src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts
 delete mode 100644 src/common/features/chats/mutations/add-community-channel.ts
 delete mode 100644 src/common/features/chats/mutations/add-direct-contact.ts
 delete mode 100644 src/common/features/chats/mutations/create-community-chat.ts
 delete mode 100644 src/common/features/chats/mutations/fetch-previous-messages.ts
 delete mode 100644 src/common/features/chats/mutations/hide-message-in-channel.ts
 delete mode 100644 src/common/features/chats/mutations/import-chat-by-keys.ts
 delete mode 100644 src/common/features/chats/mutations/join-chat.ts
 delete mode 100644 src/common/features/chats/mutations/leave-community-channel.ts
 delete mode 100644 src/common/features/chats/mutations/logout-from-chats.tsx
 delete mode 100644 src/common/features/chats/mutations/resend-message.ts
 delete mode 100644 src/common/features/chats/mutations/restore-chat-by-pin.ts
 delete mode 100644 src/common/features/chats/mutations/send-message.ts
 delete mode 100644 src/common/features/chats/mutations/update-channel-blocked-users.ts
 delete mode 100644 src/common/features/chats/mutations/update-channel-moderator.ts
 delete mode 100644 src/common/features/chats/mutations/update-community-channel.ts
 delete mode 100644 src/common/features/chats/nostr/Readme.md
 delete mode 100644 src/common/features/chats/nostr/core/index.ts
 delete mode 100644 src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
 delete mode 100644 src/common/features/chats/nostr/core/nostr-fetch-query.tsx
 delete mode 100644 src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
 delete mode 100644 src/common/features/chats/nostr/core/nostr-publish-mutation.ts
 delete mode 100644 src/common/features/chats/nostr/errors/index.ts
 delete mode 100644 src/common/features/chats/nostr/errors/publish-nostr-error.ts
 delete mode 100644 src/common/features/chats/nostr/index.ts
 delete mode 100644 src/common/features/chats/nostr/mutations/find-healthy-relay.ts
 delete mode 100644 src/common/features/chats/nostr/mutations/index.ts
 delete mode 100644 src/common/features/chats/nostr/mutations/send-direct-message.ts
 delete mode 100644 src/common/features/chats/nostr/mutations/send-public-message.ts
 delete mode 100644 src/common/features/chats/nostr/mutations/update-left-channels.ts
 delete mode 100644 src/common/features/chats/nostr/nostr-context.ts
 delete mode 100644 src/common/features/chats/nostr/nostr-filters.ts
 delete mode 100644 src/common/features/chats/nostr/nostr-provider.tsx
 delete mode 100644 src/common/features/chats/nostr/queries/direct-messages-query.ts
 delete mode 100644 src/common/features/chats/nostr/queries/get-user-profile-query.ts
 delete mode 100644 src/common/features/chats/nostr/queries/index.ts
 delete mode 100644 src/common/features/chats/nostr/queries/public-messages-query.ts
 delete mode 100644 src/common/features/chats/nostr/queries/queries.ts
 delete mode 100644 src/common/features/chats/nostr/types/channel.ts
 delete mode 100644 src/common/features/chats/nostr/types/community-moderator.ts
 delete mode 100644 src/common/features/chats/nostr/types/direct-contact.ts
 delete mode 100644 src/common/features/chats/nostr/types/index.ts
 delete mode 100644 src/common/features/chats/nostr/types/messages.ts
 delete mode 100644 src/common/features/chats/nostr/types/metadata.ts
 delete mode 100644 src/common/features/chats/nostr/types/profile.ts
 delete mode 100644 src/common/features/chats/nostr/utils/event-converter.ts
 delete mode 100644 src/common/features/chats/nostr/utils/filter-tag-value.ts
 delete mode 100644 src/common/features/chats/nostr/utils/find-tag-value.ts
 delete mode 100644 src/common/features/chats/nostr/utils/index.ts
 delete mode 100644 src/common/features/chats/nostr/utils/is-sha256.ts
 delete mode 100644 src/common/features/chats/nostr/utils/listen-while-finish.ts
 delete mode 100644 src/common/features/chats/queries/Roadmap.md
 delete mode 100644 src/common/features/chats/queries/channels-query.ts
 delete mode 100644 src/common/features/chats/queries/community-channel-query.ts
 delete mode 100644 src/common/features/chats/queries/direct-contacts-query.ts
 delete mode 100644 src/common/features/chats/queries/keys-query.ts
 delete mode 100644 src/common/features/chats/queries/left-community-channels-query.ts
 delete mode 100644 src/common/features/chats/queries/listen-messages-query.ts
 delete mode 100644 src/common/features/chats/queries/messages-query.ts
 delete mode 100644 src/common/features/chats/queries/nostr-joined-community-team-query.ts
 delete mode 100644 src/common/features/chats/queries/queries.ts
 delete mode 100644 src/common/features/chats/types/chat-types.ts
 delete mode 100644 src/common/features/chats/types/index.ts
 delete mode 100644 src/common/features/chats/utils/check-contiguous-message.ts
 delete mode 100644 src/common/features/chats/utils/copy-to-clipboard.ts
 delete mode 100644 src/common/features/chats/utils/create-nostr-account.ts
 delete mode 100644 src/common/features/chats/utils/encryption-tools.ts
 delete mode 100644 src/common/features/chats/utils/fetch-profile-metadata.ts
 delete mode 100644 src/common/features/chats/utils/format-message-date-and-day.ts
 delete mode 100644 src/common/features/chats/utils/format-message-time.ts
 delete mode 100644 src/common/features/chats/utils/formatted-user-name.ts
 delete mode 100644 src/common/features/chats/utils/get-joined-communities.ts
 delete mode 100644 src/common/features/chats/utils/get-relative-date.ts
 delete mode 100644 src/common/features/chats/utils/get-user-chat-private-key.ts
 delete mode 100644 src/common/features/chats/utils/get-user-chat-public-key.ts
 delete mode 100644 src/common/features/chats/utils/is-message-image.ts
 delete mode 100644 src/common/features/chats/utils/is-single-emoji.ts
 delete mode 100644 src/common/features/chats/utils/use-get-direct-last-message.ts
 delete mode 100644 src/lib/nostr-tools/event.ts
 delete mode 100644 src/lib/nostr-tools/filter.ts
 delete mode 100644 src/lib/nostr-tools/index.ts
 delete mode 100644 src/lib/nostr-tools/keys.ts
 delete mode 100644 src/lib/nostr-tools/nip04.ts
 delete mode 100644 src/lib/nostr-tools/nip05.ts
 delete mode 100644 src/lib/nostr-tools/nip06.ts
 delete mode 100644 src/lib/nostr-tools/nip19.ts
 delete mode 100644 src/lib/nostr-tools/nip26.ts
 delete mode 100644 src/lib/nostr-tools/nip42.ts
 delete mode 100644 src/lib/nostr-tools/path.ts
 delete mode 100644 src/lib/nostr-tools/pool.ts
 delete mode 100644 src/lib/nostr-tools/relay.ts
 delete mode 100644 src/lib/nostr-tools/utils.ts

diff --git a/package.json b/package.json
index 6b689d72728..b296011bdcd 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
+    "@ecency/ns-query": "0.0.1",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@firebase/analytics": "^0.8.0",
@@ -138,7 +139,7 @@
     "@types/webpack-env": "^1.14.0",
     "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
     "autoprefixer": "^10.4.14",
-    "babel-preset-razzle": "^4.0.5",
+    "babel-preset-razzle": "^4.2.18",
     "html-webpack-plugin": "4.5.2",
     "husky": "^8.0.1",
     "jest": "^26.0.0",
@@ -148,9 +149,9 @@
     "postcss": "8.4.31",
     "postcss-cli": "^10.1.0",
     "prettier": "^2.7.1",
-    "razzle": "^4.0.5",
-    "razzle-dev-utils": "^4.0.5",
-    "razzle-plugin-scss": "^4.0.5",
+    "razzle": "^4.2.18",
+    "razzle-dev-utils": "^4.2.18",
+    "razzle-plugin-scss": "^4.2.18",
     "razzle-plugin-typescript": "^3.0.0",
     "react-test-renderer": "^16.13.1",
     "tailwindcss": "^3.3.2",
diff --git a/src/common/api/queries.ts b/src/common/api/queries.ts
index 49a885eae85..a3062356030 100644
--- a/src/common/api/queries.ts
+++ b/src/common/api/queries.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 import { QueryIdentifiers } from "../core";
 import { getPoints, getPointTransactions } from "./private-api";
 import { useMappedStore } from "../store/use-mapped-store";
@@ -95,3 +95,13 @@ export function useGetAccountFullQuery(username?: string) {
     enabled: !!username
   });
 }
+
+export function useGetAccountsFullQuery(usernames: string[]) {
+  return useQueries({
+    queries: usernames.map((username) => ({
+      queryKey: [QueryIdentifiers.GET_ACCOUNT_FULL, username],
+      queryFn: () => getAccountFull(username!),
+      enabled: !!username
+    }))
+  });
+}
diff --git a/src/common/app.tsx b/src/common/app.tsx
index 4dbf24b242b..627e7af6fe5 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -29,9 +29,10 @@ import { EntriesCacheManager } from "./core";
 import { UserActivityRecorder } from "./components/user-activity-recorder";
 import { useGlobalLoader } from "./util/use-global-loader";
 import useMount from "react-use/lib/useMount";
-import { ChatContextProvider } from "./features/chats/chat-context-provider";
 import { ChatPopUp } from "./features/chats/components/chat-popup";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ChatContextProvider } from "@ecency/ns-query";
+import { useGetAccountFullQuery } from "./api/queries";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -85,9 +86,11 @@ const PurchasePage = (props: any) => <PurchaseContainer {...props} />;
 const DecksPage = loadable(() => import("./pages/decks"));
 
 const App = (props: any) => {
-  const { global } = useMappedStore();
+  const { global, activeUser } = useMappedStore();
   const { hide } = useGlobalLoader();
 
+  const { data: activeUserAccount } = useGetAccountFullQuery(activeUser?.username);
+
   useMount(() => {
     // Drop hiding from main queue to give React time to render
     setTimeout(() => hide(), 1);
@@ -108,7 +111,7 @@ const App = (props: any) => {
       <ReactQueryDevtools initialIsOpen={false} />
       <Tracker />
       <UserActivityRecorder />
-      <ChatContextProvider>
+      <ChatContextProvider activeUsername={activeUser?.username} activeUserData={activeUserAccount}>
         <Switch>
           <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
           <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
diff --git a/src/common/components/emoji-picker/index-old.tsx b/src/common/components/emoji-picker/index-old.tsx
index 124fd93d84b..e25ecac145f 100644
--- a/src/common/components/emoji-picker/index-old.tsx
+++ b/src/common/components/emoji-picker/index-old.tsx
@@ -5,8 +5,8 @@ import { _t } from "../../i18n";
 import { getEmojiData } from "../../api/misc";
 import * as ls from "../../util/local-storage";
 import { insertOrReplace } from "../../util/input-util";
-import { EmojiPickerStyleProps } from "../../features/chats/types/chat-types";
 import "./_index-old.scss";
+import { EmojiPickerStyleProps } from "@ecency/ns-query";
 
 interface Emoji {
   a: string;
diff --git a/src/common/features/chats/chat-context-provider.tsx b/src/common/features/chats/chat-context-provider.tsx
deleted file mode 100644
index 90508d70bde..00000000000
--- a/src/common/features/chats/chat-context-provider.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from "react";
-import { useKeysQuery } from "./queries/keys-query";
-import { NostrListenerQueriesProvider, NostrProvider } from "./nostr";
-import { useActiveUserSwitching } from "./hooks";
-
-interface Context {
-  revealPrivateKey: boolean;
-  receiverPubKey: string;
-  hasUserJoinedChat: boolean;
-  setRevealPrivateKey: (d: boolean) => void;
-  setReceiverPubKey: (key: string) => void;
-}
-
-interface Props {
-  children: JSX.Element | JSX.Element[];
-}
-
-export const ChatContext = React.createContext<Context>({
-  revealPrivateKey: false,
-  receiverPubKey: "",
-  hasUserJoinedChat: false,
-  setRevealPrivateKey: () => {},
-  setReceiverPubKey: () => {}
-});
-
-export const ChatContextProvider = (props: Props) => {
-  const [revealPrivateKey, setRevealPrivateKey] = useState(false);
-  const [receiverPubKey, setReceiverPubKey] = useState("");
-
-  const { hasKeys } = useKeysQuery();
-
-  // useListenMessagesQuery();
-  useActiveUserSwitching();
-
-  return (
-    <NostrListenerQueriesProvider>
-      <ChatContext.Provider
-        value={{
-          revealPrivateKey,
-          receiverPubKey,
-          hasUserJoinedChat: hasKeys,
-          setRevealPrivateKey,
-          setReceiverPubKey
-        }}
-      >
-        <NostrProvider>{props.children}</NostrProvider>
-      </ChatContext.Provider>
-    </NostrListenerQueriesProvider>
-  );
-};
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index 15a0fcb6868..c107d640d9b 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,14 +1,19 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
-import { checkContiguousMessage, formatMessageDateAndDay } from "../utils";
 import { ChatMessageItem } from "./chat-message-item";
-import { useKeysQuery } from "../queries/keys-query";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
 import { hideSvg, removeUserSvg } from "../../../img/svg";
-import { useHideMessageInChannel, useUpdateChannelBlockedUsers } from "../mutations";
 import { Spinner } from "@ui/spinner";
-import { Channel, PublicMessage } from "../nostr";
+import {
+  Channel,
+  checkContiguousMessage,
+  formatMessageDateAndDay,
+  PublicMessage,
+  useHideMessageInChannel,
+  useKeysQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
 
 interface Props {
   publicMessages: PublicMessage[];
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 4ea50a6db35..7962b8d692c 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -9,17 +9,15 @@ import {
 } from "../../../img/svg";
 import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle } from "./chat-popup/chat-constants";
 import { _t } from "../../../i18n";
-import { ChatContext } from "../chat-context-provider";
 import { Form } from "@ui/form";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";
-import { useChatFileUpload, useSendMessage } from "../mutations";
+import { useChatFileUpload } from "../mutations";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import GifPicker from "../../../components/gif-picker";
 import useClickAway from "react-use/lib/useClickAway";
 import { Spinner } from "@ui/spinner";
-import { useChannelsQuery } from "../queries";
-import { Channel } from "../nostr";
+import { Channel, ChatContext, useChannelsQuery, useSendMessage } from "@ecency/ns-query";
 
 interface Props {
   currentChannel?: Channel;
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 4f930eb55bc..bf00a777bb9 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -4,16 +4,20 @@ import { History } from "history";
 import ChatsMessagesHeader from "./chat-messages-header";
 import ChatsMessagesView from "./chat-messages-view";
 import LinearProgress from "../../../components/linear-progress";
-import { getJoinedCommunities } from "../utils";
 import { Button } from "@ui/button";
-import { useChannelsQuery, useCommunityChannelQuery } from "../queries";
-import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
 import { useCommunityCache } from "../../../core";
-import { useAddCommunityChannel } from "../mutations";
 import ChatsProfileBox from "./chat-profile-box";
-import { useAutoScrollInChatBox } from "../hooks";
-import { Channel } from "../nostr";
 import { _t } from "../../../i18n";
+import {
+  Channel,
+  getJoinedCommunities,
+  useAddCommunityChannel,
+  useAutoScrollInChatBox,
+  useChannelsQuery,
+  useCommunityChannelQuery,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
+import { useGetAccountFullQuery } from "../../../api/queries";
 
 interface MatchParams {
   filter: string;
@@ -32,11 +36,15 @@ interface Props {
 export default function ChatsMessagesBox(props: Props) {
   useAutoScrollInChatBox(props.match.params.username);
 
+  const { data: communityAccount } = useGetAccountFullQuery(props.match.params.username);
   const { data: community } = useCommunityCache(props.match.params.username);
 
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
-  const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
+  const { data: communityChannel } = useCommunityChannelQuery(
+    community ?? undefined,
+    communityAccount
+  );
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
index 80dcf5e4e42..fd5a23126ff 100644
--- a/src/common/features/chats/components/chat-message-channel-item-extension.tsx
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -7,9 +7,12 @@ import ChatInput from "./chat-input";
 import UserAvatar from "../../../components/user-avatar";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
-import { useUpdateChannelBlockedUsers } from "../mutations";
-import { useNostrGetUserProfileQuery } from "../nostr/queries";
-import { Channel } from "../nostr";
+import {
+  Channel,
+  CommunityModerator,
+  useNostrGetUserProfileQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
 
 interface Props {
   currentChannel: Channel;
@@ -35,8 +38,8 @@ export function ChatMessageChannelItemExtension({
   const communityAdmins = useMemo(
     () =>
       currentChannel?.communityModerators
-        ?.filter((user) => COMMUNITYADMINROLES.includes(user.role))
-        .map((user) => user.name) ?? [],
+        ?.filter((user: CommunityModerator) => COMMUNITYADMINROLES.includes(user.role))
+        .map((user: CommunityModerator) => user.name) ?? [],
     [currentChannel]
   );
 
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 64be1916bbf..782bf6d7b7f 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,4 +1,4 @@
-import { formatMessageTime, isMessageGif, isMessageImage, isSingleEmoji } from "../utils";
+import { isMessageGif } from "../utils";
 import { Spinner } from "@ui/spinner";
 import React, { useMemo, useState } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
@@ -6,13 +6,19 @@ import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
 import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
-import { Channel, Message } from "../nostr";
-import { useKeysQuery } from "../queries/keys-query";
 import useMount from "react-use/lib/useMount";
 import { Button } from "@ui/button";
 import { failedMessageSvg } from "../../../img/svg";
-import { useResendMessage } from "../mutations";
 import useDebounce from "react-use/lib/useDebounce";
+import {
+  Channel,
+  formatMessageTime,
+  isMessageImage,
+  isSingleEmoji,
+  Message,
+  useKeysQuery,
+  useResendMessage
+} from "@ecency/ns-query";
 
 interface Props {
   type: "sender" | "receiver";
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
index 4c5ffbd89a5..256228eb087 100644
--- a/src/common/features/chats/components/chat-messages-header.tsx
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -3,13 +3,11 @@ import { History } from "history";
 import ChatsCommunityDropdownMenu from "./chats-community-actions";
 import UserAvatar from "../../../components/user-avatar";
 import { CHATPAGE } from "./chat-popup/chat-constants";
-import { formattedUserName } from "../utils";
 import Link from "../../../components/alink";
 import { expandSideBar } from "../../../img/svg";
 import { Button } from "@ui/button";
-import { ChatContext } from "../chat-context-provider";
-import { useChannelsQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
+import { ChatContext, formattedUserName, useChannelsQuery } from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index d2b62575141..f25e552f166 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -5,11 +5,15 @@ import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
 import ChatsScroller from "./chats-scroller";
 import { classNameObject } from "../../../helper/class-name-object";
-import { useMessagesQuery } from "../queries";
 import isCommunity from "../../../helper/is-community";
-import { useFetchPreviousMessages } from "../mutations";
 import { ChatsChannelMessages } from "./chat-channel-messages";
-import { Channel, DirectMessage, PublicMessage } from "../nostr";
+import {
+  Channel,
+  DirectMessage,
+  PublicMessage,
+  useFetchPreviousMessages,
+  useMessagesQuery
+} from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index d8d1bfd0a40..af45435ac34 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import React, { useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { useMessagesQuery } from "../../queries";
+import { useMessagesQuery } from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 1a85d7335ba..4a1bbd63af3 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -1,13 +1,16 @@
 import React, { useContext, useMemo } from "react";
 import { _t } from "../../../../i18n";
-import { getJoinedCommunities } from "../../utils";
 import { ChatsWelcome } from "../chats-welcome";
 import { Button } from "@ui/button";
-import { ChatContext } from "../../chat-context-provider";
 import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
-import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
-import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
-import { useKeysQuery } from "../../queries/keys-query";
+import {
+  ChatContext,
+  getJoinedCommunities,
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useKeysQuery,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
 
 interface Props {
   communityClicked: (v: string) => void;
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index de9192ced13..b7364560957 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -8,8 +8,7 @@ import ChatsDropdownMenu from "../chats-dropdown-menu";
 import { classNameObject } from "../../../../helper/class-name-object";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { ChatContext } from "../../chat-context-provider";
-import { useKeysQuery } from "../../queries/keys-query";
+import { ChatContext, useKeysQuery } from "@ecency/ns-query";
 
 interface Props {
   currentUser: string;
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 80d0c5d3f82..247fff9186b 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -2,10 +2,9 @@ import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
 import React, { useMemo } from "react";
-import { useChannelsQuery, useMessagesQuery } from "../../queries";
 import { useCommunityCache } from "../../../../core";
 import { ChatsChannelMessages } from "../chat-channel-messages";
-import { DirectMessage, PublicMessage } from "../../nostr";
+import { DirectMessage, PublicMessage, useChannelsQuery, useMessagesQuery } from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index a67f3fc11ca..21e1907044c 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -9,19 +9,25 @@ import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import "./index.scss";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import { ChatContext } from "../../chat-context-provider";
 import { useMount } from "react-use";
 import { classNameObject } from "../../../../helper/class-name-object";
 import { ChatPopupHeader } from "./chat-popup-header";
 import { ChatPopupMessagesList } from "./chat-popup-messages-list";
 import { ChatPopupSearchUser } from "./chat-popup-search-user";
 import { ChatPopupContactsAndChannels } from "./chat-popup-contacts-and-channels";
-import { useChannelsQuery, useDirectContactsQuery, useMessagesQuery } from "../../queries";
-import { useFetchPreviousMessages, useJoinChat } from "../../mutations";
-import { useKeysQuery } from "../../queries/keys-query";
 import { ChatsWelcome } from "../chats-welcome";
 import { useGetAccountFullQuery } from "../../../../api/queries";
-import { getUserChatPublicKey } from "../../utils";
+import {
+  ChatContext,
+  getUserChatPublicKey,
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useFetchPreviousMessages,
+  useJoinChat,
+  useKeysQuery,
+  useMessagesQuery
+} from "@ecency/ns-query";
+import { uploadChatKeys } from "../../utils/upload-chat-keys";
 
 export const ChatPopUp = () => {
   const { activeUser, global } = useMappedStore();
@@ -33,7 +39,7 @@ export const ChatPopUp = () => {
     setRevealPrivateKey,
     setReceiverPubKey
   } = useContext(ChatContext);
-  const { isLoading: isJoinChatLoading } = useJoinChat();
+  const { isLoading: isJoinChatLoading } = useJoinChat(uploadChatKeys);
 
   const [currentUser, setCurrentUser] = useState("");
 
diff --git a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
index 99df6845f5c..ed9ebc371a2 100644
--- a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
@@ -1,12 +1,14 @@
 import { _t } from "../../../../i18n";
 import React, { useMemo } from "react";
-import { useChannelsQuery } from "../../queries";
 import UserAvatar from "../../../../components/user-avatar";
-import { useUpdateChannelBlockedUsers } from "../../mutations";
 import { Table, Td, Th, Tr } from "@ui/table";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { Button } from "@ui/button";
-import { useNostrGetUserProfilesQuery } from "../../nostr/queries";
+import {
+  useChannelsQuery,
+  useNostrGetUserProfilesQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
index 17b73866ecf..6db2579ce1a 100644
--- a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
+++ b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
@@ -4,18 +4,16 @@ import { FormControl, InputGroup } from "@ui/input";
 import React, { useMemo, useState } from "react";
 import { Button } from "@ui/button";
 import { NOSTRKEY } from "../chat-popup/chat-constants";
-import { useChannelsQuery } from "../../queries";
 import UserAvatar from "../../../../components/user-avatar";
 import { ROLES } from "../../../../store/communities";
 import { error } from "../../../../components/feedback";
 import useDebounce from "react-use/lib/useDebounce";
 import { getAccountFull } from "../../../../api/hive";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import { useUpdateChannelModerator } from "../../mutations";
 import { Table, Td, Th, Tr } from "@ui/table";
 import { Spinner } from "@ui/spinner";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { CommunityModerator } from "../../nostr";
+import { CommunityModerator, useChannelsQuery, useUpdateChannelModerator } from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
index 9f9235e0e03..e70ed0e5cfc 100644
--- a/src/common/features/chats/components/chats-community-actions/index.tsx
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -4,13 +4,11 @@ import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../
 import { _t } from "../../../../i18n";
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { success } from "../../../../components/feedback";
-import { copyToClipboard } from "../../utils";
-import { useLeaveCommunityChannel } from "../../mutations";
-import { useChannelsQuery } from "../../queries";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { EditRolesModal } from "./edit-roles-modal";
 import { Button } from "@ui/button";
 import { BlockedUsersModal } from "./blocked-users-modal";
+import { copyToClipboard, useChannelsQuery, useLeaveCommunityChannel } from "@ecency/ns-query";
 
 interface Props {
   history: History;
diff --git a/src/common/features/chats/components/chats-confirmation-modal/index.tsx b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
index 9dfb84cc85f..4ee14ba3739 100644
--- a/src/common/features/chats/components/chats-confirmation-modal/index.tsx
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useState } from "react";
 import { _t } from "../../../../i18n";
 import LinearProgress from "../../../../components/linear-progress";
-import { ChatContext } from "../../chat-context-provider";
 
 import "./index.scss";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { ChatContext } from "@ecency/ns-query";
 
 interface Props {
   actionType: string;
diff --git a/src/common/features/chats/components/chats-default-screen.tsx b/src/common/features/chats/components/chats-default-screen.tsx
index e3a81a21897..5c0a1c39500 100644
--- a/src/common/features/chats/components/chats-default-screen.tsx
+++ b/src/common/features/chats/components/chats-default-screen.tsx
@@ -6,8 +6,8 @@ import React, { HTMLProps, useContext, useMemo } from "react";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { PREFIX } from "../../../util/local-storage";
-import { ChatContext } from "../chat-context-provider";
 import { classNameObject } from "../../../helper/class-name-object";
+import { ChatContext } from "@ecency/ns-query";
 
 export function ChatsDefaultScreen(props: HTMLProps<HTMLDivElement>) {
   const { activeUser } = useMappedStore();
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 378e74712c9..9031c47b18d 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,15 +1,18 @@
 import React, { useContext, useEffect, useState } from "react";
-import { checkContiguousMessage, formatMessageDateAndDay } from "../../utils";
-import { ChatContext } from "../../chat-context-provider";
 import { _t } from "../../../../i18n";
 import "./index.scss";
 import { ChatMessageItem } from "../chat-message-item";
-import { useKeysQuery } from "../../queries/keys-query";
-import { DirectMessage } from "../../nostr";
 import { Button } from "@ui/button";
 import { useInviteViaPostComment } from "../../mutations";
 import { FormControl } from "@ui/input";
 import { Alert } from "@ui/alert";
+import {
+  ChatContext,
+  checkContiguousMessage,
+  DirectMessage,
+  formatMessageDateAndDay,
+  useKeysQuery
+} from "@ecency/ns-query";
 
 interface Props {
   directMessages: DirectMessage[];
diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
index 2b03a438ae3..089b64283bb 100644
--- a/src/common/features/chats/components/chats-dropdown-menu.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -4,9 +4,9 @@ import { chatKeySvg, extendedView, kebabMenuSvg, keySvg } from "../../../img/svg
 import { _t } from "../../../i18n";
 import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { Button } from "@ui/button";
-import { useLogoutFromChats } from "../mutations";
 import { history } from "../../../store";
 import { useLocation } from "react-router";
+import { useLogoutFromChats } from "@ecency/ns-query";
 
 interface Props {
   history: History | null;
diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
index 80dec872636..1eb8aae6865 100644
--- a/src/common/features/chats/components/chats-import.tsx
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -3,15 +3,16 @@ import { _t } from "../../../i18n";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
 import { CodeInput, FormControl } from "@ui/input";
 import React, { useState } from "react";
-import { useImportChatByKeys } from "../mutations";
 import { Alert } from "@ui/alert";
+import { useImportChatByKeys } from "@ecency/ns-query";
+import { uploadChatKeys } from "../utils/upload-chat-keys";
 
 export function ChatsImport() {
   const [step, setStep] = useState(0);
   const [ecencyChatKey, setEcencyChatKey] = useState("");
   const [pin, setPin] = useState("");
 
-  const { mutateAsync: importChatByKey } = useImportChatByKeys();
+  const { mutateAsync: importChatByKey } = useImportChatByKeys(uploadChatKeys);
 
   return (
     <>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index edf20a597f0..4d97baa943c 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -1,11 +1,8 @@
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { useMessagesQuery } from "../../queries";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { getRelativeDate } from "../../utils";
-import { ChatContext } from "../../chat-context-provider";
-import { Channel } from "../../nostr";
+import { Channel, ChatContext, getRelativeDate, useMessagesQuery } from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index e126dea6cd0..0b3cee5dca3 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -1,11 +1,8 @@
-import { getRelativeDate } from "../../utils";
 import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
-import { ChatContext } from "../../chat-context-provider";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { useMessagesQuery } from "../../queries";
-import { DirectContact } from "../../nostr";
+import { ChatContext, DirectContact, getRelativeDate, useMessagesQuery } from "@ecency/ns-query";
 
 interface Props {
   contact: DirectContact;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
index 0cfcaad53bb..2dcfaf38d49 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -1,9 +1,8 @@
 import { _t } from "../../../../i18n";
 import ChatsDropdownMenu from "../chats-dropdown-menu";
 import React, { useContext } from "react";
-import { ChatContext } from "../../chat-context-provider";
 import { History } from "history";
-import { useKeysQuery } from "../../queries/keys-query";
+import { ChatContext, useKeysQuery } from "@ecency/ns-query";
 
 interface Props {
   history: History;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
index 295ab33f03e..fb0707c0d54 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -1,9 +1,9 @@
 import accountReputation from "../../../../helper/account-reputation";
 import { Link } from "react-router-dom";
 import React from "react";
-import { AccountWithReputation } from "../../types";
 import UserAvatar from "../../../../components/user-avatar";
 import isCommunity from "../../../../helper/is-community";
+import { AccountWithReputation } from "@ecency/ns-query";
 
 interface Props {
   user: AccountWithReputation;
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
index 183f04d45f2..3cb4699d712 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -3,8 +3,8 @@ import { _t } from "../../../../i18n";
 import React, { useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { getAccountReputations } from "../../../../api/hive";
-import { AccountWithReputation } from "../../types";
 import LinearProgress from "../../../../components/linear-progress";
+import { AccountWithReputation } from "@ecency/ns-query";
 
 interface Props {
   searchQuery: string;
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 009c7349d98..90bca3992f5 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,17 +1,20 @@
 import React, { useContext, useMemo, useState } from "react";
 import { History } from "history";
-import { getJoinedCommunities } from "../../utils";
 import ChatsScroller from "../chats-scroller";
-import { AccountWithReputation } from "../../types";
-import { ChatContext } from "../../chat-context-provider";
 import { ChatSidebarHeader } from "./chat-sidebar-header";
 import { ChatSidebarSearch } from "./chat-sidebar-search";
 import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
 import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
-import { useChannelsQuery, useDirectContactsQuery } from "../../queries";
-import { useLeftCommunityChannelsQuery } from "../../queries/left-community-channels-query";
 import { ChatSidebarChannel } from "./chat-sidebar-channel";
+import {
+  AccountWithReputation,
+  ChatContext,
+  getJoinedCommunities,
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
 
 interface Props {
   username: string;
diff --git a/src/common/features/chats/components/chats-welcome.tsx b/src/common/features/chats/components/chats-welcome.tsx
index 6e7df51583a..57ab938dbd6 100644
--- a/src/common/features/chats/components/chats-welcome.tsx
+++ b/src/common/features/chats/components/chats-welcome.tsx
@@ -1,14 +1,17 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { _t } from "../../../i18n";
-import { ChatContext } from "../chat-context-provider";
 import { CodeInput } from "@ui/input";
 import OrDivider from "../../../components/or-divider";
-import { useRestoreChatByPin } from "../mutations/restore-chat-by-pin";
 import { useGetAccountFullQuery } from "../../../api/queries";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
 import { CreateAnAccount } from "./create-an-account";
 import { ChatsImport } from "./chats-import";
+import {
+  ChatContext,
+  getUserChatPrivateKey,
+  getUserChatPublicKey,
+  useRestoreChatByPin
+} from "@ecency/ns-query";
 
 export function ChatsWelcome() {
   const { activeUser } = useMappedStore();
diff --git a/src/common/features/chats/components/create-an-account.tsx b/src/common/features/chats/components/create-an-account.tsx
index 7f8d6af63d7..7eaab90948e 100644
--- a/src/common/features/chats/components/create-an-account.tsx
+++ b/src/common/features/chats/components/create-an-account.tsx
@@ -4,13 +4,14 @@ import React, { useState } from "react";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
 import { Alert } from "@ui/alert";
 import { CodeInput } from "@ui/input";
-import { useJoinChat } from "../mutations";
+import { useJoinChat } from "@ecency/ns-query";
+import { uploadChatKeys } from "../utils/upload-chat-keys";
 
 export function CreateAnAccount() {
   const [step, setStep] = useState(0);
   const [pin, setPin] = useState("");
 
-  const { mutateAsync: joinChat } = useJoinChat();
+  const { mutateAsync: joinChat } = useJoinChat(uploadChatKeys);
 
   return (
     <>
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 295af2b9dd1..1d30801cacd 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -3,21 +3,21 @@ import { History } from "history";
 import { Community } from "../../../store/communities";
 import { _t } from "../../../i18n";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
 import { Spinner } from "@ui/spinner";
 import { Button } from "@ui/button";
 import {
+  ChatContext,
   useAddCommunityChannel,
-  useCreateCommunityChat,
-  useLeaveCommunityChannel
-} from "../mutations";
-import {
   useChannelsQuery,
   useCommunityChannelQuery,
+  useCreateCommunityChat,
+  useKeysQuery,
+  useLeaveCommunityChannel,
+  useLeftCommunityChannelsQuery,
   useNostrJoinedCommunityTeamQuery
-} from "../queries";
-import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
-import { useKeysQuery } from "../queries/keys-query";
+} from "@ecency/ns-query";
+import { useGetAccountFullQuery, useGetAccountsFullQuery } from "../../../api/queries";
+import { updateProfile } from "../../../api/operations";
 
 interface Props {
   history: History;
@@ -29,15 +29,23 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { hasUserJoinedChat } = useContext(ChatContext);
   const { activeUser } = useMappedStore();
 
+  const { data: communityAccount } = useGetAccountFullQuery(props.community.name);
+  const communityTeamQueries = useGetAccountsFullQuery(
+    props.community.team.map(([name, role]) => name)
+  );
   const { data: currentChannel } = useCommunityChannelQuery(props.community);
   const { data: channels } = useChannelsQuery();
-  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(props.community);
+  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(
+    props.community,
+    communityAccount!!,
+    communityTeamQueries.map((query) => query.data!!)
+  );
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
     useAddCommunityChannel(currentChannel?.id);
   const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
-    useCreateCommunityChat(props.community);
+    useCreateCommunityChat(props.community, communityAccount!!, updateProfile);
   const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
     useLeaveCommunityChannel();
 
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index 4611b843bcd..c69c3f4ddd6 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -5,8 +5,8 @@ import qrcode from "qrcode";
 import { classNameObject } from "../../../helper/class-name-object";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { PREFIX } from "../../../util/local-storage";
-import { useKeysQuery } from "../queries/keys-query";
 import { Button } from "@ui/button";
+import { useKeysQuery } from "@ecency/ns-query";
 
 export default function ManageChatKey() {
   const { activeUser } = useMappedStore();
diff --git a/src/common/features/chats/hooks/index.ts b/src/common/features/chats/hooks/index.ts
deleted file mode 100644
index e2a28937cdc..00000000000
--- a/src/common/features/chats/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./use-active-user-switching";
-export * from "./use-auto-scroll-in-chat-box";
diff --git a/src/common/features/chats/hooks/use-active-user-switching.ts b/src/common/features/chats/hooks/use-active-user-switching.ts
deleted file mode 100644
index 5a9693540db..00000000000
--- a/src/common/features/chats/hooks/use-active-user-switching.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useMappedStore } from "../../../store/use-mapped-store";
-import usePrevious from "react-use/lib/usePrevious";
-import { useQueryClient } from "@tanstack/react-query";
-import { ChatQueries } from "../queries";
-import { NostrQueries } from "../nostr/queries";
-import { useEffect } from "react";
-
-export function useActiveUserSwitching() {
-  const { activeUser } = useMappedStore();
-  const previousActiveUser = usePrevious(activeUser);
-
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (activeUser?.username !== previousActiveUser?.username) {
-      queryClient.setQueryData([NostrQueries.PUBLIC_MESSAGES], []);
-      queryClient.setQueryData([NostrQueries.DIRECT_MESSAGES], []);
-      queryClient.setQueryData([ChatQueries.LEFT_CHANNELS], []);
-
-      queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
-      queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
-      queryClient.invalidateQueries([ChatQueries.LEFT_CHANNELS]);
-      queryClient.invalidateQueries([ChatQueries.MESSAGES]);
-    }
-  }, [activeUser, previousActiveUser]);
-}
diff --git a/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts b/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts
deleted file mode 100644
index 61943f0b7ad..00000000000
--- a/src/common/features/chats/hooks/use-auto-scroll-in-chat-box.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useLayoutEffect } from "react";
-import { useMessagesQuery } from "../queries";
-
-export function useAutoScrollInChatBox(username: string) {
-  const { data } = useMessagesQuery(username);
-
-  useLayoutEffect(() => {
-    if (data.length > 0) {
-      const first = data[data.length - 1];
-      const messageElement = document.querySelector(`[data-message-id='${first.id}']`);
-      if (messageElement) {
-        messageElement.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-  }, [data]);
-}
diff --git a/src/common/features/chats/mutations/add-community-channel.ts b/src/common/features/chats/mutations/add-community-channel.ts
deleted file mode 100644
index 2b80885ff13..00000000000
--- a/src/common/features/chats/mutations/add-community-channel.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useNostrFetchMutation, useUpdateLeftChannels } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { convertEvent } from "../nostr/utils/event-converter";
-import { ChatQueries, useChannelsQuery } from "../queries";
-import { useQueryClient } from "@tanstack/react-query";
-import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-export function useAddCommunityChannel(id: string | undefined) {
-  const { data: channels } = useChannelsQuery();
-  const { activeUser } = useMappedStore();
-  const queryClient = useQueryClient();
-
-  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
-  const { mutateAsync: updateLeftChannels } = useUpdateLeftChannels();
-
-  return useNostrFetchMutation(
-    ["chats/add-community-channel"],
-    [
-      {
-        kinds: [Kind.ChannelCreation],
-        ids: id ? [id] : undefined
-      }
-    ],
-    {
-      onSuccess: (events) => {
-        events.forEach((event) => {
-          switch (event.kind) {
-            case Kind.ChannelCreation:
-              const channel = convertEvent<Kind.ChannelCreation>(event);
-              const hasChannelAlready = channels?.some(({ id }) => id === channel?.id);
-              if (!hasChannelAlready && channel) {
-                queryClient.setQueryData(
-                  [ChatQueries.CHANNELS, activeUser?.username],
-                  [...(channels ?? []), channel]
-                );
-              }
-
-              // Remove the community from left list
-              updateLeftChannels({
-                tags: [["d", "left-channel-list"]],
-                eventMetadata: JSON.stringify(
-                  leftCommunityChannelsIds?.filter((id) => id !== id) ?? []
-                )
-              });
-          }
-        });
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/add-direct-contact.ts b/src/common/features/chats/mutations/add-direct-contact.ts
deleted file mode 100644
index bfcaf0d4155..00000000000
--- a/src/common/features/chats/mutations/add-direct-contact.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ChatQueries, useDirectContactsQuery } from "../queries";
-import { DirectContact, useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-export function useAddDirectContact() {
-  const queryClient = useQueryClient();
-
-  const { activeUser } = useMappedStore();
-  const { data: directContacts } = useDirectContactsQuery();
-  const { mutateAsync: publishDirectContact } = useNostrPublishMutation(
-    ["chats/nostr-publish-direct-contact"],
-    Kind.Contacts,
-    () => {}
-  );
-
-  return useMutation(
-    ["chats/add-direct-contact"],
-    async (contact: DirectContact) => {
-      const hasInDirectContactsAlready = directContacts?.some(
-        (c) => c.name === contact.name && c.pubkey === contact.pubkey
-      );
-      if (!hasInDirectContactsAlready) {
-        await publishDirectContact({
-          tags: [
-            ...(directContacts ?? []).map((contact) => [contact.pubkey, contact.name]),
-            [contact.pubkey, contact.name]
-          ],
-          eventMetadata: ""
-        });
-
-        return contact;
-      }
-      return;
-    },
-    {
-      onSuccess: (contact) => {
-        if (contact) {
-          queryClient.setQueryData(
-            [ChatQueries.DIRECT_CONTACTS, activeUser?.username],
-            [...(directContacts ?? []), contact]
-          );
-        }
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/create-community-chat.ts b/src/common/features/chats/mutations/create-community-chat.ts
deleted file mode 100644
index 1d3a9c274dd..00000000000
--- a/src/common/features/chats/mutations/create-community-chat.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { Community } from "../../../store/communities";
-import { ChatQueries, useNostrJoinedCommunityTeamQuery } from "../queries";
-import { getAccountFull } from "../../../api/hive";
-import { updateProfile } from "../../../api/operations";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-/**
- * A custom React Query hook for creating a chat channel within a community.
- * This hook allows you to create a chat channel associated with a specific community.
- */
-export function useCreateCommunityChat(community: Community) {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(community);
-  const { mutateAsync: createChannel } = useNostrPublishMutation(
-    ["chats/nostr-create-channel"],
-    Kind.ChannelCreation,
-    () => {},
-    {}
-  );
-
-  return useMutation(
-    ["chats/create-community-chat"],
-    async () => {
-      // Step 1: Create a chat channel using the `createChannel` mutation.
-      const data = await createChannel({
-        eventMetadata: {
-          name: community.title,
-          about: community.description,
-          communityName: community.name,
-          picture: "",
-          communityModerators: communityTeam,
-          hiddenMessageIds: [],
-          removedUserIds: []
-        },
-        tags: []
-      });
-
-      // Step 2: Extract and format channel metadata from the response.
-      const content = JSON.parse(data?.content!);
-      const channelMetaData = {
-        id: data?.id as string,
-        creator: data?.pubkey as string,
-        created: data?.created_at!,
-        communityName: content.communityName,
-        name: content.name,
-        about: content.about,
-        picture: content.picture
-      };
-
-      // Step 3: Retrieve the user's profile information.
-      const response = await getAccountFull(community.name!);
-      const { posting_json_metadata } = response;
-
-      // Step 4: Update the user's profile with the new channel information.
-      const profile = JSON.parse(posting_json_metadata!).profile;
-      const newProfile = {
-        channel: channelMetaData
-      };
-
-      return await updateProfile(response, { ...profile, ...newProfile });
-    },
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries([ChatQueries.CHANNELS, activeUser?.username]);
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/fetch-previous-messages.ts b/src/common/features/chats/mutations/fetch-previous-messages.ts
deleted file mode 100644
index fbd11c18244..00000000000
--- a/src/common/features/chats/mutations/fetch-previous-messages.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Channel, useNostrFetchMutation } from "../nostr";
-import { Event, Kind } from "../../../../lib/nostr-tools/event";
-import { ChatQueries, useMessagesQuery } from "../queries";
-import { convertEvent } from "../nostr/utils/event-converter";
-
-export function useFetchPreviousMessages(channel?: Channel, onSuccess?: (events: Event[]) => void) {
-  const queryClient = useQueryClient();
-
-  const { data: messages } = useMessagesQuery(channel?.communityName);
-  const { mutateAsync: fetchPreviousChannels } = useNostrFetchMutation(
-    ["chats/nostr-fetch-previous-messages"],
-    [
-      {
-        kinds: [Kind.ChannelMessage],
-        "#e": [channel?.name!!],
-        until: messages[0]?.created,
-        limit: 50
-      }
-    ]
-  );
-
-  return useMutation(["chats/fetch-previous-messages"], async () => fetchPreviousChannels(), {
-    onSuccess: (events) => {
-      const previousMessages = events.map((event) => convertEvent<Kind.ChannelMessage>(event));
-      queryClient.setQueryData(
-        [ChatQueries.MESSAGES, channel?.name],
-        [...messages, ...previousMessages]
-      );
-      queryClient.invalidateQueries([ChatQueries.MESSAGES, channel?.name]);
-
-      onSuccess?.(events);
-    }
-  });
-}
diff --git a/src/common/features/chats/mutations/hide-message-in-channel.ts b/src/common/features/chats/mutations/hide-message-in-channel.ts
deleted file mode 100644
index 9389acaece9..00000000000
--- a/src/common/features/chats/mutations/hide-message-in-channel.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useUpdateCommunityChannel } from "./update-community-channel";
-import { Channel } from "../nostr";
-
-interface Payload {
-  hide: boolean;
-  messageId: string;
-}
-
-export function useHideMessageInChannel(channel?: Channel) {
-  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
-
-  return useMutation(
-    ["chats/hide-message-in-channel", channel?.name],
-    async ({ hide, messageId }: Payload) => {
-      if (!channel) {
-        console.error("[Chat][Nostr] – trying to update not existing channel");
-        return;
-      }
-
-      const newUpdatedChannel: Channel = { ...channel };
-
-      if (hide) {
-        newUpdatedChannel.hiddenMessageIds = [
-          ...(newUpdatedChannel.hiddenMessageIds ?? []),
-          messageId
-        ];
-      } else {
-        newUpdatedChannel.hiddenMessageIds = newUpdatedChannel.hiddenMessageIds?.filter(
-          (id) => id === messageId
-        );
-      }
-
-      return updateChannel(newUpdatedChannel);
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/import-chat-by-keys.ts b/src/common/features/chats/mutations/import-chat-by-keys.ts
deleted file mode 100644
index 9f9149fb225..00000000000
--- a/src/common/features/chats/mutations/import-chat-by-keys.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ChatQueries } from "../queries";
-import { PREFIX } from "../../../util/local-storage";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { EncryptionTools, uploadChatKeys } from "../utils";
-import { useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-
-interface Payload {
-  ecencyChatKey: string;
-  pin: string;
-}
-
-export function useImportChatByKeys(onSuccess?: () => void) {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  const { mutateAsync: uploadKeys } = useMutation(
-    ["chats/upload-public-key"],
-    (keys: Parameters<typeof uploadChatKeys>[1]) => uploadChatKeys(activeUser, keys)
-  );
-  const { mutateAsync: updateProfile } = useNostrPublishMutation(
-    ["chats/update-nostr-profile"],
-    Kind.Metadata,
-    () => {}
-  );
-
-  return useMutation(
-    ["chats/import-chat-by-key"],
-    async ({ ecencyChatKey, pin }: Payload) => {
-      if (!activeUser) {
-        return;
-      }
-      let publicKey;
-      let privateKey;
-      let iv;
-
-      try {
-        const parsedObject = JSON.parse(Buffer.from(ecencyChatKey, "base64").toString());
-        publicKey = parsedObject.pub;
-        privateKey = parsedObject.priv;
-        iv = parsedObject.iv;
-      } catch (e) {
-        throw new Error(
-          "[Chat][Nostr] – no private, public keys or initial vector value in importing"
-        );
-      }
-
-      if (!privateKey || !publicKey || !iv) {
-        throw new Error(
-          "[Chat][Nostr] – no private, public keys or initial vector value in importing"
-        );
-      }
-
-      const initialVector = Buffer.from(iv, "base64");
-      const encryptedKey = EncryptionTools.encrypt(privateKey, pin, initialVector);
-
-      await uploadKeys({ pub: publicKey, priv: encryptedKey, iv: initialVector });
-
-      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
-      queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], publicKey);
-      queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], privateKey);
-
-      await updateProfile({
-        tags: [],
-        eventMetadata: {
-          name: activeUser?.username!,
-          about: "",
-          picture: ""
-        }
-      });
-    },
-    {
-      onSuccess
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
index 5c539979514..ed1ed19caac 100644
--- a/src/common/features/chats/mutations/index.ts
+++ b/src/common/features/chats/mutations/index.ts
@@ -1,16 +1,2 @@
 export * from "./upload";
-export * from "./send-message";
-export * from "./join-chat";
-export * from "./create-community-chat";
-export * from "./add-community-channel";
-export * from "./add-direct-contact";
-export * from "./leave-community-channel";
-export * from "./update-community-channel";
-export * from "./update-channel-moderator";
-export * from "./fetch-previous-messages";
-export * from "./update-channel-blocked-users";
-export * from "./import-chat-by-keys";
-export * from "./hide-message-in-channel";
-export * from "./logout-from-chats";
 export * from "./invite-via-post-comment";
-export * from "./resend-message";
diff --git a/src/common/features/chats/mutations/join-chat.ts b/src/common/features/chats/mutations/join-chat.ts
deleted file mode 100644
index 977aa8ac9cd..00000000000
--- a/src/common/features/chats/mutations/join-chat.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { createNoStrAccount, EncryptionTools, uploadChatKeys } from "../utils";
-import { PREFIX } from "../../../util/local-storage";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { ChatQueries } from "../queries";
-
-const crypto = require("crypto");
-
-/**
- * Custom React hook for joining a chat with some side effects.
- *
- * This hook manages the process of joining a chat, resetting chat state, and uploading
- * a public key for secure communication.
- *
- * @param onSuccess - A callback function to be called upon successful completion of chat join.
- *
- * @returns A function from the `useMutation` hook, which can be used to initiate the chat join process.
- */
-export function useJoinChat(onSuccess?: () => void) {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  const { mutateAsync: uploadKeys } = useMutation(
-    ["chats/upload-public-key"],
-    (keys: Parameters<typeof uploadChatKeys>[1]) => uploadChatKeys(activeUser, keys)
-  );
-  const { mutateAsync: updateProfile } = useNostrPublishMutation(
-    ["chats/update-nostr-profile"],
-    Kind.Metadata,
-    () => {}
-  );
-
-  return useMutation(
-    ["chat-join-chat"],
-    async (pin: string) => {
-      const keys = createNoStrAccount();
-      localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
-
-      const initialVector = crypto.randomBytes(16);
-      const encryptedKey = EncryptionTools.encrypt(keys.priv, pin, initialVector);
-      await uploadKeys({ pub: keys.pub, priv: encryptedKey, iv: initialVector });
-
-      queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], keys.pub);
-      queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], keys.priv);
-
-      await updateProfile({
-        tags: [],
-        eventMetadata: {
-          name: activeUser?.username!,
-          about: "",
-          picture: ""
-        }
-      });
-    },
-    {
-      onSuccess
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/leave-community-channel.ts b/src/common/features/chats/mutations/leave-community-channel.ts
deleted file mode 100644
index 90446ef53df..00000000000
--- a/src/common/features/chats/mutations/leave-community-channel.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useUpdateLeftChannels } from "../nostr";
-import { useMutation } from "@tanstack/react-query";
-import { useLeftCommunityChannelsQuery } from "../queries/left-community-channels-query";
-
-export function useLeaveCommunityChannel(onSuccess?: () => void) {
-  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
-  const { mutateAsync: updateLeftChannels } = useUpdateLeftChannels();
-
-  return useMutation(["chats/leave-community-channels"], async (name: string) =>
-    updateLeftChannels(
-      {
-        tags: [["d", "left-channel-list"]],
-        eventMetadata: JSON.stringify([...(leftCommunityChannelsIds ?? []), name])
-      },
-      {
-        onSuccess
-      }
-    )
-  );
-}
diff --git a/src/common/features/chats/mutations/logout-from-chats.tsx b/src/common/features/chats/mutations/logout-from-chats.tsx
deleted file mode 100644
index 7ca4e8397fc..00000000000
--- a/src/common/features/chats/mutations/logout-from-chats.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ChatQueries } from "../queries";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { PREFIX } from "../../../util/local-storage";
-
-export function useLogoutFromChats() {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  return useMutation(["chats/logout-from-chats"], async () => {
-    localStorage.removeItem(PREFIX + "_nostr_pr_" + activeUser?.username);
-    queryClient.setQueryData([ChatQueries.PUBLIC_KEY, activeUser?.username], "");
-    queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], "");
-    queryClient.setQueryData([ChatQueries.CHANNELS, activeUser?.username], []);
-    queryClient.setQueryData([ChatQueries.DIRECT_CONTACTS, activeUser?.username], []);
-  });
-}
diff --git a/src/common/features/chats/mutations/resend-message.ts b/src/common/features/chats/mutations/resend-message.ts
deleted file mode 100644
index dc5f838ed90..00000000000
--- a/src/common/features/chats/mutations/resend-message.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
-import isCommunity from "../../../helper/is-community";
-import { Channel, Message, useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
-import { ChatQueries, useMessagesQuery } from "../queries";
-import { useKeysQuery } from "../queries/keys-query";
-import { PublishNostrError } from "../nostr/errors";
-import { convertEvent } from "../nostr/utils/event-converter";
-import { Kind } from "../../../../lib/nostr-tools/event";
-
-export function useResendMessage(
-  currentChannel?: Channel,
-  currentUser?: string,
-  onSuccess?: () => void
-) {
-  const queryClient = useQueryClient();
-
-  const { receiverPubKey } = useContext(ChatContext);
-  const { privateKey, publicKey } = useKeysQuery();
-  const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
-
-  const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
-    privateKey!!,
-    receiverPubKey,
-    undefined
-  );
-  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(
-    currentChannel?.id,
-    undefined
-  );
-
-  return useMutation(
-    ["chats/send-message"],
-    async (message: Message) => {
-      if (!currentChannel && isCommunity(currentUser)) {
-        throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
-      }
-
-      if (currentChannel) {
-        return sendPublicMessage({ message: message.content });
-      } else if (currentUser) {
-        return sendDirectMessage(message.content);
-      } else {
-        throw new Error("[Chat][SendMessage] – no receiver");
-      }
-    },
-    {
-      onSuccess: (message) => {
-        message.sent = 0;
-        queryClient.setQueryData(
-          [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
-          [...messages.filter((m) => m.content !== message.content && m.sent !== 2), message]
-        );
-        onSuccess?.();
-      },
-      onError: async (error: PublishNostrError | Error) => {
-        if ("event" in error) {
-          const message = await convertEvent<Kind.EncryptedDirectMessage | Kind.ChannelMessage>(
-            error.event,
-            publicKey!!,
-            privateKey!!
-          )!!;
-          message.sent = 2;
-          queryClient.setQueryData(
-            [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
-            [...messages.filter((m) => m.content !== message.content && m.sent !== 2), message]
-          );
-        }
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/restore-chat-by-pin.ts b/src/common/features/chats/mutations/restore-chat-by-pin.ts
deleted file mode 100644
index 0bc6a22861d..00000000000
--- a/src/common/features/chats/mutations/restore-chat-by-pin.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { PREFIX } from "../../../util/local-storage";
-import { EncryptionTools, getUserChatPrivateKey } from "../utils";
-import { ChatQueries } from "../queries";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { useKeysQuery } from "../queries/keys-query";
-import { useGetAccountFullQuery } from "../../../api/queries";
-
-export function useRestoreChatByPin() {
-  const queryClient = useQueryClient();
-  const { activeUser } = useMappedStore();
-
-  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
-  const { mutateAsync: updateProfile } = useNostrPublishMutation(
-    ["chats/update-nostr-profile"],
-    Kind.Metadata,
-    () => {}
-  );
-  const { publicKey } = useKeysQuery();
-
-  return useMutation(["chats/restore-chat-by-pin"], async (pin: string) => {
-    if (!pin || !publicKey || !fullAccount) {
-      throw new Error("[Chat][Nostr] – no pin, public key or account information");
-    }
-
-    const { iv: initialVector, key: privateKey } = getUserChatPrivateKey(fullAccount!!);
-
-    if (!initialVector || !privateKey) {
-      throw new Error("[Chat][Nostr] – no initial vector or private key");
-    }
-
-    const decryptedKey = EncryptionTools.decrypt(
-      privateKey,
-      pin,
-      Buffer.from(initialVector, "base64")
-    );
-    queryClient.setQueryData([ChatQueries.PRIVATE_KEY, activeUser?.username], decryptedKey);
-
-    localStorage.setItem(PREFIX + "_nostr_pr_" + activeUser?.username, pin);
-
-    await updateProfile({
-      tags: [],
-      eventMetadata: {
-        name: activeUser?.username!,
-        about: "",
-        picture: ""
-      }
-    });
-  });
-}
diff --git a/src/common/features/chats/mutations/send-message.ts b/src/common/features/chats/mutations/send-message.ts
deleted file mode 100644
index 7b73e4b0b20..00000000000
--- a/src/common/features/chats/mutations/send-message.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { UPLOADING } from "../components/chat-popup/chat-constants";
-import { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
-import isCommunity from "../../../helper/is-community";
-import { Channel, useNostrSendDirectMessage, useNostrSendPublicMessage } from "../nostr";
-import { useAddDirectContact } from "./add-direct-contact";
-import { ChatQueries, useMessagesQuery } from "../queries";
-import { useKeysQuery } from "../queries/keys-query";
-import { PublishNostrError } from "../nostr/errors";
-import { convertEvent } from "../nostr/utils/event-converter";
-import { Kind } from "../../../../lib/nostr-tools/event";
-
-export function useSendMessage(
-  currentChannel?: Channel,
-  currentUser?: string,
-  onSuccess?: () => void
-) {
-  const queryClient = useQueryClient();
-
-  const { receiverPubKey } = useContext(ChatContext);
-  const { privateKey, publicKey } = useKeysQuery();
-  const { data: messages } = useMessagesQuery(currentChannel?.communityName ?? currentUser);
-
-  const { mutateAsync: sendDirectMessage } = useNostrSendDirectMessage(
-    privateKey!!,
-    receiverPubKey,
-    undefined
-  );
-  const { mutateAsync: sendPublicMessage } = useNostrSendPublicMessage(
-    currentChannel?.id,
-    undefined
-  );
-  const { mutateAsync: addDirectContact } = useAddDirectContact();
-
-  return useMutation(
-    ["chats/send-message"],
-    async (message: string) => {
-      if (!message || message.includes(UPLOADING)) {
-        throw new Error("[Chat][SendMessage] – empty message or has uploading file");
-      }
-
-      if (!currentChannel && isCommunity(currentUser)) {
-        throw new Error("[Chat][SendMessage] – provided user is community but channel not found");
-      }
-
-      // Add user to direct contacts if it's not there yet
-      // E.g. if user opened chat room directly from the address bar
-      if (currentUser) {
-        addDirectContact({ pubkey: receiverPubKey, name: currentUser });
-      }
-
-      if (currentChannel) {
-        return sendPublicMessage({ message });
-      } else if (currentUser) {
-        return sendDirectMessage(message);
-      } else {
-        throw new Error("[Chat][SendMessage] – no receiver");
-      }
-    },
-    {
-      onSuccess: (message) => {
-        message.sent = 0;
-        queryClient.setQueryData(
-          [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
-          [...messages, message]
-        );
-        onSuccess?.();
-      },
-      onError: async (error: PublishNostrError | Error) => {
-        if ("event" in error) {
-          const message = await convertEvent<Kind.EncryptedDirectMessage | Kind.ChannelMessage>(
-            error.event,
-            publicKey!!,
-            privateKey!!
-          )!!;
-          message.sent = 2;
-          queryClient.setQueryData(
-            [ChatQueries.MESSAGES, currentChannel?.communityName ?? currentUser],
-            [...messages, message]
-          );
-        }
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/update-channel-blocked-users.ts b/src/common/features/chats/mutations/update-channel-blocked-users.ts
deleted file mode 100644
index 7de84ad0c22..00000000000
--- a/src/common/features/chats/mutations/update-channel-blocked-users.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useUpdateCommunityChannel } from "./update-community-channel";
-import { useMutation } from "@tanstack/react-query";
-import { Channel } from "../nostr";
-
-export function useUpdateChannelBlockedUsers(channel: Channel) {
-  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
-
-  return useMutation(
-    ["chats/update-channel-blocked-users", channel?.communityName],
-    async (users: string[]) => {
-      if (!channel) {
-        console.error("[Chat][Nostr] – trying to update not existing channel");
-        return;
-      }
-
-      const newUpdatedChannel: Channel = { ...channel };
-
-      newUpdatedChannel.removedUserIds = users;
-
-      return updateChannel(newUpdatedChannel);
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/update-channel-moderator.ts b/src/common/features/chats/mutations/update-channel-moderator.ts
deleted file mode 100644
index d1bd56502ce..00000000000
--- a/src/common/features/chats/mutations/update-channel-moderator.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useUpdateCommunityChannel } from "./update-community-channel";
-import { Channel, CommunityModerator } from "../nostr";
-
-export function useUpdateChannelModerator(channel?: Channel) {
-  const { mutateAsync: updateChannel } = useUpdateCommunityChannel(channel);
-
-  return useMutation(
-    ["chats/update-channel-moderator", channel?.communityName],
-    async (moderator: CommunityModerator) => {
-      const moderatorIndex = channel?.communityModerators?.findIndex(
-        (mod) => mod.name === moderator.name
-      );
-      if (!channel) {
-        console.error("[Chat][Nostr] – trying to update not existing channel");
-        return;
-      }
-
-      const newUpdatedChannel: Channel = { ...channel };
-      if (moderatorIndex === -1) {
-        newUpdatedChannel!.communityModerators?.push(moderator);
-      } else {
-        newUpdatedChannel!.communityModerators![moderatorIndex!] = moderator;
-      }
-
-      return updateChannel(newUpdatedChannel);
-    }
-  );
-}
diff --git a/src/common/features/chats/mutations/update-community-channel.ts b/src/common/features/chats/mutations/update-community-channel.ts
deleted file mode 100644
index d327145dd03..00000000000
--- a/src/common/features/chats/mutations/update-community-channel.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ChatQueries, useChannelsQuery } from "../queries";
-import { Channel, useNostrPublishMutation } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { useFindHealthyRelayQuery } from "../nostr/mutations/find-healthy-relay";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-export function useUpdateCommunityChannel(channel?: Channel) {
-  const queryClient = useQueryClient();
-  const { data: channels } = useChannelsQuery();
-  const { activeUser } = useMappedStore();
-
-  const { mutateAsync: updateChannel } = useNostrPublishMutation(
-    ["chats/nostr-update-channel", channel?.communityName],
-    Kind.ChannelMetadata,
-    () => {}
-  );
-  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
-
-  return useMutation(
-    ["chats/update-community-channel", channel?.communityName],
-    async (newUpdatedChannel: Channel) => {
-      if (!channel) {
-        return;
-      }
-
-      const relay = await findHealthyRelay(channel.id);
-
-      await updateChannel({
-        tags: [["e", channel.id, ...(relay ? [relay] : [])]],
-        eventMetadata: JSON.stringify(newUpdatedChannel)
-      });
-
-      return newUpdatedChannel;
-    },
-    {
-      onSuccess: (updatedChannel) => {
-        if (!updatedChannel) {
-          return;
-        }
-
-        const tempChannels = [...(channels ?? [])];
-        const index = tempChannels.findIndex((ch) => ch.id === updatedChannel?.id);
-        tempChannels[index] = updatedChannel;
-
-        queryClient.setQueryData([ChatQueries.CHANNELS, activeUser?.username], tempChannels);
-      }
-    }
-  );
-}
diff --git a/src/common/features/chats/nostr/Readme.md b/src/common/features/chats/nostr/Readme.md
deleted file mode 100644
index e403e5756c4..00000000000
--- a/src/common/features/chats/nostr/Readme.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### Documentation source
-
-https://github.com/nostr-protocol/nips/blob/master/README.md
diff --git a/src/common/features/chats/nostr/core/index.ts b/src/common/features/chats/nostr/core/index.ts
deleted file mode 100644
index 47ae2fa4260..00000000000
--- a/src/common/features/chats/nostr/core/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./nostr-fetch-mutation";
-export * from "./nostr-fetch-query";
-export * from "./nostr-publish-mutation";
-export * from "./nostr-listeners-provider";
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts b/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
deleted file mode 100644
index f9cfc78ca23..00000000000
--- a/src/common/features/chats/nostr/core/nostr-fetch-mutation.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MutationKey, useMutation, UseMutationOptions } from "@tanstack/react-query";
-import { useContext } from "react";
-import { NostrContext } from "../nostr-context";
-import { listenWhileFinish } from "../utils";
-import { Event } from "../../../../../lib/nostr-tools/event";
-import { Filter } from "../../../../../lib/nostr-tools/filter";
-import { useKeysQuery } from "../../queries/keys-query";
-
-export function useNostrFetchMutation(
-  key: MutationKey,
-  filters: Filter[],
-  options?: UseMutationOptions<Event[], Error>
-) {
-  const { pool, readRelays } = useContext(NostrContext);
-  const { publicKey } = useKeysQuery();
-
-  return useMutation(
-    key,
-    () => listenWhileFinish(pool, readRelays, [], publicKey!!, filters),
-    options
-  );
-}
diff --git a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx b/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
deleted file mode 100644
index 6d0c47201ef..00000000000
--- a/src/common/features/chats/nostr/core/nostr-fetch-query.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { QueryKey, useQuery } from "@tanstack/react-query";
-import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import { useContext } from "react";
-import { NostrContext } from "../nostr-context";
-import { UseQueryOptions } from "@tanstack/react-query/src/types";
-import { listenWhileFinish } from "../utils";
-import { Filter } from "../../../../../lib/nostr-tools/filter";
-import { useKeysQuery } from "../../queries/keys-query";
-
-export function useNostrFetchQuery<DATA>(
-  key: QueryKey,
-  kindsOrFilters: (Kind | Filter)[],
-  dataResolver: (events: Event[]) => DATA | Promise<DATA>,
-  queryOptions?: UseQueryOptions<DATA>
-) {
-  const { pool, readRelays } = useContext(NostrContext);
-  const { publicKey } = useKeysQuery();
-
-  return useQuery(
-    key,
-    async () => {
-      const kinds = kindsOrFilters.every((item) => typeof item === "number")
-        ? (kindsOrFilters as Kind[])
-        : [];
-      const filters = kindsOrFilters.every((item) => typeof item === "object")
-        ? (kindsOrFilters as Filter[])
-        : undefined;
-      const events = await listenWhileFinish(pool, readRelays, kinds, publicKey!!, filters);
-      return dataResolver(events);
-    },
-    queryOptions
-  );
-}
diff --git a/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx b/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
deleted file mode 100644
index d0158e24fe7..00000000000
--- a/src/common/features/chats/nostr/core/nostr-listeners-provider.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { createContext, PropsWithChildren } from "react";
-import useMap from "react-use/lib/useMap";
-
-export const NostrListenerQueriesContext = createContext<{
-  subscribers: Record<string, boolean>;
-  set: (key: string, value: boolean) => void;
-  get: (key: string) => boolean;
-}>({
-  subscribers: {},
-  set: () => {},
-  get: () => false
-});
-
-export function NostrListenerQueriesProvider({ children }: PropsWithChildren<unknown>) {
-  const [subscribers, { set, get }] = useMap<Record<string, boolean>>();
-
-  return (
-    <NostrListenerQueriesContext.Provider value={{ subscribers, set, get }} children={children} />
-  );
-}
diff --git a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts b/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
deleted file mode 100644
index b2df1eaae9b..00000000000
--- a/src/common/features/chats/nostr/core/nostr-publish-mutation.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  MutationKey,
-  useMutation,
-  UseMutationOptions,
-  useQueryClient
-} from "@tanstack/react-query";
-import { useContext } from "react";
-import { Event, getEventHash, Kind, signEvent } from "../../../../../lib/nostr-tools/event";
-import { NostrContext } from "../nostr-context";
-import { Metadata } from "../types";
-import { ChatQueries } from "../../queries";
-import { useMappedStore } from "../../../../store/use-mapped-store";
-import { PublishNostrError } from "../errors";
-
-type Payload = { eventMetadata: Metadata | string; tags: string[][] };
-
-export function useNostrPublishMutation(
-  key: MutationKey,
-  kind: Kind,
-  onBeforeSend: (event: Event) => void,
-  options?: UseMutationOptions<Event, PublishNostrError | Error, Payload>
-) {
-  const { activeUser } = useMappedStore();
-  const { pool, writeRelays } = useContext(NostrContext);
-  const queryClient = useQueryClient();
-
-  const sign = async (event: Event) => ({
-    ...event,
-    id: getEventHash(event),
-    sig: await signEvent(
-      event,
-      queryClient.getQueryData<string>([ChatQueries.PRIVATE_KEY, activeUser?.username])!!
-    )
-  });
-
-  return useMutation(
-    key,
-    ({ eventMetadata, tags }: Payload) =>
-      new Promise<Event>(async (resolve, reject) => {
-        let signedEvent: Event | null;
-        try {
-          signedEvent = await sign({
-            kind,
-            id: "",
-            sig: "",
-            content:
-              typeof eventMetadata === "object" ? JSON.stringify(eventMetadata) : eventMetadata,
-            pubkey: queryClient.getQueryData<string>([
-              ChatQueries.PUBLIC_KEY,
-              activeUser?.username
-            ])!!,
-            created_at: Math.floor(Date.now() / 1000),
-            tags
-          });
-        } catch (e) {
-          signedEvent = null;
-        }
-        if (!signedEvent) {
-          reject(new Error("[Chat][Nostr] – event couldn't be signed(kind: " + kind));
-          return;
-        }
-
-        onBeforeSend(signedEvent);
-
-        const publishInfo = pool?.publish(writeRelays, signedEvent);
-        publishInfo?.on("ok", () => resolve(signedEvent!!));
-        publishInfo?.on("failed", () =>
-          reject(
-            new PublishNostrError(
-              "[Chat][Nostr] – failed to publish event (kind: " + signedEvent!!.kind,
-              signedEvent!!
-            )
-          )
-        );
-      }),
-    options
-  );
-}
diff --git a/src/common/features/chats/nostr/errors/index.ts b/src/common/features/chats/nostr/errors/index.ts
deleted file mode 100644
index 7cabd297375..00000000000
--- a/src/common/features/chats/nostr/errors/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./publish-nostr-error";
diff --git a/src/common/features/chats/nostr/errors/publish-nostr-error.ts b/src/common/features/chats/nostr/errors/publish-nostr-error.ts
deleted file mode 100644
index c338dc447e1..00000000000
--- a/src/common/features/chats/nostr/errors/publish-nostr-error.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Event } from "../../../../../lib/nostr-tools/event";
-
-export class PublishNostrError extends Error {
-  public event: Event;
-
-  constructor(message: string, event: Event) {
-    super(message);
-    this.event = event;
-  }
-}
diff --git a/src/common/features/chats/nostr/index.ts b/src/common/features/chats/nostr/index.ts
deleted file mode 100644
index 31b2039bdbe..00000000000
--- a/src/common/features/chats/nostr/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./nostr-provider";
-export * from "./nostr-context";
-export * from "./core";
-export * from "./mutations";
-export * from "./types";
diff --git a/src/common/features/chats/nostr/mutations/find-healthy-relay.ts b/src/common/features/chats/nostr/mutations/find-healthy-relay.ts
deleted file mode 100644
index 2762f7bad04..00000000000
--- a/src/common/features/chats/nostr/mutations/find-healthy-relay.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { NostrContext } from "../nostr-context";
-import { useMutation } from "@tanstack/react-query";
-
-export function useFindHealthyRelayQuery() {
-  const { pool } = useContext(NostrContext);
-
-  return useMutation(["chats/nostr-find-healthy-relay"], async (channelId: string) => {
-    const relays = (pool?.seenOn(channelId) as string[]) ?? [];
-    for (const relay of relays) {
-      try {
-        await pool?.ensureRelay(relay);
-        return relay;
-      } catch (e) {
-        return undefined;
-      }
-    }
-    return undefined;
-  });
-}
diff --git a/src/common/features/chats/nostr/mutations/index.ts b/src/common/features/chats/nostr/mutations/index.ts
deleted file mode 100644
index 56960208a26..00000000000
--- a/src/common/features/chats/nostr/mutations/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./send-direct-message";
-export * from "./send-public-message";
-export * from "./update-left-channels";
diff --git a/src/common/features/chats/nostr/mutations/send-direct-message.ts b/src/common/features/chats/nostr/mutations/send-direct-message.ts
deleted file mode 100644
index d84d601eadd..00000000000
--- a/src/common/features/chats/nostr/mutations/send-direct-message.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useNostrPublishMutation } from "../core";
-import { Kind } from "../../../../../lib/nostr-tools/event";
-import { useMutation } from "@tanstack/react-query";
-import { encrypt } from "../../../../../lib/nostr-tools/nip04";
-import { useFindHealthyRelayQuery } from "./find-healthy-relay";
-import { convertEvent } from "../utils/event-converter";
-import { useKeysQuery } from "../../queries/keys-query";
-
-export function useNostrSendDirectMessage(
-  ownerPrivateKey: string,
-  destinationPublicKey: string,
-  parent?: string
-) {
-  const { privateKey, publicKey } = useKeysQuery();
-
-  const { mutateAsync: publishEncryptedMessage } = useNostrPublishMutation(
-    ["chats/nostr-publish-encrypted-message"],
-    Kind.EncryptedDirectMessage,
-    () => {}
-  );
-  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
-
-  return useMutation(["chats/send-direct-message"], async (message: string) => {
-    if (!publicKey || !privateKey) {
-      throw new Error(
-        "[Chat][Nostr] – attempting to send direct message with no private and public key"
-      );
-    }
-
-    const encryptedMessage = await encrypt(ownerPrivateKey, destinationPublicKey, message);
-    const tags = [["p", destinationPublicKey]];
-
-    if (parent) {
-      const relay = await findHealthyRelay(parent);
-      if (relay) {
-        tags.push(["e", parent, relay, "root"]);
-      }
-    }
-    const event = await publishEncryptedMessage({
-      tags,
-      eventMetadata: encryptedMessage
-    });
-    return convertEvent<Kind.EncryptedDirectMessage>(event, publicKey, privateKey)!!;
-  });
-}
diff --git a/src/common/features/chats/nostr/mutations/send-public-message.ts b/src/common/features/chats/nostr/mutations/send-public-message.ts
deleted file mode 100644
index 1fdacbcb103..00000000000
--- a/src/common/features/chats/nostr/mutations/send-public-message.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useNostrPublishMutation } from "../core";
-import { Kind } from "../../../../../lib/nostr-tools/event";
-import { useMutation } from "@tanstack/react-query";
-import { useFindHealthyRelayQuery } from "./find-healthy-relay";
-import { convertEvent } from "../utils/event-converter";
-
-interface Payload {
-  message: string;
-  mentions?: string[];
-}
-
-export function useNostrSendPublicMessage(channelId?: string, parent?: string) {
-  const { mutateAsync: publishChannelMessage } = useNostrPublishMutation(
-    ["chats/nostr-publish-channel-message"],
-    Kind.ChannelMessage,
-    () => {}
-  );
-  const { mutateAsync: findHealthyRelay } = useFindHealthyRelayQuery();
-
-  return useMutation(["chats/send-public-message"], async ({ message, mentions }: Payload) => {
-    const root = parent || channelId;
-
-    if (!root) {
-      throw new Error("[Chat][Nostr] – trying to send public message to not existing channel");
-    }
-
-    const relay = await findHealthyRelay(root);
-
-    const tags: string[][] = [];
-    if (relay) {
-      tags.push(["e", root, relay, "root"]);
-    }
-
-    if (mentions) {
-      mentions.forEach((m) => tags.push(["p", m]));
-    }
-
-    const event = await publishChannelMessage({
-      tags,
-      eventMetadata: message
-    });
-    return convertEvent<Kind.ChannelMessage>(event)!!;
-  });
-}
diff --git a/src/common/features/chats/nostr/mutations/update-left-channels.ts b/src/common/features/chats/nostr/mutations/update-left-channels.ts
deleted file mode 100644
index aa994ceece1..00000000000
--- a/src/common/features/chats/nostr/mutations/update-left-channels.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useNostrPublishMutation } from "../core";
-
-export function useUpdateLeftChannels() {
-  return useNostrPublishMutation(["chats/nostr-update-left-channels-list"], 30078, () => {});
-}
diff --git a/src/common/features/chats/nostr/nostr-context.ts b/src/common/features/chats/nostr/nostr-context.ts
deleted file mode 100644
index 735d4e3fc89..00000000000
--- a/src/common/features/chats/nostr/nostr-context.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createContext } from "react";
-import SimplePool from "../../../../lib/nostr-tools/pool";
-
-export const NostrContext = createContext<{
-  pool: SimplePool | undefined;
-  readRelays: string[];
-  writeRelays: string[];
-}>({
-  pool: undefined,
-  writeRelays: [],
-  readRelays: []
-});
diff --git a/src/common/features/chats/nostr/nostr-filters.ts b/src/common/features/chats/nostr/nostr-filters.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/common/features/chats/nostr/nostr-provider.tsx b/src/common/features/chats/nostr/nostr-provider.tsx
deleted file mode 100644
index 399a76f5f69..00000000000
--- a/src/common/features/chats/nostr/nostr-provider.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { PropsWithChildren, useMemo, useRef } from "react";
-import SimplePool from "../../../../lib/nostr-tools/pool";
-import { NostrContext } from "./nostr-context";
-
-export const RELAYS = {
-  "wss://relay1.nostrchat.io": { read: true, write: true },
-  "wss://relay2.nostrchat.io": { read: true, write: true },
-  "wss://relay.damus.io": { read: true, write: true },
-  "wss://relay.snort.social": { read: true, write: true },
-  "wss://nos.lol": { read: true, write: true }
-};
-
-export function NostrProvider({ children }: PropsWithChildren<unknown>) {
-  const poolRef = useRef(new SimplePool());
-  const lowLatencyPoolRef = useRef(new SimplePool({ eoseSubTimeout: 10000 }));
-  const useLowLatency = false;
-
-  const readRelays = useMemo(() => Object.keys(RELAYS).filter((r) => RELAYS[r].read), []);
-  const writeRelays = useMemo(() => Object.keys(RELAYS).filter((r) => RELAYS[r].write), []);
-
-  return (
-    <NostrContext.Provider
-      value={{
-        pool: useLowLatency ? lowLatencyPoolRef.current : poolRef.current,
-        readRelays,
-        writeRelays
-      }}
-    >
-      {children}
-    </NostrContext.Provider>
-  );
-}
diff --git a/src/common/features/chats/nostr/queries/direct-messages-query.ts b/src/common/features/chats/nostr/queries/direct-messages-query.ts
deleted file mode 100644
index 80d21c0400d..00000000000
--- a/src/common/features/chats/nostr/queries/direct-messages-query.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useNostrFetchQuery } from "../core";
-import { Filter } from "../../../../../lib/nostr-tools/filter";
-import { Kind } from "../../../../../lib/nostr-tools/event";
-import { convertEvent } from "../utils/event-converter";
-import { NostrQueries } from "./queries";
-import { DirectContact, Message } from "../types";
-
-export function useDirectMessagesQuery(
-  directContacts: DirectContact[],
-  publicKey: string,
-  privateKey: string
-) {
-  return useNostrFetchQuery<Message[]>(
-    [NostrQueries.DIRECT_MESSAGES],
-    directContacts.reduce<Filter[]>(
-      (acc, contact) => [
-        ...acc,
-        {
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [contact.pubkey],
-          authors: [publicKey]
-        },
-        {
-          kinds: [Kind.EncryptedDirectMessage],
-          "#p": [publicKey],
-          authors: [contact.pubkey]
-        }
-      ],
-      []
-    ),
-    async (events) =>
-      Promise.all(
-        events.map(
-          (event) => convertEvent<Kind.EncryptedDirectMessage>(event, publicKey, privateKey)!!
-        )
-      ),
-    {
-      enabled: directContacts.length > 0,
-      initialData: [],
-      refetchInterval: 10000
-    }
-  );
-}
diff --git a/src/common/features/chats/nostr/queries/get-user-profile-query.ts b/src/common/features/chats/nostr/queries/get-user-profile-query.ts
deleted file mode 100644
index 8927ef58db6..00000000000
--- a/src/common/features/chats/nostr/queries/get-user-profile-query.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useNostrFetchQuery } from "../core";
-import { Kind } from "../../../../../lib/nostr-tools/event";
-import { convertEvent } from "../utils/event-converter";
-
-export function useNostrGetUserProfileQuery(user: string) {
-  return useNostrFetchQuery(
-    ["chats/nostr-get-user-profile", user],
-    [
-      {
-        kinds: [Kind.Metadata],
-        authors: [user]
-      }
-    ],
-    (events) =>
-      events.map((event) => convertEvent<Kind.Metadata>(event)!!).filter((profile) => profile!!)
-  );
-}
-
-export function useNostrGetUserProfilesQuery(users: string[]) {
-  return useNostrFetchQuery(
-    ["chats/nostr-get-user-profile", users.join("")],
-    users.map((user) => ({
-      kinds: [Kind.Metadata],
-      authors: [user]
-    })),
-    (events) =>
-      events.map((event) => convertEvent<Kind.Metadata>(event)!!).filter((profile) => profile!!),
-    {
-      initialData: []
-    }
-  );
-}
diff --git a/src/common/features/chats/nostr/queries/index.ts b/src/common/features/chats/nostr/queries/index.ts
deleted file mode 100644
index 958dfc95a67..00000000000
--- a/src/common/features/chats/nostr/queries/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./direct-messages-query";
-export * from "./public-messages-query";
-export * from "./get-user-profile-query";
-export * from "./queries";
diff --git a/src/common/features/chats/nostr/queries/public-messages-query.ts b/src/common/features/chats/nostr/queries/public-messages-query.ts
deleted file mode 100644
index 26f550a8010..00000000000
--- a/src/common/features/chats/nostr/queries/public-messages-query.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useNostrFetchQuery } from "../core";
-import { Filter } from "../../../../../lib/nostr-tools/filter";
-import { Kind } from "../../../../../lib/nostr-tools/event";
-import { convertEvent } from "../utils/event-converter";
-import { NostrQueries } from "./queries";
-import { Channel, Message } from "../types";
-
-export function usePublicMessagesQuery(channels: Channel[]) {
-  return useNostrFetchQuery<Message[]>(
-    [NostrQueries.PUBLIC_MESSAGES],
-    channels.reduce<Filter[]>(
-      (acc, channel) => [
-        ...acc,
-        {
-          kinds: [Kind.ChannelMessage],
-          "#e": [channel.id],
-          limit: 50
-        }
-      ],
-      []
-    ),
-    (events) =>
-      events.map((event) => convertEvent(event)).filter((message) => !!message) as Message[],
-    {
-      enabled: channels.length > 0,
-      initialData: [],
-      refetchInterval: 10000
-    }
-  );
-}
diff --git a/src/common/features/chats/nostr/queries/queries.ts b/src/common/features/chats/nostr/queries/queries.ts
deleted file mode 100644
index 8fecc4c67d2..00000000000
--- a/src/common/features/chats/nostr/queries/queries.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum NostrQueries {
-  DIRECT_MESSAGES = "chats/nostr-encrypted-direct-messages",
-  PUBLIC_MESSAGES = "chats/nostr-public-messages"
-}
diff --git a/src/common/features/chats/nostr/types/channel.ts b/src/common/features/chats/nostr/types/channel.ts
deleted file mode 100644
index 9d0e24d208f..00000000000
--- a/src/common/features/chats/nostr/types/channel.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Metadata } from "./metadata";
-
-export type Channel = { id: string; creator: string; created: number } & Metadata;
-
-export type ChannelUpdate = { channelId: string } & Channel;
diff --git a/src/common/features/chats/nostr/types/community-moderator.ts b/src/common/features/chats/nostr/types/community-moderator.ts
deleted file mode 100644
index 48cd7dc86ff..00000000000
--- a/src/common/features/chats/nostr/types/community-moderator.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type CommunityModerator = {
-  name: string;
-  pubkey: string;
-  role: string;
-};
diff --git a/src/common/features/chats/nostr/types/direct-contact.ts b/src/common/features/chats/nostr/types/direct-contact.ts
deleted file mode 100644
index 0787b8a3a3f..00000000000
--- a/src/common/features/chats/nostr/types/direct-contact.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type DirectContact = { name: string; pubkey: string };
diff --git a/src/common/features/chats/nostr/types/index.ts b/src/common/features/chats/nostr/types/index.ts
deleted file mode 100644
index 1348ead5d9c..00000000000
--- a/src/common/features/chats/nostr/types/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./metadata";
-export * from "./community-moderator";
-export * from "./profile";
-export * from "./direct-contact";
-export * from "./channel";
-export * from "./messages";
diff --git a/src/common/features/chats/nostr/types/messages.ts b/src/common/features/chats/nostr/types/messages.ts
deleted file mode 100644
index 55f39062f6b..00000000000
--- a/src/common/features/chats/nostr/types/messages.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export type PublicMessage = {
-  id: string;
-  root: string;
-  content: string;
-  creator: string;
-  created: number;
-  children?: PublicMessage[];
-  mentions: string[];
-  sent?: number;
-};
-
-export type DirectMessage = {
-  id: string;
-  root?: string;
-  content: string;
-  peer: string;
-  creator: string;
-  created: number;
-  children?: DirectMessage[];
-  decrypted: boolean;
-  sent?: number;
-};
-
-export type Message = PublicMessage | DirectMessage;
diff --git a/src/common/features/chats/nostr/types/metadata.ts b/src/common/features/chats/nostr/types/metadata.ts
deleted file mode 100644
index b92f7244be2..00000000000
--- a/src/common/features/chats/nostr/types/metadata.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CommunityModerator } from "./community-moderator";
-
-export type Metadata = {
-  name: string;
-  about: string;
-  picture: string;
-  communityName?: string;
-  communityModerators?: CommunityModerator[];
-  hiddenMessageIds?: string[];
-  removedUserIds?: string[];
-};
diff --git a/src/common/features/chats/nostr/types/profile.ts b/src/common/features/chats/nostr/types/profile.ts
deleted file mode 100644
index 1f8a6b91191..00000000000
--- a/src/common/features/chats/nostr/types/profile.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Metadata } from "./metadata";
-
-export type Profile = { id: string; creator: string; created: number } & Metadata;
diff --git a/src/common/features/chats/nostr/utils/event-converter.ts b/src/common/features/chats/nostr/utils/event-converter.ts
deleted file mode 100644
index 4887ff7174a..00000000000
--- a/src/common/features/chats/nostr/utils/event-converter.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import { findTagValue } from "./find-tag-value";
-import { filterTagValue } from "./filter-tag-value";
-import { decrypt } from "../../../../../lib/nostr-tools/nip04";
-import { Channel, Message, Profile } from "../types";
-
-export interface EventConverterResult {
-  [Kind.ChannelCreation]: Channel;
-  [Kind.EncryptedDirectMessage]: Promise<Message>;
-  [Kind.ChannelMessage]: Message;
-  [Kind.Metadata]: Profile;
-  30078: string[];
-}
-
-export function convertEvent<KIND extends keyof EventConverterResult>(
-  event: Event,
-  publicKey?: string,
-  privateKey?: string
-): EventConverterResult[KIND] | null {
-  let content: any = {};
-  try {
-    content = JSON.parse(event.content);
-  } catch (e) {
-    content = null;
-  }
-
-  switch (event.kind as any) {
-    case Kind.ChannelCreation:
-      if (!content) {
-        console.error(new Error("[Chat][Nostr] – message content is not a JSON"));
-        return null;
-      }
-      return {
-        id: event.id,
-        creator: event.pubkey,
-        created: event.created_at,
-        communityName: content.communityName,
-        communityModerators: content.communityModerators,
-        hiddenMessageIds: content.hiddenMessageIds,
-        removedUserIds: content.removedUserIds,
-        name: content.name,
-        about: content.about,
-        picture: content.picture
-      } as any;
-    case Kind.EncryptedDirectMessage:
-      return new Promise<Message>(async (resolve) => {
-        const receiver = findTagValue(event, "p")!!;
-        const peer = receiver === publicKey ? event.pubkey : receiver;
-        const encryptedMessage = {
-          id: event.id,
-          root: filterTagValue(event, "e").find((tag) => tag[3] === "root")?.[1],
-          peer,
-          creator: event.pubkey,
-          created: event.created_at,
-          decrypted: false,
-          sent: 1
-        };
-
-        if (!privateKey) {
-          throw new Error(
-            "[Chat][Nostr] – private key is not provided while message is encrypting"
-          );
-        }
-
-        let decryptedMessageContent = event.content;
-        try {
-          decryptedMessageContent = await decrypt(privateKey, peer, event.content);
-        } catch (e) {}
-        resolve({
-          ...encryptedMessage,
-          content: decryptedMessageContent,
-          decrypted: true
-        });
-      }) as any;
-    case Kind.ChannelMessage:
-      const eTags = filterTagValue(event, "e");
-      const root = eTags.find((x) => x[3] === "root")?.[1];
-      const mentions = filterTagValue(event, "p")
-        .map((mention) => mention?.[1])
-        .filter((mention) => !!mention);
-      if (!root) return null;
-      return event.content
-        ? {
-            id: event.id,
-            root,
-            content: event.content,
-            creator: event.pubkey,
-            mentions,
-            created: event.created_at,
-            sent: 1
-          }
-        : (null as any);
-    case Kind.Metadata:
-      if (!content) {
-        return null;
-      }
-
-      return {
-        id: event.id,
-        creator: event.pubkey,
-        created: event.created_at,
-        name: content.name || "",
-        about: content.about || "",
-        picture: content.picture || ""
-      } as any;
-    case "30078":
-      return content;
-    default:
-      return content;
-  }
-}
diff --git a/src/common/features/chats/nostr/utils/filter-tag-value.ts b/src/common/features/chats/nostr/utils/filter-tag-value.ts
deleted file mode 100644
index 3a33eccec8d..00000000000
--- a/src/common/features/chats/nostr/utils/filter-tag-value.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Event } from "../../../../../lib/nostr-tools/event";
-
-export function filterTagValue(ev: Event, tag: "e" | "p" | "d") {
-  return ev.tags.filter(([t]) => t === tag);
-}
diff --git a/src/common/features/chats/nostr/utils/find-tag-value.ts b/src/common/features/chats/nostr/utils/find-tag-value.ts
deleted file mode 100644
index 22a286256f5..00000000000
--- a/src/common/features/chats/nostr/utils/find-tag-value.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Event } from "../../../../../lib/nostr-tools/event";
-
-export function findTagValue(ev: Event, tag: "e" | "p" | "d") {
-  return ev.tags.find(([t]) => t === tag)?.[1];
-}
diff --git a/src/common/features/chats/nostr/utils/index.ts b/src/common/features/chats/nostr/utils/index.ts
deleted file mode 100644
index 8a07672fdf7..00000000000
--- a/src/common/features/chats/nostr/utils/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./listen-while-finish";
-export * from "./is-sha256";
-export * from "./find-tag-value";
-export * from "./filter-tag-value";
diff --git a/src/common/features/chats/nostr/utils/is-sha256.ts b/src/common/features/chats/nostr/utils/is-sha256.ts
deleted file mode 100644
index 92126775a9d..00000000000
--- a/src/common/features/chats/nostr/utils/is-sha256.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isSha256(s: string) {
-  return /^[a-f0-9]{64}$/gi.test(s);
-}
diff --git a/src/common/features/chats/nostr/utils/listen-while-finish.ts b/src/common/features/chats/nostr/utils/listen-while-finish.ts
deleted file mode 100644
index 57b3d9399ac..00000000000
--- a/src/common/features/chats/nostr/utils/listen-while-finish.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Event, Kind } from "../../../../../lib/nostr-tools/event";
-import SimplePool from "../../../../../lib/nostr-tools/pool";
-import { Filter } from "../../../../../lib/nostr-tools/filter";
-
-export async function listenWhileFinish(
-  pool: SimplePool | undefined,
-  readRelays: string[],
-  kinds: Kind[],
-  pub: string,
-  filters?: Filter[]
-) {
-  return new Promise<Event[]>((resolve) => {
-    const nextFilters = filters ?? [
-      {
-        kinds,
-        authors: [pub]
-      }
-    ];
-    const subInfo = pool?.sub(readRelays, nextFilters);
-    const events: Event[] = [];
-    subInfo?.on("event", (event: Event) => events.push(event));
-    subInfo?.on("eose", () => {
-      resolve(
-        events
-          .reduce<Event[]>(
-            (acc, event) => [...acc, ...(acc.some((e) => e.id === event.id) ? [] : [event])],
-            []
-          )
-          .sort((a, b) => b.created_at - a.created_at)
-      );
-      subInfo?.unsub();
-    });
-  });
-}
diff --git a/src/common/features/chats/queries/Roadmap.md b/src/common/features/chats/queries/Roadmap.md
deleted file mode 100644
index 5d7993238f2..00000000000
--- a/src/common/features/chats/queries/Roadmap.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# How Chat queries and mutations works
-
-## Queries
-
-### General
-
-- **Fetching the key pairs from stores properly**
-
-  It will allow us to start all queries based on the chat authorization
-
-  This query opens next ones:
-
-  1. **Fetching direct contacts**
-
-     It will allow us to fetch their last
-
-  2. **Fetching last messages**
-     1. Fetching direct contacts last messages
-     2. Aggregate messages by users and fetching them by username properly
-
-- **Searching users**
-
-  This query doesn't require keys because it will search over Ecency
diff --git a/src/common/features/chats/queries/channels-query.ts b/src/common/features/chats/queries/channels-query.ts
deleted file mode 100644
index dc4d408cee0..00000000000
--- a/src/common/features/chats/queries/channels-query.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ChatQueries } from "./queries";
-import { Channel, useNostrFetchQuery } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { useKeysQuery } from "./keys-query";
-import { convertEvent } from "../nostr/utils/event-converter";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-export function useChannelsQuery() {
-  const { activeUser } = useMappedStore();
-  const { hasKeys } = useKeysQuery();
-
-  return useNostrFetchQuery<Channel[]>(
-    [ChatQueries.CHANNELS, activeUser?.username],
-    [Kind.ChannelCreation],
-    (events) =>
-      events
-        .map((event) => convertEvent<Kind.ChannelCreation>(event))
-        .filter((channel) => !!channel) as Channel[],
-    {
-      initialData: [],
-      enabled: hasKeys,
-      refetchOnMount: false
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/community-channel-query.ts b/src/common/features/chats/queries/community-channel-query.ts
deleted file mode 100644
index 4dbc9ea815b..00000000000
--- a/src/common/features/chats/queries/community-channel-query.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { ChatQueries } from "./queries";
-import { Community } from "../../../store/communities";
-import { getProfileMetaData } from "../utils";
-import { Channel } from "../nostr";
-
-/**
- * Get the community's channel information
- * @see {@link ../mutations/create-community-chat.ts}
- */
-export function useCommunityChannelQuery(community?: Community) {
-  return useQuery<Channel>(
-    [ChatQueries.COMMUNITY_CHANNEL, community?.name],
-    async () => {
-      if (!community) {
-        return undefined;
-      }
-
-      const communityProfile = await getProfileMetaData(community.name);
-      return communityProfile.channel;
-    },
-    {
-      enabled: !!community
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/direct-contacts-query.ts b/src/common/features/chats/queries/direct-contacts-query.ts
deleted file mode 100644
index a8902af6020..00000000000
--- a/src/common/features/chats/queries/direct-contacts-query.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ChatQueries } from "./queries";
-import { useKeysQuery } from "./keys-query";
-import { DirectContact, useNostrFetchQuery } from "../nostr";
-import { Kind } from "../../../../lib/nostr-tools/event";
-import { useMappedStore } from "../../../store/use-mapped-store";
-
-export function useDirectContactsQuery() {
-  const { activeUser } = useMappedStore();
-  const { hasKeys } = useKeysQuery();
-
-  return useNostrFetchQuery<DirectContact[]>(
-    [ChatQueries.DIRECT_CONTACTS, activeUser?.username],
-    [Kind.Contacts],
-    (events) => {
-      // Get first event with profile info
-      // note: events could be duplicated
-      const profileEvent = events.find((event) => event.kind === Kind.Contacts);
-      if (profileEvent) {
-        return profileEvent.tags.map(([pubkey, name]) => ({ pubkey, name }));
-      }
-      return [];
-    },
-    {
-      initialData: [],
-      enabled: hasKeys
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
index 4c975d3f740..a25d33f77de 100644
--- a/src/common/features/chats/queries/index.ts
+++ b/src/common/features/chats/queries/index.ts
@@ -1,7 +1 @@
 export * from "./search-users-query";
-export * from "./queries";
-export * from "./direct-contacts-query";
-export * from "./messages-query";
-export * from "./channels-query";
-export * from "./nostr-joined-community-team-query";
-export * from "./community-channel-query";
diff --git a/src/common/features/chats/queries/keys-query.ts b/src/common/features/chats/queries/keys-query.ts
deleted file mode 100644
index 993b8a8794c..00000000000
--- a/src/common/features/chats/queries/keys-query.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useQueries } from "@tanstack/react-query";
-import { ChatQueries } from "./queries";
-import { EncryptionTools, getUserChatPrivateKey, getUserChatPublicKey } from "../utils";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { useMemo } from "react";
-import { PREFIX } from "../../../util/local-storage";
-import { useGetAccountFullQuery } from "../../../api/queries";
-
-export function useKeysQuery() {
-  const { activeUser } = useMappedStore();
-
-  const { data } = useGetAccountFullQuery(activeUser?.username);
-
-  const [{ data: publicKey }, { data: privateKey }, { data: iv }] = useQueries({
-    queries: [
-      {
-        queryKey: [ChatQueries.PUBLIC_KEY, activeUser?.username],
-        queryFn: async () => getUserChatPublicKey(data!!),
-        enabled: !!data,
-        initialData: null
-      },
-      {
-        queryKey: [ChatQueries.PRIVATE_KEY, activeUser?.username],
-        queryFn: async () => {
-          const pin = localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username);
-
-          if (!pin) {
-            return null;
-          }
-
-          const { key, iv } = getUserChatPrivateKey(data!!);
-          if (key && pin && iv) {
-            try {
-              return EncryptionTools.decrypt(key, pin, Buffer.from(iv, "base64"));
-            } catch (e) {
-              return null;
-            }
-          }
-
-          return null;
-        },
-        enabled: !!data,
-        initialData: null
-      },
-      {
-        queryKey: [ChatQueries.ACCOUNT_IV, activeUser?.username],
-        queryFn: async () => getUserChatPrivateKey(data!!).iv,
-        enabled: !!data,
-        initialData: null
-      }
-    ]
-  });
-
-  const hasKeys = useMemo(() => !!publicKey && !!privateKey, [publicKey, privateKey]);
-
-  return useMemo(
-    () => ({
-      publicKey,
-      privateKey,
-      hasKeys,
-      iv
-    }),
-    [publicKey, privateKey, hasKeys]
-  );
-}
diff --git a/src/common/features/chats/queries/left-community-channels-query.ts b/src/common/features/chats/queries/left-community-channels-query.ts
deleted file mode 100644
index 4956ab12a94..00000000000
--- a/src/common/features/chats/queries/left-community-channels-query.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useNostrFetchQuery } from "../nostr";
-import { findTagValue, isSha256 } from "../nostr/utils";
-import { ChatQueries } from "./queries";
-import { convertEvent } from "../nostr/utils/event-converter";
-
-/**
- * Fetch custom kind of event which stores the left channels
- */
-export function useLeftCommunityChannelsQuery() {
-  return useNostrFetchQuery<string[]>(
-    [ChatQueries.LEFT_CHANNELS],
-    [30078],
-    (events) => {
-      if (events.length === 0) {
-        return [];
-      }
-      const leftChannelsEvent = events
-        .filter((x) => x.kind == 30078 && findTagValue(x, "d") === "left-channel-list")
-        .sort((a, b) => b.created_at - a.created_at)[0];
-
-      if (!leftChannelsEvent) {
-        return [];
-      }
-
-      const content = convertEvent<30078>(leftChannelsEvent);
-      if (Array.isArray(content) && content.every((x) => isSha256(x))) {
-        return content;
-      }
-
-      return [];
-    },
-    {
-      initialData: []
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/listen-messages-query.ts b/src/common/features/chats/queries/listen-messages-query.ts
deleted file mode 100644
index 7aa6dc8bf5f..00000000000
--- a/src/common/features/chats/queries/listen-messages-query.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-import useInterval from "react-use/lib/useInterval";
-import { NostrQueries } from "../nostr/queries";
-import { ChatQueries } from "./queries";
-import { useDirectContactsQuery } from "./direct-contacts-query";
-import { useChannelsQuery } from "./channels-query";
-import { useMemo } from "react";
-
-export function useListenMessagesQuery() {
-  const queryClient = useQueryClient();
-  const { data: contacts } = useDirectContactsQuery();
-  const { data: channels } = useChannelsQuery();
-
-  const peers = useMemo(
-    () => [
-      ...(channels?.map((channel) => channel.communityName) ?? []),
-      ...(contacts?.map((contact) => contact.name) ?? [])
-    ],
-    [channels, contacts]
-  );
-
-  useInterval(async () => {
-    await queryClient.invalidateQueries([NostrQueries.PUBLIC_MESSAGES]);
-    await queryClient.invalidateQueries([NostrQueries.DIRECT_MESSAGES]);
-
-    setTimeout(
-      () => peers.forEach((peer) => queryClient.invalidateQueries([ChatQueries.MESSAGES, peer])),
-      3000
-    );
-  }, 10000);
-}
diff --git a/src/common/features/chats/queries/messages-query.ts b/src/common/features/chats/queries/messages-query.ts
deleted file mode 100644
index 36df374195f..00000000000
--- a/src/common/features/chats/queries/messages-query.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useDirectContactsQuery } from "./direct-contacts-query";
-import { useMemo } from "react";
-import { NostrQueries, useDirectMessagesQuery, usePublicMessagesQuery } from "../nostr/queries";
-import { ChatQueries } from "./queries";
-import { useChannelsQuery } from "./channels-query";
-import { useKeysQuery } from "./keys-query";
-import { Message } from "../nostr";
-
-export function useMessagesQuery(username?: string) {
-  const queryClient = useQueryClient();
-
-  const { privateKey, publicKey, hasKeys } = useKeysQuery();
-  const { data: directContacts } = useDirectContactsQuery();
-  const { data: channels } = useChannelsQuery();
-
-  useDirectMessagesQuery(directContacts ?? [], publicKey!!, privateKey!!);
-  usePublicMessagesQuery(channels ?? []);
-
-  const currentChannel = useMemo(
-    () => channels?.find((channel) => channel.communityName === username),
-    [channels, username]
-  );
-  const currentContact = useMemo(
-    () => directContacts?.find((c) => c.name === username),
-    [directContacts, username]
-  );
-
-  return useQuery<Message[]>(
-    [ChatQueries.MESSAGES, username],
-    async () => {
-      if (!username) {
-        return [];
-      }
-
-      let initialMessages: Message[];
-      if (!!currentChannel) {
-        initialMessages =
-          queryClient
-            .getQueryData<Message[]>([NostrQueries.PUBLIC_MESSAGES])
-            ?.filter((i) => i.root === currentChannel.id) ?? [];
-      } else {
-        initialMessages =
-          queryClient
-            .getQueryData<Message[]>([NostrQueries.DIRECT_MESSAGES])
-            ?.filter((i) =>
-              "peer" in i ? i.peer === currentContact?.pubkey : i.root === currentContact?.pubkey
-            ) ?? [];
-      }
-      const pendingMessages = (
-        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? []
-      ).filter((m) => m.sent === 0 && !initialMessages.some((im) => im.id === m.id));
-      const failedMessages = (
-        queryClient.getQueryData<Message[]>([ChatQueries.MESSAGES, username]) ?? []
-      ).filter((m) => m.sent === 2 && !initialMessages.some((im) => im.id === m.id));
-
-      return [...initialMessages, ...failedMessages, ...pendingMessages];
-    },
-    {
-      initialData: [],
-      enabled: hasKeys && !!username,
-      select: (messages) => {
-        if (currentChannel) {
-          return messages
-            .filter((message) => !currentChannel.hiddenMessageIds?.includes(message.id))
-            .sort((a, b) => a.created - b.created);
-        }
-        return messages.sort((a, b) => a.created - b.created);
-      },
-      refetchInterval: 3000
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/nostr-joined-community-team-query.ts b/src/common/features/chats/queries/nostr-joined-community-team-query.ts
deleted file mode 100644
index 3dd74c584a3..00000000000
--- a/src/common/features/chats/queries/nostr-joined-community-team-query.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { ChatQueries } from "./queries";
-import { getProfileMetaData } from "../utils";
-import { Community, ROLES } from "../../../store/communities";
-import { NOSTRKEY } from "../components/chat-popup/chat-constants";
-import { useMappedStore } from "../../../store/use-mapped-store";
-import { useKeysQuery } from "./keys-query";
-import { CommunityModerator } from "../nostr";
-
-/**
- * Get a community team members which joined to Nostr and available to create a chat
- */
-export function useNostrJoinedCommunityTeamQuery(community: Community) {
-  const { activeUser } = useMappedStore();
-
-  const { hasKeys, publicKey } = useKeysQuery();
-
-  return useQuery(
-    [ChatQueries.COMMUNITY_ROLES, community.name],
-    async () => {
-      let communityTeam: CommunityModerator[] = [];
-      const ownerData = await getProfileMetaData(community.name);
-
-      communityTeam.push({
-        name: activeUser!.username,
-        pubkey: publicKey || ownerData.nsKey,
-        role: "owner"
-      });
-
-      for (const [name, role] of community.team) {
-        if ([ROLES.ADMIN, ROLES.MOD].includes(role as ROLES)) {
-          const profileData = await getProfileMetaData(name);
-          if (profileData && profileData.hasOwnProperty(NOSTRKEY)) {
-            const roleInfo: CommunityModerator = {
-              name,
-              pubkey: profileData.nsKey,
-              role
-            };
-
-            communityTeam.push(roleInfo);
-          }
-        }
-      }
-
-      return communityTeam;
-    },
-    {
-      initialData: [],
-      enabled: hasKeys && activeUser?.username === community.name
-    }
-  );
-}
diff --git a/src/common/features/chats/queries/queries.ts b/src/common/features/chats/queries/queries.ts
deleted file mode 100644
index c3a06276d2c..00000000000
--- a/src/common/features/chats/queries/queries.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum ChatQueries {
-  SEARCH_USER = "chats/search-user",
-  PUBLIC_KEY = "chats/public-key",
-  PRIVATE_KEY = "chats/private-key",
-  ACCOUNT_IV = "chats/account-iv",
-  DIRECT_CONTACTS = "chats/direct-contacts",
-  MESSAGES = "chats/messages",
-  CHANNELS = "chats/channels",
-  LEFT_CHANNELS = "chats/left-channels",
-  COMMUNITY_CHANNEL = "chats/community-channel",
-  COMMUNITY_ROLES = "chats/community-roles"
-}
diff --git a/src/common/features/chats/queries/search-users-query.ts b/src/common/features/chats/queries/search-users-query.ts
index 8171fbad7be..14ddcdc6e14 100644
--- a/src/common/features/chats/queries/search-users-query.ts
+++ b/src/common/features/chats/queries/search-users-query.ts
@@ -1,10 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { ChatQueries } from "./queries";
 import { getAccountReputations } from "../../../api/hive";
 
 export function useSearchUsersQuery(query: string) {
   return useQuery(
-    [ChatQueries.SEARCH_USER, query],
+    ["chats/search-user", query],
     async () => {
       if (!query) {
         return [];
diff --git a/src/common/features/chats/screens/chats-manage-key-section.tsx b/src/common/features/chats/screens/chats-manage-key-section.tsx
index 89d4b9b2589..1efc200539e 100644
--- a/src/common/features/chats/screens/chats-manage-key-section.tsx
+++ b/src/common/features/chats/screens/chats-manage-key-section.tsx
@@ -3,7 +3,7 @@ import { arrowBackSvg } from "../../../img/svg";
 import { _t } from "../../../i18n";
 import ManageChatKey from "../components/manage-chat-key";
 import React, { useContext } from "react";
-import { ChatContext } from "../chat-context-provider";
+import { ChatContext } from "@ecency/ns-query";
 
 export function ChatsManageKeySection() {
   const { setRevealPrivateKey } = useContext(ChatContext);
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 4f51c17a7f4..37aba47f42f 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -6,22 +6,26 @@ import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../../..
 import ChatsSideBar from "../components/chats-sidebar";
 import Feedback from "../../../components/feedback";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { ChatContext } from "../chat-context-provider";
 import ChatsMessagesBox from "../components/chat-message-box";
 import { classNameObject } from "../../../helper/class-name-object";
 import "./_chats.scss";
-import { useChannelsQuery, useCommunityChannelQuery, useDirectContactsQuery } from "../queries";
-import { useKeysQuery } from "../queries/keys-query";
 import { ChatsWelcome } from "../components/chats-welcome";
 import { useCommunityCache } from "../../../core";
 import { useGetAccountFullQuery } from "../../../api/queries";
-import { getUserChatPublicKey } from "../utils";
 import useMountedState from "react-use/lib/useMountedState";
 import { _t } from "../../../i18n";
 import Meta from "../../../components/meta";
 import { ChatsDefaultScreen } from "../components/chats-default-screen";
 import { ChatsManageKeySection } from "./chats-manage-key-section";
 import { ChatsUserNotJoinedSection } from "./chats-user-not-joined-section";
+import {
+  ChatContext,
+  getUserChatPublicKey,
+  useChannelsQuery,
+  useCommunityChannelQuery,
+  useDirectContactsQuery,
+  useKeysQuery
+} from "@ecency/ns-query";
 
 interface Props extends PageProps {
   match: match<{
diff --git a/src/common/features/chats/types/chat-types.ts b/src/common/features/chats/types/chat-types.ts
deleted file mode 100644
index a2b80edba76..00000000000
--- a/src/common/features/chats/types/chat-types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface AccountWithReputation {
-  account: string;
-  reputation: number;
-}
-
-export interface EmojiPickerStyleProps {
-  width: string;
-  bottom: string;
-  left: string | number;
-  marginLeft: string;
-  borderTopLeftRadius: string;
-  borderTopRightRadius: string;
-  borderBottomLeftRadius: string;
-}
diff --git a/src/common/features/chats/types/index.ts b/src/common/features/chats/types/index.ts
deleted file mode 100644
index 44983652000..00000000000
--- a/src/common/features/chats/types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./chat-types";
diff --git a/src/common/features/chats/utils/check-contiguous-message.ts b/src/common/features/chats/utils/check-contiguous-message.ts
deleted file mode 100644
index 7342faf5d73..00000000000
--- a/src/common/features/chats/utils/check-contiguous-message.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DirectMessage, PublicMessage } from "../nostr";
-
-export const checkContiguousMessage = (
-  msg: PublicMessage | DirectMessage,
-  i: number,
-  publicMessages: PublicMessage[] | DirectMessage[]
-) => {
-  const prevMsg = publicMessages[i - 1];
-  const msgAuthor = msg.creator;
-  const prevMsgAuthor = prevMsg ? prevMsg.creator : null;
-  return msgAuthor === prevMsgAuthor;
-};
diff --git a/src/common/features/chats/utils/copy-to-clipboard.ts b/src/common/features/chats/utils/copy-to-clipboard.ts
deleted file mode 100644
index 2683d6f2725..00000000000
--- a/src/common/features/chats/utils/copy-to-clipboard.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const copyToClipboard = (content: string) => {
-  const textField = document.createElement("textarea");
-  textField.innerText = content;
-  document.body.appendChild(textField);
-  textField.select();
-  document.execCommand("copy");
-  textField.remove();
-};
diff --git a/src/common/features/chats/utils/create-nostr-account.ts b/src/common/features/chats/utils/create-nostr-account.ts
deleted file mode 100644
index 6d2ba017c7b..00000000000
--- a/src/common/features/chats/utils/create-nostr-account.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { generatePrivateKey, getPublicKey } from "../../../../lib/nostr-tools/keys";
-
-export const createNoStrAccount = () => {
-  const priv = generatePrivateKey();
-  const pub = getPublicKey(priv);
-  return { pub, priv };
-};
diff --git a/src/common/features/chats/utils/encryption-tools.ts b/src/common/features/chats/utils/encryption-tools.ts
deleted file mode 100644
index c246d498239..00000000000
--- a/src/common/features/chats/utils/encryption-tools.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import crypto from "crypto";
-
-export namespace EncryptionTools {
-  export function encrypt(privateKey: string, pin: string, initialVector: Buffer) {
-    const cipher = crypto.createCipheriv("aes-256-cbc", pin + pin + pin + pin, initialVector);
-    let encryptedKey = cipher.update(privateKey, "utf8", "hex");
-    encryptedKey += cipher.final("hex");
-    return encryptedKey;
-  }
-
-  export function decrypt(encryptedData: string, pin: string, initialVector: Buffer) {
-    const decipher = crypto.createDecipheriv("aes-256-cbc", pin + pin + pin + pin, initialVector);
-    let decryptedKey = decipher.update(encryptedData, "hex", "utf8");
-    decryptedKey += decipher.final("utf8");
-    return decryptedKey;
-  }
-}
diff --git a/src/common/features/chats/utils/fetch-profile-metadata.ts b/src/common/features/chats/utils/fetch-profile-metadata.ts
deleted file mode 100644
index 7a38f8f76be..00000000000
--- a/src/common/features/chats/utils/fetch-profile-metadata.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { getAccountFull } from "../../../api/hive";
-
-export const getProfileMetaData = async (username: string) => {
-  const response = await getAccountFull(username);
-  const { posting_json_metadata } = response;
-  if (posting_json_metadata) {
-    return JSON.parse(posting_json_metadata!).profile;
-  }
-};
diff --git a/src/common/features/chats/utils/format-message-date-and-day.ts b/src/common/features/chats/utils/format-message-date-and-day.ts
deleted file mode 100644
index 489e9cfc469..00000000000
--- a/src/common/features/chats/utils/format-message-date-and-day.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { formatMessageDate } from "./format-message-time";
-import { DirectMessage, PublicMessage } from "../nostr";
-
-export const formatMessageDateAndDay = (
-  msg: DirectMessage | PublicMessage,
-  i: number,
-  messagesList: DirectMessage[] | PublicMessage[]
-) => {
-  const prevMsg = messagesList[i - 1];
-  const msgDate = formatMessageDate(msg.created);
-  const prevMsgDate = prevMsg ? formatMessageDate(prevMsg.created) : null;
-  if (msgDate !== prevMsgDate) {
-    return msgDate;
-  }
-  return null;
-};
diff --git a/src/common/features/chats/utils/format-message-time.ts b/src/common/features/chats/utils/format-message-time.ts
deleted file mode 100644
index 41d5f69fe87..00000000000
--- a/src/common/features/chats/utils/format-message-time.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import moment from "moment";
-
-export const formatMessageTime = (unixTs: number) => moment.unix(unixTs).format("h:mm a");
-
-export const formatMessageDate = (unixTs: number) => moment.unix(unixTs).format("dddd, MMMM Do");
diff --git a/src/common/features/chats/utils/formatted-user-name.ts b/src/common/features/chats/utils/formatted-user-name.ts
deleted file mode 100644
index 820af9bf5e8..00000000000
--- a/src/common/features/chats/utils/formatted-user-name.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const formattedUserName = (username: string) => {
-  if (username && username.startsWith("@")) {
-    return username.replace("@", "");
-  }
-  return username;
-};
diff --git a/src/common/features/chats/utils/get-joined-communities.ts b/src/common/features/chats/utils/get-joined-communities.ts
deleted file mode 100644
index e588beaf82b..00000000000
--- a/src/common/features/chats/utils/get-joined-communities.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Channel } from "../nostr";
-
-export const getJoinedCommunities = (channels: Channel[], leftChannels: string[]) => {
-  return channels.filter((item) => !leftChannels.includes(item.id));
-};
diff --git a/src/common/features/chats/utils/get-relative-date.ts b/src/common/features/chats/utils/get-relative-date.ts
deleted file mode 100644
index aff85dce892..00000000000
--- a/src/common/features/chats/utils/get-relative-date.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { differenceInDays, differenceInHours, differenceInYears, format, getDay } from "date-fns";
-
-export function getRelativeDate(timestamp?: number) {
-  if (!timestamp) {
-    return "";
-  }
-
-  const date = new Date(timestamp * 1000);
-  const now = new Date();
-
-  if (getDay(now) === getDay(date) && differenceInHours(now, date) <= 24) {
-    return format(date, "HH:mm");
-  } else if (differenceInDays(now, date) <= 7) {
-    return format(date, "EEE");
-  } else if (differenceInYears(now, date) === 0) {
-    return format(date, "dd.MM");
-  } else {
-    return format(date, "dd.MM.yyyy");
-  }
-}
diff --git a/src/common/features/chats/utils/get-user-chat-private-key.ts b/src/common/features/chats/utils/get-user-chat-private-key.ts
deleted file mode 100644
index efc7092ffb7..00000000000
--- a/src/common/features/chats/utils/get-user-chat-private-key.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { FullAccount } from "../../../store/accounts/types";
-
-export const getUserChatPrivateKey = (account: FullAccount) => {
-  if (account.posting_json_metadata) {
-    const { posting_json_metadata } = account;
-    const profile = JSON.parse(posting_json_metadata).profile;
-    if (profile?.echat) {
-      const {
-        echat: { key, iv }
-      } = profile || { echat: {} };
-      return { key: key ?? null, iv: iv ?? null };
-    }
-  }
-  return { key: null, iv: null };
-};
diff --git a/src/common/features/chats/utils/get-user-chat-public-key.ts b/src/common/features/chats/utils/get-user-chat-public-key.ts
deleted file mode 100644
index a35bf55c7e1..00000000000
--- a/src/common/features/chats/utils/get-user-chat-public-key.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { FullAccount } from "../../../store/accounts/types";
-
-export const getUserChatPublicKey = (account: FullAccount): string | null => {
-  if (account.posting_json_metadata) {
-    const { posting_json_metadata } = account;
-    const profile = JSON.parse(posting_json_metadata).profile;
-    if (profile?.echat) {
-      const {
-        echat: { pubKey }
-      } = profile || { echat: {} };
-      return pubKey;
-    }
-  }
-  return null;
-};
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index de8e0863feb..545ed7ab9dc 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -1,17 +1 @@
-export * from "./fetch-profile-metadata";
-export * from "./upload-chat-keys";
-export * from "./create-nostr-account";
-export * from "./format-message-time";
 export * from "./is-message-gif";
-export * from "./get-user-chat-public-key";
-export * from "./use-get-direct-last-message";
-export * from "./formatted-user-name";
-export * from "./is-message-image";
-export * from "./get-joined-communities";
-export * from "./copy-to-clipboard";
-export * from "./check-contiguous-message";
-export * from "./format-message-date-and-day";
-export * from "./get-relative-date";
-export * from "./encryption-tools";
-export * from "./get-user-chat-private-key";
-export * from "./is-single-emoji";
diff --git a/src/common/features/chats/utils/is-message-image.ts b/src/common/features/chats/utils/is-message-image.ts
deleted file mode 100644
index 7fbd5b8025c..00000000000
--- a/src/common/features/chats/utils/is-message-image.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const isMessageImage = (content: string) => {
-  return content.includes("https://images.ecency.com");
-};
diff --git a/src/common/features/chats/utils/is-single-emoji.ts b/src/common/features/chats/utils/is-single-emoji.ts
deleted file mode 100644
index edfcaa9e6e3..00000000000
--- a/src/common/features/chats/utils/is-single-emoji.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function isSingleEmoji(input: string) {
-  const emojiRegex = /^\p{Emoji}$/u; // Unicode property escapes for emoji
-
-  return emojiRegex.test(input);
-}
diff --git a/src/common/features/chats/utils/upload-chat-keys.ts b/src/common/features/chats/utils/upload-chat-keys.ts
index 31fa21d1e87..356fcefb528 100644
--- a/src/common/features/chats/utils/upload-chat-keys.ts
+++ b/src/common/features/chats/utils/upload-chat-keys.ts
@@ -1,13 +1,12 @@
 import { getAccountFull } from "../../../api/hive";
 import { updateProfile } from "../../../api/operations";
-import { ActiveUser } from "../../../store/active-user/types";
-import { createNoStrAccount } from "./create-nostr-account";
+import { AccountData, createNoStrAccount } from "@ecency/ns-query";
 
 export const uploadChatKeys = async (
-  activeUser: ActiveUser | null,
+  activeUser: AccountData,
   { pub, priv, iv }: ReturnType<typeof createNoStrAccount> & { iv: Buffer }
 ) => {
-  const response = await getAccountFull(activeUser?.username!);
+  const response = await getAccountFull(activeUser?.name!);
 
   return await updateProfile(response, {
     ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}").profile,
diff --git a/src/common/features/chats/utils/use-get-direct-last-message.ts b/src/common/features/chats/utils/use-get-direct-last-message.ts
deleted file mode 100644
index 9d8db842fa7..00000000000
--- a/src/common/features/chats/utils/use-get-direct-last-message.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Message } from "../nostr";
-
-export const getDirectLastMessage = (directMessages: Message[]) => {
-  if (!directMessages.length) {
-    return undefined;
-  }
-
-  const messages = directMessages.sort((a, b) => a.created - b.created);
-  const lastMessage = messages.slice(-1);
-  return lastMessage[0];
-};
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index d1dab46e4bf..326ac8e2c3f 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -6,7 +6,6 @@ import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
 import { usePrevious } from "../util/use-previous";
 
-import { getJoinedCommunities } from "../features/chats/utils";
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -40,8 +39,11 @@ import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@ui/button";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import { useChannelsQuery } from "../features/chats/queries";
-import { useLeftCommunityChannelsQuery } from "../features/chats/queries/left-community-channels-query";
+import {
+  getJoinedCommunities,
+  useChannelsQuery,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
 
 interface MatchParams {
   filter: string;
diff --git a/src/lib/nostr-tools/event.ts b/src/lib/nostr-tools/event.ts
deleted file mode 100644
index 1945a4195f8..00000000000
--- a/src/lib/nostr-tools/event.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as secp256k1 from "@noble/secp256k1";
-import { sha256 } from "@noble/hashes/sha256";
-
-import { utf8Encoder } from "./utils";
-
-/* eslint-disable no-unused-vars */
-
-export enum Kind {
-  Metadata = 0,
-  Text = 1,
-  RecommendRelay = 2,
-  Contacts = 3,
-  EncryptedDirectMessage = 4,
-  EventDeletion = 5,
-  Repost = 6,
-  Reaction = 7,
-  BadgeAward = 8,
-  ChannelCreation = 40,
-  ChannelMetadata = 41,
-  ChannelMessage = 42,
-  ChannelHideMessage = 43,
-  ChannelMuteUser = 44,
-  Report = 1984,
-  ZapRequest = 9734,
-  Zap = 9735,
-  RelayList = 10002,
-  BlockList = 16462,
-  FlagList = 16463,
-  ClientAuth = 22242,
-  ReplaceableByTag = 30000,
-  BadgeDefinition = 30008,
-  ProfileBadge = 30009,
-  Article = 30023
-}
-
-export type EventTemplate = {
-  kind: Kind;
-  tags: string[][];
-  content: string;
-  created_at: number;
-};
-
-export type UnsignedEvent = EventTemplate & {
-  pubkey: string;
-};
-
-export type Event = UnsignedEvent & {
-  id: string;
-  sig: string;
-};
-
-export function getBlankEvent(): EventTemplate {
-  return {
-    kind: 255,
-    content: "",
-    tags: [],
-    created_at: 0
-  };
-}
-
-export function serializeEvent(evt: Event): string {
-  if (!validateEvent(evt))
-    throw new Error("can't serialize event with wrong or missing properties");
-
-  return JSON.stringify([0, evt.pubkey, evt.created_at, evt.kind, evt.tags, evt.content]);
-}
-
-export function getEventHash(event: Event): string {
-  let eventHash = sha256(utf8Encoder.encode(serializeEvent(event)));
-  return secp256k1.utils.bytesToHex(eventHash);
-}
-
-export function validateEvent(event: Event): boolean {
-  if (typeof event.content !== "string") return false;
-  if (typeof event.created_at !== "number") return false;
-  if (typeof event.pubkey !== "string") return false;
-  if (!event.pubkey.match(/^[a-f0-9]{64}$/)) return false;
-
-  if (!Array.isArray(event.tags)) return false;
-  for (let i = 0; i < event.tags.length; i++) {
-    let tag = event.tags[i];
-    if (!Array.isArray(tag)) return false;
-    for (let j = 0; j < tag.length; j++) {
-      if (typeof tag[j] === "object") return false;
-    }
-  }
-
-  return true;
-}
-
-export async function verifySignature(event: Event & { sig: string }): Promise<boolean> {
-  return await secp256k1.schnorr.verify(event.sig, getEventHash(event), event.pubkey);
-}
-
-export async function signEvent(event: Event, key: string): Promise<string> {
-  const encrypted = await secp256k1.schnorr.sign(getEventHash(event), key);
-  return secp256k1.utils.bytesToHex(encrypted);
-}
diff --git a/src/lib/nostr-tools/filter.ts b/src/lib/nostr-tools/filter.ts
deleted file mode 100644
index 07b241a9c3f..00000000000
--- a/src/lib/nostr-tools/filter.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Event } from "./event";
-
-export type Filter = {
-  ids?: string[];
-  kinds?: number[];
-  authors?: string[];
-  keywords?: string[];
-  since?: number;
-  until?: number;
-  limit?: number;
-  [key: string]: string[] | number | number[] | undefined;
-};
-
-export function matchFilter(filter: Filter, event: Event & { id: string }): boolean {
-  if (filter.ids && filter.ids.indexOf(event.id) === -1) return false;
-  if (filter.kinds && filter.kinds.indexOf(event.kind) === -1) return false;
-  if (filter.keywords) {
-    const lowercase = event.content?.toLowerCase();
-    for (let i = 0; i < filter.keywords.length; i++) {
-      if (lowercase?.indexOf(filter.keywords[i].toLowerCase()) === -1) return false;
-    }
-  }
-  if (filter.authors && filter.authors.indexOf(event.pubkey) === -1) return false;
-
-  for (let f in filter) {
-    if (f[0] === "#") {
-      let tagName = f.slice(1);
-      let values = filter[`#${tagName}`] as string[];
-      if (values && !event.tags?.find(([t, v]) => t === f.slice(1) && values!.indexOf(v) !== -1))
-        return false;
-    }
-  }
-
-  if (filter.since && event.created_at < filter.since) return false;
-  if (filter.until && event.created_at >= filter.until) return false;
-
-  return true;
-}
-
-export function matchFilters(filters: Filter[], event: Event & { id: string }): boolean {
-  for (let i = 0; i < filters.length; i++) {
-    if (matchFilter(filters[i], event)) return true;
-  }
-  return false;
-}
diff --git a/src/lib/nostr-tools/index.ts b/src/lib/nostr-tools/index.ts
deleted file mode 100644
index e1fd087ef71..00000000000
--- a/src/lib/nostr-tools/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// monkey patch secp256k1
-import * as secp256k1 from "@noble/secp256k1";
-import { hmac } from "@noble/hashes/hmac";
-import { sha256 } from "@noble/hashes/sha256";
-secp256k1.utils.hmacSha256Sync = (key, ...msgs) =>
-  hmac(sha256, key, secp256k1.utils.concatBytes(...msgs));
-secp256k1.utils.sha256Sync = (...msgs) => sha256(secp256k1.utils.concatBytes(...msgs));
diff --git a/src/lib/nostr-tools/keys.ts b/src/lib/nostr-tools/keys.ts
deleted file mode 100644
index f373133a7a4..00000000000
--- a/src/lib/nostr-tools/keys.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as secp256k1 from "@noble/secp256k1";
-
-export function generatePrivateKey(): string {
-  return secp256k1.utils.bytesToHex(secp256k1.utils.randomPrivateKey());
-}
-
-export function getPublicKey(privateKey: string): string {
-  return secp256k1.utils.bytesToHex(secp256k1.schnorr.getPublicKey(privateKey));
-}
diff --git a/src/lib/nostr-tools/nip04.ts b/src/lib/nostr-tools/nip04.ts
deleted file mode 100644
index 6d8a088bdd1..00000000000
--- a/src/lib/nostr-tools/nip04.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { randomBytes } from "@noble/hashes/utils";
-import * as secp256k1 from "@noble/secp256k1";
-import { base64 } from "@scure/base";
-
-import { utf8Decoder, utf8Encoder } from "./utils";
-
-export async function encrypt(privkey: string, pubkey: string, text: string): Promise<string> {
-  const key = secp256k1.getSharedSecret(privkey, "02" + pubkey);
-  const normalizedKey = getNormalizedX(key);
-
-  let iv = Uint8Array.from(randomBytes(16));
-  let plaintext = utf8Encoder.encode(text);
-  let cryptoKey = await crypto.subtle.importKey("raw", normalizedKey, { name: "AES-CBC" }, false, [
-    "encrypt"
-  ]);
-  let ciphertext = await crypto.subtle.encrypt({ name: "AES-CBC", iv }, cryptoKey, plaintext);
-  let ctb64 = base64.encode(new Uint8Array(ciphertext));
-  let ivb64 = base64.encode(new Uint8Array(iv.buffer));
-
-  return `${ctb64}?iv=${ivb64}`;
-}
-
-export async function decrypt(privkey: string, pubkey: string, data: string): Promise<string> {
-  let [ctb64, ivb64] = data.split("?iv=");
-  let key = secp256k1.getSharedSecret(privkey, "02" + pubkey);
-  let normalizedKey = getNormalizedX(key);
-
-  let cryptoKey = await crypto.subtle.importKey("raw", normalizedKey, { name: "AES-CBC" }, false, [
-    "decrypt"
-  ]);
-  let ciphertext = base64.decode(ctb64);
-  let iv = base64.decode(ivb64);
-
-  let plaintext = await crypto.subtle.decrypt({ name: "AES-CBC", iv }, cryptoKey, ciphertext);
-
-  let text = utf8Decoder.decode(plaintext);
-  return text;
-}
-
-function getNormalizedX(key: Uint8Array): Uint8Array {
-  return key.slice(1, 33);
-}
diff --git a/src/lib/nostr-tools/nip05.ts b/src/lib/nostr-tools/nip05.ts
deleted file mode 100644
index 410fbb969d4..00000000000
--- a/src/lib/nostr-tools/nip05.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ProfilePointer } from "./nip19";
-
-var _fetch: any;
-
-try {
-  _fetch = fetch;
-} catch {}
-
-export function useFetchImplementation(fetchImplementation: any) {
-  _fetch = fetchImplementation;
-}
-
-export async function searchDomain(
-  domain: string,
-  query = ""
-): Promise<{ [name: string]: string }> {
-  try {
-    let res = await (await _fetch(`https://${domain}/.well-known/nostr.json?name=${query}`)).json();
-
-    return res.names;
-  } catch (_) {
-    return {};
-  }
-}
-
-export async function queryProfile(fullname: string): Promise<ProfilePointer | null> {
-  let [name, domain] = fullname.split("@");
-
-  if (!domain) {
-    // if there is no @, it is because it is just a domain, so assume the name is "_"
-    domain = name;
-    name = "_";
-  }
-
-  if (!name.match(/^[a-z0-9-_]+$/)) return null;
-
-  let res = await (await _fetch(`https://${domain}/.well-known/nostr.json?name=${name}`)).json();
-
-  if (!res?.names?.[name]) return null;
-
-  let pubkey = res.names[name] as string;
-  let relays = (res.relays?.[pubkey] || []) as string[]; // nip35
-
-  return {
-    pubkey,
-    relays
-  };
-}
diff --git a/src/lib/nostr-tools/nip06.ts b/src/lib/nostr-tools/nip06.ts
deleted file mode 100644
index 5b28b939780..00000000000
--- a/src/lib/nostr-tools/nip06.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as secp256k1 from "@noble/secp256k1";
-import { wordlist } from "@scure/bip39/wordlists/english.js";
-import { generateMnemonic, mnemonicToSeedSync, validateMnemonic } from "@scure/bip39";
-import { HDKey } from "@scure/bip32";
-
-export function privateKeyFromSeedWords(mnemonic: string, passphrase?: string): string {
-  let root = HDKey.fromMasterSeed(mnemonicToSeedSync(mnemonic, passphrase));
-  let privateKey = root.derive(`m/44'/1237'/0'/0/0`).privateKey;
-  if (!privateKey) throw new Error("could not derive private key");
-  return secp256k1.utils.bytesToHex(privateKey);
-}
-
-export function generateSeedWords(): string {
-  return generateMnemonic(wordlist);
-}
-
-export function validateWords(words: string): boolean {
-  return validateMnemonic(words, wordlist);
-}
diff --git a/src/lib/nostr-tools/nip19.ts b/src/lib/nostr-tools/nip19.ts
deleted file mode 100644
index 0fb945a06e1..00000000000
--- a/src/lib/nostr-tools/nip19.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as secp256k1 from "@noble/secp256k1";
-import { bech32 } from "@scure/base";
-
-import { utf8Decoder, utf8Encoder } from "./utils";
-
-const Bech32MaxSize = 5000;
-
-export type ProfilePointer = {
-  pubkey: string; // hex
-  relays?: string[];
-};
-
-export type EventPointer = {
-  id: string; // hex
-  relays?: string[];
-};
-
-export function decode(nip19: string): {
-  type: string;
-  data: ProfilePointer | EventPointer | string;
-} {
-  let { prefix, words } = bech32.decode(nip19, Bech32MaxSize);
-  let data = new Uint8Array(bech32.fromWords(words));
-
-  if (prefix === "nprofile") {
-    let tlv = parseTLV(data);
-    if (!tlv[0]?.[0]) throw new Error("missing TLV 0 for nprofile");
-    if (tlv[0][0].length !== 32) throw new Error("TLV 0 should be 32 bytes");
-
-    return {
-      type: "nprofile",
-      data: {
-        pubkey: secp256k1.utils.bytesToHex(tlv[0][0]),
-        relays: tlv[1].map((d) => utf8Decoder.decode(d))
-      }
-    };
-  }
-
-  if (prefix === "nevent") {
-    let tlv = parseTLV(data);
-    if (!tlv[0]?.[0]) throw new Error("missing TLV 0 for nevent");
-    if (tlv[0][0].length !== 32) throw new Error("TLV 0 should be 32 bytes");
-
-    return {
-      type: "nevent",
-      data: {
-        id: secp256k1.utils.bytesToHex(tlv[0][0]),
-        relays: tlv[1].map((d) => utf8Decoder.decode(d))
-      }
-    };
-  }
-
-  if (prefix === "nsec" || prefix === "npub" || prefix === "note") {
-    return { type: prefix, data: secp256k1.utils.bytesToHex(data) };
-  }
-
-  throw new Error(`unknown prefix ${prefix}`);
-}
-
-type TLV = { [t: number]: Uint8Array[] };
-
-function parseTLV(data: Uint8Array): TLV {
-  let result: TLV = {};
-  let rest = data;
-  while (rest.length > 0) {
-    let t = rest[0];
-    let l = rest[1];
-    let v = rest.slice(2, 2 + l);
-    rest = rest.slice(2 + l);
-    if (v.length < l) continue;
-    result[t] = result[t] || [];
-    result[t].push(v);
-  }
-  return result;
-}
-
-export function nsecEncode(hex: string): string {
-  return encodeBytes("nsec", hex);
-}
-
-export function npubEncode(hex: string): string {
-  return encodeBytes("npub", hex);
-}
-
-export function noteEncode(hex: string): string {
-  return encodeBytes("note", hex);
-}
-
-function encodeBytes(prefix: string, hex: string): string {
-  let data = secp256k1.utils.hexToBytes(hex);
-  let words = bech32.toWords(data);
-  return bech32.encode(prefix, words, Bech32MaxSize);
-}
-
-export function nprofileEncode(profile: ProfilePointer): string {
-  let data = encodeTLV({
-    0: [secp256k1.utils.hexToBytes(profile.pubkey)],
-    1: (profile.relays || []).map((url) => utf8Encoder.encode(url))
-  });
-  let words = bech32.toWords(data);
-  return bech32.encode("nprofile", words, Bech32MaxSize);
-}
-
-export function neventEncode(event: EventPointer): string {
-  let data = encodeTLV({
-    0: [secp256k1.utils.hexToBytes(event.id)],
-    1: (event.relays || []).map((url) => utf8Encoder.encode(url))
-  });
-  let words = bech32.toWords(data);
-  return bech32.encode("nevent", words, Bech32MaxSize);
-}
-
-function encodeTLV(tlv: TLV): Uint8Array {
-  let entries: Uint8Array[] = [];
-
-  Object.entries(tlv).forEach(([t, vs]) => {
-    vs.forEach((v) => {
-      let entry = new Uint8Array(v.length + 2);
-      entry.set([parseInt(t)], 0);
-      entry.set([v.length], 1);
-      entry.set(v, 2);
-      entries.push(entry);
-    });
-  });
-
-  return secp256k1.utils.concatBytes(...entries);
-}
diff --git a/src/lib/nostr-tools/nip26.ts b/src/lib/nostr-tools/nip26.ts
deleted file mode 100644
index bdaed49e65b..00000000000
--- a/src/lib/nostr-tools/nip26.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as secp256k1 from "@noble/secp256k1";
-import { sha256 } from "@noble/hashes/sha256";
-
-import { Event } from "./event";
-import { utf8Encoder } from "./utils";
-import { getPublicKey } from "./keys";
-
-export type Parameters = {
-  pubkey: string; // the key to whom the delegation will be given
-  kind: number | undefined;
-  until: number | undefined; // delegation will only be valid until this date
-  since: number | undefined; // delegation will be valid from this date on
-};
-
-export type Delegation = {
-  from: string; // the pubkey who signed the delegation
-  to: string; // the pubkey that is allowed to use the delegation
-  cond: string; // the string of conditions as they should be included in the event tag
-  sig: string;
-};
-
-export function createDelegation(privateKey: string, parameters: Parameters): Delegation {
-  let conditions = [];
-  if ((parameters.kind || -1) >= 0) conditions.push(`kind=${parameters.kind}`);
-  if (parameters.until) conditions.push(`created_at<${parameters.until}`);
-  if (parameters.since) conditions.push(`created_at>${parameters.since}`);
-  let cond = conditions.join("&");
-
-  if (cond === "") throw new Error("refusing to create a delegation without any conditions");
-
-  let sighash = sha256(utf8Encoder.encode(`nostr:delegation:${parameters.pubkey}:${cond}`));
-
-  let sig = secp256k1.utils.bytesToHex(secp256k1.schnorr.signSync(sighash, privateKey));
-
-  return {
-    from: getPublicKey(privateKey),
-    to: parameters.pubkey,
-    cond,
-    sig
-  };
-}
-
-export function getDelegator(event: Event): string | null {
-  // find delegation tag
-  let tag = event.tags.find((tag) => tag[0] === "delegation" && tag.length >= 4);
-  if (!tag) return null;
-
-  let pubkey = tag[1];
-  let cond = tag[2];
-  let sig = tag[3];
-
-  // check conditions
-  let conditions = cond.split("&");
-  for (let i = 0; i < conditions.length; i++) {
-    let [key, operator, value] = conditions[i].split(/\b/);
-
-    // the supported conditions are just 'kind' and 'created_at' for now
-    if (key === "kind" && operator === "=" && event.kind === parseInt(value)) continue;
-    else if (key === "created_at" && operator === "<" && event.created_at < parseInt(value))
-      continue;
-    else if (key === "created_at" && operator === ">" && event.created_at > parseInt(value))
-      continue;
-    else return null; // invalid condition
-  }
-
-  // check signature
-  let sighash = sha256(utf8Encoder.encode(`nostr:delegation:${event.pubkey}:${cond}`));
-  if (!secp256k1.schnorr.verifySync(sig, sighash, pubkey)) return null;
-
-  return pubkey;
-}
diff --git a/src/lib/nostr-tools/nip42.ts b/src/lib/nostr-tools/nip42.ts
deleted file mode 100644
index 07b25b47a39..00000000000
--- a/src/lib/nostr-tools/nip42.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Event, Kind } from "./event";
-import { Relay } from "./relay";
-
-/**
- * Authenticate via NIP-42 flow.
- *
- * @example
- * const sign = window.nostr.signEvent
- * relay.on('auth', challenge =>
- *   authenticate({ relay, sign, challenge })
- * )
- */
-export const authenticate = async ({
-  challenge,
-  relay,
-  sign
-}: {
-  challenge: string;
-  relay: Relay;
-  sign: (e: Partial<Event>) => Promise<Event>;
-}): Promise<void> => {
-  const e: Partial<Event> = {
-    kind: Kind.ClientAuth,
-    created_at: Math.floor(Date.now() / 1000),
-    tags: [
-      ["relay", relay.url],
-      ["challenge", challenge]
-    ],
-    content: ""
-  };
-  const signed = await sign(e);
-  if (!signed.sig) {
-    throw new Error("Canceled signing");
-  }
-  const pub = relay.auth(signed);
-  return new Promise((resolve, reject) => {
-    pub.on("ok", function ok() {
-      pub.off("ok", ok);
-      resolve();
-    });
-    pub.on("failed", function fail(reason: string) {
-      pub.off("failed", fail);
-      reject(reason);
-    });
-  });
-};
diff --git a/src/lib/nostr-tools/path.ts b/src/lib/nostr-tools/path.ts
deleted file mode 100644
index e6be6596d1f..00000000000
--- a/src/lib/nostr-tools/path.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
-Path API for Nostr, built on NIP33 replaceable-by-tag events of kind 30000.
-
-```
-const path = new Path(myPublishFn, mySubscribeFn, myUnsubscribeFn, { authors: [myPubKey} })
-path.set('reactions/[noteID]', '😎')
-path.get('reactions/[noteID]', (value, path, event) => console.log(event.pubkey, 'reacted with', value))
-```
-
-TODO:
-```
-path.list('reactions', (value, path, event) => {
-    console.log(
-      event.pubkey, 'reacted to', path.slice('/')[1], 'with', value
-    )
-  }, { authors: myFollows }
-)
-```
-
-In-memory caches the most recent event for the subscribed path, and only calls back with the most recent value.
-
-This API allows us to build all kinds of applications on top of Nostr (github replacement for example) without having to
-specify new event kinds all the time and implement them in all applications and relays.
-
-NIP33: https://github.com/nostr-protocol/nips/blob/master/33.md
- */
-import { Filter, matchFilter } from "./filter";
-import { Event } from "./event";
-
-const EVENT_KIND = 30000;
-
-type CompleteEvent = Event & { id: string };
-type PathCallback = (value: any, path: string, event: Event) => void;
-type Listener = {
-  filter: Filter;
-  callback: PathCallback;
-  subscription?: string;
-  off: () => void;
-};
-type Publish = (event: Partial<Event>) => Promise<Event>;
-type Subscribe = (filters: Filter[], callback: (event: Event) => void) => string;
-type Unsubscribe = (id: string) => void;
-type Encrypt = (content: string) => Promise<string>;
-type Decrypt = (content: string) => Promise<string>;
-
-export function getEventPath(event: Event): string | undefined {
-  return event.tags?.find(([t]) => t === "d")?.[1];
-}
-
-export function getFilterPath(filter: Filter): string | undefined {
-  return filter["#d"]?.[0];
-}
-
-// We can later add other storages like IndexedDB or localStorage
-class MemoryStorage {
-  eventsByPathAndAuthor = new Map<string, Map<string, Event>>();
-
-  // returns a boolean indicating whether the event was added (newer than existing)
-  set(event: Event): boolean {
-    const path = getEventPath(event);
-    if (!path) {
-      //throw new Error(`event has no d tag: ${JSON.stringify(event)}`)
-      return false;
-    }
-    if (!this.eventsByPathAndAuthor.has(path)) {
-      this.eventsByPathAndAuthor.set(path, new Map());
-    }
-    let valuesByAuthor = this.eventsByPathAndAuthor.get(path);
-    if (!valuesByAuthor) {
-      valuesByAuthor = new Map();
-      this.eventsByPathAndAuthor.set(path, valuesByAuthor);
-    }
-    const existing = valuesByAuthor?.get(event.pubkey);
-    if (existing && existing.created_at > event.created_at) {
-      return false;
-    }
-    valuesByAuthor.set(event.pubkey, event);
-    return true;
-  }
-
-  get(filter: Filter, callback: (event: Event) => void) {
-    const path = getFilterPath(filter);
-    if (!path) {
-      throw new Error(`filter has no #d tag: ${JSON.stringify(filter)}`);
-    }
-    const valuesByAuthor = this.eventsByPathAndAuthor.get(path);
-    if (!valuesByAuthor) {
-      return;
-    }
-    for (let [author, event] of valuesByAuthor) {
-      if (!filter.authors || filter.authors.indexOf(author) !== -1) {
-        callback(event);
-      }
-    }
-  }
-}
-
-export class Path {
-  store: MemoryStorage;
-  listeners: Map<string, Listener>;
-  publish: Publish;
-  subscribe: Subscribe;
-  unsubscribe: Unsubscribe;
-  filter: Filter;
-  encrypt?: Encrypt;
-  decrypt?: Decrypt;
-
-  constructor(
-    publish: Publish,
-    subscribe: Subscribe,
-    unsubscribe: Unsubscribe,
-    filter: Filter,
-    encrypt?: Encrypt,
-    decrypt?: Decrypt
-  ) {
-    this.publish = publish;
-    this.subscribe = subscribe;
-    this.unsubscribe = unsubscribe;
-    this.filter = filter;
-    this.encrypt = encrypt;
-    this.decrypt = decrypt;
-    this.store = new MemoryStorage();
-    this.listeners = new Map<string, Listener>();
-  }
-
-  async publishSetEvent(path: string, value: any): Promise<Event> {
-    let content: string;
-    if (this.encrypt) {
-      // TODO: path should be deterministically encrypted hash(path + secret) but NIP07 provides no way for that
-      const contentStr = JSON.stringify(value);
-      content = await this.encrypt(contentStr);
-      if (contentStr === content) {
-        throw new Error(`Encryption failed: ${contentStr} === ${content}`);
-      }
-    } else {
-      content = JSON.stringify(value);
-    }
-    return this.publish({
-      kind: EVENT_KIND,
-      tags: [["d", path]],
-      content,
-      created_at: Math.floor(Date.now() / 1000)
-    });
-  }
-
-  async set(path: string, value: any): Promise<boolean> {
-    try {
-      const event = await this.publishSetEvent(path, value);
-      if (event) {
-        if (this.store.set(event)) {
-          this.notifyListeners(event as CompleteEvent);
-        }
-        return true;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    return false;
-  }
-
-  async getEventValue(event: Event): Promise<any> {
-    let value = this.decrypt ? await this.decrypt(event.content) : event.content;
-    try {
-      value = JSON.parse(value);
-    } catch (e) {
-      throw new Error(`Failed to parse event content: ${value}`);
-    }
-    return value;
-  }
-
-  get(path: string, callback: PathCallback, filter = {}): Listener {
-    filter = Object.assign({}, filter, this.filter, { "#d": [path], kinds: [EVENT_KIND] });
-    const listener = this.addListener(filter, callback);
-    this.store.get(filter, (event) => this.callbackFromEvent(event, callback));
-    this.subscribe([filter], async (event) => {
-      if (this.store.set(event)) {
-        this.notifyListeners(event as CompleteEvent);
-      }
-    });
-    return listener;
-  }
-
-  addListener(filter: Filter, callback: PathCallback): Listener {
-    const id = Math.random().toString(36).substr(2, 9);
-    const listener: Listener = {
-      filter,
-      callback,
-      off: () => {
-        this.listeners.delete(id);
-        if (listener.subscription) {
-          this.unsubscribe(listener.subscription);
-        }
-      }
-    };
-    this.listeners.set(id, listener);
-    return listener;
-  }
-
-  removeListener(id: string) {
-    const listener = this.listeners.get(id);
-    if (listener) {
-      listener.off();
-    }
-  }
-
-  callbackFromEvent(event: Event, callback: PathCallback) {
-    const path = getEventPath(event);
-    if (!path) {
-      throw new Error(`event has no d tag: ${JSON.stringify(event)}`);
-    }
-    this.getEventValue(event).then((value) => {
-      callback(value, path, event);
-    });
-  }
-
-  async notifyListeners(event: CompleteEvent) {
-    for (let listener of this.listeners.values()) {
-      if (matchFilter(listener.filter, event)) {
-        this.callbackFromEvent(event, listener.callback);
-      }
-    }
-  }
-}
diff --git a/src/lib/nostr-tools/pool.ts b/src/lib/nostr-tools/pool.ts
deleted file mode 100644
index c95853db201..00000000000
--- a/src/lib/nostr-tools/pool.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import { relayInit, SubscriptionOptions } from "./relay";
-import { Filter } from "./filter";
-import { Event } from "./event";
-
-export interface SimplePoolOptions {
-  eoseSubTimeout?: number;
-  getTimeout?: number;
-  listTimeout?: number;
-}
-
-function normalizeURL(url: string) {
-  let p = new URL(url);
-  p.pathname = p.pathname.replace(/\/+/g, "/");
-  if (p.pathname.endsWith("/")) p.pathname = p.pathname.slice(0, -1);
-  if ((p.port === "80" && p.protocol === "ws:") || (p.port === "443" && p.protocol === "wss:"))
-    p.port = "";
-  p.searchParams.sort();
-  p.hash = "";
-  return p.toString();
-}
-
-export default class SimplePool {
-  _conn: any;
-  _seenOn = {};
-  eoseSubTimeout: number;
-  getTimeout: number;
-  constructor(options: SimplePoolOptions = {}) {
-    this._conn = {};
-    this.eoseSubTimeout = options.eoseSubTimeout || 3400;
-    this.getTimeout = options.getTimeout || 3400;
-  }
-
-  close(relays: string[]) {
-    relays.forEach((url: string) => {
-      let relay = this._conn[normalizeURL(url)];
-      if (relay) relay.close();
-    });
-  }
-  async ensureRelay(url: string) {
-    const nm = normalizeURL(url);
-    if (!this._conn[nm]) {
-      this._conn[nm] = relayInit(nm, {
-        getTimeout: this.getTimeout * 0.9,
-        listTimeout: this.getTimeout * 0.9
-      });
-    }
-    const relay = this._conn[nm];
-    await relay.connect();
-    return relay;
-  }
-  sub(relays: string[], filters: Filter[], opts?: SubscriptionOptions) {
-    let _knownIds = /* @__PURE__ */ new Set();
-    let modifiedOpts = { ...(opts || {}) };
-    modifiedOpts.alreadyHaveEvent = (id: number, url: string) => {
-      if (opts?.alreadyHaveEvent?.(id, url)) {
-        return true;
-      }
-      let set = this._seenOn[id] || /* @__PURE__ */ new Set();
-      set.add(url);
-      this._seenOn[id] = set;
-      return _knownIds.has(id);
-    };
-    let subs: any = [];
-    let eventListeners = /* @__PURE__ */ new Set();
-    let eoseListeners = /* @__PURE__ */ new Set();
-    let eosesMissing = relays.length;
-    let eoseSent = false;
-    let eoseTimeout = setTimeout(() => {
-      eoseSent = true;
-      for (let cb of eoseListeners.values()) (cb as any)();
-    }, this.eoseSubTimeout);
-    relays.forEach(async (relay: any) => {
-      let r;
-      try {
-        r = await this.ensureRelay(relay);
-      } catch (err) {
-        handleEose();
-        return;
-      }
-      if (!r) return;
-      let s = r.sub(filters, modifiedOpts);
-      s.on("event", (event: Event) => {
-        _knownIds.add(event.id);
-        for (let cb of eventListeners.values()) (cb as any)(event);
-      });
-      s.on("eose", () => {
-        if (eoseSent) return;
-        handleEose();
-      });
-      subs.push(s);
-      function handleEose() {
-        eosesMissing--;
-        if (eosesMissing === 0) {
-          clearTimeout(eoseTimeout);
-          for (let cb of eoseListeners.values()) (cb as any)();
-        }
-      }
-    });
-    let greaterSub = {
-      sub(filters2: any, opts2: any) {
-        subs.forEach((sub: any) => sub.sub(filters2, opts2));
-        return greaterSub;
-      },
-      unsub() {
-        subs.forEach((sub: any) => sub.unsub());
-      },
-      on(type: any, cb: any) {
-        if (type === "event") {
-          eventListeners.add(cb);
-        } else if (type === "eose") {
-          eoseListeners.add(cb);
-        }
-      },
-      off(type: any, cb: any) {
-        if (type === "event") {
-          eventListeners.delete(cb);
-        } else if (type === "eose") eoseListeners.delete(cb);
-      }
-    };
-    return greaterSub;
-  }
-  get(relays: string[], filter: Filter, opts: SubscriptionOptions) {
-    return new Promise((resolve) => {
-      let sub = this.sub(relays, [filter], opts);
-      let timeout = setTimeout(() => {
-        sub.unsub();
-        resolve(null);
-      }, this.getTimeout);
-      sub.on("event", (event: Event) => {
-        resolve(event);
-        clearTimeout(timeout);
-        sub.unsub();
-      });
-    });
-  }
-  list(relays: string[], filters: Filter[], opts: SubscriptionOptions) {
-    return new Promise((resolve) => {
-      let events: Event[] = [];
-      let sub = this.sub(relays, filters, opts);
-      sub.on("event", (event: Event) => {
-        events.push(event);
-      });
-      sub.on("eose", () => {
-        sub.unsub();
-        resolve(events);
-      });
-    });
-  }
-  publish(relays: string[], event: Event) {
-    const pubPromises = relays.map(async (relay: string) => {
-      let r;
-      try {
-        r = await this.ensureRelay(relay);
-        return r.publish(event);
-      } catch (_) {
-        return { on() {}, off() {} };
-      }
-    });
-    const callbackMap = /* @__PURE__ */ new Map();
-    return {
-      on(type: string, cb: { (): void; (): void; (arg0: any): any }) {
-        relays.forEach(async (relay: any, i: string | number) => {
-          let pub = await pubPromises[i];
-          let callback = () => cb(relay);
-          callbackMap.set(cb, callback);
-          pub.on(type, callback);
-        });
-      },
-      off(type: any, cb: any) {
-        relays.forEach(async (_: any, i: string | number) => {
-          let callback = callbackMap.get(cb);
-          if (callback) {
-            let pub = await pubPromises[i];
-            pub.off(type, callback);
-          }
-        });
-      }
-    };
-  }
-  seenOn(id: string) {
-    return Array.from(this._seenOn[id]?.values?.() || []);
-  }
-}
diff --git a/src/lib/nostr-tools/relay.ts b/src/lib/nostr-tools/relay.ts
deleted file mode 100644
index 69f65598069..00000000000
--- a/src/lib/nostr-tools/relay.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-/* global WebSocket */
-
-import { Event, verifySignature, validateEvent } from "./event";
-import { Filter } from "./filter";
-import { SimplePoolOptions } from "./pool";
-
-type RelayEvent = "connect" | "disconnect" | "error" | "notice" | "auth";
-
-export type Relay = {
-  enabled?: any;
-  url: string;
-  status: number;
-  connect: () => Promise<void>;
-  close: () => Promise<void>;
-  sub: (filters: Filter[], opts?: SubscriptionOptions) => Sub;
-  publish: (event: Event) => Pub;
-  auth: (event: Event) => Pub;
-  on: (type: RelayEvent, cb: any) => void;
-  off: (type: RelayEvent, cb: any) => void;
-};
-export type Pub = {
-  on: (type: "ok" | "seen" | "failed", cb: any) => void;
-  off: (type: "ok" | "seen" | "failed", cb: any) => void;
-};
-export type Sub = {
-  sub: (filters: Filter[], opts: SubscriptionOptions) => Sub;
-  unsub: () => void;
-  on: (type: "event" | "eose", cb: any) => void;
-  off: (type: "event" | "eose", cb: any) => void;
-};
-
-export type SubscriptionOptions = {
-  skipVerification?: boolean;
-  id?: string;
-  alreadyHaveEvent?: any;
-};
-
-function getSubscriptionId(json: string | any[]) {
-  let idx = json.slice(0, 22).indexOf(`"EVENT"`);
-  if (idx === -1) return null;
-  let pstart = json.slice(idx + 7 + 1).indexOf(`"`);
-  if (pstart === -1) return null;
-  let start = idx + 7 + 1 + pstart;
-  let pend = json.slice(start + 1, 80).indexOf(`"`);
-  if (pend === -1) return null;
-  let end = start + 1 + pend;
-  return json.slice(start + 1, end);
-}
-
-function getHex64(json: string | string[], field: string | any[]) {
-  let len = field.length + 3;
-  let idx = json.indexOf(`"${field}":`) + len;
-  let s = json.slice(idx).indexOf(`"`) + idx + 1;
-  return json.slice(s, s + 64);
-}
-
-export function relayInit(url: string, options: SimplePoolOptions = {}) {
-  let { listTimeout = 3e3, getTimeout = 3e3 } = options;
-  var ws: WebSocket;
-  var openSubs = {};
-  var listeners = {
-    connect: [],
-    disconnect: [],
-    error: [],
-    notice: []
-  };
-  var subListeners = {};
-  var pubListeners = {};
-  var connectionPromise: Promise<void> | undefined;
-  async function connectRelay() {
-    if (connectionPromise) return connectionPromise;
-    connectionPromise = new Promise<void>((resolve, reject) => {
-      try {
-        ws = new WebSocket(url);
-      } catch (err) {
-        reject(err);
-      }
-      ws.onopen = () => {
-        listeners.connect.forEach((cb: any) => cb());
-        resolve();
-      };
-      ws.onerror = () => {
-        connectionPromise = void 0;
-        listeners.error.forEach((cb: any) => cb());
-        reject();
-      };
-      ws.onclose = async () => {
-        connectionPromise = void 0;
-        listeners.disconnect.forEach((cb: any) => cb());
-      };
-      let incomingMessageQueue: any[] = [];
-      let handleNextInterval: any;
-      ws.onmessage = (e) => {
-        incomingMessageQueue.push(e.data);
-        if (!handleNextInterval) {
-          handleNextInterval = setInterval(handleNext, 0);
-        }
-      };
-      async function handleNext() {
-        if (incomingMessageQueue.length === 0) {
-          clearInterval(handleNextInterval);
-          handleNextInterval = null;
-          return;
-        }
-        var json = incomingMessageQueue.shift();
-        if (!json) return;
-        let subid: any = getSubscriptionId(json);
-        if (subid) {
-          let so = openSubs[subid];
-          if (so && so.alreadyHaveEvent && so.alreadyHaveEvent(getHex64(json, "id"), url)) {
-            return;
-          }
-        }
-        try {
-          let data = JSON.parse(json);
-          switch (data[0]) {
-            case "EVENT":
-              let id = data[1];
-              let event = data[2];
-              if (
-                validateEvent(event) &&
-                openSubs[id] &&
-                (openSubs[id].skipVerification || (await verifySignature(event)))
-              ) {
-                openSubs[id];
-                (subListeners[id]?.event || []).forEach((cb: any) => cb(event));
-              }
-              return;
-            case "EOSE": {
-              let id2 = data[1];
-              if (id2 in subListeners) {
-                subListeners[id2].eose.forEach((cb: any) => cb());
-                subListeners[id2].eose = [];
-              }
-              return;
-            }
-            case "OK": {
-              let id2 = data[1];
-              let ok = data[2];
-              let reason = data[3] || "";
-              if (id2 in pubListeners) {
-                if (ok) pubListeners[id2].ok.forEach((cb: any) => cb());
-                else pubListeners[id2].failed.forEach((cb: any) => cb(reason));
-                pubListeners[id2].ok = [];
-                pubListeners[id2].failed = [];
-              }
-              return;
-            }
-            case "NOTICE":
-              let notice = data[1];
-              listeners.notice.forEach((cb: any) => cb(notice));
-              return;
-          }
-        } catch (err) {
-          return;
-        }
-      }
-    });
-    return connectionPromise;
-  }
-  function connected() {
-    return ws?.readyState === 1;
-  }
-  async function connect() {
-    if (connected()) return;
-    await connectRelay();
-  }
-  async function trySend(params: any) {
-    let msg = JSON.stringify(params);
-    if (!connected()) {
-      await new Promise((resolve) => setTimeout(resolve, 1e3));
-      if (!connected()) {
-        return;
-      }
-    }
-    try {
-      ws.send(msg);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-  const sub = (
-    filters: any[],
-    {
-      skipVerification = false,
-      alreadyHaveEvent = null,
-      id = Math.random().toString().slice(2)
-    } = {}
-  ) => {
-    let subid = id;
-    openSubs[subid] = {
-      id: subid,
-      filters,
-      skipVerification,
-      alreadyHaveEvent
-    };
-    trySend(["REQ", subid, ...filters]);
-    return {
-      sub: (newFilters: any, newOpts: SubscriptionOptions = {}) =>
-        sub(newFilters || filters, {
-          skipVerification: newOpts.skipVerification || skipVerification,
-          alreadyHaveEvent: newOpts.alreadyHaveEvent || alreadyHaveEvent,
-          id: subid
-        }),
-      unsub: () => {
-        delete openSubs[subid];
-        delete subListeners[subid];
-        trySend(["CLOSE", subid]);
-      },
-      on: (type: string | number, cb: any) => {
-        subListeners[subid] = subListeners[subid] || {
-          event: [],
-          eose: []
-        };
-        subListeners[subid][type].push(cb);
-      },
-      off: (type: string | number, cb: any) => {
-        let listeners2 = subListeners[subid];
-        let idx = listeners2[type].indexOf(cb);
-        if (idx >= 0) listeners2[type].splice(idx, 1);
-      }
-    };
-  };
-  return {
-    url,
-    sub,
-    on: (type: string, cb: () => void) => {
-      listeners[type].push(cb);
-      if (type === "connect" && ws?.readyState === 1) {
-        cb();
-      }
-    },
-    off: (type: string | number, cb: any) => {
-      let index = listeners[type].indexOf(cb);
-      if (index !== -1) listeners[type].splice(index, 1);
-    },
-    list: (
-      filters: any[],
-      opts:
-        | {
-            skipVerification?: boolean | undefined;
-            alreadyHaveEvent?: null | undefined;
-            id?: string | undefined;
-          }
-        | undefined
-    ) =>
-      new Promise((resolve) => {
-        let s = sub(filters, opts);
-        let events: any = [];
-        let timeout = setTimeout(() => {
-          s.unsub();
-          resolve(events);
-        }, listTimeout);
-        s.on("eose", () => {
-          s.unsub();
-          clearTimeout(timeout);
-          resolve(events);
-        });
-        s.on("event", (event: any) => {
-          events.push(event);
-        });
-      }),
-    get: (
-      filter: any,
-      opts:
-        | {
-            skipVerification?: boolean | undefined;
-            alreadyHaveEvent?: null | undefined;
-            id?: string | undefined;
-          }
-        | undefined
-    ) =>
-      new Promise((resolve) => {
-        let s = sub([filter], opts);
-        let timeout = setTimeout(() => {
-          s.unsub();
-          resolve(null);
-        }, getTimeout);
-        s.on("event", (event: any) => {
-          s.unsub();
-          clearTimeout(timeout);
-          resolve(event);
-        });
-      }),
-    publish(event: any) {
-      if (!event.id) throw new Error(`event ${event} has no id`);
-      let id = event.id;
-      trySend(["EVENT", event]);
-      return {
-        on: (type: string | number, cb: any) => {
-          pubListeners[id] = pubListeners[id] || {
-            ok: [],
-            failed: []
-          };
-          pubListeners[id][type].push(cb);
-        },
-        off: (type: string | number, cb: any) => {
-          let listeners2 = pubListeners[id];
-          if (!listeners2) return;
-          let idx = listeners2[type].indexOf(cb);
-          if (idx >= 0) listeners2[type].splice(idx, 1);
-        }
-      };
-    },
-    connect,
-    close() {
-      listeners = { connect: [], disconnect: [], error: [], notice: [] };
-      subListeners = {};
-      pubListeners = {};
-      if (ws.readyState === WebSocket.OPEN) {
-        ws?.close();
-      }
-    },
-    status() {
-      return ws?.readyState ?? 3;
-    }
-  };
-}
diff --git a/src/lib/nostr-tools/utils.ts b/src/lib/nostr-tools/utils.ts
deleted file mode 100644
index e3a9712883e..00000000000
--- a/src/lib/nostr-tools/utils.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const utf8Decoder = new TextDecoder("utf-8");
-export const utf8Encoder = new TextEncoder();
diff --git a/yarn.lock b/yarn.lock
index 473b75893a1..97fe782ea0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1369,6 +1369,18 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@ecency/ns-query@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-0.0.1.tgz#dd931d793adce3705ad7f5f0695256c8e1d34def"
+  integrity sha512-fSSyV4/y1+TrVwHf7cyNBy1X5Z11RPE4CBqamLUPbcBwBRLHigf73ci3XcHKgpG3SrjC7s8AOapWUAKJM772Yg==
+  dependencies:
+    "@tanstack/react-query" "^4.29.7"
+    date-fns "^2.30.0"
+    nostr-tools "^1.17.0"
+    react "^16.8.6"
+    react-dom "^16.8.6"
+    react-use "^17.4.1"
+
 "@ecency/render-helper-amp@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ecency/render-helper-amp/-/render-helper-amp-1.1.0.tgz#8ccb12163786227510a2cc5ce7b09797ac680577"
@@ -1784,7 +1796,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
-"@jridgewell/sourcemap-codec@^1.4.14":
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -3268,10 +3280,10 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-preset-razzle@^4.0.5:
-  version "4.2.16"
-  resolved "https://registry.yarnpkg.com/babel-preset-razzle/-/babel-preset-razzle-4.2.16.tgz#c6336ee6f5239462983a49401254e49afdb46a06"
-  integrity sha512-ilCj8YjiWuRgzoaHOtW+B63RZ/yySlV8km7yh+Y0vQt2kSQCKxSnouUhADQXzr31K0DEMw5uIjRCr3h3MGsUcw==
+babel-preset-razzle@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/babel-preset-razzle/-/babel-preset-razzle-4.2.18.tgz#257cf684337cbbff54ce0e74695a6f2f6977d585"
+  integrity sha512-UmoGdxuobZJ2ut/7JQPEZaDMH4aJMEWj1E8aeX2uV+C1I7FULo/kkrD8I43hnfcZVX3cAdZYATZ6LiNe01plNg==
   dependencies:
     "@babel/core" "^7.11.1"
     "@babel/plugin-proposal-class-properties" "^7.8.3"
@@ -4822,6 +4834,11 @@ csstype@^3.0.6:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 currency-symbol-map@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-4.0.4.tgz#3cfba625974dd3f86822d327ecbd10248695e95e"
@@ -6908,6 +6925,14 @@ inline-style-prefixer@^6.0.0:
     css-in-js-utils "^3.1.0"
     fast-loops "^1.1.3"
 
+inline-style-prefixer@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz#991d550735d42069f528ac1bcdacd378d1305442"
+  integrity sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==
+  dependencies:
+    css-in-js-utils "^3.1.0"
+    fast-loops "^1.1.3"
+
 inquirer@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
@@ -8709,6 +8734,20 @@ nano-css@^5.3.1:
     stacktrace-js "^2.0.2"
     stylis "^4.0.6"
 
+nano-css@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197"
+  integrity sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    css-tree "^1.1.2"
+    csstype "^3.1.2"
+    fastest-stable-stringify "^2.0.2"
+    inline-style-prefixer "^7.0.0"
+    rtl-css-js "^1.16.1"
+    stacktrace-js "^2.0.2"
+    stylis "^4.3.0"
+
 nanoid@^3.1.22, nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -8935,7 +8974,7 @@ nostr-relaypool@^0.6.28:
     nostr-tools "^1.10.0"
     safe-stable-stringify "^2.4.2"
 
-nostr-tools@^1.10.0:
+nostr-tools@^1.10.0, nostr-tools@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.17.0.tgz#b6f62e32fedfd9e68ec0a7ce57f74c44fc768e8c"
   integrity sha512-LZmR8GEWKZeElbFV5Xte75dOeE9EFUW/QLI1Ncn3JKn0kFddDKEfBbFN8Mu4TMs+L4HR/WTPha2l+PPuRnJcMw==
@@ -10319,10 +10358,10 @@ razzle-dev-utils@3.4.5:
     strip-ansi "6.0.0"
     webpack-dev-server "~3.10.3"
 
-razzle-dev-utils@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-dev-utils/-/razzle-dev-utils-4.0.5.tgz#51d236a21c590a9dd017b0107c261643e36d497f"
-  integrity sha512-ki1PxtBCugmpTyYdQ4/Ls3uToBimxNxJsxoZzNx/C8NaxBbbDAVKvysX1oqFRVT9KyMOLaQXFG/qdSFXDxcvlg==
+razzle-dev-utils@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-dev-utils/-/razzle-dev-utils-4.2.18.tgz#ba55ca6a19931eb4c7540fcedbe57d1f31838f45"
+  integrity sha512-WOXpAUAJaR3JJYhhb6iQKa+i25Ab2lAGiJXdbkDAXWDFRikpnojoUaZ2VuoNluSo0Xd7OKeaX8Ge29LW4mjEEg==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     chalk "^4.1.0"
@@ -10336,10 +10375,10 @@ razzle-dev-utils@^4.0.5:
     sockjs-client "~1.4.0"
     strip-ansi "^6.0.0"
 
-razzle-plugin-scss@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-plugin-scss/-/razzle-plugin-scss-4.0.5.tgz#bc36e021c14f88fbcbca32849abc7ee9d2d3a5db"
-  integrity sha512-uxLwIqLA/SvdhVtPEa4wHZX+wvseBRR1FHEN22u8kZKGIdr8HWwiU7vIVpxtt228yCFyqthminMkQAsCxJlwAA==
+razzle-plugin-scss@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-plugin-scss/-/razzle-plugin-scss-4.2.18.tgz#829838946aff73b0d8ecc539b78951971833ae88"
+  integrity sha512-G3Vwunt3kWJk117fS9hue7+cDNVIUyJrGLY0qdHwJPgceRggZR9XlKT9U09lCZan0UoaASLVfQmZVITiLIGodA==
   dependencies:
     autoprefixer "^10.2.3"
     css-loader "^5.0.0"
@@ -10360,15 +10399,15 @@ razzle-plugin-typescript@^3.0.0:
     razzle-dev-utils "3.4.5"
     ts-loader "^5.2.1"
 
-razzle-start-server-webpack-plugin@4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.0.5.tgz#432719af814944ad15deeb9134ee5bfcfe9dc69b"
-  integrity sha512-IrsdXUsNdPYe4enEQseG/rFeggkVTvzopjICJxCxx/bco5pqcAZUdJ02ntuPPqa3f9KOr9mYFDKgBo6gh96UiQ==
+razzle-start-server-webpack-plugin@4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.2.18.tgz#153e35647b78f0224becc2d586d43a9af0838cfe"
+  integrity sha512-yR86/T7hmfseBFOQYZDiDfLNxIvws7wBvRoQNz7aw4cT6cX8JFDPpMDHQQNdnESRDencDozMtFLX0jECJJi/CA==
 
-razzle@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle/-/razzle-4.0.5.tgz#314da48f85b19022ea7f1ae21ee3c71b6b685f2a"
-  integrity sha512-35zdVelUH+7OifhDMsFeqopyz2I3u7JT2bKu+KcliR1AFOplDnPMEUSwWdQ4KFdJI7b+eFFuCAx0jJh3yi8Ahg==
+razzle@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle/-/razzle-4.2.18.tgz#6a7c7c692b7ce0224e3d99fd43da1db6d5f0cd68"
+  integrity sha512-lgumXubb/rs5oQVcmu3UDSObbWQ2H1FLf2/VLal25yusotEbyePVLAw9f9QGu+bbUohvEY0rfYyJtnQNE8J4Og==
   dependencies:
     "@babel/plugin-transform-modules-commonjs" "^7.12.1"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3"
@@ -10396,7 +10435,7 @@ razzle@^4.0.5:
     postcss-load-config "^3.0.0"
     postcss-loader "^4.2.0"
     process "^0.11.10"
-    razzle-start-server-webpack-plugin "4.0.5"
+    razzle-start-server-webpack-plugin "4.2.18"
     react-dev-utils "^11.0.4"
     react-refresh "^0.9.0"
     resolve "^1.17.0"
@@ -10733,6 +10772,26 @@ react-use@^17.4.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
+react-use@^17.4.1:
+  version "17.4.2"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.2.tgz#26d43c774ccb733a17a87be62e12fbcbc5654173"
+  integrity sha512-1jPtmWLD8OJJNYCdYLJEH/HM+bPDfJuyGwCYeJFgPmWY8ttwpgZnW5QnzgM55CYUByUiTjHxsGOnEpLl6yQaoQ==
+  dependencies:
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.6.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.1.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^3.0.1"
+    ts-easing "^0.2.0"
+    tslib "^2.1.0"
+
 react-virtualized@^9.22.3:
   version "9.22.3"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
@@ -11210,6 +11269,13 @@ rtl-css-js@^1.14.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+rtl-css-js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
+  integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -12218,6 +12284,11 @@ stylis@^4.0.6:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
+stylis@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"

From ca3b73dee2b442136d250a1ee5c4966d946f81a6 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 5 Dec 2023 22:18:35 +0600
Subject: [PATCH 165/179] Chats: fixes by PR review

---
 .../components/chat-popup/chat-constants.ts      |  2 +-
 .../chats/components/manage-chat-key.tsx         |  2 +-
 src/common/i18n/locales/en-US.json               | 16 +++++++++-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/chat-constants.ts b/src/common/features/chats/components/chat-popup/chat-constants.ts
index 987d0902838..dd215b6fa64 100644
--- a/src/common/features/chats/components/chat-popup/chat-constants.ts
+++ b/src/common/features/chats/components/chat-popup/chat-constants.ts
@@ -7,7 +7,7 @@ export const GifImagesStyle = {
   width: "170px"
 };
 
-export const CHAT_FILE_CONTENT_TYPES = ["jpg", "jpeg", "gif", "png"];
+export const CHAT_FILE_CONTENT_TYPES = ["jpg", "jpeg", "gif", "png", "webp"];
 export const PRIVILEGEDROLES = ["owner", "admin", "mod"];
 export const COMMUNITYADMINROLES = ["owner", "admin"];
 
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
index c69c3f4ddd6..3fe7214754d 100644
--- a/src/common/features/chats/components/manage-chat-key.tsx
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -58,7 +58,7 @@ export default function ManageChatKey() {
           <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
           <div className="text-sm">PIN</div>
           <InputGroupCopyClipboard value={pin ?? ""} />
-          <div className="text-sm mt-4">Ecency key</div>
+          <div className="text-sm mt-4">{_t("chat.ecency-key")}</div>
           <InputGroupCopyClipboard value={ecencyKey ?? ""} />
           <img
             ref={qrImgRef}
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 0991c937920..af5071607b2 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1840,7 +1840,7 @@
     "direct-messages": "Direct messages",
     "collapse": "Collapse",
     "expand": "Expand",
-    "scroll-to-bottom": "scroll to Bottom",
+    "scroll-to-bottom": "Scroll to Bottom",
     "joined": "Joined",
     "followers": "Followers",
     "start-chat-placeholder": "Start a new message",
@@ -1862,7 +1862,8 @@
     "blocked-users": "Blocked Users",
     "action": "Action",
     "unblock": "Unblock",
-    "no-locked-user": "No Blocked user yet.",
+    "ecency-key": "Ecency key",
+    "no-locked-user": "Blocked users not found",
     "enter-private-key": "Enter Chat private key",
     "enter-private-key-detail": "Enter chat private key to import all chats",
     "close": "Close",
@@ -1882,12 +1883,12 @@
     "start-community-chat": "Start Community Chat",
     "join-community-chat": "Join Community Chat",
     "submit": "Submit",
-    "chat-priv-key": "Please, save Ecency key by clicking on download button or scanning QR code to restore your conversation if there will disappeared.",
+    "chat-priv-key": "Please, save Chat key by clicking on download button or scanning QR code to restore your conversations.",
     "public-key": "Public key",
     "private-key": "Private key",
     "copy-priv-key": "Copy Private key",
     "extended-view": "Extended View",
-    "you-haven-t-joined": "You haven't joined the chat yet. Please join the chat to start chatting.",
+    "you-haven-t-joined": "You haven't joined the Chat yet. Please join to get started!",
     "invalid-private-key": "Invalid private key",
     "enter-username": "Enter temporary username",
     "hide-message": "Hide message",
@@ -1899,15 +1900,16 @@
     "logout": "Logout",
     "specify-invitation-message": "This invitation message will be sent as comment to latest user post",
     "successfully-invited": "Successfully invited!",
-    "no-posts-for-invite": "Unfortunately, User hasn't posts.",
-    "warn-key-saving": "Save the Ecency key to access your messages. Keep it secure for uninterrupted service. Thank you!",
+    "invite-couldnt-be-sent": "Invite couldn't be sent due to user doesn't have any post yet",
+    "no-posts-for-invite": "Unfortunately, User doesn't seem active and haven't made any posts.",
+    "warn-key-saving": "Save the Chat key to access your messages. Keep it secure for uninterrupted service!",
     "view-and-save": "Show keys and save",
     "blocked-users-management": "Blocked users management",
     "unlock-the-section": "Please, enter your PIN to see your credentials information",
     "welcome": {
       "title": "Welcome to Chats",
       "description": "Create or import an account start using Chats",
-      "already-joined-title": "We found You've joined to chats already",
+      "already-joined-title": "Looks like, you've already joined the Chats",
       "already-joined-hint": "Please, verify your account and get access by entering PIN",
       "pin-failed": "Invalid PIN. Failed to verify.",
       "oops": "Oops!",

From 23bc08e494f5ed883a6c2cf9d35fc3c2a52740be Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 5 Dec 2023 22:38:59 +0600
Subject: [PATCH 166/179] Chats: fixes code input auto-focusing

---
 src/common/features/ui/input/code-input.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/common/features/ui/input/code-input.tsx b/src/common/features/ui/input/code-input.tsx
index 88b5c50b4af..18c889db053 100644
--- a/src/common/features/ui/input/code-input.tsx
+++ b/src/common/features/ui/input/code-input.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { FormControl } from "@ui/input/form-controls";
+import { v4 } from "uuid";
 
 interface Props {
   codeSize?: number;
@@ -9,6 +10,7 @@ interface Props {
 }
 
 export function CodeInput({ value, setValue, codeSize = 6, disabled }: Props) {
+  const [id, setId] = useState("code_input_" + v4());
   const [code, setCode] = useState(new Array(codeSize).fill(""));
 
   useEffect(() => {
@@ -32,14 +34,14 @@ export function CodeInput({ value, setValue, codeSize = 6, disabled }: Props) {
       {code.map((item, i) => (
         <FormControl
           disabled={disabled}
-          id={`code-input-${i}`}
           key={i}
+          id={`${id}_${i}`}
           type="text"
           value={item}
           onKeyUp={(e) => {
             if (e.key === "Backspace") {
               const nextElement = document.querySelector(
-                `#code-input-${i - 1}`
+                `#${id}_${i - 1}`
               ) as HTMLInputElement | null;
               if (nextElement) {
                 nextElement.focus();
@@ -54,7 +56,7 @@ export function CodeInput({ value, setValue, codeSize = 6, disabled }: Props) {
             setCode(tempCode);
 
             const nextElement = document.querySelector(
-              `#code-input-${i + 1}`
+              `#${id}_${i + 1}`
             ) as HTMLInputElement | null;
             if (nextElement && lastCharacter) {
               nextElement.focus();

From 5c18c14c00d00fca4b2bf1fd544007297e13ed45 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 5 Dec 2023 23:07:16 +0600
Subject: [PATCH 167/179] Chats: fixed authenticated status in a widget

---
 .../features/chats/components/chat-popup/index.tsx     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 21e1907044c..7aa5fc24ebd 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -32,13 +32,8 @@ import { uploadChatKeys } from "../../utils/upload-chat-keys";
 export const ChatPopUp = () => {
   const { activeUser, global } = useMappedStore();
 
-  const {
-    receiverPubKey,
-    revealPrivateKey,
-    hasUserJoinedChat,
-    setRevealPrivateKey,
-    setReceiverPubKey
-  } = useContext(ChatContext);
+  const { receiverPubKey, revealPrivateKey, setRevealPrivateKey, setReceiverPubKey } =
+    useContext(ChatContext);
   const { isLoading: isJoinChatLoading } = useJoinChat(uploadChatKeys);
 
   const [currentUser, setCurrentUser] = useState("");
@@ -68,6 +63,7 @@ export const ChatPopUp = () => {
   const [hasMore, setHasMore] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  const hasUserJoinedChat = useMemo(() => !!privateKey, [privateKey]);
   const currentChannel = useMemo(
     () => channels?.find((channel) => channel.communityName === communityName),
     [communityName, channels]

From 93201cae944db2d451255ee2036294fbcad7969a Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 13 Dec 2023 23:10:25 +0600
Subject: [PATCH 168/179] Chats: added searching communities

---
 .../chat-popup/chat-popup-search-user.tsx     | 57 +++++--------------
 .../chat-sidebar-search-item.tsx              | 48 +++++++++++-----
 .../chats-sidebar/chat-sidebar-search.tsx     | 38 +++++--------
 .../chats/components/chats-sidebar/index.tsx  | 20 +++----
 .../chats/queries/search-communities-query.ts | 15 +++++
 .../chats/queries/search-users-query.ts       |  2 +-
 src/common/i18n/locales/en-US.json            |  2 +-
 7 files changed, 90 insertions(+), 92 deletions(-)
 create mode 100644 src/common/features/chats/queries/search-communities-query.ts

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
index 4a49339dedb..afb8a03c953 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
@@ -1,58 +1,31 @@
-import { FormControl, InputGroup } from "@ui/input";
-import { _t } from "../../../../i18n";
-import accountReputation from "../../../../helper/account-reputation";
 import React, { useState } from "react";
-import UserAvatar from "../../../../components/user-avatar";
-import useDebounce from "react-use/lib/useDebounce";
 import { useSearchUsersQuery } from "../../queries";
-import { Spinner } from "@ui/spinner";
+import { ChatSidebarSearch } from "../chats-sidebar/chat-sidebar-search";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
+import { ChatSidebarSearchItem } from "../chats-sidebar/chat-sidebar-search-item";
 
 interface Props {
   setCurrentUser: (v: string) => void;
 }
 
 export function ChatPopupSearchUser({ setCurrentUser }: Props) {
-  const [search, setSearch] = useState("");
-  const { data, isLoading, refetch } = useSearchUsersQuery(search);
-
-  useDebounce(() => refetch(), 500, [search]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { data: searchUsers } = useSearchUsersQuery(searchQuery);
+  const { data: searchCommunities } = useSearchCommunitiesQuery(searchQuery);
 
   return (
     <>
-      <div className="p-4">
-        <div className="w-full mb-3">
-          <InputGroup prepend={isLoading ? <Spinner className="w-3.5 h-3.5" /> : "@"}>
-            <FormControl
-              type="text"
-              placeholder={_t("chat.search")}
-              value={search}
-              autoFocus={true}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-          </InputGroup>
-        </div>
+      <div className="w-full mb-3">
+        <ChatSidebarSearch setSearch={setSearchQuery} />
       </div>
       <div className="user-search-suggestion-list">
-        {data.map((user, index) => {
-          return (
-            <div
-              key={index}
-              className="search-content"
-              onClick={() => setCurrentUser(user.account)}
-            >
-              <div className="search-user-img">
-                <span>
-                  <UserAvatar username={user.account} size="medium" />
-                </span>
-              </div>
-
-              <div className="search-user-title">
-                <p className="search-username">{user.account}</p>
-                <p className="search-reputation">({accountReputation(user.reputation)})</p>
-              </div>
-            </div>
-          );
-        })}
+        {[...searchUsers, ...searchCommunities].map((item) => (
+          <ChatSidebarSearchItem
+            item={item}
+            onClick={() => setCurrentUser("account" in item ? item.account : item.name)}
+            key={"account" in item ? item.account : item.id}
+          />
+        ))}
       </div>
     </>
   );
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
index fb0707c0d54..e8777fc2aab 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -1,25 +1,47 @@
 import accountReputation from "../../../../helper/account-reputation";
 import { Link } from "react-router-dom";
-import React from "react";
+import React, { createElement, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import isCommunity from "../../../../helper/is-community";
 import { AccountWithReputation } from "@ecency/ns-query";
+import { Community } from "../../../../store/communities";
 
 interface Props {
-  user: AccountWithReputation;
+  item: AccountWithReputation | Community;
   onClick: () => void;
 }
 
-export function ChatSidebarSearchItem({ user, onClick }: Props) {
-  return (
-    <Link
-      to={`/chats/${isCommunity(user.account) ? user.account : "@" + user.account}`}
-      className="flex items-center gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800"
-      onClick={onClick}
-    >
-      <UserAvatar username={user.account} size="medium" />
-      <span className="user-name">{user.account}</span>
-      <span className="user-reputation">({accountReputation(user.reputation)})</span>
-    </Link>
+export function ChatSidebarSearchItem({ item, onClick }: Props) {
+  const username = useMemo(() => {
+    if ("account" in item) {
+      return isCommunity(item.account) ? item.account : "@" + item.account;
+    }
+    return item.name;
+  }, [item]);
+
+  return createElement(
+    !!onClick ? "div" : Link,
+    {
+      to: `/chats/${username}`,
+      className:
+        "flex items-center cursor-pointer justify-between gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800",
+      onClick
+    },
+    <>
+      <div className="flex items-center gap-3">
+        <UserAvatar username={username} size="medium" />
+        <div>
+          <div className="user-name text-dark-200 dark:text-white">
+            {"account" in item ? item.account : item.title}
+          </div>
+          <div className="text-gray-600 dark:text-gray-400 text-xs">
+            {isCommunity(username) ? "Community" : "User"}
+          </div>
+        </div>
+      </div>
+      {"reputation" in item && (
+        <span className="user-reputation">({accountReputation(item.reputation)})</span>
+      )}
+    </>
   );
 }
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
index 3cb4699d712..89c317067a5 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -2,30 +2,27 @@ import { FormControl } from "@ui/input";
 import { _t } from "../../../../i18n";
 import React, { useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
-import { getAccountReputations } from "../../../../api/hive";
 import LinearProgress from "../../../../components/linear-progress";
-import { AccountWithReputation } from "@ecency/ns-query";
+import { useSearchUsersQuery } from "../../queries";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
 
 interface Props {
-  searchQuery: string;
-  setSearchQuery: (v: string) => void;
-  setUserList: (v: AccountWithReputation[]) => void;
+  setSearch: (v: string) => void;
 }
 
-export function ChatSidebarSearch({ setUserList, searchQuery, setSearchQuery }: Props) {
-  const [searchInProgress, setSearchInProgress] = useState(false);
+export function ChatSidebarSearch({ setSearch: emitSearch }: Props) {
+  const [search, setSearch] = useState("");
+  const { isLoading, refetch } = useSearchUsersQuery(search);
+  const { isLoading: isCommunitiesLoading, refetch: refetchCommunities } =
+    useSearchCommunitiesQuery(search);
 
   useDebounce(
     async () => {
-      if (searchQuery.length !== 0) {
-        const resp = await getAccountReputations(searchQuery, 30);
-        const sortedByReputation = resp.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
-        setUserList(sortedByReputation);
-        setSearchInProgress(false);
-      }
+      await Promise.all([refetch(), refetchCommunities()]);
+      emitSearch(search);
     },
     500,
-    [searchQuery]
+    [search]
   );
 
   return (
@@ -34,18 +31,11 @@ export function ChatSidebarSearch({ setUserList, searchQuery, setSearchQuery }:
         <FormControl
           type="text"
           placeholder={_t("chat.search")}
-          value={searchQuery}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-            setSearchInProgress(true);
-            if (e.target.value.length === 0) {
-              setSearchInProgress(false);
-              setUserList([]);
-            }
-          }}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
         />
       </div>
-      {searchInProgress && <LinearProgress />}
+      {(isLoading || isCommunitiesLoading) && <LinearProgress />}
     </>
   );
 }
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 90bca3992f5..a8550bea64f 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -8,13 +8,14 @@ import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
 import { ChatSidebarChannel } from "./chat-sidebar-channel";
 import {
-  AccountWithReputation,
   ChatContext,
   getJoinedCommunities,
   useChannelsQuery,
   useDirectContactsQuery,
   useLeftCommunityChannelsQuery
 } from "@ecency/ns-query";
+import { useSearchUsersQuery } from "../../queries";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
 
 interface Props {
   username: string;
@@ -28,14 +29,15 @@ export default function ChatsSideBar(props: Props) {
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
-
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
 
   const [searchQuery, setSearchQuery] = useState("");
   const [showDivider, setShowDivider] = useState(false);
-  const [userList, setUserList] = useState<AccountWithReputation[]>([]);
   const [isScrollToTop, setIsScrollToTop] = useState(false);
 
+  const { data: searchUsers } = useSearchUsersQuery(searchQuery);
+  const { data: searchCommunities } = useSearchCommunitiesQuery(searchQuery);
+
   const communities = useMemo(
     () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
     [channels, leftChannelsIds]
@@ -58,22 +60,18 @@ export default function ChatsSideBar(props: Props) {
   return (
     <div className="flex flex-col">
       <ChatSidebarHeader history={props.history} />
-      <ChatSidebarSearch
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-        setUserList={setUserList}
-      />
+      <ChatSidebarSearch setSearch={setSearchQuery} />
       {showDivider && <div className="divider" />}
       <div className="flex flex-col" onScroll={handleScroll} ref={chatsSideBarRef}>
         {searchQuery ? (
-          userList.map((user) => (
+          [...searchUsers, ...searchCommunities].map((item) => (
             <ChatSidebarSearchItem
-              user={user}
+              item={item}
               onClick={() => {
                 setSearchQuery("");
                 setRevealPrivateKey(false);
               }}
-              key={user.account}
+              key={"account" in item ? item.account : item.id}
             />
           ))
         ) : (
diff --git a/src/common/features/chats/queries/search-communities-query.ts b/src/common/features/chats/queries/search-communities-query.ts
new file mode 100644
index 00000000000..d3d9a5da3ed
--- /dev/null
+++ b/src/common/features/chats/queries/search-communities-query.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCommunities } from "../../../api/bridge";
+
+export function useSearchCommunitiesQuery(query: string) {
+  return useQuery(
+    ["chats/search-communities", query],
+    async () => {
+      const response = await getCommunities("", 10, query);
+      return response ?? [];
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/search-users-query.ts b/src/common/features/chats/queries/search-users-query.ts
index 14ddcdc6e14..b29d7eee6fa 100644
--- a/src/common/features/chats/queries/search-users-query.ts
+++ b/src/common/features/chats/queries/search-users-query.ts
@@ -8,7 +8,7 @@ export function useSearchUsersQuery(query: string) {
       if (!query) {
         return [];
       }
-      const response = await getAccountReputations(query);
+      const response = await getAccountReputations(query, 10);
       response.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
       return response;
     },
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index af5071607b2..3d834f41073 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1844,7 +1844,7 @@
     "joined": "Joined",
     "followers": "Followers",
     "start-chat-placeholder": "Start a new message",
-    "search": "Search people",
+    "search": "Search people or communities",
     "join-chat": "Join chat",
     "back": "Back",
     "no-chat": "No conversation found",

From d711145e164579132da8e8fee44ed6d1f8b691ee Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 14 Dec 2023 23:45:18 +0600
Subject: [PATCH 169/179] Chats: added scroll following date hint

---
 src/common/components/profile-card/index.tsx  |   2 +-
 .../components/chat-channel-messages.tsx      | 141 ++++++++++--------
 .../chats/components/chat-floating-date.tsx   |  40 +++++
 .../chats/components/chat-message-item.tsx    |  32 +++-
 .../chats/components/chat-messages-view.tsx   |  13 +-
 .../chat-direct-contact-or-channel-item.tsx   |   8 +-
 .../chat-popup/chat-popup-header.tsx          |  28 ++--
 .../chats/components/chat-popup/index.scss    |  33 ----
 .../chats/components/chat-popup/index.tsx     |  20 ---
 .../chats-direct-messages/index.tsx           |  70 +++++----
 .../chats/components/chats-dropdown-menu.tsx  |   2 +-
 .../chats/components/chats-sidebar/index.tsx  |   9 --
 .../chats/utils/get-date-fns-locale.ts        |  32 ++++
 .../features/chats/utils/group-messages.ts    |  18 +++
 src/common/features/chats/utils/index.ts      |   2 +
 src/common/i18n/locales/en-US.json            |   2 +-
 16 files changed, 256 insertions(+), 196 deletions(-)
 create mode 100644 src/common/features/chats/components/chat-floating-date.tsx
 create mode 100644 src/common/features/chats/utils/get-date-fns-locale.ts
 create mode 100644 src/common/features/chats/utils/group-messages.ts

diff --git a/src/common/components/profile-card/index.tsx b/src/common/components/profile-card/index.tsx
index 63fe892646f..59ffddc1948 100644
--- a/src/common/components/profile-card/index.tsx
+++ b/src/common/components/profile-card/index.tsx
@@ -59,7 +59,7 @@ export const ProfileCard = (props: Props) => {
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({} as any), []);
 
-  const { data: community } = useCommunityCache(props.account.name);
+  const { data: community } = useCommunityCache(props.account?.name);
 
   const { activeUser, account, section, global } = props;
 
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index c107d640d9b..dc357e74799 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -8,12 +8,14 @@ import { Spinner } from "@ui/spinner";
 import {
   Channel,
   checkContiguousMessage,
-  formatMessageDateAndDay,
   PublicMessage,
   useHideMessageInChannel,
   useKeysQuery,
   useUpdateChannelBlockedUsers
 } from "@ecency/ns-query";
+import { groupMessages } from "../utils";
+import { ChatFloatingDate } from "./chat-floating-date";
+import { differenceInCalendarDays } from "date-fns";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -21,6 +23,7 @@ interface Props {
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
+  isPage?: boolean;
 }
 
 export function ChatsChannelMessages({
@@ -28,7 +31,8 @@ export function ChatsChannelMessages({
   isScrollToBottom,
   isScrolled,
   currentChannel,
-  scrollToBottom
+  scrollToBottom,
+  isPage
 }: Props) {
   const { activeUser } = useMappedStore();
 
@@ -55,6 +59,7 @@ export function ChatsChannelMessages({
         ),
     [publicMessages, currentChannel]
   );
+  const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
 
   useEffect(() => {
     if (!isScrollToBottom && messages.length !== 0 && !isScrolled) {
@@ -65,74 +70,78 @@ export function ChatsChannelMessages({
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
-        {messages.map((message, i) => (
-          <React.Fragment key={message.id}>
-            {formatMessageDateAndDay(message, i, messages) && (
-              <div className="custom-divider">
-                <span className="flex justify-center items-center mt-3 text-gray-600 dark:text-gray-400 my-4 text-sm">
-                  {formatMessageDateAndDay(message, i, messages)}
-                </span>
-              </div>
+        {groupedMessages.map(([date, group], i) => (
+          <React.Fragment key={date.getTime()}>
+            {(i > 0 ? differenceInCalendarDays(date, groupedMessages[i - 1][0]) : 1) ? (
+              <ChatFloatingDate currentDate={date} isPage={isPage} />
+            ) : (
+              <></>
             )}
-
-            <Dropdown
-              show={currentInteractingMessageId === message.id}
-              setShow={(v) =>
-                setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
-              }
-            >
-              <ChatMessageItem
-                currentChannel={currentChannel}
-                type={message.creator !== publicKey ? "receiver" : "sender"}
-                message={message}
-                isSameUser={checkContiguousMessage(message, i, messages)}
-                onContextMenu={() => {
-                  if (currentChannel.communityName === activeUser?.username) {
-                    setCurrentInteractingMessageId(message.id);
-                  }
-                }}
-                onAppear={() =>
-                  setTimeout(
-                    () =>
-                      publicMessages?.length - 1 === i
-                        ? document
-                            .querySelector(`[data-message-id="${message.id}"]`)
-                            ?.scrollIntoView()
-                        : {},
-                    100
-                  )
-                }
-              />
-              <DropdownMenu
-                className="top-[70%]"
-                align={message.creator === publicKey ? "right" : "left"}
-              >
-                <DropdownItemWithIcon
-                  icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
-                  label={_t("chat.hide-message")}
-                  onClick={() =>
-                    hideMessage({
-                      hide:
-                        currentChannel.hiddenMessageIds?.some((id) => id === message.id) === false,
-                      messageId: message.id
-                    })
-                  }
-                />
-                <DropdownItemWithIcon
-                  icon={
-                    isUsersBlockingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
-                  }
-                  label={_t("chat.block-author")}
-                  onClick={() =>
-                    updateBlockedUsers([...(currentChannel.removedUserIds ?? []), message.creator])
+            {group.map((message) => (
+              <>
+                <Dropdown
+                  show={currentInteractingMessageId === message.id}
+                  setShow={(v) =>
+                    setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
                   }
-                />
-              </DropdownMenu>
-            </Dropdown>
+                >
+                  <ChatMessageItem
+                    currentChannel={currentChannel}
+                    type={message.creator !== publicKey ? "receiver" : "sender"}
+                    message={message}
+                    isSameUser={checkContiguousMessage(message, i, messages)}
+                    onContextMenu={() => {
+                      if (currentChannel.communityName === activeUser?.username) {
+                        setCurrentInteractingMessageId(message.id);
+                      }
+                    }}
+                    onAppear={() =>
+                      setTimeout(
+                        () =>
+                          publicMessages?.length - 1 === i
+                            ? document
+                                .querySelector(`[data-message-id="${message.id}"]`)
+                                ?.scrollIntoView()
+                            : {},
+                        100
+                      )
+                    }
+                  />
+                  <DropdownMenu
+                    className="top-[70%]"
+                    align={message.creator === publicKey ? "right" : "left"}
+                  >
+                    <DropdownItemWithIcon
+                      icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
+                      label={_t("chat.hide-message")}
+                      onClick={() =>
+                        hideMessage({
+                          hide:
+                            currentChannel.hiddenMessageIds?.some((id) => id === message.id) ===
+                            false,
+                          messageId: message.id
+                        })
+                      }
+                    />
+                    <DropdownItemWithIcon
+                      icon={
+                        isUsersBlockingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
+                      }
+                      label={_t("chat.block-author")}
+                      onClick={() =>
+                        updateBlockedUsers([
+                          ...(currentChannel.removedUserIds ?? []),
+                          message.creator
+                        ])
+                      }
+                    />
+                  </DropdownMenu>
+                </Dropdown>
+              </>
+            ))}
           </React.Fragment>
         ))}
-        {/*TODO: CHeck it in messages query*/}
-        {false && (
+        {currentChannel.removedUserIds?.includes(activeUser?.username!!) && (
           <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
           </span>
diff --git a/src/common/features/chats/components/chat-floating-date.tsx b/src/common/features/chats/components/chat-floating-date.tsx
new file mode 100644
index 00000000000..0188340c6db
--- /dev/null
+++ b/src/common/features/chats/components/chat-floating-date.tsx
@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { format } from "date-fns";
+import { getDateFnsLocale } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { classNameObject } from "../../../helper/class-name-object";
+
+export function ChatFloatingDate({
+  currentDate,
+  isPage = false
+}: {
+  currentDate?: Date;
+  isPage?: boolean;
+}) {
+  const { global } = useMappedStore();
+  const currentFormattedDate = useMemo(
+    () =>
+      currentDate
+        ? format(currentDate, "dd MMMM", {
+            locale: getDateFnsLocale(global.lang)
+          })
+        : undefined,
+    [global.lang, currentDate]
+  );
+
+  return currentFormattedDate ? (
+    <div
+      className={classNameObject({
+        "sticky z-10 flex justify-center text-xs text-center": true,
+        "top-0": !isPage,
+        "top-[57px]": isPage
+      })}
+    >
+      <div className="bg-gray-200 my-3 dark:bg-gray-800 rounded-full p-1 ">
+        {currentFormattedDate}
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index 782bf6d7b7f..fa31e9ebf0f 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -1,6 +1,6 @@
 import { isMessageGif } from "../utils";
 import { Spinner } from "@ui/spinner";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
 import { renderPostBody } from "@ecency/render-helper";
 import { useMappedStore } from "../../../store/use-mapped-store";
@@ -12,22 +12,26 @@ import { failedMessageSvg } from "../../../img/svg";
 import useDebounce from "react-use/lib/useDebounce";
 import {
   Channel,
-  formatMessageTime,
   isMessageImage,
   isSingleEmoji,
   Message,
   useKeysQuery,
   useResendMessage
 } from "@ecency/ns-query";
+import { format } from "date-fns";
+import { useInViewport } from "react-in-viewport";
 
 interface Props {
   type: "sender" | "receiver";
   message: Message;
   isSameUser: boolean;
+  showDate?: boolean;
   currentUser?: string;
   currentChannel?: Channel;
   onContextMenu?: () => void;
   onAppear?: () => void;
+  onInViewport?: (inViewport: boolean) => void;
+  className?: string;
 }
 
 export function ChatMessageItem({
@@ -37,8 +41,12 @@ export function ChatMessageItem({
   currentUser,
   currentChannel,
   onContextMenu,
-  onAppear
+  onInViewport,
+  onAppear,
+  showDate = true,
+  className = ""
 }: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
   const { global } = useMappedStore();
   const { publicKey } = useKeysQuery();
 
@@ -58,6 +66,7 @@ export function ChatMessageItem({
   );
 
   const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentUser);
+  const { inViewport } = useInViewport(ref);
 
   useMount(() => onAppear?.());
 
@@ -72,15 +81,22 @@ export function ChatMessageItem({
     [holdStarted]
   );
 
+  useEffect(() => {
+    onInViewport?.(inViewport);
+  }, [inViewport]);
+
   return (
-    <div key={message.id} data-message-id={message.id}>
+    <div key={message.id} data-message-id={message.id} ref={ref}>
       <div
         className={classNameObject({
-          "flex gap-1 mb-4 px-4": true,
+          "flex gap-1 px-4": true,
           "justify-start": type === "receiver",
           "justify-end": type === "sender",
           failed: isFailed,
-          sending: isSending
+          sending: isSending,
+          "mb-4": showDate,
+          "mb-1": !showDate,
+          [className]: !!className
         })}
         onMouseDown={() => setHoldStarted(true)}
         onMouseUp={() => setHoldStarted(false)}
@@ -124,9 +140,9 @@ export function ChatMessageItem({
               dangerouslySetInnerHTML={{ __html: renderedPreview }}
             />
           </div>
-          {message.sent == 1 && (
+          {message.sent == 1 && showDate && (
             <div className="text-gray-600 dark:text-gray-400 text-xs px-2">
-              {formatMessageTime(message.created)}
+              {format(new Date(message.created * 1000), "HH:mm")}
             </div>
           )}
           {message.sent === 0 && <Spinner className="w-3 h-3 mx-2" />}
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index f25e552f166..33f35b77707 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import ChatsProfileBox from "./chat-profile-box";
 import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
-import ChatsScroller from "./chats-scroller";
 import { classNameObject } from "../../../helper/class-name-object";
 import isCommunity from "../../../helper/is-community";
 import { ChatsChannelMessages } from "./chat-channel-messages";
@@ -128,6 +127,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
               isScrollToBottom={isScrollToBottom}
               isScrolled={isScrolled}
               scrollToBottom={scrollToBottom}
+              isPage={true}
             />
           </>
         ) : (
@@ -137,19 +137,12 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
             isScrolled={isScrolled}
             isScrollToBottom={isScrollToBottom}
             scrollToBottom={scrollToBottom}
-          />
-        )}
-        {isScrollToBottom && (
-          <ChatsScroller
-            bodyRef={messagesBoxRef}
-            isScrollToTop={false}
-            isScrollToBottom={true}
-            marginRight={"5%"}
+            isPage={true}
           />
         )}
       </div>
 
-      <div className="sticky bottom-0 border-t border-[--border-color] bg-white pl-3">
+      <div className="sticky z-10 bottom-0 border-t border-[--border-color] bg-white pl-3">
         <ChatInput currentUser={directUser} currentChannel={currentChannel} />
       </div>
     </>
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index af45435ac34..83b8eee1518 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
 import React, { useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { useMessagesQuery } from "@ecency/ns-query";
+import { isCommunity, useMessagesQuery } from "@ecency/ns-query";
+import { useCommunityCache } from "../../../../core";
 
 interface Props {
   username: string;
@@ -14,6 +15,7 @@ export function ChatDirectContactOrChannelItem({ username, userClicked }: Props)
     () => (messages.length > 0 ? messages[messages.length - 1].content : undefined),
     [messages]
   );
+  const { data: community } = useCommunityCache(username);
 
   return (
     <div
@@ -25,7 +27,9 @@ export function ChatDirectContactOrChannelItem({ username, userClicked }: Props)
       </Link>
 
       <div>
-        <p className="font-semibold">{username}</p>
+        <p className="font-semibold">
+          {isCommunity(username) && community ? community.title : username}
+        </p>
         <p className="text-gray-600 text-sm">{lastMessage}</p>
       </div>
     </div>
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
index b7364560957..d44d143969d 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -9,6 +9,7 @@ import { classNameObject } from "../../../../helper/class-name-object";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { ChatContext, useKeysQuery } from "@ecency/ns-query";
+import { useCommunityCache } from "../../../../core";
 
 interface Props {
   currentUser: string;
@@ -37,6 +38,7 @@ export function ChatPopupHeader({
 }: Props) {
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
+  const { data: community } = useCommunityCache(communityName);
   const { privateKey } = useKeysQuery();
   const title = useMemo(() => {
     if (revealPrivateKey) {
@@ -47,8 +49,8 @@ export function ChatPopupHeader({
       return currentUser;
     }
 
-    if (isCommunity) {
-      return communityName;
+    if (isCommunity && community) {
+      return community.title;
     }
 
     if (showSearchUser) {
@@ -57,18 +59,21 @@ export function ChatPopupHeader({
 
     return _t("chat.page-title");
   }, [currentUser, isCommunity, communityName, showSearchUser, revealPrivateKey]);
+  const isExpanded = useMemo(
+    () => (currentUser || communityName || showSearchUser || revealPrivateKey) && expanded,
+    [currentUser, communityName, showSearchUser, revealPrivateKey, expanded]
+  );
 
   return (
     <div
-      className="flex items-center justify-between border-b border-[--border-color] px-4 py-2 gap-2 cursor-pointer"
+      className="flex items-center justify-between border-b border-[--border-color] px-2 py-2 gap-2 cursor-pointer"
       onClick={() => setExpanded(!expanded)}
     >
-      <div className="flex items-center gap-2">
-        {(currentUser || communityName || showSearchUser || revealPrivateKey) && expanded && (
+      <div className="flex items-center">
+        {isExpanded && (
           <Tooltip content={_t("chat.back")}>
             <Button
               size="sm"
-              noPadding={true}
               appearance="link"
               onClick={(e: { stopPropagation: () => void }) => {
                 e.stopPropagation();
@@ -78,16 +83,21 @@ export function ChatPopupHeader({
             />
           </Tooltip>
         )}
-        <div className="flex items-center gap-2" onClick={() => setExpanded(!expanded)}>
+        <div className="flex items-center" onClick={() => setExpanded(!expanded)}>
           {(currentUser || isCommunity) && (
             <UserAvatar username={isCurrentUser ? currentUser : communityName || ""} size="small" />
           )}
 
-          <div className="text-lg truncate max-w-[180px] font-semibold">{title}</div>
+          <div
+            className={classNameObject({
+              "truncate max-w-[180px] font-semibold pl-4": true
+            })}
+          >
+            {title}
+          </div>
 
           <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
             <Button
-              noPadding={true}
               size="sm"
               appearance="gray-link"
               className={classNameObject({
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
index e2b85b113cd..ad58d33c3da 100644
--- a/src/common/features/chats/components/chat-popup/index.scss
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -111,39 +111,6 @@
       }
     }
 
-    .scroller {
-      position: sticky;
-      margin-left: 89%;
-      width: 33px;
-      height: 33px;
-      border-radius: 50%;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      @apply border-b;
-      @include themify(day) {
-        background: #e4e6eb;
-        @apply border-light-400;
-      }
-      @include themify(night) {
-        background: #0f223a;
-      }
-
-      svg {
-        @include themify(day) {
-          @apply text-blue-dark-sky;
-        }
-        @include themify(night) {
-          @apply text-white;
-        }
-
-        width: 20px;
-        height: 20px;
-      }
-    }
-
     .chats {
       .not-joined {
         display: flex;
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 7aa5fc24ebd..8ba80eb1f40 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -1,11 +1,8 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router";
-import Tooltip from "../../../../components/tooltip";
 import LinearProgress from "../../../../components/linear-progress";
 import ManageChatKey from "../manage-chat-key";
 import ChatInput from "../chat-input";
-import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
-import { _t } from "../../../../i18n";
 import { usePrevious } from "../../../../util/use-previous";
 import "./index.scss";
 import { useMappedStore } from "../../../../store/use-mapped-store";
@@ -236,23 +233,6 @@ export const ChatPopUp = () => {
             ) : (
               <ChatsWelcome />
             )}
-
-            {((isScrollToTop && !isCurrentUser) ||
-              ((isCurrentUser || isCommunity) && isScrollToBottom)) && (
-              <Tooltip
-                content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}
-              >
-                <div
-                  className="scroller"
-                  style={{
-                    bottom: (isCurrentUser || isCommunity) && isScrollToBottom ? "0" : "55px"
-                  }}
-                  onClick={scrollerClicked}
-                >
-                  {isCurrentUser || isCommunity ? chevronDownSvgForSlider : chevronUpSvg}
-                </div>
-              </Tooltip>
-            )}
           </div>
           <div className="pl-2">
             {((isCurrentUser && receiverPubKey) || isCommunity) && (
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 9031c47b18d..afe95f55cee 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { _t } from "../../../../i18n";
 import "./index.scss";
 import { ChatMessageItem } from "../chat-message-item";
@@ -6,13 +6,10 @@ import { Button } from "@ui/button";
 import { useInviteViaPostComment } from "../../mutations";
 import { FormControl } from "@ui/input";
 import { Alert } from "@ui/alert";
-import {
-  ChatContext,
-  checkContiguousMessage,
-  DirectMessage,
-  formatMessageDateAndDay,
-  useKeysQuery
-} from "@ecency/ns-query";
+import { ChatContext, checkContiguousMessage, DirectMessage, useKeysQuery } from "@ecency/ns-query";
+import { ChatFloatingDate } from "../chat-floating-date";
+import { differenceInCalendarDays } from "date-fns";
+import { groupMessages } from "../../utils";
 
 interface Props {
   directMessages: DirectMessage[];
@@ -20,6 +17,7 @@ interface Props {
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
+  isPage?: boolean;
 }
 
 export default function ChatsDirectMessages(props: Props) {
@@ -31,7 +29,6 @@ export default function ChatsDirectMessages(props: Props) {
   const [invitationText, setInvitationText] = useState(
     "Hi! Let's start messaging privately. Register an account on [https://ecency.com/chats](https://ecency.com/chats)"
   );
-
   const { publicKey } = useKeysQuery();
 
   const {
@@ -40,6 +37,8 @@ export default function ChatsDirectMessages(props: Props) {
     isSuccess: isInvited
   } = useInviteViaPostComment(props.currentUser);
 
+  const groupedDirectMessages = useMemo(() => groupMessages(directMessages), [directMessages]);
+
   useEffect(() => {
     if (!isScrollToBottom && directMessages && directMessages.length !== 0 && !isScrolled) {
       scrollToBottom?.();
@@ -51,34 +50,33 @@ export default function ChatsDirectMessages(props: Props) {
       <div className="direct-messages">
         {receiverPubKey ? (
           <>
-            {directMessages?.map((msg, i) => {
-              const dayAndMonth = formatMessageDateAndDay(msg, i, directMessages);
+            {groupedDirectMessages?.map(([date, messages], i) => {
+              const diff =
+                i > 0 ? differenceInCalendarDays(date, groupedDirectMessages[i - 1][0]) : 1;
               return (
-                <React.Fragment key={msg.id}>
-                  {dayAndMonth && (
-                    <div className="custom-divider">
-                      <span className="flex justify-center items-center mt-3 custom-divider-text">
-                        {dayAndMonth}
-                      </span>
-                    </div>
-                  )}
-                  <ChatMessageItem
-                    currentUser={props.currentUser}
-                    type={msg.creator !== publicKey ? "receiver" : "sender"}
-                    message={msg}
-                    isSameUser={checkContiguousMessage(msg, i, directMessages)}
-                    onAppear={() =>
-                      setTimeout(
-                        () =>
-                          directMessages?.length - 1 === i
-                            ? document
-                                .querySelector(`[data-message-id="${msg.id}"]`)
-                                ?.scrollIntoView()
-                            : {},
-                        100
-                      )
-                    }
-                  />
+                <React.Fragment key={date.getTime()}>
+                  {diff > 0 && <ChatFloatingDate currentDate={date} isPage={props.isPage} />}
+                  {messages.map((message, i) => (
+                    <ChatMessageItem
+                      showDate={i === messages.length - 1}
+                      key={message.id}
+                      currentUser={props.currentUser}
+                      type={message.creator !== publicKey ? "receiver" : "sender"}
+                      message={message}
+                      isSameUser={checkContiguousMessage(message, i, directMessages)}
+                      onAppear={() =>
+                        setTimeout(
+                          () =>
+                            directMessages?.length - 1 === i
+                              ? document
+                                  .querySelector(`[data-message-id="${message.id}"]`)
+                                  ?.scrollIntoView()
+                              : {},
+                          100
+                        )
+                      }
+                    />
+                  ))}
                 </React.Fragment>
               );
             })}
diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
index 089b64283bb..335172a480f 100644
--- a/src/common/features/chats/components/chats-dropdown-menu.tsx
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -32,7 +32,7 @@ const ChatsDropdownMenu = (props: Props) => {
   return (
     <Dropdown>
       <DropdownToggle>
-        <Button size="sm" appearance="gray-link" noPadding={true}>
+        <Button size="sm" appearance="gray-link">
           {kebabMenuSvg}
         </Button>
         <DropdownMenu align="right">
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index a8550bea64f..6e0aaebc158 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useMemo, useState } from "react";
 import { History } from "history";
-import ChatsScroller from "../chats-scroller";
 import { ChatSidebarHeader } from "./chat-sidebar-header";
 import { ChatSidebarSearch } from "./chat-sidebar-search";
 import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
@@ -99,14 +98,6 @@ export default function ChatsSideBar(props: Props) {
           </>
         )}
       </div>
-      {isScrollToTop && (
-        <ChatsScroller
-          bodyRef={chatsSideBarRef}
-          isScrollToTop={isScrollToTop}
-          isScrollToBottom={false}
-          marginRight={"5%"}
-        />
-      )}
     </div>
   );
 }
diff --git a/src/common/features/chats/utils/get-date-fns-locale.ts b/src/common/features/chats/utils/get-date-fns-locale.ts
new file mode 100644
index 00000000000..6752403b418
--- /dev/null
+++ b/src/common/features/chats/utils/get-date-fns-locale.ts
@@ -0,0 +1,32 @@
+import { bg, enUS, es, fi, hi, id, it, pt, ru, sr, uk, uz, zhCN } from "date-fns/locale";
+
+export function getDateFnsLocale(lang: string) {
+  switch (lang) {
+    case "es":
+      return es;
+    case "hi":
+      return hi;
+    case "it":
+      return it;
+    case "id":
+      return id;
+    case "pt":
+      return pt;
+    case "sr":
+      return sr;
+    case "fi":
+      return fi;
+    case "uk":
+      return uk;
+    case "bg":
+      return bg;
+    case "ru":
+      return ru;
+    case "uz":
+      return uz;
+    case "zh":
+      return zhCN;
+    default:
+      return enUS;
+  }
+}
diff --git a/src/common/features/chats/utils/group-messages.ts b/src/common/features/chats/utils/group-messages.ts
new file mode 100644
index 00000000000..9a181bb2638
--- /dev/null
+++ b/src/common/features/chats/utils/group-messages.ts
@@ -0,0 +1,18 @@
+import { Message } from "@ecency/ns-query";
+
+export function groupMessages(messages: Message[]) {
+  return messages.reduce<[Date, Message[]][]>((acc, item, currentIndex) => {
+    if (currentIndex === 0) {
+      return [...acc, [new Date(item.created * 1000), [item]]];
+    }
+
+    // If difference less than 5 minutes then we group them together
+    const differenceInDates = item.created - messages[currentIndex - 1].created;
+    if (differenceInDates * 1000 < 120000) {
+      acc[acc.length - 1][1].push(item);
+      return acc;
+    }
+
+    return [...acc, [new Date(item.created * 1000), [item]]];
+  }, []);
+}
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
index 545ed7ab9dc..799ebfe5fdf 100644
--- a/src/common/features/chats/utils/index.ts
+++ b/src/common/features/chats/utils/index.ts
@@ -1 +1,3 @@
 export * from "./is-message-gif";
+export * from "./get-date-fns-locale";
+export * from "./group-messages";
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 3d834f41073..fd5cfaac383 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1874,7 +1874,7 @@
     "manage-chat-key": "Credentials info",
     "block": "Block",
     "communities": "Communities",
-    "dms": "DMs",
+    "dms": "Direct messages",
     "import-chat": "Import Chat",
     "create-new-account": "Create New Account",
     "loading": "Loading...",

From f426cb37fd8915deaec5c335a98699fca7b15546 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 14 Dec 2023 23:56:13 +0600
Subject: [PATCH 170/179] Chats: fixed widget gif picker

---
 .../features/chats/components/chat-input.tsx    |  2 +-
 .../chats/components/chat-popup/index.scss      | 17 +++++++++++++----
 .../chats/components/chat-profile-box.tsx       |  4 +++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index 7962b8d692c..bd3085b8d73 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -112,7 +112,7 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
             setTimeout(() => inputRef.current?.focus(), 1);
           });
         }}
-        className="w-full flex items-center gap-2 p-2"
+        className="w-full flex items-center gap-2 p-1.5"
       >
         <Dropdown>
           <DropdownToggle>
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
index ad58d33c3da..3937bf2478d 100644
--- a/src/common/features/chats/components/chat-popup/index.scss
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -33,11 +33,10 @@
 
     &.current-user {
       padding-bottom: 10px;
-      margin-bottom: 8px;
       @apply border-b;
 
       @include media-breakpoint-up(md) {
-        height: 412px;
+        height: 422px;
       }
 
       @include themify(day) {
@@ -49,8 +48,7 @@
     }
 
     &.community {
-      height: 412px;
-      margin-bottom: 8px;
+      height: 422px;
       @apply border-b;
 
       @include themify(day) {
@@ -188,4 +186,15 @@
       grid-row: span 5;
     }
   }
+
+  .chat-input {
+    @apply relative;
+
+    .gif-picker {
+      bottom: calc(100% - 1rem);
+      width: calc(100% - -3px);
+      left: 0.25rem;
+      @apply absolute border-t border-[--border-color];
+    }
+  }
 }
diff --git a/src/common/features/chats/components/chat-profile-box.tsx b/src/common/features/chats/components/chat-profile-box.tsx
index 4b3d3e2776e..aaac49c6e06 100644
--- a/src/common/features/chats/components/chat-profile-box.tsx
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -64,7 +64,9 @@ export default function ChatsProfileBox({ communityName, currentUser }: Props) {
       <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-900">
         <UserAvatar username={profileData.username} size="large" />
         <div className="text-gray-800 dark:text-white mt-2 font-semibold">{profileData.name}</div>
-        {profileData.about?.length !== 0 && <div>{profileData.about}</div>}
+        {profileData.about?.length !== 0 && (
+          <div className="text-center text-xs">{profileData.about}</div>
+        )}
 
         <div className="grid grid-cols-2 text-center justify-center pt-4 gap-3 text-gray-600">
           <div className="flex flex-col gap-2">

From 6941f2587a222d065889acd8f91b68c13b858b91 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 17 Dec 2023 21:25:24 +0600
Subject: [PATCH 171/179] Chats: added new coming messages and create contacts
 automatically

---
 .../chats/components/chat-channel-messages.tsx       | 12 ++++++------
 .../features/chats/components/chat-message-box.tsx   |  2 +-
 .../features/chats/components/chat-messages-view.tsx |  4 ++--
 .../chats-sidebar/chat-sidebar-search-item.tsx       |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index dc357e74799..d884b88169f 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -52,10 +52,10 @@ export function ChatsChannelMessages({
     () =>
       publicMessages
         .filter((m) =>
-          currentChannel.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
+          currentChannel?.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
         )
         .filter((m) =>
-          currentChannel.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
+          currentChannel?.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
         ),
     [publicMessages, currentChannel]
   );
@@ -91,7 +91,7 @@ export function ChatsChannelMessages({
                     message={message}
                     isSameUser={checkContiguousMessage(message, i, messages)}
                     onContextMenu={() => {
-                      if (currentChannel.communityName === activeUser?.username) {
+                      if (currentChannel?.communityName === activeUser?.username) {
                         setCurrentInteractingMessageId(message.id);
                       }
                     }}
@@ -117,7 +117,7 @@ export function ChatsChannelMessages({
                       onClick={() =>
                         hideMessage({
                           hide:
-                            currentChannel.hiddenMessageIds?.some((id) => id === message.id) ===
+                            currentChannel?.hiddenMessageIds?.some((id) => id === message.id) ===
                             false,
                           messageId: message.id
                         })
@@ -130,7 +130,7 @@ export function ChatsChannelMessages({
                       label={_t("chat.block-author")}
                       onClick={() =>
                         updateBlockedUsers([
-                          ...(currentChannel.removedUserIds ?? []),
+                          ...(currentChannel?.removedUserIds ?? []),
                           message.creator
                         ])
                       }
@@ -141,7 +141,7 @@ export function ChatsChannelMessages({
             ))}
           </React.Fragment>
         ))}
-        {currentChannel.removedUserIds?.includes(activeUser?.username!!) && (
+        {currentChannel?.removedUserIds?.includes(activeUser?.username!!) && (
           <span className="flex justify-center items-center mt-3">
             You have been blocked from this community
           </span>
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index bf00a777bb9..92951efb7b6 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -91,7 +91,7 @@ export default function ChatsMessagesBox(props: Props) {
                 ? _t("chat.welcome.rejoin-description")
                 : _t("chat.welcome.join-description")}
             </p>
-            <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
+            <Button onClick={() => addCommunityChannel([])} disabled={isAddCommunityChannelLoading}>
               {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
             </Button>
           </div>
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 33f35b77707..e50dc4e0270 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -106,7 +106,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
     <>
       <div
         className={classNameObject({
-          "h-full": true,
+          "h-[100vh] md:h-full": true,
           "no-scroll": isTop && hasMore
         })}
         ref={messagesBoxRef}
@@ -119,7 +119,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
         >
           <ChatsProfileBox communityName={username} currentUser={username} />
         </Link>
-        {communityName.length !== 0 ? (
+        {currentChannel ? (
           <>
             <ChatsChannelMessages
               publicMessages={messages as PublicMessage[]}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
index e8777fc2aab..25eba44e392 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -20,7 +20,7 @@ export function ChatSidebarSearchItem({ item, onClick }: Props) {
   }, [item]);
 
   return createElement(
-    !!onClick ? "div" : Link,
+    Link,
     {
       to: `/chats/${username}`,
       className:

From 1953902c43e1dd3eb0204935f7179b0da6048367 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 17 Dec 2023 21:25:24 +0600
Subject: [PATCH 172/179] Chats: added new coming messages and create contacts
 automatically

---
 src/common/core/caches/communities-cache.ts   |  7 ++-
 .../features/chats/components/chat-input.tsx  | 16 ++++--
 .../chats/components/chat-message-box.tsx     | 21 +++++--
 .../chat-message-channel-item-extension.tsx   |  3 -
 .../chats/components/chat-message-item.tsx    |  7 ++-
 .../chats/components/chat-messages-view.tsx   | 57 +++++++------------
 .../chat-direct-contact-or-channel-item.tsx   | 14 ++---
 .../chat-popup-contacts-and-channels.tsx      |  2 +
 .../chat-popup/chat-popup-messages-list.tsx   | 33 ++++++-----
 .../chats/components/chat-popup/index.tsx     | 37 ++++--------
 .../chats-direct-messages/index.tsx           | 14 +++--
 .../chats-sidebar/chat-sidebar-channel.tsx    |  8 +--
 .../chat-sidebar-direct-contact.tsx           | 14 ++---
 .../chats/components/chats-sidebar/index.tsx  |  7 ++-
 .../components/join-community-chat-btn.tsx    | 57 ++++++++++++-------
 src/common/features/chats/screens/chats.tsx   | 31 ++++++----
 src/common/i18n/locales/en-US.json            |  1 +
 17 files changed, 176 insertions(+), 153 deletions(-)

diff --git a/src/common/core/caches/communities-cache.ts b/src/common/core/caches/communities-cache.ts
index 41fcdc749f0..1c617204c34 100644
--- a/src/common/core/caches/communities-cache.ts
+++ b/src/common/core/caches/communities-cache.ts
@@ -5,12 +5,13 @@ import { Community } from "../../store/communities";
 import isCommunity from "../../helper/is-community";
 import { useEffect } from "react";
 
-export function useCommunityCache(category: string, invalidate?: boolean) {
+export function useCommunityCache(category?: string, invalidate?: boolean) {
   const client = useQueryClient();
 
   const query = useQuery<Community | null>([QueryIdentifiers.COMMUNITY, category], {
-    queryFn: () => (isCommunity(category) ? bridgeApi.getCommunity(category) : null),
-    initialData: null
+    queryFn: () => (isCommunity(category) ? bridgeApi.getCommunity(category!!) : null),
+    initialData: null,
+    enabled: !!category
   });
 
   useEffect(() => {
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
index bd3085b8d73..01bb7a16e18 100644
--- a/src/common/features/chats/components/chat-input.tsx
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -17,14 +17,20 @@ import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@u
 import GifPicker from "../../../components/gif-picker";
 import useClickAway from "react-use/lib/useClickAway";
 import { Spinner } from "@ui/spinner";
-import { Channel, ChatContext, useChannelsQuery, useSendMessage } from "@ecency/ns-query";
+import {
+  Channel,
+  ChatContext,
+  DirectContact,
+  useChannelsQuery,
+  useSendMessage
+} from "@ecency/ns-query";
 
 interface Props {
   currentChannel?: Channel;
-  currentUser?: string;
+  currentContact?: DirectContact;
 }
 
-export default function ChatInput({ currentChannel, currentUser }: Props) {
+export default function ChatInput({ currentChannel, currentContact }: Props) {
   useChannelsQuery();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -40,13 +46,13 @@ export default function ChatInput({ currentChannel, currentUser }: Props) {
   const { mutateAsync: upload } = useChatFileUpload(setMessage);
   const { mutateAsync: sendMessage, isLoading: isSendMessageLoading } = useSendMessage(
     currentChannel,
-    currentUser,
+    currentContact,
     () => {
       setMessage("");
     }
   );
 
-  const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
+  const isCurrentUser = useMemo(() => !!currentContact, [currentContact]);
   const isCommunity = useMemo(() => !!currentChannel, [currentChannel]);
 
   const isDisabled = useMemo(
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 92951efb7b6..bd398400760 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -10,11 +10,13 @@ import ChatsProfileBox from "./chat-profile-box";
 import { _t } from "../../../i18n";
 import {
   Channel,
+  DirectContact,
   getJoinedCommunities,
   useAddCommunityChannel,
   useAutoScrollInChatBox,
   useChannelsQuery,
   useCommunityChannelQuery,
+  useDirectContactsQuery,
   useLeftCommunityChannelsQuery
 } from "@ecency/ns-query";
 import { useGetAccountFullQuery } from "../../../api/queries";
@@ -30,15 +32,15 @@ interface MatchParams {
 interface Props {
   match: match<MatchParams>;
   history: History;
-  channel: Channel;
+  channel?: Channel;
+  currentContact?: DirectContact;
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  useAutoScrollInChatBox(props.match.params.username);
-
   const { data: communityAccount } = useGetAccountFullQuery(props.match.params.username);
   const { data: community } = useCommunityCache(props.match.params.username);
 
+  const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(
@@ -63,6 +65,15 @@ export default function ChatsMessagesBox(props: Props) {
       ),
     [channels, props.channel, leftChannelsIds]
   );
+  const currentContact = useMemo(
+    () => directContacts?.find((dc) => dc.name === props.match.params.username),
+    [directContacts, props.match.params]
+  );
+
+  useAutoScrollInChatBox(
+    communityChannel?.name ?? currentContact?.name ?? "",
+    communityChannel?.id ?? currentContact?.pubkey ?? ""
+  );
 
   return (
     <div
@@ -76,8 +87,8 @@ export default function ChatsMessagesBox(props: Props) {
           <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
           {inProgress && <LinearProgress />}
           <ChatsMessagesView
-            username={props.match.params.username}
-            currentChannel={props.channel}
+            currentContact={props.currentContact!!}
+            currentChannel={props.channel!!}
             setInProgress={setInProgress}
           />
         </>
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
index fd5a23126ff..573589441df 100644
--- a/src/common/features/chats/components/chat-message-channel-item-extension.tsx
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -3,7 +3,6 @@ import React, { PropsWithChildren, RefObject, useMemo, useRef } from "react";
 import FollowControls from "../../../components/follow-controls";
 import { Button } from "@ui/button";
 import { _t } from "../../../i18n";
-import ChatInput from "./chat-input";
 import UserAvatar from "../../../components/user-avatar";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
@@ -105,8 +104,6 @@ export function ChatMessageChannelItemExtension({
                     </>
                   )}
               </div>
-
-              <ChatInput currentChannel={currentChannel} currentUser="" />
             </div>
           </div>
         </PopoverContent>
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
index fa31e9ebf0f..40227d948bd 100644
--- a/src/common/features/chats/components/chat-message-item.tsx
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -12,6 +12,7 @@ import { failedMessageSvg } from "../../../img/svg";
 import useDebounce from "react-use/lib/useDebounce";
 import {
   Channel,
+  DirectContact,
   isMessageImage,
   isSingleEmoji,
   Message,
@@ -26,7 +27,7 @@ interface Props {
   message: Message;
   isSameUser: boolean;
   showDate?: boolean;
-  currentUser?: string;
+  currentContact?: DirectContact;
   currentChannel?: Channel;
   onContextMenu?: () => void;
   onAppear?: () => void;
@@ -38,7 +39,7 @@ export function ChatMessageItem({
   type,
   message,
   isSameUser,
-  currentUser,
+  currentContact,
   currentChannel,
   onContextMenu,
   onInViewport,
@@ -65,7 +66,7 @@ export function ChatMessageItem({
     [message]
   );
 
-  const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentUser);
+  const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentContact);
   const { inViewport } = useInViewport(ref);
 
   useMount(() => onAppear?.());
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index e50dc4e0270..51977055d62 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -4,10 +4,10 @@ import ChatsProfileBox from "./chat-profile-box";
 import ChatsDirectMessages from "./chats-direct-messages";
 import ChatInput from "./chat-input";
 import { classNameObject } from "../../../helper/class-name-object";
-import isCommunity from "../../../helper/is-community";
 import { ChatsChannelMessages } from "./chat-channel-messages";
 import {
   Channel,
+  DirectContact,
   DirectMessage,
   PublicMessage,
   useFetchPreviousMessages,
@@ -15,18 +15,23 @@ import {
 } from "@ecency/ns-query";
 
 interface Props {
-  username: string;
+  currentContact: DirectContact;
   currentChannel: Channel;
   setInProgress: (d: boolean) => void;
 }
 
-export default function ChatsMessagesView({ username, currentChannel, setInProgress }: Props) {
-  const { data: messages } = useMessagesQuery(username.replace("@", ""));
+export default function ChatsMessagesView({
+  currentContact,
+  currentChannel,
+  setInProgress
+}: Props) {
+  const { data: messages } = useMessagesQuery(
+    currentChannel?.name ?? currentContact?.name,
+    currentChannel?.id ?? currentContact?.pubkey
+  );
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
-  const [directUser, setDirectUser] = useState("");
-  const [communityName, setCommunityName] = useState("");
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
@@ -35,10 +40,6 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
   const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingPreviousMessages } =
     useFetchPreviousMessages(currentChannel, () => {});
 
-  useEffect(() => {
-    isDirectUserOrCommunity();
-  }, []);
-
   useEffect(() => {
     setInProgress(isFetchingPreviousMessages);
   }, [isFetchingPreviousMessages]);
@@ -51,10 +52,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
 
   useEffect(() => {
     setIsScrollToBottom(false);
-    setDirectUser("");
-    setCommunityName("");
-    isDirectUserOrCommunity();
-  }, [username]);
+  }, [currentContact]);
 
   useEffect(() => {
     if (isTop) {
@@ -75,14 +73,6 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
       .finally(() => setIsTop(false));
   };
 
-  const isDirectUserOrCommunity = () => {
-    if (isCommunity(username)) {
-      setCommunityName(username.replace("@", ""));
-    } else {
-      setDirectUser(username.replace("@", ""));
-    }
-  };
-
   const scrollToBottom = () => {
     messagesBoxRef &&
       messagesBoxRef?.current?.scroll({
@@ -91,17 +81,6 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
       });
   };
 
-  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    const element = event.currentTarget;
-    const isScrollToBottom =
-      element.scrollTop + messagesBoxRef?.current?.clientHeight! < element.scrollHeight - 200;
-    setIsScrollToBottom(isScrollToBottom);
-    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
-    setIsScrolled(isScrolled);
-    const scrollerTop = element.scrollTop <= 600 && messages.length > 25;
-    setIsTop(!!communityName && scrollerTop);
-  };
-
   return (
     <>
       <div
@@ -110,14 +89,16 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
           "no-scroll": isTop && hasMore
         })}
         ref={messagesBoxRef}
-        onScroll={handleScroll}
       >
         <Link
           className="after:!hidden"
-          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+          to={!!currentChannel ? `/created/${currentChannel?.name}` : `/@${currentContact?.name}`}
           target="_blank"
         >
-          <ChatsProfileBox communityName={username} currentUser={username} />
+          <ChatsProfileBox
+            communityName={currentChannel?.name}
+            currentUser={currentContact?.name}
+          />
         </Link>
         {currentChannel ? (
           <>
@@ -133,7 +114,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
         ) : (
           <ChatsDirectMessages
             directMessages={messages as DirectMessage[]}
-            currentUser={directUser!}
+            currentContact={currentContact}
             isScrolled={isScrolled}
             isScrollToBottom={isScrollToBottom}
             scrollToBottom={scrollToBottom}
@@ -143,7 +124,7 @@ export default function ChatsMessagesView({ username, currentChannel, setInProgr
       </div>
 
       <div className="sticky z-10 bottom-0 border-t border-[--border-color] bg-white pl-3">
-        <ChatInput currentUser={directUser} currentChannel={currentChannel} />
+        <ChatInput currentContact={currentContact} currentChannel={currentChannel} />
       </div>
     </>
   );
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index 83b8eee1518..c6164bb1bb5 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -1,20 +1,18 @@
 import { Link } from "react-router-dom";
-import React, { useMemo } from "react";
+import React from "react";
 import UserAvatar from "../../../../components/user-avatar";
-import { isCommunity, useMessagesQuery } from "@ecency/ns-query";
+import { Channel, DirectContact, isCommunity, useLastMessageQuery } from "@ecency/ns-query";
 import { useCommunityCache } from "../../../../core";
 
 interface Props {
   username: string;
+  contact?: DirectContact;
+  channel?: Channel;
   userClicked: (username: string) => void;
 }
 
-export function ChatDirectContactOrChannelItem({ username, userClicked }: Props) {
-  const { data: messages } = useMessagesQuery(username);
-  const lastMessage = useMemo(
-    () => (messages.length > 0 ? messages[messages.length - 1].content : undefined),
-    [messages]
-  );
+export function ChatDirectContactOrChannelItem({ contact, channel, username, userClicked }: Props) {
+  const lastMessage = useLastMessageQuery(contact, channel);
   const { data: community } = useCommunityCache(username);
 
   return (
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 4a1bbd63af3..8babac2d116 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -48,6 +48,7 @@ export function ChatPopupContactsAndChannels({
               {joinedChannels.map((channel) => (
                 <ChatDirectContactOrChannelItem
                   key={channel.id}
+                  channel={channel}
                   username={channel.communityName!!}
                   userClicked={() => communityClicked(channel.communityName!)}
                 />
@@ -62,6 +63,7 @@ export function ChatPopupContactsAndChannels({
           {directContacts?.map((user) => (
             <ChatDirectContactOrChannelItem
               username={user.name}
+              contact={user}
               userClicked={(v) => {
                 setReceiverPubKey(user.pubkey);
                 userClicked(v);
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 247fff9186b..85cdad3ca7b 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -1,29 +1,36 @@
 import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
-import React, { useMemo } from "react";
+import React from "react";
 import { useCommunityCache } from "../../../../core";
 import { ChatsChannelMessages } from "../chat-channel-messages";
-import { DirectMessage, PublicMessage, useChannelsQuery, useMessagesQuery } from "@ecency/ns-query";
+import {
+  Channel,
+  DirectContact,
+  DirectMessage,
+  PublicMessage,
+  useMessagesQuery
+} from "@ecency/ns-query";
 
 interface Props {
-  username: string;
+  currentContact?: DirectContact;
+  currentChannel?: Channel;
 }
 
-export function ChatPopupMessagesList({ username }: Props) {
-  const { data: currentCommunity } = useCommunityCache(username);
-  const { data: messages } = useMessagesQuery(username);
-  const { data: channels } = useChannelsQuery();
-  const currentChannel = useMemo(
-    () => channels?.find((channel) => channel.communityName === currentCommunity?.name),
-    [channels, currentCommunity]
+export function ChatPopupMessagesList({ currentContact, currentChannel }: Props) {
+  const { data: currentCommunity } = useCommunityCache(currentChannel?.name);
+  const { data: messages } = useMessagesQuery(
+    currentChannel?.name ?? currentContact?.name,
+    currentChannel?.id ?? currentContact?.pubkey
   );
 
   return (
     <div className="chats h-full">
       {" "}
-      <Link to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${username}`}>
-        <ChatsProfileBox communityName={username} currentUser={username} />
+      <Link
+        to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${currentContact?.name}`}
+      >
+        <ChatsProfileBox communityName={currentChannel?.name} currentUser={currentContact?.name} />
       </Link>
       {!!currentChannel ? (
         <ChatsChannelMessages
@@ -34,7 +41,7 @@ export function ChatPopupMessagesList({ username }: Props) {
       ) : (
         <ChatsDirectMessages
           directMessages={messages as DirectMessage[]}
-          currentUser={username}
+          currentContact={currentContact!!}
           isScrollToBottom={false}
         />
       )}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index 8ba80eb1f40..bac7ac2fa5d 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -50,8 +50,6 @@ export const ChatPopUp = () => {
   const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
 
   const [expanded, setExpanded] = useState(false);
-  const [isScrollToTop, setIsScrollToTop] = useState(false);
-  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const [showSearchUser, setShowSearchUser] = useState(false);
   const [show, setShow] = useState(false);
   const [isCommunity, setIsCommunity] = useState(false);
@@ -61,6 +59,10 @@ export const ChatPopUp = () => {
   const [isScrolled, setIsScrolled] = useState(false);
 
   const hasUserJoinedChat = useMemo(() => !!privateKey, [privateKey]);
+  const currentContact = useMemo(
+    () => directContacts?.find((dc) => dc.pubkey === receiverPubKey),
+    [receiverPubKey]
+  );
   const currentChannel = useMemo(
     () => channels?.find((channel) => channel.communityName === communityName),
     [communityName, channels]
@@ -133,26 +135,6 @@ export const ChatPopUp = () => {
       })
       .finally(() => setIsTop(false));
   };
-
-  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    var element = event.currentTarget;
-    let scrollHeight = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = !isCurrentUser && !isCommunity && element.scrollTop >= scrollHeight;
-    const isScrollToBottom =
-      (isCurrentUser || isCommunity) &&
-      element.scrollTop + chatBodyDivRef?.current?.clientHeight! < element.scrollHeight - 200;
-    const isScrolled = element.scrollTop + element.clientHeight <= element.scrollHeight - 20;
-    setIsScrolled(isScrolled);
-    setIsScrollToTop(isScrollToTop);
-    setIsScrollToBottom(isScrollToBottom);
-    const scrollerTop = element.scrollTop <= 600 && messages.length > 25;
-    if (isCommunity && scrollerTop) {
-      setIsTop(true);
-    } else {
-      setIsTop(false);
-    }
-  };
-
   const scrollerClicked = () => {
     chatBodyDivRef?.current?.scroll({
       top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
@@ -207,12 +189,14 @@ export const ChatPopUp = () => {
                 : ""
             }`}
             ref={chatBodyDivRef}
-            onScroll={handleScroll}
           >
             {hasUserJoinedChat && !revealPrivateKey ? (
               <>
                 {currentUser.length !== 0 || communityName.length !== 0 ? (
-                  <ChatPopupMessagesList username={currentUser ? currentUser : communityName} />
+                  <ChatPopupMessagesList
+                    currentContact={currentContact}
+                    currentChannel={currentChannel}
+                  />
                 ) : showSearchUser ? (
                   <ChatPopupSearchUser setCurrentUser={setCurrentUser} />
                 ) : (
@@ -236,7 +220,10 @@ export const ChatPopUp = () => {
           </div>
           <div className="pl-2">
             {((isCurrentUser && receiverPubKey) || isCommunity) && (
-              <ChatInput currentUser={currentUser} currentChannel={currentChannel ?? undefined} />
+              <ChatInput
+                currentContact={currentContact}
+                currentChannel={currentChannel ?? undefined}
+              />
             )}
           </div>
         </div>
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index afe95f55cee..7c5bfa4cc7c 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -6,14 +6,20 @@ import { Button } from "@ui/button";
 import { useInviteViaPostComment } from "../../mutations";
 import { FormControl } from "@ui/input";
 import { Alert } from "@ui/alert";
-import { ChatContext, checkContiguousMessage, DirectMessage, useKeysQuery } from "@ecency/ns-query";
+import {
+  ChatContext,
+  checkContiguousMessage,
+  DirectContact,
+  DirectMessage,
+  useKeysQuery
+} from "@ecency/ns-query";
 import { ChatFloatingDate } from "../chat-floating-date";
 import { differenceInCalendarDays } from "date-fns";
 import { groupMessages } from "../../utils";
 
 interface Props {
   directMessages: DirectMessage[];
-  currentUser: string;
+  currentContact: DirectContact;
   isScrollToBottom: boolean;
   isScrolled?: boolean;
   scrollToBottom?: () => void;
@@ -35,7 +41,7 @@ export default function ChatsDirectMessages(props: Props) {
     mutateAsync: invite,
     isLoading: isInviting,
     isSuccess: isInvited
-  } = useInviteViaPostComment(props.currentUser);
+  } = useInviteViaPostComment(props.currentContact?.name);
 
   const groupedDirectMessages = useMemo(() => groupMessages(directMessages), [directMessages]);
 
@@ -60,7 +66,7 @@ export default function ChatsDirectMessages(props: Props) {
                     <ChatMessageItem
                       showDate={i === messages.length - 1}
                       key={message.id}
-                      currentUser={props.currentUser}
+                      currentContact={props.currentContact}
                       type={message.creator !== publicKey ? "receiver" : "sender"}
                       message={message}
                       isSameUser={checkContiguousMessage(message, i, directMessages)}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index 4d97baa943c..1d73ebd5dc9 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { Channel, ChatContext, getRelativeDate, useMessagesQuery } from "@ecency/ns-query";
+import { Channel, ChatContext, getRelativeDate, useLastMessageQuery } from "@ecency/ns-query";
 
 interface Props {
   username: string;
@@ -12,12 +12,8 @@ interface Props {
 export function ChatSidebarChannel({ channel, username }: Props) {
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
-  const { data: messages } = useMessagesQuery(channel.communityName);
+  const lastMessage = useLastMessageQuery(undefined, channel);
 
-  const lastMessage = useMemo(
-    () => (messages.length > 0 ? messages[messages.length - 1] : undefined),
-    [messages]
-  );
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
   const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
index 0b3cee5dca3..28869144751 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { classNameObject } from "../../../../helper/class-name-object";
-import { ChatContext, DirectContact, getRelativeDate, useMessagesQuery } from "@ecency/ns-query";
+import { ChatContext, DirectContact, getRelativeDate, useLastMessageQuery } from "@ecency/ns-query";
 
 interface Props {
   contact: DirectContact;
@@ -10,13 +10,10 @@ interface Props {
 }
 
 export function ChatSidebarDirectContact({ contact, username }: Props) {
-  const { setReceiverPubKey, revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
+  const { receiverPubKey, setReceiverPubKey, revealPrivateKey, setRevealPrivateKey } =
+    useContext(ChatContext);
 
-  const { data: messages } = useMessagesQuery(contact.name);
-  const lastMessage = useMemo(
-    () => (messages.length > 0 ? messages[messages.length - 1] : undefined),
-    [messages]
-  );
+  const lastMessage = useLastMessageQuery(contact);
   const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
   const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
@@ -25,7 +22,8 @@ export function ChatSidebarDirectContact({ contact, username }: Props) {
       className={classNameObject({
         "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
           true,
-        "bg-gray-100 dark:bg-gray-800": rawUsername === contact.name
+        "bg-gray-100 dark:bg-gray-800":
+          rawUsername === contact.name && receiverPubKey === contact.pubkey
       })}
       to={`/chats/@${contact.name}`}
       onClick={() => {
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 6e0aaebc158..41649d70758 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -57,7 +57,7 @@ export default function ChatsSideBar(props: Props) {
   };
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col h-full">
       <ChatSidebarHeader history={props.history} />
       <ChatSidebarSearch setSearch={setSearchQuery} />
       {showDivider && <div className="divider" />}
@@ -98,6 +98,11 @@ export default function ChatsSideBar(props: Props) {
           </>
         )}
       </div>
+      {directContacts?.length === 0 && communities.length === 0 && (
+        <div className="flex items-center justify-center h-full text-gray-400 dark:text-gray-600">
+          {_t("chat.no-contacts-or-channels")}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index 1d30801cacd..d20f5d25497 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -29,18 +29,24 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { hasUserJoinedChat } = useContext(ChatContext);
   const { activeUser } = useMappedStore();
 
-  const { data: communityAccount } = useGetAccountFullQuery(props.community.name);
+  const { data: communityAccount, isLoading: isCommunityAccountLoading } = useGetAccountFullQuery(
+    props.community.name
+  );
   const communityTeamQueries = useGetAccountsFullQuery(
     props.community.team.map(([name, role]) => name)
   );
-  const { data: currentChannel } = useCommunityChannelQuery(props.community);
-  const { data: channels } = useChannelsQuery();
-  const { data: communityTeam } = useNostrJoinedCommunityTeamQuery(
-    props.community,
-    communityAccount!!,
-    communityTeamQueries.map((query) => query.data!!)
+  const { data: currentChannel, isLoading: isCurrentChannelLoading } = useCommunityChannelQuery(
+    props.community
   );
-  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
+  const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
+  const { data: communityTeam, isLoading: isCommunityTeamLoading } =
+    useNostrJoinedCommunityTeamQuery(
+      props.community,
+      communityAccount!!,
+      communityTeamQueries.map((query) => query.data!!)
+    );
+  const { data: leftChannelsIds, isLoading: isChannelsIdsLoading } =
+    useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
     useAddCommunityChannel(currentChannel?.id);
@@ -49,6 +55,14 @@ export default function JoinCommunityChatBtn(props: Props) {
   const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
     useLeaveCommunityChannel();
 
+  const isGlobalLoading = useMemo(
+    () =>
+      isChannelsLoading ||
+      isChannelsIdsLoading ||
+      isCommunityAccountLoading ||
+      isCommunityTeamLoading,
+    [isChannelsLoading, isChannelsIdsLoading, isCommunityAccountLoading, isCommunityTeamLoading]
+  );
   const isCommunityChannelCreated = useMemo(() => !!currentChannel, [currentChannel]);
   const isCommunityChannelJoined = useMemo(
     () =>
@@ -60,6 +74,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     [channels, leftChannelsIds]
   );
   // Todo: all admin team should be able to create a channel
+  //      Upd: only community owner could create a channel because it requires Nostr private key
   const isAbleToCreateChannel = useMemo(
     () => props.community.name === activeUser?.username,
     [activeUser, props.community]
@@ -69,10 +84,12 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (!hasUserJoinedChat) {
       return;
     }
-    await addCommunityChannel();
+    await addCommunityChannel([]);
   };
 
-  return (
+  return isGlobalLoading ? (
+    <></>
+  ) : (
     <>
       {isCommunityChannelJoined && (
         <Button
@@ -85,6 +102,16 @@ export default function JoinCommunityChatBtn(props: Props) {
           {_t("chat.chat-joined")}
         </Button>
       )}
+      {!isCommunityChannelJoined && (
+        <Button
+          size="sm"
+          disabled={isAddCommunityChannelLoading}
+          to={`/chats/${props.community.name}`}
+          iconPlacement="left"
+        >
+          {_t("chat.join-community-chat")}
+        </Button>
+      )}
       {!isCommunityChannelCreated && isAbleToCreateChannel && (
         <Button
           size="sm"
@@ -101,16 +128,6 @@ export default function JoinCommunityChatBtn(props: Props) {
           {_t("chat.start-community-chat")}
         </Button>
       )}
-      {!isCommunityChannelJoined && (
-        <Button
-          size="sm"
-          disabled={isAddCommunityChannelLoading}
-          to={`/chats/${props.community.name}`}
-          iconPlacement="left"
-        >
-          {_t("chat.join-community-chat")}
-        </Button>
-      )}
     </>
   );
 }
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 37aba47f42f..314be537e66 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -49,12 +49,16 @@ export const Chats = ({ match, history }: Props) => {
   const { data: channels } = useChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
-  const isChannel = useMemo(
+  // Generate temporary contact from username and its public key
+  const directContact = useMemo(
     () =>
-      [...(channels ?? []), ...(communityChannel ? [communityChannel] : [])].some(
-        (channel) => channel.communityName === match.params.username
-      ),
-    [channels, match.params.username, communityChannel]
+      match.params.username
+        ? {
+            name: match.params.username.replace("@", ""),
+            pubkey: receiverPubKey
+          }
+        : undefined,
+    [receiverPubKey, match.params]
   );
 
   const isReady = useMemo(
@@ -63,13 +67,13 @@ export const Chats = ({ match, history }: Props) => {
   );
   const isShowManageKey = useMemo(() => isReady && revealPrivateKey, [isReady, revealPrivateKey]);
   const isShowChatRoom = useMemo(
-    () =>
-      isReady && (!!receiverPubKey || isChannel) && !revealPrivateKey && !!match.params.username,
-    [isReady, receiverPubKey, revealPrivateKey, isChannel, match]
+    () => isReady && (!!directContact || !!communityChannel) && !revealPrivateKey,
+    [isReady, receiverPubKey, revealPrivateKey, communityChannel, directContact]
   );
   const isShowDefaultScreen = useMemo(
-    () => isReady && !receiverPubKey && !isChannel && !revealPrivateKey && !match.params.username,
-    [isReady, receiverPubKey, revealPrivateKey, isChannel, match]
+    () =>
+      isReady && !directContact && !communityChannel && !revealPrivateKey && !match.params.username,
+    [isReady, receiverPubKey, directContact, communityChannel, match]
   );
   const isShowImportChats = useMemo(() => !isReady, [isReady]);
 
@@ -139,7 +143,12 @@ export const Chats = ({ match, history }: Props) => {
               </div>
             )}
             {isShowChatRoom && (
-              <ChatsMessagesBox match={match} history={history} channel={communityChannel!!} />
+              <ChatsMessagesBox
+                match={match}
+                history={history}
+                channel={communityChannel!!}
+                currentContact={directContact}
+              />
             )}
             {!isShowChatRoom && isReady && match.params.username && (
               <ChatsUserNotJoinedSection match={match} />
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index fd5cfaac383..c19cdca5e29 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -1906,6 +1906,7 @@
     "view-and-save": "Show keys and save",
     "blocked-users-management": "Blocked users management",
     "unlock-the-section": "Please, enter your PIN to see your credentials information",
+    "no-contacts-or-channels": "No conversations yet",
     "welcome": {
       "title": "Welcome to Chats",
       "description": "Create or import an account start using Chats",

From cc230656a7a7e29c5f319a0aec6c803949629c47 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 18 Dec 2023 03:55:07 +0600
Subject: [PATCH 173/179] Chats: added fetching previous messages

---
 .../components/chat-channel-messages.tsx      | 41 ++++-------
 .../chats/components/chat-message-box.tsx     |  1 -
 .../chats/components/chat-messages-view.tsx   | 68 +------------------
 .../chat-direct-contact-or-channel-item.tsx   |  2 +-
 .../chat-popup/chat-popup-messages-list.tsx   |  2 -
 .../chats/components/chat-popup/index.tsx     |  6 +-
 .../chats-direct-messages/index.tsx           | 26 +++----
 7 files changed, 37 insertions(+), 109 deletions(-)

diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
index d884b88169f..2b39aa9c531 100644
--- a/src/common/features/chats/components/chat-channel-messages.tsx
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useMappedStore } from "../../../store/use-mapped-store";
 import { _t } from "../../../i18n";
 import { ChatMessageItem } from "./chat-message-item";
@@ -11,6 +11,7 @@ import {
   PublicMessage,
   useHideMessageInChannel,
   useKeysQuery,
+  usePublicMessagesQuery,
   useUpdateChannelBlockedUsers
 } from "@ecency/ns-query";
 import { groupMessages } from "../utils";
@@ -20,20 +21,10 @@ import { differenceInCalendarDays } from "date-fns";
 interface Props {
   publicMessages: PublicMessage[];
   currentChannel: Channel;
-  isScrollToBottom: boolean;
-  isScrolled?: boolean;
-  scrollToBottom?: () => void;
   isPage?: boolean;
 }
 
-export function ChatsChannelMessages({
-  publicMessages,
-  isScrollToBottom,
-  isScrolled,
-  currentChannel,
-  scrollToBottom,
-  isPage
-}: Props) {
+export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }: Props) {
   const { activeUser } = useMappedStore();
 
   const channelMessagesRef = React.createRef<HTMLDivElement>();
@@ -42,6 +33,7 @@ export function ChatsChannelMessages({
   const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
 
   const { publicKey } = useKeysQuery();
+  const { fetchNextPage } = usePublicMessagesQuery(currentChannel);
 
   const { mutateAsync: updateBlockedUsers, isLoading: isUsersBlockingLoading } =
     useUpdateChannelBlockedUsers(currentChannel);
@@ -50,23 +42,13 @@ export function ChatsChannelMessages({
 
   const messages = useMemo(
     () =>
-      publicMessages
-        .filter((m) =>
-          currentChannel?.hiddenMessageIds ? !currentChannel.hiddenMessageIds.includes(m.id) : true
-        )
-        .filter((m) =>
-          currentChannel?.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
-        ),
+      publicMessages.filter((m) =>
+        currentChannel?.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
+      ),
     [publicMessages, currentChannel]
   );
   const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
 
-  useEffect(() => {
-    if (!isScrollToBottom && messages.length !== 0 && !isScrolled) {
-      scrollToBottom && scrollToBottom();
-    }
-  }, [messages, isScrollToBottom, channelMessagesRef]);
-
   return (
     <>
       <div className="channel-messages" ref={channelMessagesRef}>
@@ -77,7 +59,7 @@ export function ChatsChannelMessages({
             ) : (
               <></>
             )}
-            {group.map((message) => (
+            {group.map((message, j) => (
               <>
                 <Dropdown
                   show={currentInteractingMessageId === message.id}
@@ -106,6 +88,13 @@ export function ChatsChannelMessages({
                         100
                       )
                     }
+                    onInViewport={() =>
+                      i === groupedMessages.length - 1 &&
+                      j === group.length - 1 &&
+                      fetchNextPage({
+                        pageParam: message.created * 1000
+                      })
+                    }
                   />
                   <DropdownMenu
                     className="top-[70%]"
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index bd398400760..61f6f8d957e 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -89,7 +89,6 @@ export default function ChatsMessagesBox(props: Props) {
           <ChatsMessagesView
             currentContact={props.currentContact!!}
             currentChannel={props.channel!!}
-            setInProgress={setInProgress}
           />
         </>
       ) : (
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index 51977055d62..c2654e12104 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import { Link } from "react-router-dom";
 import ChatsProfileBox from "./chat-profile-box";
 import ChatsDirectMessages from "./chats-direct-messages";
@@ -10,21 +10,15 @@ import {
   DirectContact,
   DirectMessage,
   PublicMessage,
-  useFetchPreviousMessages,
   useMessagesQuery
 } from "@ecency/ns-query";
 
 interface Props {
   currentContact: DirectContact;
   currentChannel: Channel;
-  setInProgress: (d: boolean) => void;
 }
 
-export default function ChatsMessagesView({
-  currentContact,
-  currentChannel,
-  setInProgress
-}: Props) {
+export default function ChatsMessagesView({ currentContact, currentChannel }: Props) {
   const { data: messages } = useMessagesQuery(
     currentChannel?.name ?? currentContact?.name,
     currentChannel?.id ?? currentContact?.pubkey
@@ -32,61 +26,11 @@ export default function ChatsMessagesView({
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
-  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
-  const [isTop, setIsTop] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingPreviousMessages } =
-    useFetchPreviousMessages(currentChannel, () => {});
-
-  useEffect(() => {
-    setInProgress(isFetchingPreviousMessages);
-  }, [isFetchingPreviousMessages]);
-
-  useEffect(() => {
-    if (messages.length < 45) {
-      setHasMore(false);
-    }
-  }, [messages]);
-
-  useEffect(() => {
-    setIsScrollToBottom(false);
-  }, [currentContact]);
-
-  useEffect(() => {
-    if (isTop) {
-      fetchPrevMessages();
-    }
-  }, [isTop]);
-
-  const fetchPrevMessages = () => {
-    if (!hasMore) return;
-
-    setInProgress(true);
-    fetchPreviousMessages()
-      .then((events) => {
-        if (events.length < 25) {
-          setHasMore(false);
-        }
-      })
-      .finally(() => setIsTop(false));
-  };
-
-  const scrollToBottom = () => {
-    messagesBoxRef &&
-      messagesBoxRef?.current?.scroll({
-        top: messagesBoxRef.current?.scrollHeight,
-        behavior: "auto"
-      });
-  };
-
   return (
     <>
       <div
         className={classNameObject({
-          "h-[100vh] md:h-full": true,
-          "no-scroll": isTop && hasMore
+          "h-[100vh] md:h-full": true
         })}
         ref={messagesBoxRef}
       >
@@ -105,9 +49,6 @@ export default function ChatsMessagesView({
             <ChatsChannelMessages
               publicMessages={messages as PublicMessage[]}
               currentChannel={currentChannel!}
-              isScrollToBottom={isScrollToBottom}
-              isScrolled={isScrolled}
-              scrollToBottom={scrollToBottom}
               isPage={true}
             />
           </>
@@ -115,9 +56,6 @@ export default function ChatsMessagesView({
           <ChatsDirectMessages
             directMessages={messages as DirectMessage[]}
             currentContact={currentContact}
-            isScrolled={isScrolled}
-            isScrollToBottom={isScrollToBottom}
-            scrollToBottom={scrollToBottom}
             isPage={true}
           />
         )}
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index c6164bb1bb5..54f8b29ca75 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -28,7 +28,7 @@ export function ChatDirectContactOrChannelItem({ contact, channel, username, use
         <p className="font-semibold">
           {isCommunity(username) && community ? community.title : username}
         </p>
-        <p className="text-gray-600 text-sm">{lastMessage}</p>
+        <p className="text-gray-600 text-sm">{lastMessage?.content}</p>
       </div>
     </div>
   );
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index 85cdad3ca7b..afb65a24749 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -36,13 +36,11 @@ export function ChatPopupMessagesList({ currentContact, currentChannel }: Props)
         <ChatsChannelMessages
           publicMessages={messages as PublicMessage[]}
           currentChannel={currentChannel!}
-          isScrollToBottom={false}
         />
       ) : (
         <ChatsDirectMessages
           directMessages={messages as DirectMessage[]}
           currentContact={currentContact!!}
-          isScrollToBottom={false}
         />
       )}
     </div>
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index bac7ac2fa5d..c40cd21e295 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -41,7 +41,6 @@ export const ChatPopUp = () => {
     () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
     [directContacts, receiverPubKey]
   );
-  const { data: messages } = useMessagesQuery(directContact?.name);
   const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
   const { data: currentUserAccount } = useGetAccountFullQuery(currentUser);
 
@@ -73,6 +72,11 @@ export const ChatPopUp = () => {
     [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivateKey]
   );
 
+  const { data: messages } = useMessagesQuery(
+    currentChannel?.name ?? directContact?.name,
+    currentChannel?.id ?? directContact?.pubkey
+  );
+
   const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingMore } =
     useFetchPreviousMessages(currentChannel);
 
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
index 7c5bfa4cc7c..60e3b4e9f14 100644
--- a/src/common/features/chats/components/chats-direct-messages/index.tsx
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { _t } from "../../../../i18n";
 import "./index.scss";
 import { ChatMessageItem } from "../chat-message-item";
@@ -11,6 +11,7 @@ import {
   checkContiguousMessage,
   DirectContact,
   DirectMessage,
+  useDirectMessagesQuery,
   useKeysQuery
 } from "@ecency/ns-query";
 import { ChatFloatingDate } from "../chat-floating-date";
@@ -20,14 +21,11 @@ import { groupMessages } from "../../utils";
 interface Props {
   directMessages: DirectMessage[];
   currentContact: DirectContact;
-  isScrollToBottom: boolean;
-  isScrolled?: boolean;
-  scrollToBottom?: () => void;
   isPage?: boolean;
 }
 
 export default function ChatsDirectMessages(props: Props) {
-  const { directMessages, isScrolled, isScrollToBottom, scrollToBottom } = props;
+  const { directMessages } = props;
 
   const { receiverPubKey } = useContext(ChatContext);
 
@@ -36,6 +34,7 @@ export default function ChatsDirectMessages(props: Props) {
     "Hi! Let's start messaging privately. Register an account on [https://ecency.com/chats](https://ecency.com/chats)"
   );
   const { publicKey } = useKeysQuery();
+  const { fetchNextPage } = useDirectMessagesQuery(props.currentContact);
 
   const {
     mutateAsync: invite,
@@ -45,12 +44,6 @@ export default function ChatsDirectMessages(props: Props) {
 
   const groupedDirectMessages = useMemo(() => groupMessages(directMessages), [directMessages]);
 
-  useEffect(() => {
-    if (!isScrollToBottom && directMessages && directMessages.length !== 0 && !isScrolled) {
-      scrollToBottom?.();
-    }
-  }, [directMessages, isScrollToBottom, scrollToBottom, receiverPubKey]);
-
   return (
     <>
       <div className="direct-messages">
@@ -62,9 +55,9 @@ export default function ChatsDirectMessages(props: Props) {
               return (
                 <React.Fragment key={date.getTime()}>
                   {diff > 0 && <ChatFloatingDate currentDate={date} isPage={props.isPage} />}
-                  {messages.map((message, i) => (
+                  {messages.map((message, j) => (
                     <ChatMessageItem
-                      showDate={i === messages.length - 1}
+                      showDate={j === messages.length - 1}
                       key={message.id}
                       currentContact={props.currentContact}
                       type={message.creator !== publicKey ? "receiver" : "sender"}
@@ -81,6 +74,13 @@ export default function ChatsDirectMessages(props: Props) {
                           100
                         )
                       }
+                      onInViewport={() =>
+                        i === groupedDirectMessages.length - 1 &&
+                        j === messages.length - 1 &&
+                        fetchNextPage({
+                          pageParam: message.created * 1000
+                        })
+                      }
                     />
                   ))}
                 </React.Fragment>

From c9cf181b4ad7e3834b602e349d47ed9abc05f217 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 18 Dec 2023 04:07:54 +0600
Subject: [PATCH 174/179] Chats: fixed scrolling to last message

---
 .../features/chats/components/chat-message-box.tsx     | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 61f6f8d957e..71bfe7832eb 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -16,7 +16,6 @@ import {
   useAutoScrollInChatBox,
   useChannelsQuery,
   useCommunityChannelQuery,
-  useDirectContactsQuery,
   useLeftCommunityChannelsQuery
 } from "@ecency/ns-query";
 import { useGetAccountFullQuery } from "../../../api/queries";
@@ -40,7 +39,6 @@ export default function ChatsMessagesBox(props: Props) {
   const { data: communityAccount } = useGetAccountFullQuery(props.match.params.username);
   const { data: community } = useCommunityCache(props.match.params.username);
 
-  const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
   const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
   const { data: communityChannel } = useCommunityChannelQuery(
@@ -65,14 +63,10 @@ export default function ChatsMessagesBox(props: Props) {
       ),
     [channels, props.channel, leftChannelsIds]
   );
-  const currentContact = useMemo(
-    () => directContacts?.find((dc) => dc.name === props.match.params.username),
-    [directContacts, props.match.params]
-  );
 
   useAutoScrollInChatBox(
-    communityChannel?.name ?? currentContact?.name ?? "",
-    communityChannel?.id ?? currentContact?.pubkey ?? ""
+    communityChannel?.name ?? props.currentContact?.name ?? "",
+    communityChannel?.id ?? props.currentContact?.pubkey ?? ""
   );
 
   return (

From cc96b56379f9afd1de43e8d0a82070aedb362a47 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 18 Dec 2023 18:52:53 +0600
Subject: [PATCH 175/179] Chats: fixed showing dates in messages list

---
 package.json                                      | 2 +-
 src/common/features/chats/utils/group-messages.ts | 8 ++++++--
 yarn.lock                                         | 6 ++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index b296011bdcd..71a816a4fd9 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
-    "@ecency/ns-query": "0.0.1",
+    "@ecency/ns-query": "../ns-query",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@firebase/analytics": "^0.8.0",
diff --git a/src/common/features/chats/utils/group-messages.ts b/src/common/features/chats/utils/group-messages.ts
index 9a181bb2638..132fb1629eb 100644
--- a/src/common/features/chats/utils/group-messages.ts
+++ b/src/common/features/chats/utils/group-messages.ts
@@ -8,8 +8,12 @@ export function groupMessages(messages: Message[]) {
 
     // If difference less than 5 minutes then we group them together
     const differenceInDates = item.created - messages[currentIndex - 1].created;
-    if (differenceInDates * 1000 < 120000) {
-      acc[acc.length - 1][1].push(item);
+    const groupItems = acc[acc.length - 1][1];
+    if (
+      differenceInDates * 1000 < 120000 &&
+      groupItems[groupItems.length - 1].creator === item.creator
+    ) {
+      groupItems.push(item);
       return acc;
     }
 
diff --git a/yarn.lock b/yarn.lock
index 97fe782ea0f..7c26768af20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1369,10 +1369,8 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-0.0.1.tgz#dd931d793adce3705ad7f5f0695256c8e1d34def"
-  integrity sha512-fSSyV4/y1+TrVwHf7cyNBy1X5Z11RPE4CBqamLUPbcBwBRLHigf73ci3XcHKgpG3SrjC7s8AOapWUAKJM772Yg==
+"@ecency/ns-query@../ns-query":
+  version "0.0.2"
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     date-fns "^2.30.0"

From 4bfae334676a192319f30ae87ed6d60bd46e249b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 18 Dec 2023 23:31:10 +0600
Subject: [PATCH 176/179] Chats: fixed channels and contacts list, joining to
 channels, solved collisions with same names

---
 .../chats/components/chat-message-box.tsx     | 43 ++---------
 .../chats/components/chat-messages-view.tsx   |  5 +-
 .../chat-direct-contact-or-channel-item.tsx   |  2 +-
 .../chat-popup-contacts-and-channels.tsx      | 18 ++---
 .../chat-popup/chat-popup-messages-list.tsx   |  5 +-
 .../chats/components/chat-popup/index.tsx     | 72 +++----------------
 .../chats-sidebar/chat-sidebar-channel.tsx    |  7 +-
 .../chats/components/chats-sidebar/index.tsx  | 49 ++++---------
 .../components/join-community-chat-btn.tsx    |  6 +-
 src/common/features/chats/screens/chats.tsx   | 27 +++++--
 src/common/routes.ts                          |  2 +-
 11 files changed, 67 insertions(+), 169 deletions(-)

diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
index 71bfe7832eb..e962c25d51e 100644
--- a/src/common/features/chats/components/chat-message-box.tsx
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -1,9 +1,8 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { match } from "react-router";
 import { History } from "history";
 import ChatsMessagesHeader from "./chat-messages-header";
 import ChatsMessagesView from "./chat-messages-view";
-import LinearProgress from "../../../components/linear-progress";
 import { Button } from "@ui/button";
 import { useCommunityCache } from "../../../core";
 import ChatsProfileBox from "./chat-profile-box";
@@ -11,14 +10,10 @@ import { _t } from "../../../i18n";
 import {
   Channel,
   DirectContact,
-  getJoinedCommunities,
   useAddCommunityChannel,
   useAutoScrollInChatBox,
-  useChannelsQuery,
-  useCommunityChannelQuery,
   useLeftCommunityChannelsQuery
 } from "@ecency/ns-query";
-import { useGetAccountFullQuery } from "../../../api/queries";
 
 interface MatchParams {
   filter: string;
@@ -36,38 +31,19 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const { data: communityAccount } = useGetAccountFullQuery(props.match.params.username);
   const { data: community } = useCommunityCache(props.match.params.username);
 
-  const { data: channels } = useChannelsQuery();
-  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
-  const { data: communityChannel } = useCommunityChannelQuery(
-    community ?? undefined,
-    communityAccount
-  );
   const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
-    useAddCommunityChannel(communityChannel?.id);
-
-  const [inProgress, setInProgress] = useState(false);
+    useAddCommunityChannel(props.channel);
 
   const hasLeftCommunity = useMemo(
     () => leftCommunityChannelsIds?.includes(props.channel?.id ?? ""),
     [props.channel]
   );
-  const isCommunityJoined = useMemo(
-    () =>
-      getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
-        (channel) => channel.id === props.channel?.id
-      ),
-    [channels, props.channel, leftChannelsIds]
-  );
 
-  useAutoScrollInChatBox(
-    communityChannel?.name ?? props.currentContact?.name ?? "",
-    communityChannel?.id ?? props.currentContact?.pubkey ?? ""
-  );
+  useAutoScrollInChatBox(props.currentContact, props.channel);
 
   return (
     <div
@@ -76,10 +52,9 @@ export default function ChatsMessagesBox(props: Props) {
         gridTemplateRows: "min-content 1fr min-content"
       }}
     >
-      {props.match.params.username.startsWith("@") || isCommunityJoined ? (
+      {(props.channel && !hasLeftCommunity) || props.currentContact ? (
         <>
           <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
-          {inProgress && <LinearProgress />}
           <ChatsMessagesView
             currentContact={props.currentContact!!}
             currentChannel={props.channel!!}
@@ -90,13 +65,9 @@ export default function ChatsMessagesBox(props: Props) {
           <div />
           <div className="flex flex-col justify-center items-center mb-4">
             <ChatsProfileBox communityName={community?.name} />
-            <p className="mb-4 text-gray-600">
-              {hasLeftCommunity
-                ? _t("chat.welcome.rejoin-description")
-                : _t("chat.welcome.join-description")}
-            </p>
-            <Button onClick={() => addCommunityChannel([])} disabled={isAddCommunityChannelLoading}>
-              {hasLeftCommunity ? "Rejoin Community Chat" : "Join Community Chat"}
+            <p className="mb-4 text-gray-600">{_t("chat.welcome.join-description")}</p>
+            <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
+              Join Community Chat
             </Button>
           </div>
           <div />
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
index c2654e12104..fe3521b79b1 100644
--- a/src/common/features/chats/components/chat-messages-view.tsx
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -19,10 +19,7 @@ interface Props {
 }
 
 export default function ChatsMessagesView({ currentContact, currentChannel }: Props) {
-  const { data: messages } = useMessagesQuery(
-    currentChannel?.name ?? currentContact?.name,
-    currentChannel?.id ?? currentContact?.pubkey
-  );
+  const { data: messages } = useMessagesQuery(currentContact, currentChannel);
 
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
index 54f8b29ca75..43d0e0f7159 100644
--- a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export function ChatDirectContactOrChannelItem({ contact, channel, username, userClicked }: Props) {
   const lastMessage = useLastMessageQuery(contact, channel);
-  const { data: community } = useCommunityCache(username);
+  const { data: community } = useCommunityCache(channel?.communityName);
 
   return (
     <div
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
index 8babac2d116..cc770d5be36 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -1,15 +1,13 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import { _t } from "../../../../i18n";
 import { ChatsWelcome } from "../chats-welcome";
 import { Button } from "@ui/button";
 import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
 import {
   ChatContext,
-  getJoinedCommunities,
   useChannelsQuery,
   useDirectContactsQuery,
-  useKeysQuery,
-  useLeftCommunityChannelsQuery
+  useKeysQuery
 } from "@ecency/ns-query";
 
 interface Props {
@@ -28,24 +26,18 @@ export function ChatPopupContactsAndChannels({
   const { privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
-  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
-
-  const joinedChannels = useMemo(
-    () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
-    [channels, leftChannelsIds]
-  );
 
   return (
     <>
-      {(directContacts?.length !== 0 || (channels?.length !== 0 && joinedChannels.length !== 0)) &&
+      {(directContacts?.length !== 0 || (channels?.length !== 0 && channels?.length !== 0)) &&
       privateKey ? (
         <>
-          {joinedChannels.length !== 0 && (
+          {channels?.length !== 0 && (
             <>
               <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
                 {_t("chat.communities")}
               </div>
-              {joinedChannels.map((channel) => (
+              {channels?.map((channel) => (
                 <ChatDirectContactOrChannelItem
                   key={channel.id}
                   channel={channel}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index afb65a24749..b0b9bfd2c5b 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -19,10 +19,7 @@ interface Props {
 
 export function ChatPopupMessagesList({ currentContact, currentChannel }: Props) {
   const { data: currentCommunity } = useCommunityCache(currentChannel?.name);
-  const { data: messages } = useMessagesQuery(
-    currentChannel?.name ?? currentContact?.name,
-    currentChannel?.id ?? currentContact?.pubkey
-  );
+  const { data: messages } = useMessagesQuery(currentContact, currentChannel);
 
   return (
     <div className="chats h-full">
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
index c40cd21e295..32cbc38dfc8 100644
--- a/src/common/features/chats/components/chat-popup/index.tsx
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -19,10 +19,8 @@ import {
   getUserChatPublicKey,
   useChannelsQuery,
   useDirectContactsQuery,
-  useFetchPreviousMessages,
   useJoinChat,
-  useKeysQuery,
-  useMessagesQuery
+  useKeysQuery
 } from "@ecency/ns-query";
 import { uploadChatKeys } from "../../utils/upload-chat-keys";
 
@@ -53,9 +51,7 @@ export const ChatPopUp = () => {
   const [show, setShow] = useState(false);
   const [isCommunity, setIsCommunity] = useState(false);
   const [communityName, setCommunityName] = useState("");
-  const [isTop, setIsTop] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-  const [isScrolled, setIsScrolled] = useState(false);
 
   const hasUserJoinedChat = useMemo(() => !!privateKey, [privateKey]);
   const currentContact = useMemo(
@@ -72,14 +68,6 @@ export const ChatPopUp = () => {
     [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivateKey]
   );
 
-  const { data: messages } = useMessagesQuery(
-    currentChannel?.name ?? directContact?.name,
-    currentChannel?.id ?? directContact?.pubkey
-  );
-
-  const { mutateAsync: fetchPreviousMessages, isLoading: isFetchingMore } =
-    useFetchPreviousMessages(currentChannel);
-
   useMount(() => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   });
@@ -95,13 +83,6 @@ export const ChatPopUp = () => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   }, [routerLocation, activeUser]);
 
-  // Fetching previous messages when scrol achieved top
-  useEffect(() => {
-    if (isTop) {
-      fetchPrevMessages();
-    }
-  }, [isTop]);
-
   useEffect(() => {
     if (prevActiveUser?.username !== activeUser?.username) {
       setIsCommunity(false);
@@ -110,42 +91,6 @@ export const ChatPopUp = () => {
     }
   }, [global.theme, activeUser]);
 
-  useEffect(() => {
-    if (messages.length !== 0 && !isScrolled) {
-      scrollerClicked();
-    }
-  }, [messages]);
-
-  useEffect(() => {
-    if ((isCurrentUser || isCommunity) && show) {
-      scrollerClicked();
-    }
-  }, [isCurrentUser, isCommunity, show]);
-
-  useEffect(() => {
-    if (isCommunity && show) {
-      scrollerClicked();
-    }
-  }, [isCommunity, communityName, show]);
-
-  const fetchPrevMessages = () => {
-    if (!hasMore) return;
-
-    fetchPreviousMessages()
-      .then((events) => {
-        if (events.length < 25) {
-          setHasMore(false);
-        }
-      })
-      .finally(() => setIsTop(false));
-  };
-  const scrollerClicked = () => {
-    chatBodyDivRef?.current?.scroll({
-      top: isCurrentUser || isCommunity ? chatBodyDivRef?.current?.scrollHeight : 0,
-      behavior: "auto"
-    });
-  };
-
   const handleMessageSvgClick = () => {
     setShowSearchUser(!showSearchUser);
     setExpanded(true);
@@ -181,16 +126,12 @@ export const ChatPopUp = () => {
             handleMessageSvgClick={handleMessageSvgClick}
             showSearchUser={showSearchUser}
           />
-          {(isJoinChatLoading || isChannelsLoading || isFetchingMore) && <LinearProgress />}
+          {(isJoinChatLoading || isChannelsLoading) && <LinearProgress />}
           <div
             className={`chat-body h-full ${
               currentUser ? "current-user" : isCommunity ? "community" : ""
             } ${
-              !hasUserJoinedChat
-                ? "flex items-center justify-center"
-                : isTop && hasMore
-                ? "no-scroll"
-                : ""
+              !hasUserJoinedChat ? "flex items-center justify-center" : hasMore ? "no-scroll" : ""
             }`}
             ref={chatBodyDivRef}
           >
@@ -208,9 +149,14 @@ export const ChatPopUp = () => {
                     communityClicked={(community: string) => {
                       setIsCommunity(true);
                       setCommunityName(community);
+                      setCurrentUser("");
+                      setReceiverPubKey("");
                     }}
                     setShowSearchUser={setShowSearchUser}
-                    userClicked={(username) => setCurrentUser(username)}
+                    userClicked={(username) => {
+                      setCurrentUser(username);
+                      setCommunityName("");
+                    }}
                   />
                 )}
               </>
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
index 1d73ebd5dc9..439f828e0ac 100644
--- a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -7,9 +7,10 @@ import { Channel, ChatContext, getRelativeDate, useLastMessageQuery } from "@ece
 interface Props {
   username: string;
   channel: Channel;
+  isChannel: boolean;
 }
 
-export function ChatSidebarChannel({ channel, username }: Props) {
+export function ChatSidebarChannel({ channel, username, isChannel }: Props) {
   const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
 
   const lastMessage = useLastMessageQuery(undefined, channel);
@@ -22,9 +23,9 @@ export function ChatSidebarChannel({ channel, username }: Props) {
       className={classNameObject({
         "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
           true,
-        "bg-gray-100 dark:bg-gray-800": rawUsername === channel.name
+        "bg-gray-100 dark:bg-gray-800": rawUsername === channel.communityName && isChannel
       })}
-      to={`/chats/${channel.communityName}`}
+      to={`/chats/${channel.communityName}/channel`}
       onClick={() => {
         if (revealPrivateKey) {
           setRevealPrivateKey(false);
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
index 41649d70758..a55680672dc 100644
--- a/src/common/features/chats/components/chats-sidebar/index.tsx
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useState } from "react";
 import { History } from "history";
 import { ChatSidebarHeader } from "./chat-sidebar-header";
 import { ChatSidebarSearch } from "./chat-sidebar-search";
@@ -6,62 +6,36 @@ import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
 import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
 import { _t } from "../../../../i18n";
 import { ChatSidebarChannel } from "./chat-sidebar-channel";
-import {
-  ChatContext,
-  getJoinedCommunities,
-  useChannelsQuery,
-  useDirectContactsQuery,
-  useLeftCommunityChannelsQuery
-} from "@ecency/ns-query";
+import { ChatContext, useChannelsQuery, useDirectContactsQuery } from "@ecency/ns-query";
 import { useSearchUsersQuery } from "../../queries";
 import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
 
 interface Props {
   username: string;
   history: History;
+  isChannel: boolean;
 }
 
 export default function ChatsSideBar(props: Props) {
   const { username } = props;
-  const { setRevealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
+  const { setRevealPrivateKey } = useContext(ChatContext);
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
-  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
 
   const [searchQuery, setSearchQuery] = useState("");
   const [showDivider, setShowDivider] = useState(false);
-  const [isScrollToTop, setIsScrollToTop] = useState(false);
 
   const { data: searchUsers } = useSearchUsersQuery(searchQuery);
   const { data: searchCommunities } = useSearchCommunitiesQuery(searchQuery);
 
-  const communities = useMemo(
-    () => getJoinedCommunities(channels ?? [], leftChannelsIds ?? []),
-    [channels, leftChannelsIds]
-  );
-
-  const handleScroll = (event: React.UIEvent<HTMLElement>) => {
-    var element = event.currentTarget;
-    if (element.scrollTop > 2) {
-      setShowDivider(true);
-    } else {
-      if (showDivider) {
-        setShowDivider(false);
-      }
-    }
-    let srollHeight: number = (element.scrollHeight / 100) * 25;
-    const isScrollToTop = element.scrollTop >= srollHeight;
-    setIsScrollToTop(isScrollToTop);
-  };
-
   return (
     <div className="flex flex-col h-full">
       <ChatSidebarHeader history={props.history} />
       <ChatSidebarSearch setSearch={setSearchQuery} />
       {showDivider && <div className="divider" />}
-      <div className="flex flex-col" onScroll={handleScroll} ref={chatsSideBarRef}>
+      <div className="flex flex-col" ref={chatsSideBarRef}>
         {searchQuery ? (
           [...searchUsers, ...searchCommunities].map((item) => (
             <ChatSidebarSearchItem
@@ -75,13 +49,18 @@ export default function ChatsSideBar(props: Props) {
           ))
         ) : (
           <>
-            {communities.length !== 0 && (
+            {channels?.length !== 0 && (
               <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
                 {_t("chat.communities")}
               </div>
             )}
-            {communities.map((channel) => (
-              <ChatSidebarChannel key={channel.id} channel={channel} username={username} />
+            {channels?.map((channel) => (
+              <ChatSidebarChannel
+                isChannel={props.isChannel}
+                key={channel.id}
+                channel={channel}
+                username={username}
+              />
             ))}
             {directContacts?.length !== 0 && (
               <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
@@ -98,7 +77,7 @@ export default function ChatsSideBar(props: Props) {
           </>
         )}
       </div>
-      {directContacts?.length === 0 && communities.length === 0 && (
+      {directContacts?.length === 0 && channels?.length === 0 && (
         <div className="flex items-center justify-center h-full text-gray-400 dark:text-gray-600">
           {_t("chat.no-contacts-or-channels")}
         </div>
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
index d20f5d25497..b35f0b79b70 100644
--- a/src/common/features/chats/components/join-community-chat-btn.tsx
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -49,7 +49,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     useLeftCommunityChannelsQuery();
 
   const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
-    useAddCommunityChannel(currentChannel?.id);
+    useAddCommunityChannel(currentChannel);
   const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
     useCreateCommunityChat(props.community, communityAccount!!, updateProfile);
   const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
@@ -84,7 +84,7 @@ export default function JoinCommunityChatBtn(props: Props) {
     if (!hasUserJoinedChat) {
       return;
     }
-    await addCommunityChannel([]);
+    await addCommunityChannel();
   };
 
   return isGlobalLoading ? (
@@ -106,7 +106,7 @@ export default function JoinCommunityChatBtn(props: Props) {
         <Button
           size="sm"
           disabled={isAddCommunityChannelLoading}
-          to={`/chats/${props.community.name}`}
+          to={`/chats/${props.community.name}/channel`}
           iconPlacement="left"
         >
           {_t("chat.join-community-chat")}
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
index 314be537e66..409507c7399 100644
--- a/src/common/features/chats/screens/chats.tsx
+++ b/src/common/features/chats/screens/chats.tsx
@@ -34,11 +34,12 @@ interface Props extends PageProps {
     path: string;
     url: string;
     username: string;
+    channel?: string;
   }>;
 }
 
 export const Chats = ({ match, history }: Props) => {
-  const { activeUser, global } = useMappedStore();
+  const { activeUser } = useMappedStore();
   const { receiverPubKey, revealPrivateKey, setReceiverPubKey, setRevealPrivateKey } =
     useContext(ChatContext);
   const { data: community } = useCommunityCache(match.params.username);
@@ -47,12 +48,12 @@ export const Chats = ({ match, history }: Props) => {
   const { data: userAccount } = useGetAccountFullQuery(match.params.username?.replace("@", ""));
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
-  const { data: communityChannel } = useCommunityChannelQuery(community ?? undefined);
 
+  const isChannel = useMemo(() => match.params.channel === "channel", [match.params]);
   // Generate temporary contact from username and its public key
   const directContact = useMemo(
     () =>
-      match.params.username
+      match.params.username && !isChannel
         ? {
             name: match.params.username.replace("@", ""),
             pubkey: receiverPubKey
@@ -60,6 +61,10 @@ export const Chats = ({ match, history }: Props) => {
         : undefined,
     [receiverPubKey, match.params]
   );
+  const { data: communityChannel } = useCommunityChannelQuery(
+    isChannel && community ? community : undefined,
+    userAccount
+  );
 
   const isReady = useMemo(
     () => !!(activeUser && publicKey && privateKey),
@@ -92,11 +97,13 @@ export const Chats = ({ match, history }: Props) => {
   }, [community, userAccount]);
 
   useEffect(() => {
-    if (userAccount) {
+    if (userAccount && !isChannel) {
       const key = getUserChatPublicKey(userAccount);
       setReceiverPubKey(key ?? "");
+    } else {
+      setReceiverPubKey("");
     }
-  }, [userAccount]);
+  }, [userAccount, isChannel]);
 
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -115,7 +122,15 @@ export const Chats = ({ match, history }: Props) => {
       <div className="container mx-auto md:py-6">
         <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
           <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
-            {isReady ? <ChatsSideBar history={history} username={match.params.username} /> : <></>}
+            {isReady ? (
+              <ChatsSideBar
+                isChannel={isChannel}
+                history={history}
+                username={match.params.username}
+              />
+            ) : (
+              <></>
+            )}
             {(!directContacts?.length || !channels?.length) && isShowDefaultScreen && (
               <ChatsDefaultScreen className="md:hidden" />
             )}
diff --git a/src/common/routes.ts b/src/common/routes.ts
index 260fb9ff960..68542905b9f 100644
--- a/src/common/routes.ts
+++ b/src/common/routes.ts
@@ -42,5 +42,5 @@ export default {
   PROPOSAL_DETAIL: `/proposals/:id(\\d+)`,
   PURCHASE: "/purchase",
   DECKS: "/decks",
-  CHATS: `/chats/:username?`
+  CHATS: `/chats/:username?/:channel?`
 };

From 4938ae7cbacfc53d92249d4b29d3cff42f5ccbc4 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Thu, 21 Dec 2023 20:51:11 +0600
Subject: [PATCH 177/179] Fixed query

---
 .../components/chat-popup/chat-popup-messages-list.tsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
index b0b9bfd2c5b..52e5c4eb814 100644
--- a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export function ChatPopupMessagesList({ currentContact, currentChannel }: Props) {
-  const { data: currentCommunity } = useCommunityCache(currentChannel?.name);
+  const { data: currentCommunity } = useCommunityCache(currentChannel?.communityName);
   const { data: messages } = useMessagesQuery(currentContact, currentChannel);
 
   return (
@@ -27,7 +27,10 @@ export function ChatPopupMessagesList({ currentContact, currentChannel }: Props)
       <Link
         to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${currentContact?.name}`}
       >
-        <ChatsProfileBox communityName={currentChannel?.name} currentUser={currentContact?.name} />
+        <ChatsProfileBox
+          communityName={currentChannel?.communityName}
+          currentUser={currentContact?.name}
+        />
       </Link>
       {!!currentChannel ? (
         <ChatsChannelMessages

From cb0f8da53c4d755eae8d6f7b8e773f51c18a62ce Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Wed, 27 Dec 2023 08:38:55 +0530
Subject: [PATCH 178/179] fix package

---
 package.json | 2 +-
 yarn.lock    | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 71a816a4fd9..42c4879ba00 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,9 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
+    "@ecency/ns-query": "^0.0.4",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
-    "@ecency/ns-query": "../ns-query",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@firebase/analytics": "^0.8.0",
diff --git a/yarn.lock b/yarn.lock
index 7c26768af20..d585ea715ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1369,8 +1369,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@../ns-query":
-  version "0.0.2"
+"@ecency/ns-query@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-0.0.4.tgz#f5a6ba1e7800a817bb27901104bd28ccbf42db3a"
+  integrity sha512-15NNi7E4nUFgxh3uel8igGJGYgYV2r0kpuZz7n2OCblsz4Czr28buZr8sEIfCNmDSvtht7IGHCmhZRHSL8Ktnw==
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     date-fns "^2.30.0"

From 375c1ad71dd3585915be4134416e7e3970b2d8a5 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Fri, 29 Dec 2023 12:58:52 +0530
Subject: [PATCH 179/179] ns query update

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 42c4879ba00..fa2dba1d772 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^0.0.4",
+    "@ecency/ns-query": "^1.0.0",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",
diff --git a/yarn.lock b/yarn.lock
index d585ea715ba..ed15cb257b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1369,10 +1369,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-0.0.4.tgz#f5a6ba1e7800a817bb27901104bd28ccbf42db3a"
-  integrity sha512-15NNi7E4nUFgxh3uel8igGJGYgYV2r0kpuZz7n2OCblsz4Czr28buZr8sEIfCNmDSvtht7IGHCmhZRHSL8Ktnw==
+"@ecency/ns-query@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.0.tgz#24703f0bb1dbc253e9a0d6965d4841471d667e4e"
+  integrity sha512-DnG8m/qWLs5fo/B/Uf2dD8rNwXHSgQuYMwsn2K96KK3uAPV1Wh3X8ycKreS7jGNukPvNut2UHRLnSlwyBRBABw==
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     date-fns "^2.30.0"