Add loading saved identity (#167)

packages/react-chat-example/src/index.tsx

@@ -76,7 +76,7 @@ function DragDiv() {
           <ReactChat
             theme={theme ? lightTheme : darkTheme}
             communityKey={
-              "0x022213984be07b1fa120ccd4dcbad161036d651e69dbaf04e45e5c5009e815d86b"
+              "0x0202a564bed987342413b47bc8013d63bbb3fbb15dcd42dd03687b2cec8bd0f3f7"
             }
             fetchMetadata={fetchMetadata}
           />

packages/react-chat/src/components/Modals/UserCreationModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Identity } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
@@ -9,6 +9,11 @@ import {
 } from "../../contexts/identityProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { Contact } from "../../models/Contact";
+import {
+  decryptIdentity,
+  loadEncryptedIdentity,
+  saveIdentity,
+} from "../../utils";
 import { NameInput } from "../Form/inputStyles";
 import { AddIcon } from "../Icons/AddIcon";
 import { ChainIcon } from "../Icons/ChainIcon";
@@ -35,6 +40,8 @@ export function UserCreationModal() {
   const setIdentity = useSetIdentity();
   const setNickname = useSetNikcname();
 
+  const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
+
   const [customNameInput, setCustomNameInput] = useState("");
   const [nextStep, setNextStep] = useState(false);
   const { setModal } = useModal(UserCreationModalName);
@@ -86,6 +93,20 @@ export function UserCreationModal() {
             onChange={(e) => setCustomNameInput(e.currentTarget.value)}
           />
         )}
+        {!nextStep && encryptedIdentity && (
+          <button
+            onClick={async () => {
+              const identity = await decryptIdentity(
+                encryptedIdentity,
+                "noPassword"
+              );
+              setIdentity(identity);
+              setModal(false);
+            }}
+          >
+            Saved identity found, click here to load
+          </button>
+        )}
         {nextStep && identity && (
           <>
             <UserAddress>
@@ -117,11 +138,15 @@ export function UserCreationModal() {
         </BackBtn>
         <Btn
           onClick={() => {
-            nextStep
+            if (nextStep) {
-              ? setModal(false)
+              setModal(false);
-              : (setIdentity(Identity.generate()),
+            } else {
-                setNickname(customNameInput),
+              const identity = Identity.generate();
-                setNextStep(true));
+              setIdentity(identity);
+              saveIdentity(identity, "noPassword");
+              setNickname(customNameInput);
+              setNextStep(true);
+            }
           }}
           disabled={!customNameInput}
         >

packages/react-chat/src/hooks/messenger/useContacts.ts

@@ -4,7 +4,9 @@ import {
   Identity,
   Messenger,
 } from "status-communities/dist/cjs";
+import { bufToHex } from "status-communities/dist/cjs/utils";
 
+import { useSetNikcname } from "../../contexts/identityProvider";
 import { Contacts } from "../../models/Contact";
 
 export function useContacts(
@@ -12,6 +14,7 @@ export function useContacts(
   identity: Identity | undefined,
   nickname: string | undefined
 ) {
+  const setNickname = useSetNikcname();
   const [internalContacts, setInternalContacts] = useState<{
     [id: string]: { clock: number; nickname?: string };
   }>({});
@@ -28,6 +31,9 @@ export function useContacts(
         },
         (id, nickname) => {
           setInternalContacts((prev) => {
+            if (identity?.publicKey && id === bufToHex(identity.publicKey)) {
+              setNickname(nickname);
+            }
             return { ...prev, [id]: { ...prev[id], nickname } };
           });
         },

packages/status-communities/src/contacts.ts

@@ -113,22 +113,52 @@ export class Contacts {
     };
 
     const sendNickname = async (): Promise<void> => {
-      if (this.identity && this.nickname) {
+      if (this.identity) {
-        const chatIdentity = new ChatIdentity({
+        const publicKey = bufToHex(this.identity.publicKey);
-          clock: new Date().getTime(),
+        if (this.nickname) {
-          color: "",
+          const chatIdentity = new ChatIdentity({
-          description: "",
+            clock: new Date().getTime(),
-          emoji: "",
+            color: "",
-          images: {},
+            description: "",
-          ensName: "",
+            emoji: "",
-          displayName: this?.nickname ?? "",
+            images: {},
-        });
+            ensName: "",
-        const msg = await WakuMessage.fromBytes(
+            displayName: this?.nickname ?? "",
-          chatIdentity.encode(),
+          });
-          idToContactCodeTopic(bufToHex(this.identity.publicKey)),
+          const msg = await WakuMessage.fromBytes(
-          { sigPrivKey: this.identity.privateKey }
+            chatIdentity.encode(),
-        );
+            idToContactCodeTopic(publicKey),
-        await this.waku.relay.send(msg);
+            { sigPrivKey: this.identity.privateKey }
+          );
+          await this.waku.relay.send(msg);
+        } else {
+          await this.waku.store.queryHistory(
+            [idToContactCodeTopic(publicKey)],
+            {
+              callback: (msgs) =>
+                msgs.some((e) => {
+                  try {
+                    if (e.payload) {
+                      const chatIdentity = ChatIdentity.decode(e?.payload);
+                      if (chatIdentity) {
+                        if (chatIdentity?.displayName) {
+                          this.nickname = chatIdentity.displayName;
+                          this.callbackNickname(
+                            publicKey,
+                            chatIdentity.displayName
+                          );
+                        }
+                      }
+                      return true;
+                    }
+                  } catch {
+                    return false;
+                  }
+                }),
+              pageDirection: PageDirection.BACKWARD,
+            }
+          );
+        }
       }
     };
     sendNickname();