@arcblock/did-connect-react 3.1.0

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

@@ -0,0 +1,149 @@
+import PropTypes from 'prop-types';
+import { CircularProgress } from '@mui/material';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { openWebWallet, detectWalletExtension } from '@arcblock/ux/lib/Util';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+import noop from 'lodash/noop';
+import omit from 'lodash/omit';
+import { useImperativeHandle } from 'react';
+import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+
+import LoginMethodItem from './login-method-item';
+import { useStateContext } from '../../contexts/state';
+import { EXT_DOWNLOAD_URL } from '../../../constant';
+import useAuthUrl from '../../hooks/auth-url';
+
+export default function WebLoginItem({
+  ref = null,
+  tokenState,
+  locale = 'en',
+  webWalletUrl,
+  onClick = noop,
+  disableSwitchApp = false,
+  ...rest
+}) {
+  const { browserBrand } = useStateContext();
+  const extension = detectWalletExtension();
+  const currentState = useReactive({
+    loading: false,
+  });
+
+  const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState });
+
+  const handleConnectFn = useMemoizedFn(() => {
+    currentState.loading = true;
+    const openResult = openWebWallet({
+      webWalletUrl,
+      url: urlWithParams,
+      locale,
+      appInfo: tokenState.appInfo,
+      memberAppInfo: tokenState.memberAppInfo,
+    });
+    if (openResult?.type === 'web') {
+      currentState.loading = false;
+    } else {
+      // 后续需要通过插件回传消息，才能准确的关闭 loading 状态
+      setTimeout(() => {
+        currentState.loading = false;
+      }, 3000);
+    }
+  });
+  const handleConnect = useMemoizedFn((e) => {
+    if (!tokenState.url) {
+      return;
+    }
+
+    onClick(e);
+    e?.preventDefault();
+    handleConnectFn();
+  });
+
+  useImperativeHandle(ref, () => ({
+    connect: handleConnectFn,
+  }));
+
+  const extDownloadUrl = useCreation(() => {
+    if (browserBrand === 'edge') {
+      return EXT_DOWNLOAD_URL.edge;
+    }
+    if (browserBrand === 'chrome') {
+      return EXT_DOWNLOAD_URL.chrome;
+    }
+    return null;
+  }, [browserBrand]);
+
+  const buttonProps = useCreation(() => {
+    const result = {};
+    if (extension) {
+      result.onClick = handleConnect;
+    } else if (extDownloadUrl) {
+      result.component = 'a';
+      result.href = extDownloadUrl;
+      result.target = '_blank';
+      result.rel = 'noopener';
+    } else {
+      result.onClick = handleConnect;
+    }
+
+    if (!tokenState.url) {
+      result.sx = {
+        cursor: 'not-allowed',
+      };
+    }
+    return result;
+  }, [handleConnect, tokenState.url]);
+
+  const title = useCreation(() => {
+    if (extension || extDownloadUrl) {
+      return 'DID Wallet (Extension)';
+    }
+    return 'DID Wallet (Web)';
+  }, [extension, extDownloadUrl]);
+
+  return (
+    <LoginMethodItem
+      {...rest}
+      sx={mergeSx(
+        {
+          textDecoration: 'none',
+        },
+        rest?.sx,
+        buttonProps.sx
+      )}
+      title={title}
+      icon={
+        currentState.loading || !tokenState.url ? (
+          <CircularProgress
+            color="primary"
+            size={24}
+            sx={{
+              '& svg': {
+                transform: 'scale(0.75)',
+              },
+            }}
+          />
+        ) : (
+          <ProviderIcon
+            width="24px"
+            height="24px"
+            provider={LOGIN_PROVIDER.DID_WALLET}
+            style={{
+              transform: 'scale(0.9)',
+            }}
+          />
+        )
+      }
+      {...omit(buttonProps, 'sx')}
+    />
+  );
+}
+
+WebLoginItem.propTypes = {
+  tokenState: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  webWalletUrl: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  disableSwitchApp: PropTypes.bool,
+  ref: PropTypes.any,
+};

