@arcblock/did-connect-react 3.3.10 → 3.4.1

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const o = "3.3.10", s = {
+const o = "3.4.1", s = {
   version: o
 };
 export {

package/lib/utils.js

@@ -6,7 +6,7 @@ import c from "js-cookie";
 import l from "lodash/isNil";
 import T from "lodash/isString";
 import m from "lodash/isUndefined";
-import { createAxios as P, BlockletSDK as x } from "@blocklet/js-sdk";
+import { createAxios as P, getBlockletSDK as x } from "@blocklet/js-sdk";
 import { withQuery as L } from "ufo";
 import { isValid as w, isFromPublicKey as S } from "@arcblock/did";
 import { getSafeUrl as C } from "@arcblock/ux/lib/Util/security";
@@ -137,7 +137,7 @@ async function be() {
       o.searchParams.delete(f);
       const t = JSON.parse(a.from(r, "base64").toString("utf-8"));
       if (T(t.forceConnected) && m(t.sourceAppPid)) {
-        const s = await new x().user.getUserPublicInfo({ did: t.forceConnected });
+        const s = await x().user.getUserPublicInfo({ did: t.forceConnected });
         m(s?.sourceAppPid) || (t.sourceAppPid = s.sourceAppPid);
       }
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.3.10",
+  "version": "3.4.1",
   "description": "Client side library to work with DID Connect by ArcBlock.",
   "keywords": [
     "react",
@@ -32,17 +32,17 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "3.3.10",
-    "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.10",
-    "@arcblock/react-hooks": "3.3.10",
-    "@arcblock/ws": "^1.27.16",
+    "@arcblock/bridge": "3.4.1",
+    "@arcblock/did": "^1.28.1",
+    "@arcblock/icons": "3.4.1",
+    "@arcblock/react-hooks": "3.4.1",
+    "@arcblock/ws": "^1.28.1",
     "@blocklet/constant": "^1.17.7",
     "@fontsource/lexend": "^5.2.9",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^5.2.1",
-    "@ocap/util": "^1.27.16",
+    "@ocap/util": "^1.28.1",
     "@simplewebauthn/browser": "^13.1.0",
     "ahooks": "^3.8.5",
     "axios": "^1.10.0",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "6c98492b766cb7f7486f3a81f3d4e4b0936af163"
+  "gitHead": "6101f8f54333c0c376437160147a0b15a1548111"
 }

package/src/Connect/assets/locale.js

@@ -71,6 +71,7 @@ export default {
     didConnectTitle: 'DID Connect',
     didConnectDescription: 'Decentralized identities and apps, W3C DID-based, future-ready.',
     noAuthenticationProvider: 'No authentication provider configured',
+    lastUsed: 'Last Used',
   },
   zh: {
     generateError: '二维码生成失败',
@@ -143,5 +144,6 @@ export default {
     didConnectTitle: 'DID Connect',
     didConnectDescription: '面向未来的基于 W3C DID 去中心化身份和应用',
     noAuthenticationProvider: '未配置任何身份验证提供者',
+    lastUsed: '上次使用',
   },
 };

package/src/Connect/components/login-item/connect-choose-list.jsx

@@ -48,7 +48,8 @@ export default function ConnectChooseList({
   const passkeyLoginRef = useRef(null);
   const { loginOAuth, logoutOAuth, t, oauthState } = useOAuth();
   const { passkeyState } = usePasskey();
-  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin } = useStateContext();
+  const { extraParams, locale, connectState, plugins, setPlugins, setSelectedPlugin, getPlugin, lastLoginMethod } =
+    useStateContext();
 
   const handleLoginOAuth = useMemoizedFn(async (item) => {
     localStorage.setItem(GA_LAST_LOGIN_METHOD, item.provider);
@@ -111,7 +112,7 @@ export default function ConnectChooseList({
     if (magicToken && showEmailLogin && plugins.some((plugin) => plugin.name === LOGIN_PROVIDER.EMAIL)) {
       const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
       if (plugin.state.status === 'idle') {
-        localStorage.setItem(GA_LAST_LOGIN_METHOD, 'email');
+        localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
         plugin.state.reset();
         plugin.state.magicToken = magicToken;
         connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
@@ -160,6 +161,8 @@ export default function ConnectChooseList({
           ]}>
           {showMobileLogin && (
             <MobileLoginItem
+              t={t}
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
               sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
@@ -167,7 +170,7 @@ export default function ConnectChooseList({
               tokenKey={tokenKey}
               disableSwitchApp={disableSwitchApp}
               onClick={async () => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
                 tokenState.reset();
                 await onReset();
                 tokenState.status = 'created';
@@ -181,13 +184,15 @@ export default function ConnectChooseList({
           )}
           {showWebLogin && (
             <WebLoginItem
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               ref={webLoginRef}
               tokenState={tokenState}
               webWalletUrl={webWalletUrl}
+              t={t}
               sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
               disableSwitchApp={disableSwitchApp}
               onClick={() => {
-                localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+                localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
                 // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
                 tokenState.status = 'scanned';
                 connectState.chooseMethod = 'wallet-web';
@@ -222,6 +227,8 @@ export default function ConnectChooseList({
               {showOAuthLogin
                 ? oauthProviderList.map((item) => (
                     <LoginMethodItem
+                      t={t}
+                      isLatest={lastLoginMethod && lastLoginMethod === item.provider}
                       key={item.provider}
                       title={LOGIN_PROVIDER_NAME[item.provider]}
                       icon={
@@ -254,7 +261,7 @@ export default function ConnectChooseList({
                   behavior={passkeyBehavior}
                   sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
                   onClick={() => {
-                    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'passkey');
+                    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
                     const connectFn = passkeyLoginRef.current.connect;
                     connectState.chooseMethod = 'passkey';
                     connectState.retryConnect = () => {

package/src/Connect/components/login-item/connect-provider-list.jsx

@@ -65,6 +65,7 @@ export default function ConnectProviderList({
     getPlugin,
     showWalletOptions,
     setShowWalletOptions,
+    lastLoginMethod,
   } = useStateContext();
 
   const t = useMemoizedFn((key, data = {}) => {
@@ -127,7 +128,7 @@ export default function ConnectProviderList({
   });
 
   const handleMobileLoginClick = useMemoizedFn(async () => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
     tokenState.reset();
     await onReset();
     tokenState.status = 'created';
@@ -139,7 +140,7 @@ export default function ConnectProviderList({
   });
 
   const handleWebLoginClick = useMemoizedFn(() => {
-    localStorage.setItem(GA_LAST_LOGIN_METHOD, 'wallet');
+    localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.WALLET);
     // HACK: 在点击插件登录时，直接将状态置为扫码中，避免插件登录时的状态切换
     tokenState.status = 'scanned';
     connectState.chooseMethod = 'wallet-web';
@@ -178,7 +179,7 @@ export default function ConnectProviderList({
     ) {
       const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
       if (plugin.state.status === 'idle') {
-        localStorage.setItem(GA_LAST_LOGIN_METHOD, 'email');
+        localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.EMAIL);
         plugin.state.reset();
         plugin.state.magicToken = magicToken;
         connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
@@ -215,6 +216,8 @@ export default function ConnectProviderList({
         if (browser.mobile.any && !showWalletOptions) {
           return (
             <MobileLoginItem
+              t={t}
+              isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
               key={LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
@@ -233,6 +236,8 @@ export default function ConnectProviderList({
           hideQRCode || (!hideQRCode && (isSameProtocol || extension) && (!browser.mobile.any || extension));
         return shouldShowWebLoginItem ? (
           <WebLoginItem
+            t={t}
+            isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.WALLET}
             key={LOGIN_PROVIDER.WALLET}
             ref={webLoginRef}
             tokenState={tokenState}
@@ -265,7 +270,7 @@ export default function ConnectProviderList({
             behavior={passkeyBehavior}
             sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
             onClick={() => {
-              localStorage.setItem(GA_LAST_LOGIN_METHOD, 'passkey');
+              localStorage.setItem(GA_LAST_LOGIN_METHOD, LOGIN_PROVIDER.PASSKEY);
               const connectFn = passkeyLoginRef.current.connect;
               connectState.chooseMethod = 'passkey';
               connectState.retryConnect = () => {
@@ -305,6 +310,8 @@ export default function ConnectProviderList({
       if (item.type === 'oauth') {
         return (
           <LoginMethodItem
+            t={t}
+            isLatest={lastLoginMethod && lastLoginMethod === item.provider}
             key={item.provider}
             title={LOGIN_PROVIDER_NAME[item.provider]}
             icon={

package/src/Connect/components/login-item/login-method-item.jsx

@@ -2,17 +2,20 @@ import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
 
 export default function LoginMethodItem({
+  isLatest = false,
   title,
   description = null,
   icon,
   iconScale = 0.95,
   slotProps = {},
   mode = 'normal',
+  t = noop,
   ...rest
 }) {
   const theme = useTheme();
@@ -23,13 +26,16 @@ export default function LoginMethodItem({
       className="arc-login-item"
       sx={mergeSx(
         {
+          position: 'relative',
           display: 'flex',
           alignItems: 'center',
           gap: 1,
           cursor: 'pointer',
           p: 1.2,
           borderRadius: 1,
-          backgroundColor: 'grey.50',
+          backgroundColor: isLatest ? 'grey.100' : 'grey.50',
+          border: isLatest ? '1px solid' : 'none',
+          borderColor: isLatest ? 'grey.100' : 'transparent',
           textDecoration: 'none',
           transition: 'background-color 0.5s',
           '&:hover, &:active, &.did-connect__choose-item__active': {
@@ -100,12 +106,21 @@ export default function LoginMethodItem({
               </Typography>
             ) : null}
           </Box>
-          <Icon
-            className="other-item-icon"
-            icon={ArrowRightAltRoundedIcon}
-            fontSize="1.3rem"
-            color={theme.palette.primary.main}
-          />
+          {isLatest ? (
+            <Typography
+              component="span"
+              className="latest-badge"
+              style={{ color: theme.palette.text.secondary, fontSize: 11 }}>
+              {t('lastUsed')}
+            </Typography>
+          ) : (
+            <Icon
+              className="other-item-icon"
+              icon={ArrowRightAltRoundedIcon}
+              fontSize="1.3rem"
+              color={theme.palette.primary.main}
+            />
+          )}
         </>
       ) : null}
     </Box>
@@ -119,4 +134,6 @@ LoginMethodItem.propTypes = {
   iconScale: PropTypes.number,
   slotProps: PropTypes.object,
   mode: PropTypes.oneOf(['mini', 'simple', 'normal']),
+  isLatest: PropTypes.bool,
+  t: PropTypes.func,
 };

package/src/Connect/components/login-item/passkey-login-item.jsx

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { useImperativeHandle, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 
 import PasskeyActions from '../../../Passkey/actions';
 import { getAppId } from '../../../utils';
 import { useStateContext } from '../../contexts/state';
 
 export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, behavior = 'none', ...rest }) {
-  const { extraParams } = useStateContext();
+  const { extraParams, lastLoginMethod } = useStateContext();
   const passkeyActionRef = useRef(null);
 
   const handleSuccess = useMemoizedFn((result) =>
@@ -36,6 +37,7 @@ export default function PasskeyLoginItem({ ref = null, onSuccess, tokenState, be
     <PasskeyActions
       {...rest}
       ref={passkeyActionRef}
+      isLatest={lastLoginMethod && lastLoginMethod === LOGIN_PROVIDER.PASSKEY}
       action={tokenState.action}
       behavior={behavior}
       onSuccess={handleSuccess}

package/src/Connect/components/login-item/wallet-login-options.jsx

@@ -24,7 +24,7 @@ export default function WalletLoginOptions({
   onWebLoginClick,
   onBack,
 }) {
-  const { locale } = useStateContext();
+  const { t, locale } = useStateContext();
   const browser = useBrowser();
   const isSameProtocol = checkSameProtocol(webWalletUrl);
   const extension = detectWalletExtension();
@@ -32,7 +32,6 @@ export default function WalletLoginOptions({
   const isTablet = useCreation(() => {
     return browser.mobile.tablet || (!browser.mobile.any && window?.navigator?.maxTouchPoints > 0);
   }, [browser.mobile.tablet, browser.mobile.any]);
-
   return (
     <>
       {qrcode}
@@ -67,6 +66,7 @@ export default function WalletLoginOptions({
           }}>
           {isTablet ? (
             <MobileLoginItem
+              t={t}
               key={LOGIN_PROVIDER.WALLET}
               ref={walletLoginRef}
               tokenState={tokenState}
@@ -82,6 +82,7 @@ export default function WalletLoginOptions({
             <>
               {(isSameProtocol || extension) && (!browser.mobile.any || extension) ? (
                 <WebLoginItem
+                  t={t}
                   key={LOGIN_PROVIDER.WALLET}
                   ref={webLoginRef}
                   tokenState={tokenState}