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 )}