@arcblock/did-playground 2.1.17 → 2.1.20

package/lib/Action/actions.js

@@ -30,7 +30,7 @@ const getValidPayAmount = (payAmount, price) => {
 
 const getMessage = function getMessage() {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let session = arguments.length > 1 ? arguments[1] : undefined;
+  let session = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
   try {
     return _mustache.default.render(message, {

package/lib/Action/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,13 +33,17 @@ var _session = require("./session");
 
 var _actions = require("./actions");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["autoClose", "action", "buttonText", "buttonColor", "buttonVariant", "buttonSize", "buttonRounded", "children", "disableClose", "title", "scanMessage", "successMessage", "successUrl", "successTarget", "frameProps", "confirmMessage", "extraParams", "timeout", "theme", "webWalletUrl"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -49,9 +53,10 @@ function Close(_ref) {
   let {
     onClose
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(CloseContainer, {
-    onClick: onClose
-  }, "\xD7");
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseContainer, {
+    onClick: onClose,
+    children: "\xD7"
+  });
 }
 
 Close.propTypes = {
@@ -111,21 +116,23 @@ function PlaygroundAction(props) {
 
   if (action === 'login') {
     if (session.user) {
-      return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, rest, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, rest), {}, {
         rounded: buttonRounded,
         color: buttonColor,
         variant: buttonVariant,
-        size: buttonSize
-      }), (0, _actions.getMessage)(successMessage || "Hello ".concat(session.user.name), session));
+        size: buttonSize,
+        children: (0, _actions.getMessage)(successMessage || "Hello ".concat(session.user.name), session)
+      }));
     }
 
-    return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, rest, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, rest), {}, {
       rounded: buttonRounded,
       color: buttonColor,
       variant: buttonVariant,
       size: buttonSize,
-      onClick: () => session.login()
-    }), (0, _actions.getMessage)(buttonText || title, session));
+      onClick: () => session.login(),
+      children: (0, _actions.getMessage)(buttonText || title, session)
+    }));
   }
 
   const config = _actions.actions[action];
@@ -179,72 +186,84 @@ function PlaygroundAction(props) {
     }
   };
 
-  const renderRedirectUrlAfterSuccess = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Close, {
-    onClose: onClose
-  }), /*#__PURE__*/_react.default.createElement("div", null, "Redirecting to", ' ', /*#__PURE__*/_react.default.createElement("a", {
-    href: successUrl,
-    target: successTarget
-  }, successUrl)));
-
-  const renderFrameAfterSuccess = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Close, {
-    onClose: onClose
-  }), /*#__PURE__*/_react.default.createElement("iframe", Object.assign({
-    style: {
-      width: '100%',
-      height: '100%'
-    },
-    allow: "fullscreen",
-    id: "successFrame",
-    title: "successFrame",
-    src: successUrl
-  }, frameProps)));
+  const renderRedirectUrlAfterSuccess = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Close, {
+      onClose: onClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: ["Redirecting to", ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: successUrl,
+        target: successTarget,
+        children: successUrl
+      })]
+    })]
+  });
+
+  const renderFrameAfterSuccess = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Close, {
+      onClose: onClose
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread({
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      allow: "fullscreen",
+      id: "successFrame",
+      title: "successFrame",
+      src: successUrl
+    }, frameProps))]
+  });
 
   const showDidConnect = !successUrl || successUrl && !success;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, rest, {
-    rounded: buttonRounded,
-    color: buttonColor,
-    variant: buttonVariant,
-    size: buttonSize,
-    onClick: onStart
-  }), (0, _actions.getMessage)(buttonText || title, session), ' ', loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-    size: 12,
-    sx: {
-      color: '#fff'
-    }
-  })), open && !showDidConnect && /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-    open: true,
-    disableEscapeKeyDown: true,
-    fullScreen: width < theme.breakpoints.values.sm && !browser.wallet,
-    fullWidth: showFrame,
-    maxWidth: showFrame ? 'lg' : ''
-  }, /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
-    style: {
-      padding: success && !showFrame && successUrl ? 55 : 0,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: showFrame ? theme.breakpoints.values.md : ''
-    }
-  }, /*#__PURE__*/_react.default.createElement(Close, {
-    onClose: onClose
-  }), successUrl && success && !showFrame && renderRedirectUrlAfterSuccess(), showFrame && renderFrameAfterSuccess())), /*#__PURE__*/_react.default.createElement(_Connect.default, {
-    popup: true,
-    open: open && showDidConnect,
-    action: (0, _actions.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((0, _actions.getActionParams)(config, rest, session), dynamicParams, extraParams),
-    webWalletUrl: webWalletUrl,
-    messages: {
-      title: (0, _actions.getMessage)(title, session),
-      scan: (0, _actions.getMessage)(scanMessage, session),
-      confirm: (0, _actions.getMessage)(confirmMessage, session),
-      success: children || (0, _actions.getMessage)(successMessage, session)
-    }
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, _objectSpread(_objectSpread({}, rest), {}, {
+      rounded: buttonRounded,
+      color: buttonColor,
+      variant: buttonVariant,
+      size: buttonSize,
+      onClick: onStart,
+      children: [(0, _actions.getMessage)(buttonText || title, session), " ", loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 12,
+        sx: {
+          color: '#fff'
+        }
+      })]
+    })), open && !showDidConnect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      open: true,
+      disableEscapeKeyDown: true,
+      fullScreen: width < theme.breakpoints.values.sm && !browser.wallet,
+      fullWidth: showFrame,
+      maxWidth: showFrame ? 'lg' : '',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContent.default, {
+        style: {
+          padding: success && !showFrame && successUrl ? 55 : 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: showFrame ? theme.breakpoints.values.md : ''
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Close, {
+          onClose: onClose
+        }), successUrl && success && !showFrame && renderRedirectUrlAfterSuccess(), showFrame && renderFrameAfterSuccess()]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      popup: true,
+      open: open && showDidConnect,
+      action: (0, _actions.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((0, _actions.getActionParams)(config, rest, session), dynamicParams, extraParams),
+      webWalletUrl: webWalletUrl,
+      messages: {
+        title: (0, _actions.getMessage)(title, session),
+        scan: (0, _actions.getMessage)(scanMessage, session),
+        confirm: (0, _actions.getMessage)(confirmMessage, session),
+        success: children || (0, _actions.getMessage)(successMessage, session)
+      }
+    })]
+  });
 }
 
 PlaygroundAction.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-playground",
