@arcblock/did-connect-react 3.1.0

package/src/Session/libs/constants.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+
+export const EVENTS = {
+  LOGIN: Symbol('login'),
+  CANCEL_LOGIN: Symbol('cancelLogin'),
+  LOGOUT: Symbol('logout'),
+  SWITCH_PROFILE: Symbol('switchProfile'),
+  CANCEL_SWITCH_PROFILE: Symbol('cancelSwitchProfile'),
+  SWITCH_PASSPORT: Symbol('switchPassport'),
+  CANCEL_SWITCH_PASSPORT: Symbol('cancelSwitchPassport'),
+  BIND_WALLET: Symbol('bindWallet'),
+  CANCEL_BIND_WALLET: Symbol('cancelBindWallet'),
+  DID_SPACE_CONNECTED: Symbol('didSpaceConnected'),
+};

package/src/Session/libs/did-spaces.js

@@ -0,0 +1,38 @@
+/* eslint-disable require-await */
+/* eslint-disable import/prefer-default-export */
+
+import { BLOCKLET_SERVICE_PATH_PREFIX, DID_SPACES_BASE_URL } from '../../constant';
+
+/**
+ * @description
+ * @export
+ * @param {*} user
+ * @return {Promise<boolean>}
+ */
+export async function didSpacesIsRequired(user) {
+  if (user?.didSpace?.endpoint) {
+    return false;
+  }
+
+  if (!window.blocklet) {
+    return false;
+  }
+
+  // 如果是在 iframe 中，直接返回 false
+  if (window.self !== window.top) {
+    return false;
+  }
+
+  if (window.location.origin === new URL(DID_SPACES_BASE_URL).origin) {
+    return false;
+  }
+
+  // @note: 如果在 blocklet service 页面中，那么默认不展示 did-spaces 引导
+  if (window.location.href.includes(BLOCKLET_SERVICE_PATH_PREFIX)) {
+    return false;
+  }
+
+  const { componentMountPoints } = window.blocklet;
+  const [, componentDid] = window.blocklet.componentId.split('/');
+  return componentMountPoints.some((c) => c?.capabilities?.didSpace === 'requiredOnConnect' && componentDid === c.did);
+}

package/src/Session/libs/federated.js

@@ -0,0 +1,79 @@
+import { joinURL } from 'ufo';
+import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
+
+import { createAxios, sleep } from '../../utils';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../constant';
+
+const api = createAxios();
+
+/**
+ * 获取 master 的 token
+ * @returns {Promise<{sessionToken: string; refreshToken: string;}>}
+ */
+async function getMasterToken() {
+  const url = joinURL(BLOCKLET_SERVICE_PATH_PREFIX, '/api/federated/loginMaster');
+  const { data } = await api.post(url);
+  return data;
+}
+
+// eslint-disable-next-line require-await
+export async function mountFederatedIframe({ mode, refreshToken = '', blocklet }) {
+  const master = getMaster(blocklet);
+  return new Promise((resolve) => {
+    if (!['login', 'logout'].includes(mode)) {
+      resolve();
+      return;
+    }
+
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.onload = async () => {
+      // HACK: 即使当前页面已经 Load 成功，也强制等待 500ms，确保不会产生边缘情况的问题
+      await sleep(500);
+      document.body.removeChild(iframe);
+      resolve();
+    };
+    iframe.src = joinURL(
+      master.appUrl,
+      BLOCKLET_SERVICE_PATH_PREFIX,
+      `functional/federated?mode=${mode}&refreshToken=${refreshToken}`
+    );
+    document.body.appendChild(iframe);
+  });
+}
+
+export async function loginFederatedMaster(params = {}, { fetchToken = true, blocklet } = {}) {
+  const enableFederated = getFederatedEnabled();
+  if (!enableFederated) {
+    console.warn('Federated not enabled');
+    return null;
+  }
+  /**
+   * @type {string}
+   */
+  let sessionToken;
+  /**
+   * @type {string}
+   */
+  let refreshToken;
+
+  if (fetchToken) {
+    ({ sessionToken, refreshToken } = await getMasterToken());
+  }
+
+  const master = getMaster(blocklet);
+  const url = joinURL(master.appUrl, BLOCKLET_SERVICE_PATH_PREFIX, '/api/federated/login');
+  const options = { withCredentials: true };
+
+  if (sessionToken) {
+    options.headers = {
+      Authorization: `Bearer ${sessionToken}`,
+    };
+  }
+
+  const { data } = await api.post(url, params, options);
+  if (refreshToken) {
+    await mountFederatedIframe({ mode: 'login', refreshToken, blocklet });
+  }
+  return data;
+}

