@arcblock/did-connect-react 3.4.15 → 3.5.0

package/src/Connect/contexts/state.jsx

@@ -1,235 +0,0 @@
-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 { LAST_USED_LOGIN_METHOD } from '@arcblock/ux/lib/Util/constant';
-
-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 [showWalletOptions, setShowWalletOptions] = useState(false);
-  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: '',
-    walletMethod: '', // 细分的 wallet 登录方式，如 wallet-ext, wallet-web, wallet-scan 等
-    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 lastLoginMethod = useCreation(() => {
-    try {
-      return localStorage.getItem(LAST_USED_LOGIN_METHOD);
-    } catch (error) {
-      return '';
-    }
-  }, []);
-
-  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,
-
-      // 控制钱包登录的显示
-      showWalletOptions,
-      setShowWalletOptions,
-      // 用于记录上一次登录方式
-      lastLoginMethod,
-    };
-  }, [
-    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/fallback-connect.jsx

@@ -1,47 +0,0 @@
-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/fullpage.jsx

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

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

@@ -1,31 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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;

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

@@ -1,168 +0,0 @@
-import { useBrowser } from '@arcblock/react-hooks';
-import { useCreation, useRequest } from 'ahooks';
-import isNil from 'lodash/isNil';
-import { LOGIN_PROVIDER, WALLET_LOGIN_METHOD } 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;
-  if (!blocklet) {
-    return {
-      [LOGIN_PROVIDER.WALLET]: {
-        order: 0,
-        enabled: true,
-        showQrcode: true,
-      },
-      [LOGIN_PROVIDER.PASSKEY]: {
-        order: 1,
-        enabled: true,
-      },
-    };
-  }
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const master = getMaster(blocklet);
-  if (federatedEnabled && master?.appPid && sourceAppPid === master?.appPid) {
-    const masterBlocklet = await getBlockletData(master.appUrl);
-    return masterBlocklet?.settings?.authentication || {};
-  }
-  return blocklet?.settings?.authentication || {};
-};
-
-const getLoginProviderList = async ({ sourceAppPid } = {}) => {
-  const authenticationConfig = await getAuthenticationConfig({ sourceAppPid });
-  const loginProviderList = Object.entries(authenticationConfig)
-    .map(([key, value]) => {
-      return { ...value, provider: key };
-    })
-    .filter((item) => item.enabled)
-    .sort((a, b) => {
-      if (!isNil(a?.order) && !isNil(b?.order)) {
-        return a.order - b.order;
-      }
-      if (!isNil(a?.order)) {
-        return -1;
-      }
-      return 1;
-    });
-  return loginProviderList;
-};
-
-export default function useProviderList({
-  allowWallet = true,
-  passkeyBehavior = 'none',
-  action,
-  sourceAppPid,
-  mode = 'dialog',
-  blocklet = globalThis.blocklet,
-  isSmallView = false,
-  lastLoginMethod = '',
-}) {
-  const [loadingProviderList, setLoadingProviderList] = useState(false);
-  const oauthActionList = ['login', 'invite', 'connect-to-did-space', 'connect-to-did-domain', 'destroy-self'];
-  const emailActionList = ['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] }
-  );
-
-  const showedLoginProviderList = useCreation(() => {
-    const allowedProviders = globalThis?.blocklet?.DID_CONNECT_ENABLED_PROVIDERS?.split(',') || [];
-    const result = loginProviderList
-      .filter((item) => {
-        if (allowedProviders.length > 0) {
-          if (!allowedProviders.includes(item.provider)) {
-            return false;
-          }
-        }
-        if (item.provider === LOGIN_PROVIDER.WALLET) {
-          return allowWallet;
-        }
-        if (item.provider === LOGIN_PROVIDER.PASSKEY) {
-          return passkeyBehavior !== 'none' && !browser.wallet && !browser.arcSphere;
-        }
-        if (item.provider === LOGIN_PROVIDER.EMAIL) {
-          return emailActionList.includes(action) && (blocklet?.settings?.notification?.email?.enabled ?? false);
-        }
-
-        if (item.type === 'oauth') {
-          if (!oauthActionList.includes(action)) {
-            return false;
-          }
-        }
-        return true;
-      })
-      .sort((a, b) => {
-        // 优先处理 lastLoginMethod：匹配的项目排在最前面
-        if (lastLoginMethod) {
-          // 检查是否匹配，wallet 的细分类型需要特殊处理
-          const walletMethods = Object.values(WALLET_LOGIN_METHOD);
-          const isWalletMethod = walletMethods.includes(lastLoginMethod);
-          const aIsLastMethod = isWalletMethod ? a.provider === LOGIN_PROVIDER.WALLET : a.provider === lastLoginMethod;
-          const bIsLastMethod = isWalletMethod ? b.provider === LOGIN_PROVIDER.WALLET : b.provider === lastLoginMethod;
-          if (aIsLastMethod && !bIsLastMethod) {
-            return -1;
-          }
-          if (!aIsLastMethod && bIsLastMethod) {
-            return 1;
-          }
-        }
-        // 然后按照 order 属性排序
-        if (!isNil(a?.order) && !isNil(b?.order)) {
-          return a.order - b.order;
-        }
-        if (!isNil(a?.order)) {
-          return -1;
-        }
-        if (!isNil(b?.order)) {
-          return 1;
-        }
-        return 0;
-      });
-    return result;
-  }, [loginProviderList, lastLoginMethod]);
-
-  const hideQRCode = useCreation(() => {
-    const isMobileView = mode === 'drawer' || (isSmallView && browser.mobile.any);
-    if (!globalThis?.blocklet) {
-      if (!isMobileView) {
-        return false;
-      }
-      return true;
-    }
-
-    const walletProvider = showedLoginProviderList.find((item) => item.provider === LOGIN_PROVIDER.WALLET);
-    if (walletProvider?.showQrcode !== true) {
-      return true;
-    }
-    if (isMobileView) {
-      return true;
-    }
-    return false;
-  }, [mode, isSmallView, showedLoginProviderList]);
-
-  const hideChooseList = useCreation(() => {
-    return false;
-    // NOTICE: 先保留这部分逻辑，后续根据需求调整
-    // if (showOAuthLogin || showPasskeyLogin) {
-    //   return false;
-    // }
-    // return true;
-  });
-
-  const result = {
-    hideChooseList,
-    hideQRCode,
-    providerList: showedLoginProviderList,
-    loadingProviderList,
-  };
-
-  return result;
-}

