diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 99f212cd..5bfbf222 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -18,6 +18,7 @@ import { ProfileFoundModal } from "./Modals/ProfileFoundModal";
import { ProfileModal } from "./Modals/ProfileModal";
import { StatusModal } from "./Modals/StatusModal";
import { UserCreationModal } from "./Modals/UserCreationModal";
+import { UserCreationStartModal } from "./Modals/UserCreationStartModal";
import { WalletConnectModal } from "./Modals/WalletConnectModal";
import { WalletModal } from "./Modals/WalletModal";
import { ToastMessageList } from "./ToastMessages/ToastMessageList";
@@ -36,6 +37,7 @@ function Modals() {
+
>
);
}
diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 7b5cb014..21ef3864 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -10,6 +10,7 @@ import styled from "styled-components";
import { useIdentity } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider";
+import { useNarrow } from "../../contexts/narrowProvider";
import { Reply } from "../../hooks/useReply";
import { uintToImgUrl } from "../../utils/uintToImgUrl";
import { ClearSvg } from "../Icons/ClearIcon";
@@ -20,6 +21,7 @@ import { ReplySvg } from "../Icons/ReplyIcon";
import { StickerIcon } from "../Icons/StickerIcon";
import "emoji-mart/css/emoji-mart.css";
import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal";
+import { UserCreationStartModalName } from "../Modals/UserCreationStartModal";
import { SearchBlock } from "../SearchBlock";
import { textMediumStyles, textSmallStyles } from "../Text";
@@ -31,6 +33,7 @@ interface ChatInputProps {
}
export function ChatInput({ reply, setReply }: ChatInputProps) {
+ const narrow = useNarrow();
const identity = useIdentity();
const disabled = useMemo(() => !identity, [identity]);
const { sendMessage, contacts } = useMessengerContext();
@@ -41,6 +44,9 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
const [imageUint, setImageUint] = useState(undefined);
const { setModal } = useModal(SizeLimitModalName);
+ const { setModal: setCreationStartModal } = useModal(
+ UserCreationStartModalName
+ );
const [query, setQuery] = useState("");
@@ -253,21 +259,27 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
onClick={() => setImageUint(undefined)}
/>
)}
-
+ {narrow && !identity ? (
+ setCreationStartModal(true)}>
+ Click here to join discussion
+
+ ) : (
+
+ )}
{query && (
theme.secondary};
+ background: ${({ theme }) => theme.inputColor};
+ border: none;
+ outline: none;
+ padding: 0 10px;
+ text-align: start;
+
+ ${textMediumStyles};
+`;
diff --git a/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx b/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx
new file mode 100644
index 00000000..404ba391
--- /dev/null
+++ b/packages/react-chat/src/components/Modals/UserCreationStartModal.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+import { UserCreationButtons } from "../UserCreation/UserCreationButtons";
+
+import { Modal } from "./Modal";
+import { Heading, Section } from "./ModalStyle";
+
+export const UserCreationStartModalName = "UserCreationStartModal";
+
+export const UserCreationStartModal = () => {
+ return (
+
+
+ Jump into the discussion
+
+
+
+
+
+ );
+};
+
+const MiddleSection = styled(Section)`
+ padding: 48px 0;
+`;
diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx
index 7d4e7c5f..4207998e 100644
--- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx
+++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx
@@ -1,49 +1,29 @@
-import React, { useMemo } from "react";
+import React from "react";
import styled from "styled-components";
-import { useModal } from "../../contexts/modalProvider";
-import { loadEncryptedIdentity } from "../../utils";
-import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
+import { useNarrow } from "../../contexts/narrowProvider";
import { ColorChatIcon } from "../Icons/ColorChatIcon";
-import { ProfileFoundModalName } from "../Modals/ProfileFoundModal";
-import { StatusModalName } from "../Modals/StatusModal";
-import { UserCreationModalName } from "../Modals/UserCreationModal";
-import { WalletModalName } from "../Modals/WalletModal";
-import { textSmallStyles } from "../Text";
+
+import { UserCreationButtons } from "./UserCreationButtons";
interface UserCreationProps {
permission: boolean;
}
export function UserCreation({ permission }: UserCreationProps) {
- const { setModal } = useModal(UserCreationModalName);
- const { setModal: setStatusModal } = useModal(StatusModalName);
- const { setModal: setWalletModal } = useModal(WalletModalName);
- const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName);
+ const narrow = useNarrow();
- const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
-
- return (
-
-
- Want to jump into the discussion?
- setStatusModal(true)}>
- Sync with Status profile
-
- setWalletModal(true)}>
- Connect Ethereum Wallet
-
- {permission && (
-
- encryptedIdentity ? setProfileFoundModal(true) : setModal(true)
- }
- >
- Use a throwaway account
-
- )}
-
- );
+ if (!narrow) {
+ return (
+
+
+ Want to jump into the discussion?
+
+
+ );
+ } else {
+ return null;
+ }
}
const Wrapper = styled.div`
@@ -63,14 +43,3 @@ const TitleWrapper = styled.div`
margin: 24px 0;
color: ${({ theme }) => theme.primary};
`;
-
-const LoginBtn = styled.button`
- ${buttonStyles}
- ${textSmallStyles}
- padding: 10px 12px;
- margin-bottom: 16px;
-`;
-
-const ThrowAwayButton = styled.button`
- ${buttonTransparentStyles}
-`;
diff --git a/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx
new file mode 100644
index 00000000..643dd56a
--- /dev/null
+++ b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx
@@ -0,0 +1,85 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+
+import { useModal } from "../../contexts/modalProvider";
+import { useNarrow } from "../../contexts/narrowProvider";
+import { loadEncryptedIdentity } from "../../utils";
+import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
+import { ProfileFoundModalName } from "../Modals/ProfileFoundModal";
+import { StatusModalName } from "../Modals/StatusModal";
+import { UserCreationModalName } from "../Modals/UserCreationModal";
+import { UserCreationStartModalName } from "../Modals/UserCreationStartModal";
+import { WalletModalName } from "../Modals/WalletModal";
+import { textSmallStyles } from "../Text";
+
+interface UserCreationProps {
+ permission: boolean;
+}
+
+export function UserCreationButtons({ permission }: UserCreationProps) {
+ const narrow = useNarrow();
+ const { setModal } = useModal(UserCreationModalName);
+ const { setModal: setStatusModal } = useModal(StatusModalName);
+ const { setModal: setWalletModal } = useModal(WalletModalName);
+ const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName);
+ const { setModal: setCreationStartModal } = useModal(
+ UserCreationStartModalName
+ );
+
+ const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
+
+ return (
+
+ {
+ setStatusModal(true);
+ setCreationStartModal(false);
+ }}
+ className={`${narrow && "narrow"}`}
+ >
+ Sync with Status profile
+
+ {
+ setWalletModal(true);
+ setCreationStartModal(false);
+ }}
+ className={`${narrow && "narrow"}`}
+ >
+ Connect Ethereum Wallet
+
+ {permission && (
+ {
+ encryptedIdentity ? setProfileFoundModal(true) : setModal(true);
+ setCreationStartModal(false);
+ }}
+ >
+ Use a throwaway account
+
+ )}
+
+ );
+}
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`;
+
+const LoginBtn = styled.button`
+ ${buttonStyles}
+ ${textSmallStyles}
+ padding: 10px 12px;
+ margin-bottom: 16px;
+
+ &.narrow {
+ margin-bottom: 32px;
+ }
+`;
+
+const ThrowAwayButton = styled.button`
+ ${buttonTransparentStyles}
+`;