package/src/Connect/components/mask-overlay.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import { alpha, Box } from '@mui/material';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+
+// 需要父元素设置 relative position
+export default function MaskOverlay({ children, ...rest }) {
+  return (
+    <Box
+      {...rest}
+      sx={mergeSx(
+        {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: ({ palette }) => alpha(palette.background.default, 0.75),
+          backdropFilter: 'blur(3px)',
+        },
+        rest?.sx
+      )}>
+      {children}
+    </Box>
+  );
+}
+
+MaskOverlay.propTypes = {
+  children: PropTypes.any.isRequired,
+};

package/src/Connect/components/refresh-overlay.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { Box, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import RefreshRoundedIcon from '@iconify-icons/material-symbols/refresh-rounded';
+
+// 需要父元素设置 relative position
+export default function RefreshOverlay({ onRefresh, ...rest }) {
+  const { palette } = useTheme();
+  const handleOnRefresh = (e) => {
+    e.stopPropagation();
+    onRefresh();
+  };
+
+  return (
+    <Box
+      {...rest}
+      onClick={handleOnRefresh}
+      sx={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255, 255, 255, 0.75)',
+        cursor: 'pointer',
+        ...rest.sx,
+      }}>
+      <Box
+        sx={{
+          backgroundColor: 'secondary.main',
+          borderRadius: '100%',
+          fontSize: 0,
+        }}>
+        <Icon
+          icon={RefreshRoundedIcon}
+          fontSize={52}
+          style={{
+            transform: 'scale(0.7)',
+            color: palette.secondary.contrastText,
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+RefreshOverlay.propTypes = {
+  onRefresh: PropTypes.func.isRequired,
+};

package/src/Connect/components/switch-app.jsx

@@ -0,0 +1,69 @@
+import { useRef } from 'react';
+import { Box, Menu, MenuItem } from '@mui/material';
+import { useReactive } from 'ahooks';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+import PropTypes from 'prop-types';
+import { AppInfoItem } from '@arcblock/ux/lib/DIDConnect';
+
+import { useStateContext } from '../contexts/state';
+
+export default function SwitchApp({ sx = {}, children }) {
+  const { appInfoList, extraParams, connectState } = useStateContext();
+  const switchAppRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+  });
+  if (appInfoList.length <= 1) return null;
+
+  return (
+    <>
+      <Box
+        component="span"
+        ref={switchAppRef}
+        sx={mergeSx(
+          {
+            color: 'text.secondary',
+            cursor: 'pointer',
+          },
+          sx
+        )}
+        onClick={() => {
+          currentState.open = true;
+        }}>
+        {children}
+      </Box>
+      <Menu
+        anchorEl={switchAppRef.current}
+        open={currentState.open}
+        onClose={() => {
+          currentState.open = false;
+        }}
+        slotProps={{
+          paper: {
+            variant: 'outlined',
+            sx: {
+              border: 0,
+              boxShadow: ({ palette }) => `0px 4px 8px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`,
+              borderRadius: 1,
+            },
+          },
+        }}>
+        {appInfoList.map((item) => (
+          <MenuItem
+            key={item.appPid}
+            onClick={() => {
+              currentState.open = false;
+              connectState.sourceAppPid = item.sourceAppPid;
+            }}>
+            <AppInfoItem appInfo={item} active={item.sourceAppPid === extraParams?.sourceAppPid} />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+SwitchApp.propTypes = {
+  sx: PropTypes.object,
+  children: PropTypes.any.isRequired,
+};

package/src/Connect/contexts/state.jsx

@@ -0,0 +1,219 @@
+import PropTypes from 'prop-types';
+import { createContext, use, useEffect, useRef, useState } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import { useCreation, useLatest, useMemoizedFn, useReactive, useSize, useUpdate } from 'ahooks';
+import isUndefined from 'lodash/isUndefined';
+import noop from 'lodash/noop';
+import { Box } from '@mui/material';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { getCurrentApp, getMaster } from '@arcblock/ux/lib/Util/federated';
+import { getDIDMotifInfo } from '@arcblock/did-motif';
+import { getDIDColor, isEthereumDid } from '@arcblock/ux/lib/Util';
+
+import useApps from '../hooks/use-apps';
+import { SessionContext } from '../../Session/context';
+import translations from '../assets/locale';
+
+const StateContext = createContext({
+  isWalletWebview: false,
+  isMobile: false,
+  matchSmallScreen: false,
+  blocklet: null,
+});
+
+const { Provider, Consumer } = StateContext;
+
+function StateProvider({
+  children,
+  blocklet,
+  masterBlocklet = undefined,
+  action,
+  extraParams = {},
+  locale = 'en',
+  testOnlyBorderColor = undefined,
+  ...rest
+}) {
+  const forceUpdate = useUpdate();
+  const [plugins, setPlugins] = useState([]);
+  const [selectedPlugin, setSelectedPlugin] = useState('');
+  const pluginsMap = useCreation(() => {
+    return new Map(plugins.map((plugin) => [plugin.name, plugin]));
+  }, [plugins]);
+  const getPlugin = useMemoizedFn((name) => {
+    return pluginsMap.get(name);
+  });
+  const latestActivePlugin = useLatest(selectedPlugin);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const sessionContext = use(SessionContext);
+  const reactiveState = useReactive({
+    sourceAppPid: undefined,
+    status: 'created',
+    autoActiveWebview: true,
+    deeplink: undefined,
+    chooseMethod: '',
+    retryConnect: noop,
+  });
+  const staticState = useRef({
+    cancelCount: 0,
+  });
+
+  const browser = useBrowser();
+  const { appInfoList, autoGenerateSourceAppPid, canSwitchApp } = useApps({
+    blocklet,
+    connectState: reactiveState,
+    action,
+    sourceAppPid: extraParams?.sourceAppPid,
+    enableSwitchApp: extraParams?.forceSwitch || extraParams?.enableSwitchApp,
+  });
+
+  const rootRef = useRef(null);
+  const size = useSize(rootRef);
+
+  const matchSmallScreen = useCreation(() => {
+    const width = size?.width || 0;
+    return width < 500;
+  }, [size?.width]);
+
+  const mergeExtraParams = useCreation(() => {
+    if (canSwitchApp) {
+      return {
+        ...extraParams,
+        sourceAppPid: isUndefined(reactiveState.sourceAppPid) ? autoGenerateSourceAppPid : reactiveState.sourceAppPid,
+      };
+    }
+
+    const masterAppPid = getMaster(blocklet)?.appPid;
+    const currentPageMasterAppPid = getMaster(globalThis.blocklet)?.appPid;
+    if (sessionContext?.session?.user && (masterAppPid === currentPageMasterAppPid || !masterAppPid)) {
+      if (!isUndefined(extraParams?.sourceAppPid)) {
+        return extraParams;
+      }
+      return {
+        ...extraParams,
+        sourceAppPid: sessionContext.session.user?.sourceAppPid,
+      };
+    }
+
+    return {
+      ...extraParams,
+      sourceAppPid: autoGenerateSourceAppPid,
+    };
+  }, [
+    canSwitchApp,
+    extraParams,
+    reactiveState.sourceAppPid,
+    action,
+    autoGenerateSourceAppPid,
+    sessionContext?.session?.user,
+  ]);
+
+  const browserBrand = useCreation(() => {
+    const userAgent = window?.navigator?.userAgent;
+    if (userAgent.indexOf('Edge') > -1 || userAgent.indexOf('Edg') > -1) {
+      return 'edge';
+    }
+    if (userAgent.indexOf('Chrome') > -1) {
+      return 'chrome';
+    }
+    return 'unknown';
+  }, []);
+
+  useEffect(() => {
+    reactiveState.sourceAppPid = mergeExtraParams.sourceAppPid;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mergeExtraParams.sourceAppPid]);
+
+  const changeStatus = useMemoizedFn((value) => {
+    reactiveState.status = value || 'created';
+  });
+
+  // currentAppInfo 固定不变，就是当前网站的应用信息
+  const currentAppInfo = globalThis.blocklet ? getCurrentApp(blocklet) : globalThis.env;
+
+  const currentAppColor = useCreation(() => {
+    if (testOnlyBorderColor) {
+      return testOnlyBorderColor;
+    }
+
+    const did = currentAppInfo.appPid;
+    const isEthDid = isEthereumDid(did);
+    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+    if (isEthDid) {
+      return getDIDColor(did);
+    }
+
+    return didMotifInfo.color;
+  }, [currentAppInfo.appId, testOnlyBorderColor]);
+
+  // NOTICE: size 的变化频率很高，会触发子组件多次渲染，需要在传递 context 时，排除 size 对它的影响
+  const value = useCreation(() => {
+    return {
+      isWalletWebview: browser.wallet || browser.arcSphere,
+      isMobile: browser.mobile.any,
+      matchSmallScreen,
+      connectState: reactiveState,
+      staticState,
+      reactiveState,
+      appInfoList,
+      extraParams: mergeExtraParams,
+      blocklet,
+      masterBlocklet,
+      browserBrand,
+      currentAppInfo,
+      currentAppColor,
+
+      t,
+      locale,
+      action,
+      changeStatus,
+      getPlugin,
+      latestActivePlugin,
+      plugins,
+      setPlugins,
+      selectedPlugin,
+      setSelectedPlugin,
+      forceUpdate,
+    };
+  }, [
+    browser.wallet,
+    browser.arcSphere,
+    browser.mobile.any,
+    matchSmallScreen,
+    JSON.stringify(reactiveState),
+    JSON.stringify(appInfoList),
+    JSON.stringify(mergeExtraParams),
+    blocklet,
+    masterBlocklet,
+    locale,
+    selectedPlugin,
+    forceUpdate,
+    currentAppInfo,
+    currentAppColor,
+  ]);
+
+  return (
+    <Provider value={value}>
+      <Box {...rest} ref={rootRef}>
+        {children}
+      </Box>
+    </Provider>
+  );
+}
+
+StateProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  blocklet: PropTypes.object.isRequired,
+  masterBlocklet: PropTypes.object,
+  action: PropTypes.string.isRequired,
+  extraParams: PropTypes.object,
+  locale: PropTypes.string,
+  testOnlyBorderColor: PropTypes.string,
+};
+
+function useStateContext() {
+  return use(StateContext);
+}
+
+export { StateContext, StateProvider, Consumer as StateConsumer, useStateContext };

package/src/Connect/fullpage.jsx

@@ -0,0 +1,3 @@
+import LandingPage from '@arcblock/ux/lib/DIDConnect/landing-page';
+
+export default LandingPage;

package/src/Connect/hooks/auth-url.js

@@ -0,0 +1,31 @@
+import { useCreation } from 'ahooks';
+import { useStateContext } from '../contexts/state';
+import useSecurity from './security';
+import { getVisitorId } from '../../utils';
+
+export default function useAuthUrl({ disableSwitchApp, tokenState }) {
+  const { appInfoList, connectState } = useStateContext();
+  const { encryptKey } = useSecurity();
+  const urlWithParams = useCreation(() => {
+    if (!tokenState.url) {
+      return '';
+    }
+    const canSwitch = !disableSwitchApp && appInfoList.length > 1;
+    const resultUrl = new URL(tokenState.url || 'https://www.didwallet.io');
+    const actionRawUrl = resultUrl.searchParams.get('url');
+    if (actionRawUrl && canSwitch) {
+      const actionUrl = new URL(decodeURIComponent(actionRawUrl));
+      actionUrl.searchParams.set('_ek_', encryptKey);
+      const visitorId = getVisitorId();
+      if (visitorId) {
+        actionUrl.searchParams.set('vid', visitorId);
+      }
+      if (connectState?.sourceAppPid) {
+        actionUrl.searchParams.set('spid', connectState?.sourceAppPid);
+      }
+      resultUrl.searchParams.set('url', actionUrl.toString());
+    }
+    return resultUrl.toString();
+  }, [tokenState.url, appInfoList.length, connectState?.sourceAppPid, encryptKey]);
+  return urlWithParams;
+}

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

@@ -0,0 +1,121 @@
+import { useBrowser } from '@arcblock/react-hooks';
+import { detectWalletExtension } from '@arcblock/ux/lib/Util';
+import { useCreation, useRequest } from 'ahooks';
+import intersection from 'lodash/intersection';
+import { OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+
+import { useOAuth } from '../../OAuth';
+import { checkSameProtocol, getWebWalletUrl } from '../../utils';
+
+export default function useMethodList({
+  enabledConnectTypes = [],
+  allowWallet = true,
+  passkeyBehavior = 'none',
+  webWalletUrl = getWebWalletUrl(),
+  action,
+  sourceAppPid,
+  mode = 'dialog',
+  blocklet = globalThis.blocklet,
+  isSmallView = false,
+}) {
+  const actionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
+  const { getOAuthConfigList } = useOAuth();
+  const browser = useBrowser();
+  const extension = detectWalletExtension();
+  const { data: oauthConfigList = [] } = useRequest(
+    async () => {
+      const data = await getOAuthConfigList({ sourceAppPid });
+      return data;
+    },
+    { refreshDeps: [sourceAppPid] }
+  );
+
+  const oauthProviderList = useCreation(() => {
+    // return [];
+    const showProviders = intersection(Object.keys(OAUTH_PROVIDER), enabledConnectTypes);
+    const result = oauthConfigList.filter((item) => showProviders.includes(item.provider));
+    return result;
+  }, [oauthConfigList, enabledConnectTypes]);
+
+  const showOAuthLogin = useCreation(() => {
+    if (!actionList.includes(action)) {
+      return false;
+    }
+    return oauthProviderList.length > 0;
+  }, [oauthProviderList, action]);
+
+  const showMobileLogin = useCreation(() => {
+    let _allowWallet = allowWallet;
+    if (!actionList.includes(action)) {
+      _allowWallet = true;
+    }
+    return _allowWallet && enabledConnectTypes.includes('mobile');
+  }, [allowWallet, enabledConnectTypes, action]);
+
+  const isSameProtocol = checkSameProtocol(webWalletUrl);
+  const showWebLogin = useCreation(() => {
+    let _allowWallet = allowWallet;
+    if (!actionList.includes(action)) {
+      _allowWallet = true;
+    }
+    return (
+      _allowWallet &&
+      enabledConnectTypes.includes('web') &&
+      (isSameProtocol || extension) &&
+      (!browser.mobile.any || extension)
+    );
+  }, [allowWallet, enabledConnectTypes, browser?.mobile?.any, action]);
+
+  const showPasskeyLogin = useCreation(() => {
+    // NOTICE: 允许所有 action 都展示 passkey
+    // if (!actionList.includes(action)) {
+    //   return false;
+    // }
+    return passkeyBehavior !== 'none' && !browser.wallet && !browser.arcSphere;
+  }, [action]);
+
+  const showEmailLogin = useCreation(() => {
+    if (!actionList.includes(action)) {
+      return false;
+    }
+    // FIXME: @zhanghan 这里是临时用于控制是否展示邮箱登录，待确认没问题后，需要移除
+    if (!['true', undefined, null].includes(blocklet?.DID_CONNECT_ALLOW_EMAIL)) {
+      return false;
+    }
+    return blocklet?.settings?.notification?.email?.enabled ?? false;
+  }, [action, blocklet]);
+
+  const hideChooseList = useCreation(() => {
+    return false;
+    // NOTICE: 先保留这部分逻辑，后续根据需求调整
+    // if (showOAuthLogin || showPasskeyLogin) {
+    //   return false;
+    // }
+    // return true;
+  });
+
+  const hideQRCode = useCreation(() => {
+    if (mode === 'drawer' || (isSmallView && browser.mobile.any)) {
+      return true;
+    }
+    if (actionList.includes(action) && !showMobileLogin) {
+      return true;
+    }
+    return false;
+  }, [mode, isSmallView]);
+
+  const result = {
+    hideQRCode,
+    hideChooseList,
+
+    showOAuthLogin,
+    showMobileLogin,
+    showWebLogin,
+    showPasskeyLogin,
+    showEmailLogin,
+
+    oauthProviderList,
+  };
+
+  return result;
+}

package/src/Connect/hooks/page-show.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+function usePageShow(handler) {
+  const handlerRef = useRef(handler);
+
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    const onChange = (event) => {
+      if (!document.hidden && handlerRef.current) {
+        handlerRef.current(event);
+      }
+    };
+
+    document.addEventListener('visibilitychange', onChange);
+    return () => {
+      document.removeEventListener('visibilitychange', onChange);
+    };
+  }, []);
+}
+
+export default usePageShow;