package/src/Connect/hooks/security.js

@@ -1,40 +0,0 @@
-import tweetnacl from 'tweetnacl';
-import { useLocalStorageState } from 'ahooks';
-import { useEffect } from 'react';
-
-import { encodeKey, decrypt as _decrypt, encrypt as _encrypt } from '../../utils';
-
-const keyPair = tweetnacl.box.keyPair();
-
-export default function useSecurity() {
-  const [encryptKey, setEncryptKey] = useLocalStorageState('__encKey', {
-    defaultValue: encodeKey(keyPair.publicKey),
-    deserializer: (str) => str,
-    serializer: (str) => str,
-  });
-  const [decryptKey, setDecryptKey] = useLocalStorageState('__decKey', {
-    defaultValue: encodeKey(keyPair.secretKey),
-    deserializer: (str) => str,
-    serializer: (str) => str,
-  });
-
-  useEffect(() => {
-    if (!localStorage.getItem('__encKey')) {
-      setEncryptKey(encodeKey(keyPair.publicKey));
-    }
-    if (!localStorage.getItem('__decKey')) {
-      setDecryptKey(encodeKey(keyPair.secretKey));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const decrypt = (v, _encryptKey = encryptKey, _decryptKey = decryptKey) => _decrypt(v, _encryptKey, _decryptKey);
-  const encrypt = (v, _encryptKey = encryptKey) => _encrypt(v, _encryptKey);
-
-  return {
-    encryptKey,
-    decryptKey,
-    decrypt,
-    encrypt,
-  };
-}