-  "version": "2.1.17",
+  "version": "2.1.20",
   "description": "React components that works with wallet-playground",
   "keywords": [
     "react",
@@ -34,9 +34,9 @@
     "url": "https://github.com/ArcBlock/wallet-playground/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.17",
-    "@arcblock/react-hooks": "^2.1.17",
-    "@arcblock/ux": "^2.1.17",
+    "@arcblock/did-connect": "^2.1.20",
+    "@arcblock/react-hooks": "^2.1.20",
+    "@arcblock/ux": "^2.1.20",
     "@mui/material": "^5.6.4",
     "axios": "^0.21.2",
     "core-js": "^3.6.4",
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "607634595a2b72ad99cacdc02e6a0070a345368b"
+  "gitHead": "3a9597b7caac6d1466136c9e7419833eb8d50190"
 }

package/src/Action/actions.js

@@ -15,7 +15,7 @@ const getValidPayAmount = (payAmount, price) => {
   return 1;
 };
 
-export const getMessage = (message = '', session) => {
+export const getMessage = (message = '', session = {}) => {
   try {
     return mustache.render(
       message,
@@ -38,40 +38,40 @@ export const actions = {
   // Currency
   receive_local_token: {
     action: 'receive_token',
-    extraParams: props => ({ chain: 'local', amount: props.amount || 1 }),
+    extraParams: (props) => ({ chain: 'local', amount: props.amount || 1 }),
   },
   receive_foreign_token: {
     action: 'receive_token',
-    extraParams: props => ({ chain: 'foreign', amount: props.amount || 1 }),
+    extraParams: (props) => ({ chain: 'foreign', amount: props.amount || 1 }),
   },
   send_local_token: {
     action: 'send_token',
-    extraParams: props => ({ chain: 'local', amount: props.amount || 1 }),
+    extraParams: (props) => ({ chain: 'local', amount: props.amount || 1 }),
   },
   send_foreign_token: {
     action: 'send_token',
-    extraParams: props => ({ chain: 'foreign', amount: props.amount || 1 }),
+    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 }),
+    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 }),
+    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 }),
+    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 }),
+    extraParams: (props) => ({ action: 'sell', rate: props.exchangeRate, amount: props.amount || 1 }),
   },
 
   // Cross chain assets and tokens

package/src/Action/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react';
+import { 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';
@@ -22,7 +22,7 @@ function Close({ onClose }) {
 
 Close.propTypes = { onClose: PropTypes.func.isRequired };
 const CloseContainer = styled.div`
-  display: ${props => (props.disableClose ? 'none' : 'block')};
+  display: ${(props) => (props.disableClose ? 'none' : 'block')};
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -81,12 +81,7 @@ function PlaygroundAction(props) {
   if (action === 'login') {
     if (session.user) {
       return (
-        <Button
-          {...rest}
-          rounded={buttonRounded}
-          color={buttonColor}
-          variant={buttonVariant}
-          size={buttonSize}>
+        <Button {...rest} rounded={buttonRounded} color={buttonColor} variant={buttonVariant} size={buttonSize}>
           {getMessage(successMessage || `Hello ${session.user.name}`, session)}
         </Button>
       );
@@ -118,9 +113,7 @@ function PlaygroundAction(props) {
         setDynamicParams(params);
         setLoading(false);
       } catch (err) {
-        console.error(
-          `Cannot generate dynamicParams for playground action ${getActionName(config, rest)}`
-        );
+        console.error(`Cannot generate dynamicParams for playground action ${getActionName(config, rest)}`);
       }
       setOpen(true);
     } else {
@@ -193,8 +186,7 @@ function PlaygroundAction(props) {
         variant={buttonVariant}
         size={buttonSize}
         onClick={onStart}>
-        {getMessage(buttonText || title, session)}{' '}
-        {loading && <CircularProgress size={12} sx={{ color: '#fff' }} />}
+        {getMessage(buttonText || title, session)} {loading && <CircularProgress size={12} sx={{ color: '#fff' }} />}
       </Button>
       {open && !showDidConnect && (
         <Dialog
@@ -226,11 +218,7 @@ function PlaygroundAction(props) {
         onSuccess={onSuccess}
         checkTimeout={timeout}
         // 3 layers of extraParams: user props, dynamically generated, from other props
-        extraParams={Object.assign(
-          getActionParams(config, rest, session),
-          dynamicParams,
-          extraParams
-        )}
+        extraParams={Object.assign(getActionParams(config, rest, session), dynamicParams, extraParams)}
         webWalletUrl={webWalletUrl}
         messages={{
           title: getMessage(title, session),

package/src/Action/session.js

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