@arcblock/did-connect-react 3.3.9 → 3.4.0

package/src/Connect/connect.jsx

@@ -0,0 +1,616 @@
+import { use, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Divider, Skeleton } from '@mui/material';
+import {
+  useCreation,
+  useDebounceFn,
+  useMemoizedFn,
+  useMount,
+  usePrevious,
+  useSize,
+  useUpdate,
+  useUpdateEffect,
+} from 'ahooks';
+import noop from 'lodash/noop';
+import isUndefined from 'lodash/isUndefined';
+
+import CloseButton from '@arcblock/ux/lib/CloseButton';
+import {
+  LOGIN_PROVIDER,
+  LOGIN_PROVIDER_NAME,
+  OAUTH_PROVIDER,
+  DID_CONNECT_MEDIUM_WIDTH,
+  DID_CONNECT_SMALL_WIDTH,
+} from '@arcblock/ux/lib/Util/constant';
+import QRCode from '@arcblock/ux/lib/QRCode';
+import { DIDConnectFooter } from '@arcblock/ux/lib/DIDConnect';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
+
+import '@fontsource/lexend/400.css';
+import '@fontsource/lexend/600.css';
+
+import { SessionContext } from '../Session/context';
+import { StateProvider, useStateContext } from './contexts/state';
+import ConnectProviderList from './components/login-item/connect-provider-list';
+import AutoHeight from './components/auto-height';
+import useToken from './hooks/token';
+import { useOAuth } from '../OAuth';
+import ConnectStatus from './components/connect-status';
+import { usePasskey } from '../Passkey/context';
+import { API_DID_PREFIX, DEFAULT_TIMEOUT, BUSY_STATUS, CHECK_STATUS_INTERVAL } from '../constant';
+import { getWebWalletUrl } from '../utils';
+import DIDConnectTitle from './components/did-connect-title';
+import DownloadTips from './components/download-tips';
+import useProviderList from './hooks/provider-list';
+import useAuthUrl from './hooks/auth-url';
+import { getWalletDid } from '../User/use-did';
+import FallbackConnect from './fallback-connect';
+
+function Connect({
+  hideCloseButton = false,
+  mode = 'dialog',
+  action,
+  baseUrl = '',
+  checkFn,
+  checkInterval = CHECK_STATUS_INTERVAL,
+  checkTimeout = DEFAULT_TIMEOUT * 1000,
+  prefix = API_DID_PREFIX,
+  tokenKey = '_t_',
+  locale = 'en',
+  encKey = '_ek_',
+  autoConnect = true,
+  forceConnected = true,
+  saveConnect = true,
+  useSocket = true,
+  allowWallet = true,
+  provider = '',
+  messages = {},
+  passkeyBehavior = 'none',
+  webWalletUrl = getWebWalletUrl(),
+  enabledConnectTypes = ['web', 'mobile', ...Object.keys(OAUTH_PROVIDER)],
+  extraContent = null,
+  disableSwitchApp = false,
+  magicToken = undefined,
+  customItems = [],
+  onClose = noop,
+  onError = noop,
+  onSuccess = noop,
+  onRecreateSession = noop,
+  setColor = noop,
+}) {
+  const theme = useTheme();
+  const forceUpdate = useUpdate();
+  const sessionCtx = use(SessionContext);
+  const currentUserDid = getWalletDid(sessionCtx?.session?.user);
+
+  const {
+    t,
+    staticState,
+    connectState,
+    extraParams,
+    currentAppInfo,
+    currentAppColor,
+    // 插件相关
+    selectedPlugin,
+    blocklet,
+    masterBlocklet,
+    showWalletOptions,
+    setShowWalletOptions,
+  } = useStateContext();
+  const { state, generate, cancelWhenScanned } = useToken({
+    action,
+    baseUrl,
+    checkFn,
+    checkInterval,
+    checkTimeout,
+    extraParams,
+    prefix,
+    onError,
+    onSuccess,
+    locale,
+    tokenKey,
+    encKey,
+    autoConnect,
+    forceConnected: forceConnected === true ? currentUserDid || true : forceConnected,
+    saveConnect,
+    useSocket,
+    allowWallet,
+    provider,
+  });
+  const refreshingToken = useRef(false);
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+  const isSmallView = useCreation(() => {
+    if (size) {
+      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+    }
+    return true;
+  }, [size, size?.width]);
+
+  const [isInitSmallView, setIsInitSmallView] = useState(false);
+
+  useMount(() => {
+    setIsInitSmallView(size?.width < DID_CONNECT_MEDIUM_WIDTH - 50);
+  });
+
+  const { oauthState, setBaseUrl } = useOAuth();
+  const { passkeyState, setTargetAppPid } = usePasskey();
+
+  useMount(() => {
+    setBaseUrl(baseUrl);
+    setTargetAppPid(blocklet?.appPid);
+    // 每次打开 did-connect，都重置状态
+    state.reset();
+    oauthState.reset();
+    passkeyState.reset();
+  });
+
+  useEffect(() => {
+    setColor(currentAppColor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentAppColor]);
+
+  const statusMessages = useCreation(() => {
+    return {
+      confirm: messages.confirm,
+      success: messages.success,
+      error: selectedPlugin?.state?.error || state.error || passkeyState.error || oauthState.error || '',
+    };
+  }, [
+    messages.confirm,
+    messages.success,
+    state.error,
+    oauthState.error,
+    passkeyState.error,
+    selectedPlugin?.state?.error,
+  ]);
+
+  const showStatus = useCreation(() => {
+    return (
+      BUSY_STATUS.includes(passkeyState.status) ||
+      BUSY_STATUS.includes(oauthState.status) ||
+      BUSY_STATUS.includes(state.status) ||
+      BUSY_STATUS.includes(selectedPlugin?.state?.computedStatus)
+    );
+  }, [state.status, oauthState.status, passkeyState.status, selectedPlugin?.state?.computedStatus]);
+
+  const handleReset = useMemoizedFn(async () => {
+    onRecreateSession();
+    oauthState.reset();
+    passkeyState.reset();
+    await generate(false);
+  });
+  const handleRetry = useMemoizedFn(() => {
+    connectState?.retryConnect();
+  });
+  const handleCancel = useMemoizedFn(() => {
+    onRecreateSession();
+    oauthState.reset();
+    passkeyState.reset();
+    selectedPlugin?.state?.reset();
+    staticState.current.cancelCount++;
+    cancelWhenScanned();
+  });
+
+  const { run: debounceHandleTimeout } = useDebounceFn(
+    () => {
+      if (refreshingToken.current) return;
+      if (state.status === 'timeout') {
+        refreshingToken.current = true;
+        state.reset();
+        handleReset();
+        refreshingToken.current = false;
+      }
+    },
+    { leading: true, trailing: false }
+  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(debounceHandleTimeout, [state.status]);
+
+  const chooseMethod = useCreation(() => {
+    return LOGIN_PROVIDER_NAME[connectState.chooseMethod] || 'DID Wallet';
+  }, [connectState.chooseMethod]);
+
+  const { providerList, hideQRCode, hideChooseList, loadingProviderList } = useProviderList({
+    action: state.action,
+    sourceAppPid: connectState?.sourceAppPid,
+    allowWallet,
+    passkeyBehavior,
+    webWalletUrl,
+    mode,
+    blocklet: connectState?.sourceAppPid ? masterBlocklet : blocklet,
+    isSmallView,
+  });
+
+  const prevSourceAppPid = usePrevious(connectState?.sourceAppPid);
+
+  // 切换了当前展示的应用后，需要重新生成二维码
+  useUpdateEffect(() => {
+    // HACK: connectState.sourceAppPid 是用户在页面中执行操作修改的值，最开始的时候就是 undefined，并在 did-connect 页面加载后，会由 app-info 触发一次更新（无论如何都会触发，这一次更新不应该触发 generate）
+    if (isUndefined(prevSourceAppPid)) {
+      return;
+    }
+    generate();
+  }, [connectState?.sourceAppPid]);
+
+  const getSpacingNumber = (value) => {
+    const spacingValue = theme.spacing(value);
+    return parseInt(spacingValue, 10);
+  };
+  const closeButton = useCreation(() => {
+    return hideCloseButton ? null : (
+      <CloseButton
+        onClose={onClose}
+        sx={{
+          position: 'absolute',
+          right: 14,
+          top: 14,
+        }}
+      />
+    );
+  }, [hideCloseButton, onClose]);
+
+  let content = null;
+  if (showStatus) {
+    content = (
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <Box>
+          <ConnectStatus
+            status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
+            nextWorkflow={state.nextWorkflow}
+            mfaCode={state.mfaCode}
+            onCancel={handleCancel}
+            onRetry={handleRetry}
+            onClose={onClose}
+            messages={statusMessages}
+            locale={locale}
+            className="did-connect__auth-status auth-status"
+            loadingIcon={
+              connectState.chooseMethod ? (
+                <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
+              ) : null
+            }
+            chooseMethod={chooseMethod}
+            hideRetry={connectState.chooseMethod === 'email'}
+            hideBack={!!magicToken}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState: state });
+
+  // 防止二维码抖动，使用 useCreation 进行缓存
+  const qrcode = useCreation(() => {
+    const backgroundColor = theme.mode === 'dark' ? theme.palette.grey[600] : 'white';
+
+    let qrcodeSize = hideChooseList ? 240 - getSpacingNumber(3) * 2 : 196 - getSpacingNumber(2) * 2;
+    let padding = hideChooseList ? 3 : 2;
+    // 如果显示钱包登录，将 download tips 移动到顶部，调整间距，增加二维码的尺寸和内边距
+    if (showWalletOptions) {
+      padding = 1;
+      qrcodeSize += getSpacingNumber(padding) * 2;
+    }
+    return (
+      <Box
+        className="did-connect__qrcode"
+        sx={{
+          p: padding,
+          width: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
+          height: (hideChooseList ? 240 : 196) + getSpacingNumber(1) * 2,
+        }}>
+        {state.url ? (
+          <QRCode
+            data={urlWithParams}
+            size={qrcodeSize}
+            sx={{
+              width: qrcodeSize + getSpacingNumber(1) * 2,
+              height: qrcodeSize + getSpacingNumber(1) * 2,
+              flex: 1,
+              backgroundColor,
+              p: 1,
+              fontSize: 0,
+              textAlign: 'center',
+              boxSizing: 'border-box',
+              borderRadius: 1,
+              border: '1px solid',
+              borderColor: 'divider',
+            }}
+            config={{
+              backgroundOptions: {
+                color: backgroundColor,
+              },
+            }}
+          />
+        ) : (
+          <Skeleton
+            animation="wave"
+            variant="rectangular"
+            sx={{
+              position: 'absolute',
+              left: getSpacingNumber(2) + 1,
+              right: getSpacingNumber(2) + 1,
+              top: getSpacingNumber(2) + 1,
+              bottom: getSpacingNumber(2) + 1,
+              borderRadius: 1,
+              zIndex: 1,
+              width: 'auto',
+              height: 'auto',
+            }}
+          />
+        )}
+      </Box>
+    );
+  }, [urlWithParams, hideChooseList, showWalletOptions]);
+
+  const didConnectFlexDirection = useCreation(() => {
+    if (hideChooseList) {
+      return 'column-reverse';
+    }
+    if (!hideQRCode && isInitSmallView) {
+      return 'column';
+    }
+    return 'row';
+  }, [hideChooseList, isInitSmallView, hideQRCode]);
+
+  const qrcodeContent = useCreation(() => {
+    if (!qrcode) return null;
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          overflowX: 'auto',
+          overflowY: 'visible',
+          maxWidth: '100%',
+          margin: 'auto',
+        }}>
+        <Box
+          sx={{
+            fontSize: 0,
+            position: 'relative',
+            ...(showWalletOptions
+              ? {
+                  mt: hideChooseList ? 4 : 2.5,
+                  mb: hideChooseList ? 0 : 0,
+                }
+              : {
+                  mb: hideChooseList ? 4 : 2.5,
+                  mt: 0,
+                }),
+          }}>
+          {qrcode}
+          <Box
+            sx={{
+              position: 'absolute',
+              color: 'text.secondary',
+              fontSize: 12,
+              zIndex: 1,
+              whiteSpace: 'nowrap',
+              ...(showWalletOptions
+                ? {
+                    top: hideChooseList ? -8 : -4,
+                    transform: 'translateY(-100%)',
+                  }
+                : {
+                    bottom: hideChooseList ? -8 : -4,
+                    transform: 'translateY(100%)',
+                  }),
+              left: 0,
+              right: 0,
+              textAlign: 'center',
+            }}>
+            {t('scanWithWallet1')} <DownloadTips /> {t('scanWithWallet2')}
+          </Box>
+        </Box>
+      </Box>
+    );
+  }, [qrcode, hideChooseList, showWalletOptions]);
+
+  const fallbackContent = (
+    <Box
+      className="did-connect__body"
+      sx={{
+        display: 'flex',
+        flexDirection: didConnectFlexDirection,
+        justifyContent: 'center',
+        alignItems: 'stretch',
+        flex: 1,
+        gap: !hideQRCode && isSmallView ? 0 : 1.5,
+        overflow: 'visible',
+        px: hideChooseList ? 2 : 0,
+      }}>
+      {!showStatus && !hideQRCode ? (
+        <>
+          {qrcodeContent}
+          {hideChooseList ? null : (
+            <Box>
+              <Divider
+                orientation="vertical"
+                sx={{
+                  fontSize: 12,
+                  color: 'text.hint',
+                  '&::before, &::after': {
+                    borderColor: 'divider',
+                  },
+                }}>
+                or
+              </Divider>
+            </Box>
+          )}
+        </>
+      ) : null}
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}>
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {content}
+        <ConnectProviderList
+          slotProps={{
+            root: {
+              sx: [showStatus ? { display: 'none' } : {}],
+            },
+          }}
+          allowWallet={allowWallet}
+          size={hideQRCode && mode !== 'dialog' ? 'normal' : 'small'}
+          tokenState={state}
+          hideQRCode={hideQRCode}
+          messages={messages}
+          tokenKey={tokenKey}
+          onSuccess={onSuccess}
+          passkeyBehavior={passkeyBehavior}
+          webWalletUrl={webWalletUrl}
+          extraContent={extraContent}
+          enabledConnectTypes={enabledConnectTypes}
+          onReset={handleReset}
+          disableSwitchApp={disableSwitchApp}
+          forceUpdate={forceUpdate}
+          magicToken={magicToken}
+          baseUrl={baseUrl}
+          customItems={customItems}
+          providerList={providerList}
+          qrcode={qrcodeContent}
+        />
+      </Box>
+    </Box>
+  );
+  let contentResult = fallbackContent;
+  if (selectedPlugin) {
+    contentResult = selectedPlugin.renderPlaceholder({
+      fallback: fallbackContent,
+      forceUpdate,
+      onSuccess,
+      onError,
+    });
+  } else {
+    contentResult = fallbackContent;
+  }
+
+  const containerWidth = hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH;
+
+  if (loadingProviderList) {
+    return <FallbackConnect />;
+  }
+  return (
+    <Box
+      ref={rootRef}
+      className="did-connect__root"
+      sx={{
+        backgroundColor: 'background.default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        position: 'relative',
+        maxWidth: '100%',
+        width:
+          // eslint-disable-next-line no-nested-ternary
+          mode === 'drawer' ? '100%' : showWalletOptions ? containerWidth - 20 : containerWidth,
+        transition: 'width 0.2s ease-in-out',
+        margin: 'auto',
+        p: 3,
+        pb: 0,
+        gap: 2.5,
+      }}>
+      <Box data-did-auth-url={state.url} sx={{ display: 'none' }} />
+      <DIDConnectTitle
+        title={messages.title}
+        description={messages.scan}
+        extraContent={extraContent}
+        disableSwitchApp={disableSwitchApp}
+        showWalletOptions={showWalletOptions}
+        onBack={() => setShowWalletOptions(false)}
+      />
+      <AutoHeight initHeight={24 + 16 + 32}>{contentResult}</AutoHeight>
+      <DIDConnectFooter currentAppInfo={currentAppInfo} currentAppColor={currentAppColor} />
+      {closeButton}
+    </Box>
+  );
+}
+
+Connect.propTypes = {
+  mode: PropTypes.oneOf(['dialog', 'drawer', 'page']),
+
+  action: PropTypes.string.isRequired,
+  baseUrl: PropTypes.string,
+  checkFn: PropTypes.func.isRequired,
+  checkInterval: PropTypes.number,
+  checkTimeout: PropTypes.number,
+  // extraParams: PropTypes.object, // 需要使用 useStateContext 中导出的
+  prefix: PropTypes.string,
+  messages: PropTypes.object,
+  tokenKey: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh', '']),
+  encKey: PropTypes.string,
+  autoConnect: PropTypes.bool,
+  forceConnected: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  saveConnect: PropTypes.bool,
+  useSocket: PropTypes.bool,
+  extraContent: PropTypes.any,
+  passkeyBehavior: PropTypes.oneOf(['none', 'both', 'only-existing', 'only-new']),
+  enabledConnectTypes: PropTypes.arrayOf(PropTypes.oneOf(['web', 'mobile', ...Object.keys(OAUTH_PROVIDER)])),
+  webWalletUrl: PropTypes.string,
+
+  allowWallet: PropTypes.bool,
+  provider: PropTypes.oneOf([LOGIN_PROVIDER.WALLET, ...Object.keys(OAUTH_PROVIDER), '']),
+  hideCloseButton: PropTypes.bool,
+  disableSwitchApp: PropTypes.bool,
+  onClose: PropTypes.func,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func,
+  onRecreateSession: PropTypes.func,
+  setColor: PropTypes.func,
+  magicToken: PropTypes.string,
+  customItems: PropTypes.arrayOf(PropTypes.node),
+};
+
+function WrapConnect({ testOnlyBorderColor = undefined, ...props }) {
+  const { checkFn, extraParams = {}, blocklet, masterBlocklet, action, locale = 'en' } = props;
+  if (typeof checkFn !== 'function') {
+    throw new Error('Cannot initialize did connect component without a fetchFn');
+  }
+
+  return (
+    <StateProvider
+      blocklet={blocklet}
+      masterBlocklet={masterBlocklet}
+      action={action}
+      locale={locale}
+      extraParams={extraParams}
+      testOnlyBorderColor={testOnlyBorderColor}
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        lineHeight: 1.2,
+        color: 'grey.700',
+        '&, & *, & *:before, & *:after': {
+          fontFamily: 'Lexend', // 保持跟 DID Wallet 一致
+          boxSizing: 'border-box',
+        },
+      }}>
+      <Connect {...props} />
+    </StateProvider>
+  );
+}
+
+WrapConnect.propTypes = {
+  checkFn: PropTypes.func.isRequired,
+  extraParams: PropTypes.object,
+  blocklet: PropTypes.object.isRequired,
+  masterBlocklet: PropTypes.object,
+  action: PropTypes.string.isRequired,
+  locale: PropTypes.string,
+  testOnlyBorderColor: PropTypes.string,
+};
+
+export default WrapConnect;

