From 4d8661e97ab7daa71422ae983aae9f7527378f3e Mon Sep 17 00:00:00 2001 From: Karl Date: Tue, 26 Nov 2024 12:06:30 +0100 Subject: [PATCH] add cached login --- packages/js-sdk/src/Dm3Sdk.ts | 34 +++++++++- .../src/composables/chat.ts | 62 +++++++------------ packages/messenger-vue-demo/vite.config.ts | 3 +- 3 files changed, 56 insertions(+), 43 deletions(-) diff --git a/packages/js-sdk/src/Dm3Sdk.ts b/packages/js-sdk/src/Dm3Sdk.ts index 30cfe975a..957c91194 100644 --- a/packages/js-sdk/src/Dm3Sdk.ts +++ b/packages/js-sdk/src/Dm3Sdk.ts @@ -63,7 +63,7 @@ export class Dm3Sdk { /** * DM3 STORAGE */ - private storageApi?: StorageAPI; + public storageApi?: StorageAPI; /** * DM3 CONVERSATIONS @@ -160,8 +160,36 @@ export class Dm3Sdk { return new Dm3(conversations, tld); } - //TODO use type of injected lukso provider - public async universalProfileLogin(lukso: any) { + /** + * Convenience method to login with a cached provider. + * DO NOT USE IN PRODUCTION since it stores the keys in the local storage! + * @param lukso + * @returns + */ + public async universalProfileLoginWithCache(requestProvider: () => Promise) { + const cachedCredentials = localStorage.getItem('credentials'); + + if (cachedCredentials) { + const credentials = JSON.parse(cachedCredentials); + return this.login(credentials); + } + + const lukso = await requestProvider(); + if (!lukso) { + throw new Error('Lukso provider not found'); + } + const lc = await LuksoConnector._instance( + lukso, + this.nonce, + this.defaultDeliveryService, + ); + + const loginResult = await lc.login(); + localStorage.setItem('credentials', JSON.stringify(loginResult)); + return this.login(loginResult as Success); + } + + public async universalProfileLogin(lukso: ethers.providers.ExternalProvider) { if (!lukso) { throw new Error('Lukso provider not found'); } diff --git a/packages/messenger-vue-demo/src/composables/chat.ts b/packages/messenger-vue-demo/src/composables/chat.ts index 20491409a..527806a63 100644 --- a/packages/messenger-vue-demo/src/composables/chat.ts +++ b/packages/messenger-vue-demo/src/composables/chat.ts @@ -1,10 +1,6 @@ import { computed, ref, markRaw, type Ref } from 'vue'; -// import { sha256, stringify } from '@dm3-org/dm3-lib-shared'; import { Dm3, Dm3Sdk, type Dm3SdkConfig } from '@dm3-org/dm3-js-sdk'; -import { JsonRpcProvider } from '@ethersproject/providers'; import {ethers} from 'ethers'; -// import type { Dm3 } from '@dm3-org/dm3-js-sdk/lib/esm/Dm3'; -// import { DM3 } from '@dm3-org/dm3-messenger-widget'; const sepoliaProvider = new ethers.providers.JsonRpcProvider("https://eth-sepolia.g.alchemy.com/v2/cBTHRhVcZ3Vt4BOFpA_Hi5DcTB1KQQV1", { name: 'sepolia', @@ -20,23 +16,11 @@ const configLukso: Dm3SdkConfig = { userEnsSubdomain: ".testing-user.dm3.eth", resolverBackendUrl: "https://testing.dm3.network/resolver-handler", backendUrl: "https://testing.dm3.network/api", - // storageApi: { - // getConversations: () => Promise.resolve([]), - // getMessages: () => Promise.resolve([]), - // getHaltedMessages: () => Promise.resolve([]), - // clearHaltedMessages: () => Promise.resolve(), - // addMessageBatch: () => Promise.resolve(''), - // addConversation: () => Promise.resolve(), - // getNumberOfMessages: () => Promise.resolve(0), - // getNumberOfConverations: () => Promise.resolve(0), - // editMessageBatch: () => Promise.resolve(), - // addMessage: () => Promise.resolve(''), - // toggleHideConversation: () => Promise.resolve(), - // }, }; const sdk = new Dm3Sdk(configLukso); +// TODO: check for installed extension // https://docs.lukso.tech/install-up-browser-extension/ type UseDm3ChatReturnType = { @@ -47,42 +31,42 @@ type UseDm3ChatReturnType = { isReady: Ref; }; +const requestProvider = (): Promise => { + return new Promise((resolve) => { + window.addEventListener("eip6963:announceProvider", (event) => { + const provider = (event as any).detail.provider; + console.log('Provider:', provider); + resolve(provider); + }); + + // Request installed providers + window.dispatchEvent(new Event("eip6963:requestProvider")); + }); +}; + export function useDm3Chat(): UseDm3ChatReturnType { const dm3Instance = ref(null); const isReady = ref(false); const init = async () => { - console.log('dm3Instance', dm3Instance.value); - - // Listen for provider announcements - window.addEventListener("eip6963:announceProvider", async (event) => { - const dm3 = await sdk.universalProfileLogin((event as any).detail.provider); - // mark as raw to avoid reactivity issues with vue - // see: https://github.com/vuejs/core/issues/3024 - dm3Instance.value = markRaw(dm3); - console.log('dm3Instance', dm3Instance.value); - isReady.value = true; - }); - - // Request installed providers - window.dispatchEvent(new Event("eip6963:requestProvider")); + const dm3 = await sdk.universalProfileLoginWithCache(requestProvider); + dm3Instance.value = markRaw(dm3); + isReady.value = true; }; - // init(); const rooms = computed(() => { console.log('dm3Instance.value?.conversations list', dm3Instance.value?.conversations.list); - return dm3Instance.value?.conversations?.list; + return dm3Instance.value?.conversations?.list }); const messages = computed(() => rooms.value?.at(0)); const startTestConversation = async () => { - console.log('dm3Instance', dm3Instance.value); - console.log('dm3Instance.value?.conversations', dm3Instance.value?.conversations); + if (!dm3Instance) { + console.error('dm3Instance is not initialized'); + return; + } + const conv = await dm3Instance.value?.conversations?.addConversation('alice.eth'); - console.log('conv', conv); - console.log('conv?.messages', conv?.messages.meta); - console.log('conv?.contact', conv?.contact); await conv?.messages.sendMessage('Hello, world!'); - console.log('messages', messages.value); } return { rooms, messages, isReady, init, startTestConversation }; diff --git a/packages/messenger-vue-demo/vite.config.ts b/packages/messenger-vue-demo/vite.config.ts index 0c4da19ff..5f6d2e7c8 100644 --- a/packages/messenger-vue-demo/vite.config.ts +++ b/packages/messenger-vue-demo/vite.config.ts @@ -33,7 +33,8 @@ export default defineConfig({ include: [/node_modules/, /@dm3-org\/dm3-js-sdk/, /@dm3-org\/dm3-lib-crypto/, - /dm3-org\/dm3-lib-profile/ + /dm3-org\/dm3-lib-profile/, + /@dm3-org\/dm3-lib-storage/, ], }, },