@arcblock/did-connect-react 3.1.0

package/src/Connect/use-connect.jsx

@@ -0,0 +1,321 @@
+import { createPortal } from 'react-dom';
+import { useCreation, useMemoizedFn, useReactive, useDebounce } from 'ahooks';
+import { use, useImperativeHandle, useRef, useState } from 'react';
+import noop from 'lodash/noop';
+import cloneDeep from 'lodash/cloneDeep';
+import isFunction from 'lodash/isFunction';
+import isUndefined from 'lodash/isUndefined';
+import { joinURL, withQuery } from 'ufo';
+import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+import PQueue from 'p-queue';
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import { getCookieOptions } from '@arcblock/ux/lib/Util';
+import Cookie from 'js-cookie';
+import { useBrowser } from '@arcblock/react-hooks';
+
+import { SessionContext } from '../Session/context';
+import { runPopup, openPopup, updateConnectedInfo, getAppId } from '../utils';
+import { API_DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from '../constant';
+import DidConnect from './index';
+
+const CLOSE_TIMEOUT = 2000;
+
+// eslint-disable-next-line react/prop-types
+function ConnectHolder({ ref }) {
+  const { api, session } = use(SessionContext);
+  const [targetMessages, setTargetMessages] = useState({
+    title: 'DID Connect',
+    scan: 'Use follwing methods to complete this action',
+    confirm: 'Confirm in your account',
+    success: 'Success!',
+  });
+  const theme = useTheme();
+  const defaultValue = {
+    containerEl: null,
+    popup: true,
+    checkFn: api?.get || noop,
+  };
+  const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
+  const state = useReactive({
+    show: false,
+    ...cloneDeep(defaultValue),
+  });
+  const debouncedShow = useDebounce(state.show, {
+    wait: leavingScreenDelay,
+  });
+
+  const [restParams, setRestParams] = useState({});
+
+  /**
+   * 重置 use-connect 中的数据
+   */
+  const reset = useMemoizedFn(() => {
+    const cloneValue = cloneDeep(defaultValue);
+    Object.keys(cloneValue).forEach((key) => {
+      state[key] = cloneValue[key];
+    });
+  });
+
+  /**
+   * 关闭 did-connect 连接
+   * @type {import('../types').CloseConnect}
+   */
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    // HACK: 这里不能增加延时，否则会导致某些情况下，赋值的数据被 reset（比如页面中检测到退出后立即唤起登录功能）
+    setTimeout(() => {
+      reset();
+    }, leavingScreenDelay);
+  });
+
+  /**
+   * 唤起一个 did-connect 连接
+   * @type {import('../types').OpenConnect}
+   */
+  const open = useMemoizedFn((params) => {
+    const { containerEl, checkFn, popup, messages, ...rest } = cloneDeep(params);
+    if (typeof checkFn === 'function') state.checkFn = checkFn;
+    if (popup !== undefined) state.popup = popup;
+    if (messages !== undefined) setTargetMessages(messages);
+    if (containerEl !== undefined) state.containerEl = containerEl;
+
+    setRestParams(rest);
+    state.show = true;
+  });
+  const oauth = session.useOAuth();
+
+  const loginOAuth = useMemoizedFn(async ({ provider, action, extraParams, onLogin }) => {
+    const loginResult = await oauth.loginOAuth(
+      { provider },
+      {
+        action,
+        ...extraParams,
+      }
+    );
+    const cookieOptions = getCookieOptions({ returnDomain: false });
+    Cookie.remove('connected_did', cookieOptions);
+    Cookie.remove('connected_pk', cookieOptions);
+    Cookie.remove('connected_wallet_os', cookieOptions);
+    onLogin(
+      {
+        ...loginResult,
+        encrypted: false,
+      },
+      (val) => val
+    );
+  });
+
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      loginOAuth,
+      close,
+    };
+  }, [open, close, loginOAuth]);
+
+  const content = (
+    <DidConnect
+      open={state.show}
+      popup={state.popup}
+      messages={targetMessages}
+      checkFn={state.checkFn}
+      // 如果采用 state.restParams 的方式来传值，会导致 DidConnect 组件接收的值是旧的
+      {...restParams}
+    />
+  );
+
+  if (state.containerEl) {
+    return createPortal(content, state.containerEl);
+  }
+
+  if (state.show) {
+    return content;
+  }
+  if (debouncedShow) {
+    return content;
+  }
+  return null;
+}
+
+export default function useConnect() {
+  const connectRef = useRef(null);
+  const browser = useBrowser();
+  const queue = useCreation(() => {
+    const queueOptions = { concurrency: 1 };
+    // HACK: ArcSphere 中的 DID Connect 不需要排队，可以并发，交给客户端自己来处理
+    if (browser.arcSphere) {
+      delete queueOptions.concurrency;
+    }
+    return new PQueue(queueOptions);
+  });
+
+  /**
+   * 关闭 did-connect 连接
+   * @type {import('../types').CloseConnect}
+   */
+  const close = useMemoizedFn((...args) => {
+    connectRef.current?.close(...args);
+  });
+  /**
+   * 唤起一个 did-connect 连接
+   * @type {import('../types').OpenConnect}
+   */
+  const open = useMemoizedFn(
+    ({ onSuccess, onClose, onEnd, closeTimeout = CLOSE_TIMEOUT, ...restParams }, ...restargs) => {
+      const openFn = () => {
+        return new Promise((resolve) => {
+          if (typeof onSuccess === 'function') {
+            restParams.onSuccess = (...args) => {
+              onSuccess(...args);
+              setTimeout(() => {
+                close();
+                resolve();
+              }, closeTimeout);
+            };
+          } else {
+            restParams.onSuccess = () => {
+              setTimeout(() => {
+                close();
+                resolve();
+              }, closeTimeout);
+            };
+          }
+          if (typeof onClose === 'function') {
+            restParams.onClose = (...args) => {
+              onClose(...args);
+              close();
+              resolve();
+              queue.clear();
+            };
+          } else {
+            restParams.onClose = () => {
+              close();
+              resolve();
+              queue.clear();
+            };
+          }
+          // HACK: 需要让 react 先清理掉旧的 DidConnect 组件实例，再打开一个新的，否则会造成 did-connect 中的 state 未被重新初始化
+          setTimeout(() => {
+            connectRef.current?.open(restParams, ...restargs);
+            // FIXME: @zhanghan 弄清楚需要延迟的原因，目前不设置 setTimeout 延时会造成 state 未被正确赋值
+          }, 300);
+        });
+      };
+      queue.add(openFn);
+    }
+  );
+
+  /**
+   * @type {import('../types').OpenConnectPopup}
+   */
+  const _openPopup = useMemoizedFn(
+    (
+      _params = {},
+      { baseUrl, locale = 'en', blocklet = globalThis?.blocklet, closeTimeout = CLOSE_TIMEOUT, popupOptions } = {}
+    ) => {
+      return new Promise((resolveRoot, rejectRoot) => {
+        const openPopupFn = () => {
+          // eslint-disable-next-line no-async-promise-executor
+          return new Promise((resolveChild) => {
+            const innerFn = async () => {
+              if (isUndefined(baseUrl)) {
+                const federatedEnabled = getFederatedEnabled();
+                const masterSite = getMaster();
+                // eslint-disable-next-line no-param-reassign
+                baseUrl = federatedEnabled ? masterSite.appUrl : window.location.origin;
+              }
+              const { onSuccess, onClose, onError, custom = false, ...params } = _params;
+              if (!params?.extraParams?.provider) {
+                if (isFunction(onError)) {
+                  onError('Must have extraParams.provider');
+                }
+                throw new Error('Must have extraParams.provider');
+              }
+              if (!params?.prefix) {
+                params.prefix = window.location.origin + joinURL(blocklet?.prefix, API_DID_PREFIX);
+              }
+
+              const popupUrlParams = {
+                params: btoa(encodeURIComponent(JSON.stringify(params))),
+                appPid: blocklet?.appPid,
+                locale,
+                disableClose: true, // 弹窗模式默认不允许关闭 DID Connect
+              };
+
+              const popup = openPopup(
+                custom
+                  ? withQuery(joinURL(baseUrl, params.prefix), popupUrlParams)
+                  : withQuery(joinURL(baseUrl || '/', BLOCKLET_SERVICE_PATH_PREFIX, '/connect'), popupUrlParams),
+                popupOptions
+              );
+
+              try {
+                const data = await runPopup({ popup, closeTimeout });
+
+                updateConnectedInfo(
+                  {
+                    connected_app: getAppId(),
+                    ...data?.options,
+                  },
+                  true
+                );
+
+                if (isFunction(onSuccess)) {
+                  onSuccess({ ...data.response, encrypted: false });
+                  close();
+                  resolveChild();
+                } else {
+                  close();
+                  resolveChild();
+                }
+                resolveRoot({ ...data.response, encrypted: false });
+              } catch (err) {
+                console.error(err);
+                if (err.message === 'Popup closed') {
+                  if (isFunction(onClose)) {
+                    onClose();
+                    resolveChild();
+                    queue.clear();
+                  } else {
+                    resolveChild();
+                    queue.clear();
+                  }
+                } else if (isFunction(onError)) {
+                  onError(err);
+                }
+                throw err;
+              }
+            };
+            innerFn().catch((error) => {
+              resolveChild();
+              rejectRoot(error);
+            });
+          });
+        };
+        queue.add(openPopupFn);
+      });
+    }
+  );
+
+  const loginOAuth = (options) => {
+    connectRef.current.loginOAuth(options);
+  };
+
+  const connectHolder = useCreation(() => {
+    return <ConnectHolder ref={connectRef} />;
+  });
+  const connectApi = useCreation(() => {
+    return {
+      open,
+      close,
+      loginOAuth,
+      openPopup: _openPopup,
+      queue,
+    };
+  });
+
+  return {
+    connectHolder,
+    connectApi,
+  };
+}