package/src/Session/libs/index.js

@@ -0,0 +1,5 @@
+export * from './constants.js';
+export * from './did-spaces.js';
+export * from './federated.js';
+export * from './locales.js';
+export * from './login-mobile.js';

package/src/Session/libs/locales.js

@@ -0,0 +1,160 @@
+/* eslint-disable import/prefer-default-export */
+export const translations = {
+  login: {
+    en: {
+      title: 'Connect',
+      scan: 'Please use the following methods to complete the connection',
+      confirm: 'Confirm connection in your DID Wallet',
+      success: 'Successfully connected',
+    },
+    zh: {
+      title: '登录',
+      scan: '请使用下面的方式完成登录',
+      confirm: '在 DID Wallet 中确认连接',
+      success: '登录成功',
+    },
+  },
+  'switch-specified-did': {
+    en: {
+      title: 'Switch Account',
+      scan: 'You need switch DID to {did} to complete the following actions',
+      confirm: 'Confirm switch in your DID Wallet',
+      success: 'Successfully switched',
+    },
+    zh: {
+      title: '切换账号',
+      scan: '你需要切换账号至 {did} 才能完成后续的操作',
+      confirm: '在 DID Wallet 中确认切换',
+      success: '切换成功',
+    },
+  },
+  'switch-did': {
+    en: {
+      title: 'Add Account',
+      scan: 'Please use the following methods to add a new account',
+      confirm: 'Confirm switch in your DID Wallet',
+      success: 'Successfully added',
+    },
+    zh: {
+      title: '添加账号',
+      scan: '请使用下列方式添加新的账号',
+      confirm: '在 DID Wallet 中确认切换',
+      success: '添加成功',
+    },
+  },
+  'switch-profile': {
+    en: {
+      title: 'Switch Profile',
+      scan: 'Use DID Wallet to switch profile',
+      confirm: 'Select profile in your DID Wallet',
+      success: 'Profile updated',
+    },
+    zh: {
+      title: '切换个人信息',
+      scan: '请使用 DID Wallet 来切换个人信息',
+      confirm: '在 DID Wallet 中选择个人信息',
+      success: '个人信息已经更新',
+    },
+  },
+  'switch-passport': {
+    en: {
+      title: 'Switch Passport',
+      scan: 'Use DID Wallet to switch passport',
+      confirm: 'Select passport in your DID Wallet',
+      success: 'Passport and session updated',
+    },
+    zh: {
+      title: '切换通行证',
+      scan: '请使用 DID Wallet 来切换通行证',
+      confirm: '在 DID Wallet 中选择通行证',
+      success: '通行证和会话已经更新',
+    },
+  },
+  'connect-to-did-spaces-for-user': {
+    en: {
+      title: 'Please authorize the application to connect to your DID Space',
+      scan: 'Please use your DID wallet to complete this authorization',
+      confirm: 'Select the DID Spaces NFT in your DID wallet',
+      success: 'Connection successful',
+    },
+    zh: {
+      title: '请授权应用连接你的 DID Space',
+      scan: '请使用 DID Wallet 来完成授权',
+      confirm: '在 DID Wallet 中选择 DID Spaces NFT',
+      success: '连接成功',
+    },
+  },
+  'bind-wallet': {
+    en: {
+      title: 'Connect DID Wallet for enhanced security',
+      scan: 'Use DID Wallet to connect your account',
+      success: 'Successfully connected',
+    },
+    zh: {
+      title: '连接 DID Wallet 获得更高的安全性',
+      scan: '请使用 DID Wallet 来连接您的账户',
+      success: '连接成功',
+    },
+  },
+  exchangePassport: {
+    en: {
+      action: 'Exchange Passport with NFT',
+      tooltip: 'Exchange passport if you owns any required NFT',
+    },
+    zh: {
+      action: '兑换通行证',
+      tooltip: '通过出示你持有的特定 NFT 来获取通行证',
+    },
+  },
+  lostPassport: {
+    en: {
+      action: 'Lost Passport',
+    },
+    zh: {
+      action: '找回通行证',
+    },
+  },
+
+  switchAccountDialog: {
+    en: {
+      confirm: 'Switch',
+      title: 'Switch Account',
+      description: 'Please switch accounts to complete next action',
+      currentAccount: 'Current account',
+      nextAccount: 'Account to be switched',
+    },
+    zh: {
+      confirm: '切换',
+      title: '切换账号',
+      description: '请切换账号来完成后续的操作',
+      currentAccount: '当前登录的账户',
+      nextAccount: '即将切换的账户',
+    },
+  },
+  verify: {
+    zh: {
+      title: '验证所有权',
+      verify: '验证',
+      reconnect: '换个应用',
+      scan: '使用以下方法证明所有权',
+      confirm: '请在钱包中确认签名，以允许服务器下载并解密备份',
+      success: '所有权验证成功，正在进行还原',
+      exists: '相同 DID 的应用已存在此节点上，没有继续恢复',
+      open: '访问此应用',
+      overwrite: '覆盖安装',
+      abort: '访问验证已终止',
+    },
+    en: {
+      title: 'Verify Ownership',
+      verify: 'Verify',
+      reconnect: 'Try another blocklet',
+      scan: 'Use the following methods to prove ownership',
+      confirm: 'Sign delegation to allow server to download and decrypt the backup',
+      success: 'Ownership verified, the restoring is in progress',
+      exists: 'This blocklet already exists on this server and restore is aborted',
+      open: 'Visit Blocklet',
+      overwrite: 'Overwrite',
+      abort: 'Access verification aborted',
+    },
+  },
+};