package/src/Connect/fallback-connect.jsx

@@ -0,0 +1,47 @@
+import { DIDConnectFooter } from '@arcblock/ux/lib/DIDConnect';
+import { DID_CONNECT_SMALL_WIDTH } from '@arcblock/ux/lib/Util/constant';
+import { getCurrentApp } from '@arcblock/ux/lib/Util/federated';
+import { Box, Skeleton } from '@mui/material';
+
+export default function FallbackConnect(props) {
+  const currentAppInfo = globalThis.blocklet ? getCurrentApp(globalThis.blocklet) : globalThis.env;
+  return (
+    <Box
+      className="did-connect__root"
+      sx={{
+        backgroundColor: 'background.default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        position: 'relative',
+        maxWidth: '100%',
+        // eslint-disable-next-line react/prop-types
+        width: props.mode === 'drawer' ? '100%' : DID_CONNECT_SMALL_WIDTH - 20,
+        transition: 'width 0.2s ease-in-out',
+        margin: 'auto',
+        p: 3,
+        pb: 0,
+        gap: 2.5,
+      }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Skeleton variant="rounded" height={28} sx={{ width: '6rem' }} />
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Skeleton variant="rounded" sx={{ fontSize: '13px', height: '15px' }} />
+          <Skeleton variant="rounded" sx={{ fontSize: '13px', height: '15px', width: '3rem' }} />
+        </Box>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Skeleton variant="rounded" sx={{ height: '35px' }} />
+        <Skeleton variant="rounded" sx={{ height: '35px' }} />
+        <Skeleton variant="rounded" sx={{ height: '35px' }} />
+        <Box sx={{ display: 'flex', gap: 1.5, mt: 1 }}>
+          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
+          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
+          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
+          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
+        </Box>
+      </Box>
+      <DIDConnectFooter currentAppInfo={currentAppInfo} />
+    </Box>
+  );
+}

package/src/Connect/hooks/provider-list.js

@@ -3,6 +3,7 @@ import { useCreation, useRequest } from 'ahooks';
 import isNil from 'lodash/isNil';
 import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { getBlockletData, getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+import { useState } from 'react';
 
 const getAuthenticationConfig = async ({ sourceAppPid }) => {
   const blocklet = globalThis?.blocklet;
@@ -56,12 +57,15 @@ export default function useProviderList({
   blocklet = globalThis.blocklet,
   isSmallView = false,
 }) {
+  const [loadingProviderList, setLoadingProviderList] = useState(false);
   const actionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
   const browser = useBrowser();
 
   const { data: loginProviderList = [] } = useRequest(
     async () => {
+      setLoadingProviderList(true);
       const data = await getLoginProviderList({ sourceAppPid });
+      setLoadingProviderList(false);
       return data;
     },
     { refreshDeps: [sourceAppPid] }
@@ -121,6 +125,7 @@ export default function useProviderList({
     hideChooseList,
     hideQRCode,
     providerList: showedLoginProviderList,
+    loadingProviderList,
   };
 
   return result;