package/src/Connect/with-blocklet.jsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import { BlockletProvider, useBlockletContext } from '@arcblock/ux/lib/BlockletContext';
+
+export default function withBlocklet(Component) {
+  // HACK: 该组件是为了在 baseUrl 设置为其他 blocklet 的 appUrl 时，能够正确读取到目标的 blocklet
+  // 比如在 A blocklet 中，添加了一个 B blocklet 的 did-connect，此时 did-connect 的数据要以 B blocklet 为数据基础
+  function ComponentWrap({ ...props }) {
+    const { blocklet, masterBlocklet } = useBlockletContext();
+
+    return <Component {...props} blocklet={blocklet} masterBlocklet={masterBlocklet} />;
+  }
+
+  /**
+   * @param {{baseUrl: string}} props
+   * @returns
+   */
+  function WithProviderComponent({ baseUrl, ...rest }) {
+    return (
+      <BlockletProvider baseUrl={baseUrl}>
+        <ComponentWrap baseUrl={baseUrl} {...rest} />
+      </BlockletProvider>
+    );
+  }
+
+  return WithProviderComponent;
+}

package/src/Connect/with-bridge-call.jsx

@@ -0,0 +1,138 @@
+/* eslint-disable react/require-default-props */
+import { use, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import bridge from '@arcblock/bridge';
+import { useDebounceFn, useMemoizedFn } from 'ahooks';
+import pick from 'lodash/pick';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import { isUrl } from '@arcblock/ux/lib/Util';
+import { joinURL } from 'ufo';
+
+import { debug } from '../utils';
+import { API_DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX, DEFAULT_TIMEOUT } from '../constant';
+import useSecurity from './hooks/security';
+import { SessionContext } from '../Session/context';
+import { getWalletDid } from '../User/use-did';
+
+export default function withBridgeCall(Component) {
+  const defaultConnectParams = {
+    prefix: API_DID_PREFIX,
+    checkInterval: 2 * 1000,
+    checkTimeout: DEFAULT_TIMEOUT * 1000,
+    locale: 'en',
+    tokenKey: '_t_',
+    encKey: '_ek_',
+    baseUrl: '',
+    messages: {},
+    extraParams: {},
+    forceConnected: true,
+    enabledConnectTypes: [], // 所有的
+    disableSwitchApp: false,
+    hideCloseButton: false,
+    qrcodeSize: 160,
+    options: {},
+  };
+  function WithBridgeCallComponent(props) {
+    const { encryptKey, decrypt } = useSecurity();
+    const browser = useBrowser();
+    const sessionContext = use(SessionContext);
+    const currentUserDid = getWalletDid(sessionContext?.session?.user);
+    const params = pick(props, [
+      //
+      'action',
+      'checkTimeout',
+      'locale',
+      'messages',
+      // 'webWalletUrl', arcSphere 中不需要通过 web 登录，不需要此参数
+      //
+      'baseUrl', // 要写清楚 baseUrl 和 prefix 的处理逻辑
+      'prefix',
+      'checkInterval',
+      'closeTimeout',
+      'extraParams',
+      'tokenKey',
+      'encKey',
+      'forceConnected',
+      'provider',
+      'enabledConnectTypes',
+      'disableSwitchApp',
+      'hideCloseButton', // 不允许用户关闭这个 connect
+      // 'qrcodeSize', // 不应该允许配置？
+      'options', // FIXME: @zhanghan 弄清楚参数的字段
+      //
+      // 'autoConnect',
+      // 'saveConnect',
+      // 'useSocket', // 后期再考虑实现
+      // 'allowWallet',
+      // 'showDownload',
+
+      // 函数，需要在这一层进行处理
+      // 'onError',
+      // 'onSuccess',
+      // 'onRecreateSession', // 貌似没有地方用，直接去掉？
+      // 'onClose',
+    ]);
+    const mergedParams = Object.assign({}, defaultConnectParams, params);
+    if (mergedParams.forceConnected === true) {
+      mergedParams.forceConnected = currentUserDid || true;
+    }
+    // NOTICE: 传递给 ArcSphere 的 prefix 需要妥善处理 serviceHost 的拼接
+    // Web 端的 DID Connect serviceHost 会作为 api 实例的 baseUrl，所以不需要拼接在 prefix 中
+    // eslint-disable-next-line react/prop-types
+    const serviceHost = props.serviceHost || window?.env?.apiPrefix || window?.blocklet?.prefix || '/';
+    if (!isUrl(mergedParams.prefix) && !mergedParams.prefix?.startsWith(BLOCKLET_SERVICE_PATH_PREFIX)) {
+      mergedParams.prefix = joinURL(serviceHost, mergedParams.prefix);
+    }
+
+    const showOpenArcSphereDIDConnect = browser.arcSphere && props.open && !window.forceOpenConnect;
+
+    const { run: callClientDidConnect } = useDebounceFn(
+      useMemoizedFn(async () => {
+        debug('bridge call arcDidConnect', props, params, mergedParams);
+        try {
+          const result = await bridge.callArc('didConnect', { ...mergedParams, [mergedParams.encKey]: encryptKey });
+          debug('bridge callArc didConnect: result', result);
+          if (result.action === 'error') {
+            // eslint-disable-next-line react/prop-types
+            props.onError(result.data);
+            return;
+          }
+          if (result.action === 'success') {
+            // eslint-disable-next-line react/prop-types
+            props.onSuccess(result.data, decrypt);
+            return;
+          }
+          // close | cancel
+          // eslint-disable-next-line react/prop-types
+          props.onClose(result.data);
+          // action 不匹配的时候，什么都不做
+        } catch (err) {
+          logger.error('Failed to callArc didConnect', err);
+        }
+      }),
+      {
+        leading: true,
+        wait: 300,
+      }
+    );
+
+    useEffect(() => {
+      if (showOpenArcSphereDIDConnect) {
+        debug('WrapConnect call');
+        callClientDidConnect();
+      }
+    }, [callClientDidConnect, showOpenArcSphereDIDConnect]);
+
+    if (showOpenArcSphereDIDConnect) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  }
+
+  WithBridgeCallComponent.propTypes = {
+    open: PropTypes.bool,
+  };
+
+  return WithBridgeCallComponent;
+}

package/src/Federated/context.jsx

@@ -0,0 +1,93 @@
+import { createContext, use, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import omit from 'lodash/omit';
+import { RequestStorageAccessApiDialog } from '@arcblock/ux/lib/DIDConnect';
+import { joinURL } from 'ufo';
+import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+import { useCreation, useMemoizedFn, useLocalStorageState, useInterval } from 'ahooks';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import Cookie from 'js-cookie';
+
+import { getBrowserLang } from '../utils';
+import { CHECK_INTERVAL_TIME, LANG_COOKIE_NAME } from '../constant';
+
+const FederatedContext = createContext({});
+const { Provider, Consumer: FederatedConsumer } = FederatedContext;
+
+function FederatedProvider({ children, locale: initialLocale = 'en' }) {
+  const blocklet = window?.blocklet;
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const masterSite = getMaster(blocklet);
+  const requestStorageAccessApiDialogRef = useRef(null);
+  const [storageAccess, setStorageAccess] = useLocalStorageState('storage-access', {
+    defaultValue: {
+      appUrl: masterSite?.appUrl,
+      iat: Date.now(),
+      state: undefined,
+    },
+  });
+  const [locale, setLocale] = useState(initialLocale);
+
+  const checkCookieLocale = useMemoizedFn(() => {
+    const latestLocale = Cookie.get(LANG_COOKIE_NAME) || getBrowserLang();
+    if (latestLocale !== locale) {
+      setLocale(latestLocale);
+    }
+  });
+
+  const requestStorageAccess = useMemoizedFn(async () => {
+    const { value: hasAccess, origin } = await requestStorageAccessApiDialogRef.current.requestStorageAccess();
+    let state = storageAccess.state || 'prompt';
+    if (origin === 'broswer') {
+      if (storageAccess.state) state = hasAccess ? 'granted' : 'denied';
+    }
+
+    // NOTICE: 只有变化时才记录，确保 iat 值是相对可信的
+    if (state !== storageAccess.state) {
+      setStorageAccess({
+        ...storageAccess,
+        iat: Date.now(),
+        state,
+      });
+    }
+    return hasAccess;
+  });
+
+  const bridgeContent = useCreation(() => {
+    if (masterSite?.appUrl && federatedEnabled) {
+      return (
+        <RequestStorageAccessApiDialog
+          ref={requestStorageAccessApiDialogRef}
+          locale={locale}
+          src={joinURL(masterSite.appUrl, BLOCKLET_SERVICE_PATH_PREFIX, '/share/shared-bridge.html')}
+          storageAccessState={storageAccess.state}
+        />
+      );
+    }
+    return null;
+  }, [locale, masterSite?.appUrl, federatedEnabled, storageAccess.appUrl, storageAccess.iat, storageAccess.state]);
+
+  useInterval(() => {
+    checkCookieLocale();
+  }, CHECK_INTERVAL_TIME);
+
+  return (
+    <Provider value={{ requestStorageAccess }}>
+      {children}
+      {bridgeContent}
+    </Provider>
+  );
+}
+
+FederatedProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  locale: PropTypes.string,
+};
+
+function useFederatedContext() {
+  const context = use(FederatedContext);
+
+  return omit(context, ['locale']);
+}
+
+export { FederatedContext, FederatedConsumer, FederatedProvider, useFederatedContext };

package/src/Federated/index.jsx

@@ -0,0 +1 @@
+export * from './context';

package/src/Logo/index.jsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from '@arcblock/ux/lib/DIDLogo';