@arcblock/did-connect-react 3.1.28 → 3.1.31

package/src/Session/index.jsx

@@ -28,8 +28,9 @@ import bridge from '@arcblock/bridge';
 import { getFederatedEnabled } from '@arcblock/ux/lib/Util/federated';
 import noop from 'lodash/noop';
 import isNil from 'lodash/isNil';
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import createStorage from '../Storage';
 import {
   getAppId,
@@ -68,6 +69,14 @@ import { getWalletDid } from '../User/use-did';
 import useDIDSpacesGuide from './did-spaces-guide';
 import { FederatedProvider, useFederatedContext } from '../Federated';
 import useVerify from './hooks/use-verify';
+import {
+  gaBindWalletFailedHandler,
+  gaBindWalletSuccessHandler,
+  gaLoginFailedHandler,
+  gaLoginSuccessHandler,
+  gaSwitchPassportFailedHandler,
+  gaSwitchPassportSuccessHandler,
+} from './handler';
 
 export * from './libs';
 
@@ -261,6 +270,24 @@ function createSessionContext(
     });
 
     const events = useCreation(() => new EventEmitter(), []);
+    // Register event listeners with cleanup to prevent memory leaks
+    useEffect(() => {
+      events.on(EVENTS.LOGIN, gaLoginSuccessHandler);
+      events.on(EVENTS.LOGIN_FAILED, gaLoginFailedHandler);
+      events.on(EVENTS.SWITCH_PASSPORT, gaSwitchPassportSuccessHandler);
+      events.on(EVENTS.SWITCH_PASSPORT_FAILED, gaSwitchPassportFailedHandler);
+      events.on(EVENTS.BIND_WALLET, gaBindWalletSuccessHandler);
+      events.on(EVENTS.BIND_WALLET_FAILED, gaBindWalletFailedHandler);
+      return () => {
+        events.off(EVENTS.LOGIN, gaLoginSuccessHandler);
+        events.off(EVENTS.LOGIN_FAILED, gaLoginFailedHandler);
+        events.off(EVENTS.SWITCH_PASSPORT, gaSwitchPassportSuccessHandler);
+        events.off(EVENTS.SWITCH_PASSPORT_FAILED, gaSwitchPassportFailedHandler);
+        events.off(EVENTS.BIND_WALLET, gaBindWalletSuccessHandler);
+        events.off(EVENTS.BIND_WALLET_FAILED, gaBindWalletFailedHandler);
+      };
+    }, [events]);
+
     /**
      * 用于包装 did-connect 的 open 和 close 事件，添加一些默认的行为
      * 1. 在 open 中添加的事件订阅，did-connect close 时需要取消订阅
@@ -554,6 +581,10 @@ function createSessionContext(
       state.loading = false;
       events.emit('logout');
 
+      ReactGA.set({
+        user_id: undefined,
+      });
+
       if (typeof done === 'function') {
         done();
       }
@@ -623,12 +654,17 @@ function createSessionContext(
           );
           wrapOnceEmit('switch-did', done);
           handleLoginResult({ ...result, encrypted: false });
-          handleRefreshUser({ showProgress: true }).then(async () => {
-            await sleep(200);
-            events.emit(EVENTS.LOGIN, result, decrypt, session.current);
-            notifyBridge(session.current);
-            await connectToDidSpaceForFullAccess();
-          });
+          handleRefreshUser({ showProgress: true })
+            .then(async () => {
+              await sleep(200);
+              events.emit(EVENTS.LOGIN, result, decrypt, session.current);
+              notifyBridge(session.current);
+              await connectToDidSpaceForFullAccess();
+            })
+            .catch((error) => {
+              events.emit(EVENTS.LOGIN_FAILED, error);
+              throw error;
+            });
         });
       } else {
         if (isUndefined(extraParams?.forceConnected)) {
@@ -802,6 +838,10 @@ function createSessionContext(
       }
     });
 
+    const onSwitchPassportFailed = useMemoizedFn((error) => {
+      events.emit(EVENTS.SWITCH_PASSPORT_FAILED, error);
+    });
+
     const onLogin = useMemoizedFn(async (result) => {
       if (state.action === 'switch-passport') {
         onSwitchPassport(result);
@@ -823,6 +863,10 @@ function createSessionContext(
       }
     });
 
+    const onLoginFailed = useMemoizedFn((error) => {
+      events.emit(EVENTS.LOGIN_FAILED, error);
+    });
+
     const onBindWallet = useMemoizedFn((result) => {
       pageState.extraParams = {};
       pageState.options = {};
@@ -839,6 +883,10 @@ function createSessionContext(
       // NOTICE: auth0 绑定 wallet 在新的版本中，不会再要求切换 login_token，这里的处理是为了兼容有无 sessionToken 的两种情况，都可以顺利完成当前绑定操作
     });
 
+    const onBindWalletFailed = useMemoizedFn((error) => {
+      events.emit(EVENTS.BIND_WALLET_FAILED, error, session);
+    });
+
     const onSwitchProfile = useMemoizedFn((result) => {
       debug('onSwitchProfile', { result });
       pageState.extraParams = {};
@@ -888,9 +936,14 @@ function createSessionContext(
           args,
           err,
         });
+        callbacks[`${action}-failed`]?.(err, ...args);
       }
     });
 
+    const onError = useMemoizedFn((action, err, ...args) => {
+      callbacks[`${action}-failed`]?.(err, ...args);
+    });
+
     const {
       federatedMaster,
       federatedEnabled,
@@ -1011,7 +1064,8 @@ function createSessionContext(
           onClose(state.action, ...args);
         },
         onError(err) {
-          console.error(err);
+          console.error(state.action, err);
+          onError(state.action, err, session.current);
         },
       };
       state.open = true;
@@ -1148,12 +1202,17 @@ function createSessionContext(
                     true
                   );
                   handleLoginResult({ ...result, encrypted: false });
-                  handleRefreshUser({ showProgress: true }).then(async () => {
-                    await sleep(200);
-                    events.emit(EVENTS.LOGIN, result, decrypt, session.current);
-                    notifyBridge(session.current);
-                    await connectToDidSpaceForFullAccess();
-                  });
+                  handleRefreshUser({ showProgress: true })
+                    .then(async () => {
+                      await sleep(200);
+                      events.emit(EVENTS.LOGIN, result, decrypt, session.current);
+                      notifyBridge(session.current);
+                      await connectToDidSpaceForFullAccess();
+                    })
+                    .catch((error) => {
+                      events.emit(EVENTS.LOGIN_FAILED, error);
+                      throw error;
+                    });
                 });
                 close();
                 return;
@@ -1253,7 +1312,7 @@ function createSessionContext(
             resolve();
           },
           onError(err) {
-            console.error(err);
+            events.emit(EVENTS.LOGIN_FAILED, err);
             reject(err);
           },
         });
@@ -1293,22 +1352,27 @@ function createSessionContext(
       WrapDid,
       getUserSessions,
       async loginUserSession(userSessionItem) {
-        const loginResult = await loginUserSession(userSessionItem);
-        updateConnectedInfo(
-          {
-            connected_did: userSessionItem.user.did,
-            connected_pk: userSessionItem.user.pk,
-            connected_wallet_os: userSessionItem.extra.walletOS,
-            connected_app: getAppId(),
-          },
-          true
-        );
-        handleLoginResult({ ...loginResult, encrypted: false });
-        await handleRefreshUser({ showProgress: true });
-        await sleep(200);
-        events.emit(EVENTS.LOGIN, loginResult, decrypt, session.current);
-        notifyBridge(session.current);
-        await connectToDidSpaceForFullAccess();
+        try {
+          const loginResult = await loginUserSession(userSessionItem);
+          updateConnectedInfo(
+            {
+              connected_did: userSessionItem.user.did,
+              connected_pk: userSessionItem.user.pk,
+              connected_wallet_os: userSessionItem.extra.walletOS,
+              connected_app: getAppId(),
+            },
+            true
+          );
+          handleLoginResult({ ...loginResult, encrypted: false });
+          await handleRefreshUser({ showProgress: true });
+          await sleep(200);
+          events.emit(EVENTS.LOGIN, loginResult, decrypt, session.current);
+          notifyBridge(session.current);
+          await connectToDidSpaceForFullAccess();
+        } catch (err) {
+          events.emit(EVENTS.LOGIN_FAILED, err);
+          throw err;
+        }
       },
       unReadCount,
       setUnReadCount,
@@ -1332,7 +1396,10 @@ function createSessionContext(
       login: onLogin,
       'switch-profile': onSwitchProfile,
       'switch-passport': onSwitchPassport,
+      'switch-passport-failed': onSwitchPassportFailed,
       'bind-wallet': onBindWallet,
+      'bind-wallet-failed': onBindWalletFailed,
+      'login-failed': onLoginFailed,
     };
 
     // user change 事件
@@ -1455,6 +1522,9 @@ function createSessionContext(
                 state.initialized = true;
                 return;
               }
+            } catch (err) {
+              events.emit(EVENTS.LOGIN_FAILED, err);
+              throw err;
             } finally {
               state.loading = false;
             }
@@ -1540,6 +1610,7 @@ function createSessionContext(
               });
             }
           } catch (err) {
+            events.emit(EVENTS.LOGIN_FAILED, err);
             logger.error('Failed to autoLogin ArcSphere', err);
           }
         }
@@ -1561,6 +1632,7 @@ function createSessionContext(
       onBindOAuth: () => handleRefreshUser(),
       onAddPasskey: () => handleRefreshUser(),
       onRemovePasskey: () => handleRefreshUser(),
+      session: session.current,
     };
 
     return (

package/src/Session/libs/constants.js

@@ -2,13 +2,16 @@
 
 export const EVENTS = {
   LOGIN: Symbol('login'),
+  LOGIN_FAILED: Symbol('loginFailed'),
   CANCEL_LOGIN: Symbol('cancelLogin'),
   LOGOUT: Symbol('logout'),
   SWITCH_PROFILE: Symbol('switchProfile'),
   CANCEL_SWITCH_PROFILE: Symbol('cancelSwitchProfile'),
   SWITCH_PASSPORT: Symbol('switchPassport'),
+  SWITCH_PASSPORT_FAILED: Symbol('switchPassportFailed'),
   CANCEL_SWITCH_PASSPORT: Symbol('cancelSwitchPassport'),
   BIND_WALLET: Symbol('bindWallet'),
+  BIND_WALLET_FAILED: Symbol('bindWalletFailed'),
   CANCEL_BIND_WALLET: Symbol('cancelBindWallet'),
   DID_SPACE_CONNECTED: Symbol('didSpaceConnected'),
 };

package/src/components/PassportSwitcher.jsx

@@ -0,0 +1,160 @@
+/* eslint-disable react/prop-types */
+import pick from 'lodash/pick';
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { Box } from '@mui/material';
+import Toast from '@arcblock/ux/lib/Toast';
+import CardSelector from '@arcblock/ux/lib/CardSelector';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { createPassportSvg } from '@arcblock/ux/lib/Util/passport';
+
+// eslint-disable-next-line import/no-unresolved
+import { ReactGA } from '@arcblock/ux/lib/withTracker';
+// eslint-disable-next-line import/no-unresolved
+import Guest from '../OAuth/guest.svg?react';
+
+export const parseResponse = (data) => {
+  if (!data) {
+    return {};
+  }
+
+  // for backward compatibility
+  if (typeof data === 'string') {
+    return { sessionToken: data };
+  }
+
+  return pick(data, ['sessionToken', 'refreshToken', 'visitorId', 'destroySessionId']);
+};
+
+const translations = {
+  zh: {
+    switchPassport: '切换通行证',
+    switchPassportFailed: '切换通行证失败',
+    switchPassportSucceed: '切换通行证成功',
+    selectedPassport: '请选择一个通行证',
+    switch: '切换',
+    cancel: '取消',
+    currentRole: '当前角色：',
+    passport: '通行证',
+    getPassportFailed: '获取通行证失败',
+  },
+  en: {
+    switchPassport: 'Switch passport',
+    switchPassportFailed: 'Switch passport failed',
+    switchPassportSucceed: 'Switch passport succeed',
+    selectedPassport: 'Select a passport to switch',
+    switch: 'Switch',
+    cancel: 'Cancel',
+    currentRole: 'Current role: ',
+    passport: 'Passport',
+    getPassportFailed: 'Get passports failed',
+  },
+};
+
+export function PassportSwitcher({ api, locale, switchState, onSwitchPassport, session }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const visiblePassports = useCreation(() => {
+    return switchState.passports.filter((x) => x.role !== switchState.currentUser?.role);
+  }, [switchState.passports, switchState.currentUser?.role]);
+
+  const onSwitch = async () => {
+    const passportId = switchState.selectedPassport;
+    const fromRole = session?.user?.role;
+    const toRole = session?.user?.passports?.find((x) => x.id === passportId)?.role ?? 'guest';
+    const change = `${fromRole} -> ${toRole}`;
+    try {
+      const { data } = await api.post('/switch', { passportId });
+      const { sessionToken, refreshToken } = parseResponse(data);
+      onSwitchPassport({ sessionToken, refreshToken });
+      Toast.success(t('switchPassportSucceed'));
+
+      /**
+       * @type {import('@arcblock/ux/lib/withTracker/action/switch-passport').SwitchPassportSuccessEvent}
+       */
+      const switchPassportSuccessEvent = {
+        action: 'switchPassportSuccess',
+        change,
+        success: true,
+      };
+      ReactGA.event(switchPassportSuccessEvent.action, switchPassportSuccessEvent);
+    } catch (err) {
+      const errorMessage = err.message || t('switchPassportFailed');
+      /**
+       * @type {import('@arcblock/ux/lib/withTracker/action/switch-passport').SwitchPassportFailedEvent}
+       */
+      const switchPassportFailedEvent = {
+        action: 'switchPassportFailed',
+        success: false,
+        change,
+        errorMessage,
+      };
+      ReactGA.event(switchPassportFailedEvent.action, switchPassportFailedEvent);
+      Toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <Confirm
+      open={switchState.open}
+      title={t('switchPassport')}
+      onConfirm={onSwitch}
+      onCancel={switchState.reset}
+      confirmButton={{
+        text: t('switch'),
+        props: {
+          variant: 'contained',
+          color: 'primary',
+        },
+      }}
+      cancelButton={{
+        text: t('cancel'),
+        props: {
+          color: 'inherit',
+        },
+      }}
+      PaperProps={{ style: { width: 600 } }}>
+      <Box
+        sx={{
+          mb: 2,
+        }}>
+        {t('currentRole')}
+        {switchState.currentUser?.role}
+      </Box>
+      <CardSelector
+        width={160}
+        height={240}
+        cardSpace={24}
+        list={[
+          // eslint-disable-next-line react/no-unstable-nested-components
+          () => <Guest />,
+          ...visiblePassports.map((x) => {
+            if (x.display) {
+              return {
+                src: x.display,
+                name: x.title,
+              };
+            }
+
+            // eslint-disable-next-line react/no-unstable-nested-components, react/function-component-definition
+            return () => (
+              <Box
+                key={x.id}
+                sx={{ width: '100%' }}
+                dangerouslySetInnerHTML={{
+                  __html: createPassportSvg(x),
+                }}
+              />
+            );
+          }),
+        ]}
+        onSelect={(index) => {
+          switchState.selectedPassport = index > 0 ? visiblePassports[index - 1].id : undefined;
+        }}
+        defaultIndex={0}
+      />
+    </Confirm>
+  );
+}