Add modal for found profile (#182)

* Add modal for found profile

* Fix identity loading

* Remove placeholder button

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() {
       <CoinbaseModal />
       <LogoutModal />
       <AgreementModal />
+      <ProfileFoundModal />
     </>
   );
 }

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 (
+      <Modal name={ProfileFoundModalName}>
+        <Section>
+          <Heading>Throwaway Profile found</Heading>
+        </Section>
+        <MiddleSection>
+          <Logo
+            contact={{
+              id: utils.bufToHex(decryptedIdentity.publicKey),
+              customName: nickname,
+              trueName: utils.bufToHex(decryptedIdentity.publicKey),
+            }}
+            radius={80}
+            colorWheel={[
+              ["red", 150],
+              ["blue", 250],
+              ["green", 360],
+            ]}
+          />
+
+          <Name className="small">{nickname}</Name>
+
+          <UserAddressWrapper>
+            <UserAddress className="small">
+              {" "}
+              Chatkey: {decryptedIdentity.privateKey.slice(0, 10)}...
+              {decryptedIdentity.privateKey.slice(-3)}{" "}
+            </UserAddress>
+          </UserAddressWrapper>
+          <EmojiKeyBlock>🎩🍞🥑🦍🌈📡💅🏻♣️🔔⛸👵🅱</EmojiKeyBlock>
+
+          <Text>
+            Throwaway Profile is found in your local browser’s cache. Would you
+            like to load it and use it?{" "}
+          </Text>
+        </MiddleSection>
+        <ButtonSection>
+          <SkipBtn
+            onClick={() => {
+              setCreationModal(true);
+              setModal(false);
+            }}
+          >
+            Skip
+          </SkipBtn>
+          <Btn
+            onClick={() => {
+              setIdentity(decryptedIdentity);
+              setModal(false);
+            }}
+          >
+            Load Throwaway Profile
+          </Btn>
+        </ButtonSection>
+      </Modal>
+    );
+  } 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}
+`;

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() {
 
         <NameError error={error} />
 
-        {!nextStep && encryptedIdentity && !walletIdentity && (
-          <button
-            onClick={async () => {
-              const identity = await decryptIdentity(
-                encryptedIdentity,
-                "noPassword"
-              );
-              setIdentity(identity);
-              setModal(false);
-            }}
-          >
-            Saved identity found, click here to load
-          </button>
-        )}
         {nextStep && identity && (
           <>
             <UserAddress>

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 (
     <Wrapper>
@@ -29,7 +34,11 @@ export function UserCreation({ permission }: UserCreationProps) {
         Connect Ethereum Wallet
       </LoginBtn>
       {permission && (
-        <ThrowAwayButton onClick={() => setModal(true)}>
+        <ThrowAwayButton
+          onClick={() =>
+            encryptedIdentity ? setProfileFoundModal(true) : setModal(true)
+          }
+        >
           Use a throwaway account
         </ThrowAwayButton>
       )}