package/src/Session/libs/login-mobile.js

@@ -0,0 +1,80 @@
+import { getApps } from '@arcblock/ux/lib/Util/federated';
+import { isUrl } from '@arcblock/ux/lib/Util';
+import { joinURL, withQuery } from 'ufo';
+import semver from 'semver';
+import bridge from '@arcblock/bridge';
+import pathToRegexp from 'path-to-regexp';
+
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../constant';
+import { logger } from '../../utils';
+
+const BLACK_LIST = [
+  `${BLOCKLET_SERVICE_PATH_PREFIX}/connect`,
+  `${BLOCKLET_SERVICE_PATH_PREFIX}/login`,
+  `${BLOCKLET_SERVICE_PATH_PREFIX}/invite`,
+  `${BLOCKLET_SERVICE_PATH_PREFIX}/issue-passport`,
+  `${BLOCKLET_SERVICE_PATH_PREFIX}/oauth/*`,
+];
+
+const blackListRoute = BLACK_LIST.map((item) => pathToRegexp(item, []));
+
+export async function login() {
+  const blocklet = window?.blocklet || {};
+  const currentPath = window.location.pathname;
+  const { componentId, CHAIN_TYPE: chainType = 'arcblock', appPid } = blocklet;
+  const matched = blackListRoute.some((item) => item.exec(currentPath));
+  if (matched) {
+    return null;
+  }
+
+  const apps = getApps();
+
+  try {
+    // eth 多个地址和统一登录该如何组合？
+    // member 的 url
+    const searchParams = new URLSearchParams(window.location.search);
+    const inviter = searchParams.get('inviter') || localStorage.getItem('inviter');
+    const target = withQuery(joinURL(window.location.origin, BLOCKLET_SERVICE_PATH_PREFIX, '/api/user/loginByWallet'), {
+      inviter,
+    });
+    const data = await bridge.asyncCall('arcLogin', {
+      target,
+      chainType,
+      appPid,
+      componentId,
+      apps: apps.map((x) => {
+        let appLogo = x?.appLogo;
+        if (!isUrl(appLogo)) {
+          appLogo = joinURL(x.appUrl, appLogo);
+        }
+        return {
+          appName: x.appName,
+          appPid: x.appPid,
+          appUrl: x.appUrl,
+          appLogo,
+          sourceAppPid: x.sourceAppPid,
+        };
+      }),
+    });
+    return data;
+  } catch (err) {
+    logger.error('Failed login mobile', err);
+    return null;
+  }
+}
+
+export async function getMobileVisitorId() {
+  const result = await bridge.asyncCall('arcGetVisitorId');
+  return result;
+}
+
+export function checkEnableAutoLogin({ platform, version } = {}) {
+  if (platform === 'ios' && version && semver.gte(version, '4.15.6')) {
+    return true;
+  }
+  if (platform === 'android' && version && semver.gte(version, '4.15.1')) {
+    return true;
+  }
+
+  return false;
+}

