@arcblock/did-playground 1.16.1 → 1.16.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-playground",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "description": "React components that works with wallet-playground",
   "keywords": [
     "react",
@@ -13,7 +13,8 @@
   "main": "lib/index.js",
   "files": [
     "version",
-    "lib"
+    "lib",
+    "src"
   ],
   "repository": {
     "type": "git",
@@ -33,9 +34,9 @@
     "url": "https://github.com/ArcBlock/wallet-playground/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.16.1",
-    "@arcblock/react-hooks": "^1.16.1",
-    "@arcblock/ux": "^1.16.1",
+    "@arcblock/did-connect": "^1.16.2",
+    "@arcblock/react-hooks": "^1.16.2",
+    "@arcblock/ux": "^1.16.2",
     "@material-ui/core": "^4.12.3",
     "axios": "^0.21.1",
     "core-js": "^3.6.4",
@@ -56,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca18ee446fff68422a8414dd6d4eb8b724e7ac40"
+  "gitHead": "b869c847f922a9e89158e7d3ba4219789e6d20d0"
 }

package/src/Action/actions.js

@@ -0,0 +1,575 @@
+import mustache from 'mustache';
+
+async function createSwapOrder(api) {
+  const res = await api.post('/api/did/swap', {});
+  return { tid: res.data.traceId };
+}
+
+const getValidPayAmount = (payAmount, price) => {
+  if (Number(payAmount) >= 0) {
+    return payAmount;
+  }
+  if (Number(price) >= 0) {
+    return price;
+  }
+  return 1;
+};
+
+export const getMessage = (message = '', session) => {
+  try {
+    return mustache.render(
+      message,
+      {
+        user: session.user || {},
+        token: session.token || {},
+        balance: session.balance || {},
+      },
+      {},
+      ['(%', '%)']
+    );
+  } catch (err) {
+    console.error('Cannot render message', { message, session });
+    return message;
+  }
+};
+
+// https://github.com/ArcBlock/gatsby-extensions/issues/56
+export const actions = {
+  // Currency
+  receive_local_token: {
+    action: 'receive_token',
+    extraParams: props => ({ chain: 'local', amount: props.amount || 1 }),
+  },
+  receive_foreign_token: {
+    action: 'receive_token',
+    extraParams: props => ({ chain: 'foreign', amount: props.amount || 1 }),
+  },
+  send_local_token: {
+    action: 'send_token',
+    extraParams: props => ({ chain: 'local', amount: props.amount || 1 }),
+  },
+  send_foreign_token: {
+    action: 'send_token',
+    extraParams: props => ({ chain: 'foreign', amount: props.amount || 1 }),
+  },
+  exchange_to_foreign_token: {
+    action: 'swap_token',
+    onStart: createSwapOrder,
+    extraParams: props => ({ action: 'buy', rate: props.exchangeRate, amount: props.amount || 1 }),
+  },
+  exchange_to_local_token: {
+    action: 'swap_token',
+    onStart: createSwapOrder,
+    extraParams: props => ({ action: 'sell', rate: props.exchangeRate, amount: props.amount || 1 }),
+  },
+
+  exchange_to_foreign_token_v2: {
+    action: 'swap_token_v2',
+    onStart: createSwapOrder,
+    extraParams: props => ({ action: 'buy', rate: props.exchangeRate, amount: props.amount || 1 }),
+  },
+  exchange_to_local_token_v2: {
+    action: 'swap_token_v2',
+    onStart: createSwapOrder,
+    extraParams: props => ({ action: 'sell', rate: props.exchangeRate, amount: props.amount || 1 }),
+  },
+
+  // Cross chain assets and tokens
+  buy_foreign_certificate_with_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'certificate',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  buy_foreign_badge_with_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'badge',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+      svg: props.svg,
+    }),
+  },
+  buy_foreign_ticket_with_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'ticket',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_foreign_certificate_for_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'certificate',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_foreign_badge_for_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'badge',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_foreign_ticket_for_local_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'ticket',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+
+  buy_foreign_certificate_with_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'certificate',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  buy_foreign_badge_with_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'badge',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+      svg: props.svg,
+    }),
+  },
+  buy_foreign_ticket_with_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'ticket',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_foreign_certificate_for_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'certificate',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_foreign_badge_for_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'badge',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_foreign_ticket_for_local_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'ticket',
+      pfc: 'local',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+
+  buy_local_certificate_with_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'certificate',
+      pfc: 'foreign',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  buy_local_badge_with_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'badge',
+      pfc: 'foreign',
+      price: props.price || 0,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+      svg: props.svg,
+    }),
+  },
+  buy_local_ticket_with_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'buy',
+      type: 'ticket',
+      pfc: 'foreign',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_local_certificate_for_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'certificate',
+      pfc: 'foreign',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_local_badge_for_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'vc',
+      pfc: 'foreign',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_local_ticket_for_foreign_token: {
+    action: 'swap_asset',
+    onStart: createSwapOrder,
+    extraParams: (props, session) => ({
+      action: 'sell',
+      type: 'ticket',
+      pfc: 'foreign',
+      price: props.price || 1,
+      name: getMessage(props.name, session),
+    }),
+  },
+
+  buy_local_certificate_with_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'certificate',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  buy_local_badge_with_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'badge',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+      svg: props.svg,
+    }),
+  },
+  buy_local_ticket_with_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'badge',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_local_certificate_for_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'certificate',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_local_badge_for_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'badge',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+  sell_local_ticket_for_foreign_token_v2: {
+    action: 'swap_asset_v2',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'ticket',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+
+  // Exchange Scenarios
+  buy_local_certificate_with_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'certificate',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_local_certificate_for_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'certificate',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+  buy_local_badge_with_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'badge',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+      svg: props.svg,
+    }),
+  },
+  sell_local_badge_for_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'badge',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+  buy_local_ticket_with_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: getValidPayAmount(props.payAmount, props.price),
+      pt: 'token',
+      ra: props.receiveAmount || 1,
+      rt: 'ticket',
+      name: getMessage(props.name, session),
+      desc: getMessage(props.description, session),
+      loc: getMessage(props.location, session),
+      bg: props.backgroundUrl,
+      logo: props.logoUrl,
+    }),
+  },
+  sell_local_ticket_for_local_token: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'ticket',
+      ra: getValidPayAmount(props.receiveAmount, props.price),
+      rt: 'token',
+      name: getMessage(props.name, session),
+    }),
+  },
+  buy_local_ticket_with_local_certificate: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'certificate',
+      ra: props.receiveAmount || 1,
+      rt: 'ticket',
+      name: getMessage(props.name, session),
+    }),
+  },
+  buy_local_certificate_with_local_ticket: {
+    action: 'exchange_assets',
+    extraParams: (props, session) => ({
+      pa: props.payAmount || 1,
+      pt: 'ticket',
+      ra: props.receiveAmount || 1,
+      rt: 'certificate',
+      name: getMessage(props.name, session),
+    }),
+  },
+
+  consume_local_asset: {
+    action: 'consume_asset',
+    extraParams: ({ type, typeUrl, name, did }, session) => ({
+      pfc: 'local',
+      type,
+      tu: typeUrl,
+      name: getMessage(name, session),
+      did,
+    }),
+  },
+  consume_foreign_asset: {
+    action: 'consume_asset',
+    extraParams: ({ type, typeUrl, name, did }, session) => ({
+      pfc: 'foreign',
+      type,
+      tu: typeUrl,
+      name: getMessage(name, session),
+      did,
+    }),
+  },
+  consume_local_asset_by_name: {
+    action: 'consume_asset',
+    extraParams: ({ name }, session) => ({
+      pfc: 'local',
+      name: getMessage(name, session),
+    }),
+  },
+  consume_foreign_asset_by_name: {
+    action: 'consume_asset',
+    extraParams: ({ name }, session) => ({
+      pfc: 'foreign',
+      name: getMessage(name, session),
+    }),
+  },
+  consume_local_asset_by_did: {
+    action: 'consume_asset',
+    extraParams: ({ did }) => ({
+      pfc: 'local',
+      did,
+    }),
+  },
+  consume_foreign_asset_by_did: {
+    action: 'consume_asset',
+    extraParams: ({ did }) => ({
+      pfc: 'foreign',
+      did,
+    }),
+  },
+
+  claim_signature: {
+    action: 'claim_signature',
+    extraParams: ({ type }) => ({ type }),
+  },
+
+  consume_email_vc: {
+    action: 'consume_vc',
+    extraParams: {},
+  },
+};
+
+export const getActionName = (config, props) => {
+  if (typeof config === 'string') {
+    return config;
+  }
+
+  if (typeof config.action === 'string') {
+    return config.action;
+  }
+
+  if (typeof config.action === 'function') {
+    return config.action(props);
+  }
+
+  throw new Error('Cannot determine playground button action');
+};
+
+export const getActionParams = (config, props, session) => {
+  if (typeof config === 'string') {
+    return {};
+  }
+
+  if (!config.extraParams) {
+    return {};
+  }
+
+  if (typeof config.extraParams === 'function') {
+    return config.extraParams(props, session);
+  }
+
+  if (typeof config.extraParams === 'object') {
+    return config.extraParams;
+  }
+
+  return {};
+};

