diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 80f4df69..99f212cd 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -14,6 +14,7 @@ import { CoinbaseModal } from "./Modals/CoinbaseModal";
import { CommunityModal } from "./Modals/CommunityModal";
import { EditModal } from "./Modals/EditModal";
import { LogoutModal } from "./Modals/LogoutModal";
+import { ProfileFoundModal } from "./Modals/ProfileFoundModal";
import { ProfileModal } from "./Modals/ProfileModal";
import { StatusModal } from "./Modals/StatusModal";
import { UserCreationModal } from "./Modals/UserCreationModal";
@@ -34,6 +35,7 @@ function Modals() {
+
>
);
}
diff --git a/packages/react-chat/src/components/Modals/ProfileFoundModal.tsx b/packages/react-chat/src/components/Modals/ProfileFoundModal.tsx
new file mode 100644
index 00000000..f319ab70
--- /dev/null
+++ b/packages/react-chat/src/components/Modals/ProfileFoundModal.tsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Identity, utils } from "status-communities/dist/cjs";
+import styled from "styled-components";
+
+import { useNickname, useSetIdentity } from "../../contexts/identityProvider";
+import { useModal } from "../../contexts/modalProvider";
+import { decryptIdentity, loadEncryptedIdentity } from "../../utils";
+import { buttonTransparentStyles } from "../Buttons/buttonStyle";
+import { UserLogo } from "../Members/UserLogo";
+import { textMediumStyles } from "../Text";
+
+import { Modal } from "./Modal";
+import {
+ Btn,
+ ButtonSection,
+ Heading,
+ MiddleSection,
+ Section,
+ Text,
+} from "./ModalStyle";
+import {
+ EmojiKey,
+ UserAddress,
+ UserAddressWrapper,
+ UserName,
+} from "./ProfileModal";
+import { UserCreationModalName } from "./UserCreationModal";
+
+export const ProfileFoundModalName = "ProfileFoundModal";
+
+export function ProfileFoundModal() {
+ const { setModal } = useModal(ProfileFoundModalName);
+ const { setModal: setCreationModal } = useModal(UserCreationModalName);
+
+ const setIdentity = useSetIdentity();
+ const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
+ const nickname = useNickname();
+
+ const [decryptedIdentity, setDecryptedIdentity] = useState<
+ Identity | undefined
+ >(undefined);
+
+ useEffect(() => {
+ if (encryptedIdentity)
+ (async () => {
+ setDecryptedIdentity(
+ await decryptIdentity(encryptedIdentity, "noPassword")
+ );
+ })();
+ }, [encryptedIdentity]);
+
+ if (decryptedIdentity) {
+ return (
+
+
+ Throwaway Profile found
+
+
+
+
+ {nickname}
+
+
+
+ {" "}
+ Chatkey: {decryptedIdentity.privateKey.slice(0, 10)}...
+ {decryptedIdentity.privateKey.slice(-3)}{" "}
+
+
+ π©ππ₯π¦ππ‘π
π»β£οΈπβΈπ΅π
±
+
+
+ Throwaway Profile is found in your local browserβs cache. Would you
+ like to load it and use it?{" "}
+
+
+
+ {
+ setCreationModal(true);
+ setModal(false);
+ }}
+ >
+ Skip
+
+ {
+ setIdentity(decryptedIdentity);
+ setModal(false);
+ }}
+ >
+ Load Throwaway Profile
+
+
+
+ );
+ } else {
+ return null;
+ }
+}
+
+const Logo = styled(UserLogo)`
+ margin-bottom: 8px;
+`;
+
+const Name = styled(UserName)`
+ margin-bottom: 8px;
+`;
+
+const EmojiKeyBlock = styled(EmojiKey)`
+ margin-bottom: 24px;
+`;
+
+const SkipBtn = styled.button`
+ ${buttonTransparentStyles}
+ ${textMediumStyles}
+`;
diff --git a/packages/react-chat/src/components/Modals/UserCreationModal.tsx b/packages/react-chat/src/components/Modals/UserCreationModal.tsx
index 92829007..eb5c0f68 100644
--- a/packages/react-chat/src/components/Modals/UserCreationModal.tsx
+++ b/packages/react-chat/src/components/Modals/UserCreationModal.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
import { Identity } from "status-communities/dist/cjs";
import styled from "styled-components";
@@ -11,11 +11,7 @@ import {
import { useModal } from "../../contexts/modalProvider";
import { useNameError } from "../../hooks/useNameError";
import { Contact } from "../../models/Contact";
-import {
- decryptIdentity,
- loadEncryptedIdentity,
- saveIdentity,
-} from "../../utils";
+import { saveIdentity } from "../../utils";
import { NameError } from "../Form/NameError";
import { ClearBtn, NameInput, NameInputWrapper } from "../Form/inputStyles";
import { AddIcon } from "../Icons/AddIcon";
@@ -46,8 +42,6 @@ export function UserCreationModal() {
const setIdentity = useSetIdentity();
const setNickname = useSetNikcname();
- const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
-
const [customNameInput, setCustomNameInput] = useState("");
const error = useNameError(customNameInput);
const [nextStep, setNextStep] = useState(false);
@@ -113,20 +107,6 @@ export function UserCreationModal() {
- {!nextStep && encryptedIdentity && !walletIdentity && (
-
- )}
{nextStep && identity && (
<>
diff --git a/packages/react-chat/src/components/UserCreation/UserCreation.tsx b/packages/react-chat/src/components/UserCreation/UserCreation.tsx
index 252b9e41..7d4e7c5f 100644
--- a/packages/react-chat/src/components/UserCreation/UserCreation.tsx
+++ b/packages/react-chat/src/components/UserCreation/UserCreation.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useMemo } from "react";
import styled from "styled-components";
import { useModal } from "../../contexts/modalProvider";
+import { loadEncryptedIdentity } from "../../utils";
import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
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";
@@ -17,6 +19,9 @@ 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 encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
return (
@@ -29,7 +34,11 @@ export function UserCreation({ permission }: UserCreationProps) {
Connect Ethereum Wallet
{permission && (
- setModal(true)}>
+
+ encryptedIdentity ? setProfileFoundModal(true) : setModal(true)
+ }
+ >
Use a throwaway account
)}