@arcblock/did-playground 3.4.14 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-playground",
-  "version": "3.4.14",
+  "version": "3.5.0",
   "description": "React components that works with wallet-playground",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/wallet-playground/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "3.4.14",
-    "@arcblock/react-hooks": "3.4.14",
+    "@arcblock/did-connect-react": "3.5.0",
+    "@arcblock/react-hooks": "3.5.0",
     "ahooks": "^3.8.5",
     "axios": "^1.10.0",
     "mustache": "^4.2.0"
@@ -43,8 +43,11 @@
     "@mui/material": "^7.2.0",
     "react": "^19.0.0"
   },
+  "files": [
+    "lib"
+  ],
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d663390d3c6a9b2d8d71790c770dd0025ae309de"
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237"
 }

package/src/Action/actions.jsx

@@ -1,575 +0,0 @@
-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.jsx

@@ -1,302 +0,0 @@
-import { use, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useSize } from 'ahooks';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { styled, useTheme } from '@arcblock/ux/lib/Theme';
-import isUndefined from 'lodash/isUndefined';
-
-import { CircularProgress, Dialog, DialogContent } from '@mui/material';
-
-import DidConnect from '@arcblock/did-connect-react/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({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.autoClose)) {
-    props.autoClose = true;
-  }
-  if (isUndefined(props.buttonText)) {
-    props.buttonText = '';
-  }
-  if (isUndefined(props.buttonColor)) {
-    props.buttonColor = 'primary';
-  }
-  if (isUndefined(props.buttonVariant)) {
-    props.buttonVariant = 'contained';
-  }
-  if (isUndefined(props.buttonSize)) {
-    props.buttonSize = 'large';
-  }
-  if (isUndefined(props.buttonRounded)) {
-    props.buttonRounded = false;
-  }
-  if (isUndefined(props.scanMessage)) {
-    props.scanMessage = 'Scan the QR Code with your DID Wallet';
-  }
-  if (isUndefined(props.confirmMessage)) {
-    props.confirmMessage = 'Confirm in your DID Wallet';
-  }
-  if (isUndefined(props.successMessage)) {
-    props.successMessage = 'Operation success!';
-  }
-  if (isUndefined(props.extraParams)) {
-    props.extraParams = {};
-  }
-  if (isUndefined(props.timeout)) {
-    props.timeout = 5 * 60 * 1000;
-  }
-  if (isUndefined(props.successUrl)) {
-    props.successUrl = '';
-  }
-  if (isUndefined(props.successTarget)) {
-    props.successTarget = '_self';
-  }
-  if (isUndefined(props.frameProps)) {
-    props.frameProps = {};
-  }
-  if (isUndefined(props.webWalletUrl)) {
-    props.webWalletUrl = '';
-  }
-  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,
-    webWalletUrl,
-    ...rest
-  } = newProps;
-
-  const theme = useTheme();
-  const browser = useBrowser();
-  const { api, session } = use(SessionContext);
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [dynamicParams, setDynamicParams] = useState({});
-  const size = useSize(document.body);
-  const [success, setSuccess] = useState(false);
-  const [showFrame, setShowFrame] = useState(success && successUrl && successTarget === 'frame');
-
-  const width = size?.width || 0;
-
-  // 当打开或关闭组件时，重置部分状态
-  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} sx={{ color: '#fff' }} />}
-      </Button>
-      {open && !showDidConnect && (
-        <Dialog
-          open
-          disableEscapeKeyDown
-          fullScreen={width < theme.breakpoints.values.sm && !(browser.wallet || browser.arcSphere)}
-          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,
-};
-
-export default PlaygroundAction;

package/src/Action/session.jsx

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

package/src/index.js

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

package/version

@@ -1 +0,0 @@
-1.10.1

package/vite.config.mjs

@@ -1,29 +0,0 @@
-import { defineConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
-import react from '@vitejs/plugin-react';
-import noBundlePlugin from 'vite-plugin-no-bundle';
-import fg from 'fast-glob';
-
-export default defineConfig({
-  plugins: [
-    react({ jsxRuntime: 'automatic' }),
-    svgr({
-      include: ['**/*.svg', '**/*.svg?react'],
-    }),
-    noBundlePlugin({
-      root: 'src',
-      copy: ['**/*.png', '**/*.gif', '**/*.jpg', '**/*.jpeg', '**/*.d.ts'],
-    }),
-  ],
-  build: {
-    lib: {
-      entry: fg.sync('src/**/*.{tsx,ts,jsx,js}', {
-        ignore: ['**/stories/**', '**/demo/**', '**/*.d.ts', '**/*.stories.*'],
-      }),
-      formats: ['es'],
-      fileName: (format, entryName) => `${entryName}.js`,
-    },
-    outDir: 'lib',
-    emptyOutDir: true,
-  },
-});