package/src/Session/window-focus-aware.jsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useMemoizedFn, useDebounceFn } from 'ahooks';
+
+function WindowFocusAware({ callback }) {
+  const debounceFn = useDebounceFn(callback);
+  const handleVisibilityChange = useMemoizedFn(() => {
+    if (!document.hidden) {
+      debounceFn.run();
+    }
+  });
+  useEffect(() => {
+    window.addEventListener('focus', debounceFn.run);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      window.removeEventListener('focus', debounceFn.run);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+}
+
+WindowFocusAware.propTypes = {
+  callback: PropTypes.func.isRequired,
+};
+
+export default WindowFocusAware;

package/src/SessionManager/index.jsx

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

package/src/Storage/engine/cookie.js

@@ -0,0 +1,23 @@
+import Cookie from 'js-cookie';
+import { getCookieOptions } from '@arcblock/ux/lib/Util';
+
+export default class CookieStorageEngine {
+  constructor(storageKey, options) {
+    this.storageKey = storageKey;
+    this.options = options || {};
+  }
+
+  setToken(token) {
+    return Cookie.set(this.storageKey, token, {
+      ...getCookieOptions(this.options),
+    });
+  }
+
+  getToken() {
+    return Cookie.get(this.storageKey);
+  }
+
+  removeToken() {
+    return Cookie.remove(this.storageKey, getCookieOptions(this.options));
+  }
+}

package/src/Storage/engine/local-storage.js

@@ -0,0 +1,55 @@
+import jwtDecode from 'jwt-decode';
+
+export default class LocalStorageEngine {
+  constructor(storageKey) {
+    this.storageKey = storageKey;
+  }
+
+  setToken(token) {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+
+    return localStorage.setItem(this.storageKey, token);
+  }
+
+  getToken() {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+
+    const data = localStorage.getItem(this.storageKey);
+    let value;
+    let exp;
+    try {
+      ({ value, exp } = JSON.parse(data));
+      // exp undefined 代表该结构不是有效的，所以应该直接返回 data
+      if (exp === undefined || value === undefined) {
+        // 从 value 中读取 exp
+        return data;
+      }
+    } catch {
+      value = data;
+    }
+
+    try {
+      const decodeValue = jwtDecode(value);
+      exp = decodeValue.exp;
+    } catch {
+      return undefined;
+    }
+
+    if (new Date().getTime() > exp * 1000) {
+      return undefined;
+    }
+    return value;
+  }
+
+  removeToken() {
+    if (typeof window === 'undefined' || typeof window.localStorage === 'undefined') {
+      return undefined;
+    }
+
+    return localStorage.removeItem(this.storageKey);
+  }
+}

package/src/Storage/index.js

@@ -0,0 +1,25 @@
+import CookieEngine from './engine/cookie';
+import LocalStorageEngine from './engine/local-storage';
+
+export default function createStorage(storageKey = 'did.auth.token', storageEngine = 'ls', storageOptions = {}) {
+  if (!storageKey) {
+    throw new Error('storageKey must be specified to create a storage');
+  }
+
+  let storage = null;
+  if (storageEngine === 'ls') {
+    storage = new LocalStorageEngine(storageKey);
+  } else if (storageEngine === 'cookie') {
+    storage = new CookieEngine(storageKey, storageOptions);
+  } else {
+    throw new Error('storageEngine must be ls or cookie');
+  }
+
+  return {
+    getToken: storage.getToken.bind(storage),
+    setToken: storage.setToken.bind(storage),
+    removeToken: storage.removeToken.bind(storage),
+    engine: storageEngine,
+    key: storageKey,
+  };
+}

package/src/User/index.js

@@ -0,0 +1,4 @@
+import useDid from './use-did';
+import WrapDid from './wrap-did';
+
+export { useDid, WrapDid };

package/src/User/use-did.js

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+
+// following utils duplicate from: arcblock/blocklet-server/blocklet/meta/src/did
+export function getPermanentDid(user) {
+  return user?.did;
+}
+
+export function getConnectedAccounts(user) {
+  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+}
+
+export function getSourceProvider(user) {
+  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+}
+
+export function getSourceProviders(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  return connectedAccounts.map((item) => item.provider);
+}
+
+export function getConnectedDids(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const didList = connectedAccounts.map((item) => item.did);
+  return didList;
+}
+
+export function getWallet(user) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const walletAccount = connectedAccounts.find((item) => item.provider === 'wallet');
+  return walletAccount;
+}
+/**
+ * @description
+ * @export
+ * @param {*} user
+ * @return {string}
+ */
+export function getWalletDid(user) {
+  const walletAccount = getWallet(user);
+  return walletAccount?.did;
+}
+
+function useDid({ session }) {
+  const [state, setState] = useState({
+    did: '',
+    wallet: '',
+    walletDid: '',
+    permanentDid: '',
+    connectedDids: [],
+    connectedAccounts: [],
+    sourceProvider: '',
+    sourceProviders: [],
+  });
+  useEffect(() => {
+    if (session?.user) {
+      const permanentDid = getPermanentDid(session.user);
+      const walletDid = getWalletDid(session.user);
+      const connectedAccounts = getConnectedAccounts(session.user);
+      const connectedDids = getConnectedDids(session.user);
+      const wallet = getWallet(session.user);
+      const sourceProvider = getSourceProvider(session.user);
+      const sourceProviders = getSourceProviders(session.user);
+
+      setState({
+        did: permanentDid,
+        wallet,
+        walletDid,
+        permanentDid,
+        connectedDids,
+        connectedAccounts,
+        sourceProvider,
+        sourceProviders,
+      });
+    }
+  }, [session?.user]);
+
+  return state;
+}
+
+export default useDid;

package/src/User/wrap-did.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import useDid from './use-did';
+
+function WrapDid({ session, children }) {
+  const state = useDid({ session });
+
+  if (children instanceof Function) {
+    return children(state);
+  }
+  return null;
+}
+
+WrapDid.propTypes = {
+  session: PropTypes.object.isRequired,
+  children: PropTypes.func.isRequired,
+};
+
+export default WrapDid;

package/src/WebWalletSWKeeper/index.jsx

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

package/src/constant.js

@@ -0,0 +1,26 @@
+export const DEFAULT_TIMEOUT = 5 * 60;
+export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
+export const BLOCKLET_SERVICE_PATH_PREFIX = '/.well-known/service';
+export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
+export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
+
+export const RELAY_SOCKET_PREFIX = '/.well-known/service';
+export const API_DID_PREFIX = '/api/did';
+
+export const DEFAULT_NAME = 'DID Connect';
+
+export const DID_CONNECT_URL_PARAMS_NAME = '__did-connect__';
+
+export const BUSY_STATUS = ['scanned', 'succeed', 'error', 'busy'];
+export const EXT_DOWNLOAD_URL = {
+  chrome: 'https://chromewebstore.google.com/detail/did-wallet/ibjflpbmadchofnbpppegdbnifdgincp',
+  edge: 'https://microsoftedge.microsoft.com/addons/detail/did-wallet/hjgoblidjnnnamdkinbichnfbmghmafd',
+};
+
+export const CHECK_STATUS_INTERVAL = 2 * 1000;
+export const VERIFY_CODE_LENGTH = 6;
+
+export const LANG_COOKIE_NAME = 'nf_lang';
+export const CHECK_INTERVAL_TIME = 1000;
+
+export const DID_SPACES_BASE_URL = window?.blocklet?.DID_SPACES_BASE_URL || 'https://www.didspaces.com/app';

package/src/error.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export class NotOpenError extends Error {
+  constructor() {
+    super('Failed to open popup');
+  }
+}

package/src/hooks/use-locale.jsx

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+import { getBrowserLang } from '../utils';
+
+export function useLocale() {
+  return getBrowserLang();
+}