package/src/Action/index.js

@@ -0,0 +1,285 @@
+import React, { useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useWindowSize from 'react-use/lib/useWindowSize';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import styled from 'styled-components';
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import { withTheme } from '@material-ui/core/styles';
+
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import Button from '@arcblock/ux/lib/Button';
+import { mergeProps } from '@arcblock/ux/lib/Util';
+
+import { SessionContext } from './session';
+import { actions, getMessage, getActionName, getActionParams } from './actions';
+
+function Close({ onClose }) {
+  return <CloseContainer onClick={onClose}>&times;</CloseContainer>;
+}
+
+Close.propTypes = { onClose: PropTypes.func.isRequired };
+const CloseContainer = styled.div`
+  display: ${props => (props.disableClose ? 'none' : 'block')};
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  color: #999999;
+  font-size: 2rem;
+  line-height: 1rem;
+  cursor: pointer;
+  user-select: none;
+`;
+
+function PlaygroundAction(props) {
+  const newProps = mergeProps(props, PlaygroundAction, ['buttonRounded', 'extraParams', 'timeout']);
+  const {
+    autoClose,
+    action,
+    buttonText,
+    buttonColor,
+    buttonVariant,
+    buttonSize,
+    buttonRounded,
+    children,
+    disableClose,
+    title,
+    scanMessage,
+    successMessage,
+    successUrl,
+    successTarget,
+    frameProps,
+    confirmMessage,
+    extraParams,
+    timeout,
+    theme,
+    webWalletUrl,
+    ...rest
+  } = newProps;
+
+  const browser = useBrowser();
+  const { api, session } = useContext(SessionContext);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [dynamicParams, setDynamicParams] = useState({});
+  const { width } = useWindowSize();
+  const [success, setSuccess] = useState(false);
+  const [showFrame, setShowFrame] = useState(success && successUrl && successTarget === 'frame');
+
+  // 当打开或关闭组件时，重置部分状态
+  useEffect(
+    () => () => {
+      setSuccess(false);
+      setShowFrame(false);
+    },
+    [open]
+  );
+
+  // If this is just a login button, we do not do anything actually
+  if (action === 'login') {
+    if (session.user) {
+      return (
+        <Button
+          {...rest}
+          rounded={buttonRounded}
+          color={buttonColor}
+          variant={buttonVariant}
+          size={buttonSize}>
+          {getMessage(successMessage || `Hello ${session.user.name}`, session)}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        {...rest}
+        rounded={buttonRounded}
+        color={buttonColor}
+        variant={buttonVariant}
+        size={buttonSize}
+        onClick={() => session.login()}>
+        {getMessage(buttonText || title, session)}
+      </Button>
+    );
+  }
+
+  const config = actions[action];
+  if (!actions[action]) {
+    throw new Error(`Unsupported playground action ${action}`);
+  }
+
+  const doStart = async () => {
+    if (typeof config.onStart === 'function') {
+      try {
+        setLoading(true);
+        const params = await config.onStart(api, session);
+        setDynamicParams(params);
+        setLoading(false);
+      } catch (err) {
+        console.error(
+          `Cannot generate dynamicParams for playground action ${getActionName(config, rest)}`
+        );
+      }
+      setOpen(true);
+    } else {
+      setOpen(true);
+    }
+  };
+
+  const onStart = async () => {
+    if (!session.user) {
+      session.login(doStart);
+      return;
+    }
+
+    await doStart();
+  };
+
+  const onClose = () => setOpen(false);
+
+  const onSuccess = () => {
+    setSuccess(true);
+    if (successUrl) {
+      if (successTarget === 'frame') {
+        setShowFrame(!!successUrl);
+      } else if (successTarget === '_blank') {
+        window.open(successUrl, '_blank');
+      } else {
+        window.open(successUrl, '_self');
+      }
+    } else if (children) {
+      // Do nothing
+    } else if (autoClose) {
+      setTimeout(onClose, 2000);
+    }
+  };
+
+  const renderRedirectUrlAfterSuccess = () => (
+    <>
+      <Close onClose={onClose} />
+      <div>
+        Redirecting to{' '}
+        <a href={successUrl} target={successTarget}>
+          {successUrl}
+        </a>
+      </div>
+    </>
+  );
+
+  const renderFrameAfterSuccess = () => (
+    <>
+      <Close onClose={onClose} />
+      <iframe
+        style={{ width: '100%', height: '100%' }}
+        allow="fullscreen"
+        id="successFrame"
+        title="successFrame"
+        src={successUrl}
+        {...frameProps}
+      />
+    </>
+  );
+
+  const showDidConnect = !successUrl || (successUrl && !success);
+
+  return (
+    <>
+      <Button
+        {...rest}
+        rounded={buttonRounded}
+        color={buttonColor}
+        variant={buttonVariant}
+        size={buttonSize}
+        onClick={onStart}>
+        {getMessage(buttonText || title, session)}{' '}
+        {loading && <CircularProgress size={12} color="#fff" />}
+      </Button>
+      {open && !showDidConnect && (
+        <Dialog
+          open
+          disableBackdropClick
+          disableEscapeKeyDown
+          fullScreen={width < theme.breakpoints.values.sm && !browser.wallet}
+          fullWidth={showFrame}
+          maxWidth={showFrame ? 'lg' : ''}>
+          <DialogContent
+            style={{
+              padding: success && !showFrame && successUrl ? 55 : 0,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: showFrame ? theme.breakpoints.values.md : '',
+            }}>
+            <Close onClose={onClose} />
+            {successUrl && success && !showFrame && renderRedirectUrlAfterSuccess()}
+            {showFrame && renderFrameAfterSuccess()}
+          </DialogContent>
+        </Dialog>
+      )}
+      <DidConnect
+        popup
+        open={open && showDidConnect}
+        action={getActionName(config, rest)}
+        checkFn={api.get}
+        onClose={onClose}
+        onSuccess={onSuccess}
+        checkTimeout={timeout}
+        // 3 layers of extraParams: user props, dynamically generated, from other props
+        extraParams={Object.assign(
+          getActionParams(config, rest, session),
+          dynamicParams,
+          extraParams
+        )}
+        webWalletUrl={webWalletUrl}
+        messages={{
+          title: getMessage(title, session),
+          scan: getMessage(scanMessage, session),
+          confirm: getMessage(confirmMessage, session),
+          success: children || getMessage(successMessage, session),
+        }}
+      />
+    </>
+  );
+}
+
+PlaygroundAction.propTypes = {
+  action: PropTypes.string.isRequired,
+  autoClose: PropTypes.bool,
+  buttonText: PropTypes.string,
+  buttonColor: PropTypes.string,
+  buttonVariant: PropTypes.string,
+  buttonSize: PropTypes.string,
+  buttonRounded: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  scanMessage: PropTypes.string,
+  successMessage: PropTypes.string,
+  confirmMessage: PropTypes.string,
+  extraParams: PropTypes.object,
+  timeout: PropTypes.number,
+  successUrl: PropTypes.string,
+  successTarget: PropTypes.oneOf(['_blank', '_self', 'frame']),
+  frameProps: PropTypes.object,
+  webWalletUrl: PropTypes.string,
+};
+
+PlaygroundAction.defaultProps = {
+  autoClose: true, // 只在没有 successUrl 属性下有效
+  buttonText: '',
+  buttonColor: 'primary', // primary | secondary | reverse | error
+  buttonVariant: 'contained', // contained | outlined | default
+  buttonSize: 'large', // small | large | medium
+  buttonRounded: false,
+  scanMessage: 'Scan the QRCode with your DID Wallet',
+  confirmMessage: 'Confirm in your DID Wallet',
+  successMessage: 'Operation success!',
+  extraParams: {},
+  timeout: 5 * 60 * 1000,
+  successUrl: '',
+  successTarget: '_self',
+  frameProps: {},
+  webWalletUrl: '',
+};
+
+export default withTheme(PlaygroundAction);

package/src/Action/session.js

@@ -0,0 +1,5 @@
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } =
+  createAuthServiceSessionContext();
+export { SessionProvider, SessionContext, SessionConsumer, withSession };

package/src/index.js

@@ -0,0 +1,4 @@
+import PlaygroundAction from './Action';
+import { SessionProvider, SessionContext, SessionConsumer } from './Action/session';
+
+export { PlaygroundAction, SessionProvider, SessionContext, SessionConsumer };