feat: listen zkid wallet did changed event and switch login did

release-as: 0.11.0

packages/app/src/DidInfo/MultiDids.tsx

@@ -26,13 +26,12 @@ import { didManager } from '@credential/react-dids/instance';
 import { useCopyClipboard } from '@credential/react-hooks';
 
 function DidCell({ active, did, onClose }: { active?: boolean; did: Did; onClose: () => void }) {
-  const { switchDid } = useContext(DidsContext);
   const [isCopy, copy] = useCopyClipboard();
 
   const handleClick = useCallback(() => {
-    switchDid(did);
+    didManager.setCurrent(did);
     onClose();
-  }, [did, onClose, switchDid]);
+  }, [did, onClose]);
 
   const handleCopy = useCallback(() => {
     copy(did.id);
@@ -101,7 +100,7 @@ function DidCell({ active, did, onClose }: { active?: boolean; did: Did; onClose
 
 function MultiDids({ onClose }: { onClose: () => void }) {
   const location = useLocation();
-  const { all, did, switchDid } = useContext(DidsContext);
+  const { all, did } = useContext(DidsContext);
   const navigate = useNavigate();
 
   const localDids = useMemo(() => all.filter((did) => !isLoginDid(did)), [all]);
@@ -145,7 +144,7 @@ function MultiDids({ onClose }: { onClose: () => void }) {
           {loginDid ? (
             <DidCell active={loginDid === did} did={loginDid} key={loginDid.id} onClose={onClose} />
           ) : (
-            <ButtonWallet fullWidth onDone={switchDid} variant="contained" />
+            <ButtonWallet fullWidth variant="contained" />
           )}
           {localDids.map((item) => (
             <DidCell active={item === did} did={item} key={item.id} onClose={onClose} />

packages/page-ctype/src/create/SubmitCType.tsx

@@ -5,7 +5,7 @@ import type { BaseCType, CType, CTypeSchema } from '@zcloak/ctype/types';
 
 import React, { useContext, useMemo, useState } from 'react';
 
-import { Button } from '@credential/react-components';
+import { Button, Recaptcha } from '@credential/react-components';
 import { DidsContext, DidsModal } from '@credential/react-dids';
 import { addCtype, signCType, Steps } from '@credential/react-dids/steps';
 import { useToggle } from '@credential/react-hooks';
@@ -19,6 +19,7 @@ const SubmitCType: React.FC<{
   const { did: publisher } = useContext(DidsContext);
   const [open, toggleOpen] = useToggle();
   const [ctype, setCType] = useState<CType>();
+  const [recaptchaToken, setRecaptchaToken] = useState<string>();
 
   const base: BaseCType | null = useMemo(
     () =>
@@ -53,7 +54,9 @@ const SubmitCType: React.FC<{
               },
               {
                 label: 'Upload ctype',
-                exec: () => addCtype(ctype)
+                paused: true,
+                content: <Recaptcha onCallback={setRecaptchaToken} />,
+                exec: () => addCtype(ctype, recaptchaToken)
               }
             ]}
             submitText="Submit ctype"

packages/react-dids/src/DidsProvider.tsx

@@ -37,18 +37,27 @@ function DidsProvider({ children, didRole }: { didRole: DidRole; children: React
   );
 
   useEffect(() => {
-    const didChange = () => {
+    const didListChanged = () => {
       const all = didManager.all();
 
       setAll(all);
     };
 
-    didManager.on('add', didChange);
-    didManager.on('remove', didChange);
+    const didChanged = () => {
+      const did = didManager.current;
+
+      setDid(did);
+      did && setIsLocked(getIsLocked(did));
+    };
+
+    didManager.on('add', didListChanged);
+    didManager.on('remove', didListChanged);
+    didManager.on('changed', didChanged);
 
     return () => {
-      didManager.off('add', didChange);
-      didManager.off('remove', didChange);
+      didManager.off('add', didListChanged);
+      didManager.off('remove', didListChanged);
+      didManager.off('changed', didChanged);
     };
   }, []);
 
@@ -75,21 +84,14 @@ function DidsProvider({ children, didRole }: { didRole: DidRole; children: React
     }
   }, [did, isLocked]);
 
-  const switchDid = useCallback((did: Did) => {
-    didManager.setCurrent(did);
-    setDid(did);
-    setIsLocked(getIsLocked(did));
-  }, []);
-
   return did ? (
     <DidsContext.Provider
       value={{
         didRole,
         all,
         did,
         isLocked,
-        lock,
-        switchDid
+        lock
       }}
     >
       {isLocked ? <UnlockModal did={did} onUnlock={unUnlock} open /> : children}

packages/react-dids/src/instance/DidManager.ts

@@ -48,6 +48,7 @@ export class DidManager extends ZkDid {
     localStorage.setItem(STORAGE_KEY, value.id);
     this._current = value;
     this._db = new DidDB(value.id);
+    this.emit('changed', value);
   }
 
   public loadCurrent(): void {
@@ -76,6 +77,20 @@ export class DidManager extends ZkDid {
     }
   }
 
+  // only support unique login did
+  public reloadLoginDid(loginDid: LoginDid): void {
+    this.dids.forEach((did, key) => {
+      if (isLoginDid(did)) {
+        this.remove(key);
+
+        if (key === this._current?.id) {
+          this.setCurrent(loginDid);
+        }
+      }
+    });
+    this.addDid(loginDid);
+  }
+
   public async loadLoginDid(provider: ZkidWalletProvider): Promise<void> {
     try {
       if (await provider.isAuth()) {

packages/react-dids/src/instance/DidResolver.ts

@@ -58,7 +58,7 @@ export class CredentialDidResolver extends ArweaveDidResolver {
     }
   }
 
-  async submitAttesterCtype(ctype: CType, reCAPTCHA?: string) {
+  async submitAttesterCtype(ctype: CType, reCAPTCHA?: string | null) {
     const res = await post(`${this.server}/ctype`, { ...ctype, reCAPTCHA });
 
     if (res?.code !== 200) {

packages/react-dids/src/instance/instance.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Keyring } from '@zcloak/keyring';
+import { LoginDid } from '@zcloak/login-did';
 import { ZkidWalletProvider } from '@zcloak/login-providers';
 
 import { DID_SERVICE } from '@credential/app-config/endpoints';
@@ -17,6 +18,24 @@ export let didManager: DidManager;
 
 export let provider: ZkidWalletProvider | undefined;
 
+async function initProvider() {
+  if (await ZkidWalletProvider.isInstalled()) {
+    const _provider = new ZkidWalletProvider();
+
+    provider = _provider;
+
+    _provider.on('did_changed', async () => {
+      const isAuth = await _provider.isAuth();
+
+      if (isAuth) {
+        didManager.reloadLoginDid(await LoginDid.fromProvider(_provider));
+      }
+    });
+
+    await didManager.loadLoginDid(_provider);
+  }
+}
+
 export async function initInstance(): Promise<void> {
   keyring = new Keyring();
   resolver = new CredentialDidResolver(DID_SERVICE);
@@ -26,11 +45,7 @@ export async function initInstance(): Promise<void> {
 
   await ZkidWalletProvider.isReady();
 
-  if (await ZkidWalletProvider.isInstalled()) {
-    provider = new ZkidWalletProvider();
-
-    await didManager.loadLoginDid(provider);
-  }
+  await initProvider();
 
   didManager.loadCurrent();
 }

packages/react-dids/src/steps/AddCTypeStep.ts

@@ -9,10 +9,13 @@ import { putCacheCType, putCType } from '@credential/app-store';
 
 import { resolver } from '../instance';
 
-export async function addCtype(ctype?: CType | null): Promise<void> {
+export async function addCtype(
+  ctype?: CType | null,
+  reCaptchaToken?: string | null
+): Promise<void> {
   assert(ctype, 'No ctype found');
 
-  await resolver.submitAttesterCtype(ctype);
+  await resolver.submitAttesterCtype(ctype, reCaptchaToken);
   await putCType(ctype);
   await putCacheCType(ctype);
 }

packages/react-dids/src/types.ts

@@ -16,7 +16,6 @@ export interface DidsState {
   didRole: DidRole;
   isLocked: boolean;
   lock: () => void;
-  switchDid: (did: Did) => void;
 }
 
 type DidKeys$JsonVersion = '1';