@arcblock/did-playground 1.5.0 → 1.6.60

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2018-2019 ArcBlock
+Copyright 2018-2022 ArcBlock
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -1,38 +1,38 @@
-![@arcblock/did-react](https://www.arcblock.io/.netlify/functions/badge/?text=did-react)
+![@arcblock/did-connect](https://www.arcblock.io/.netlify/functions/badge/?text=did-connect)
 
 > UI components that can be used in React Applications built on top of forge powered blockchain.
 
 ## Usage
 
 ```shell
-yarn add @arcblock/did-react
+yarn add @arcblock/did-connect
 ```
 
 Then:
 
 ```javascript
 import axios from 'axios';
-import DidAuth from '@arcblock/did-react/lib/Auth';
-import DidAvatar from '@arcblock/did-react/lib/Avatar';
-import DidLogo from '@arcblock/did-react/lib/Logo';
-import DidAddress from '@arcblock/did-react/lib/Address';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import DidAvatar from '@arcblock/did-connect/lib/Avatar';
+import DidLogo from '@arcblock/did-connect/lib/Logo';
+import DidAddress from '@arcblock/did-connect/lib/Address';
 ```
 
 ### DidAuth
 
 ```jsx
-<DidAuth
+<DidConnect
   action="login"
-  responsive
   checkFn={axios.get}
-  onClose={() => toggle()}
+  onClose={() => handleOnClose()}
   onSuccess={() => (window.location.href = '/profile')}
   messages={{
     title: 'login',
-    scan: 'Scan QR code with ABT Wallet',
-    confirm: 'Confirm login on your ABT Wallet',
+    scan: 'Scan QR code with DID Wallet',
+    confirm: 'Confirm login on your DID Wallet',
     success: 'You have successfully signed in!',
   }}
+  webWalletUrl={webWalletUrl}
 />
 ```
 

package/lib/Action/actions.js

@@ -3,13 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActionParams = exports.getActionName = exports.actions = exports.getMessage = void 0;
+exports.getMessage = exports.getActionParams = exports.getActionName = exports.actions = void 0;
 
 var _mustache = _interopRequireDefault(require("mustache"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable object-curly-newline */
 async function createSwapOrder(api) {
   const res = await api.post('/api/did/swap', {});
   return {
@@ -29,7 +28,10 @@ const getValidPayAmount = (payAmount, price) => {
   return 1;
 };
 
-const getMessage = (message, session) => {
+const getMessage = function getMessage() {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let session = arguments.length > 1 ? arguments[1] : undefined;
+
   try {
     return _mustache.default.render(message, {
       user: session.user || {},
@@ -37,7 +39,6 @@ const getMessage = (message, session) => {
       balance: session.balance || {}
     }, {}, ['(%', '%)']);
   } catch (err) {
-    // eslint-disable-next-line no-console
     console.error('Cannot render message', {
       message,
       session
@@ -96,6 +97,24 @@ const actions = {
       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',
@@ -176,6 +195,79 @@ const actions = {
       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,
@@ -255,6 +347,79 @@ const actions = {
       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',
@@ -411,7 +576,7 @@ const actions = {
   },
   consume_local_asset_by_did: {
     action: 'consume_asset',
-    extraParams: (_ref5) => {
+    extraParams: _ref5 => {
       let {
         did
       } = _ref5;
@@ -423,7 +588,7 @@ const actions = {
   },
   consume_foreign_asset_by_did: {
     action: 'consume_asset',
-    extraParams: (_ref6) => {
+    extraParams: _ref6 => {
       let {
         did
       } = _ref6;
@@ -435,7 +600,7 @@ const actions = {
   },
   claim_signature: {
     action: 'claim_signature',
-    extraParams: (_ref7) => {
+    extraParams: _ref7 => {
       let {
         type
       } = _ref7;

package/lib/Action/index.js

@@ -23,7 +23,7 @@ var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogCon
 
 var _styles = require("@material-ui/core/styles");
 
-var _basic = _interopRequireDefault(require("@arcblock/did-react/lib/Auth/basic"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 
@@ -33,11 +33,13 @@ var _session = require("./session");
 
 var _actions = require("./actions");
 
+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() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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 _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _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; }
 
@@ -58,7 +60,7 @@ Close.propTypes = {
 
 const CloseContainer = _styledComponents.default.div.withConfig({
   displayName: "Action__CloseContainer",
-  componentId: "y9rma2-0"
+  componentId: "sc-y9rma2-0"
 })(["display:", ";position:absolute;top:1rem;right:1rem;color:#999999;font-size:2rem;line-height:1rem;cursor:pointer;user-select:none;"], props => props.disableClose ? 'none' : 'block');
 
 function PlaygroundAction(props) {
@@ -83,9 +85,10 @@ function PlaygroundAction(props) {
     confirmMessage,
     extraParams,
     timeout,
-    theme
+    theme,
+    webWalletUrl
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["autoClose", "action", "buttonText", "buttonColor", "buttonVariant", "buttonSize", "buttonRounded", "children", "disableClose", "title", "scanMessage", "successMessage", "successUrl", "successTarget", "frameProps", "confirmMessage", "extraParams", "timeout", "theme"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const browser = (0, _useBrowser.default)();
   const {
@@ -139,7 +142,6 @@ function PlaygroundAction(props) {
         setDynamicParams(params);
         setLoading(false);
       } catch (err) {
-        // eslint-disable-next-line no-console
         console.error("Cannot generate dynamicParams for playground action ".concat((0, _actions.getActionName)(config, rest)));
       }
 
@@ -197,16 +199,17 @@ function PlaygroundAction(props) {
     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, {
+  }), (0, _actions.getMessage)(buttonText || title, session), ' ', loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
     size: 12,
     color: "#fff"
-  })), open && /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+  })), open && !showDidConnect && /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     open: true,
     disableBackdropClick: true,
     disableEscapeKeyDown: true,
@@ -221,7 +224,11 @@ function PlaygroundAction(props) {
       alignItems: 'center',
       height: showFrame ? theme.breakpoints.values.md : ''
     }
-  }, successUrl && success && !showFrame && renderRedirectUrlAfterSuccess(), showFrame && renderFrameAfterSuccess(), (!successUrl || successUrl && !success) && /*#__PURE__*/_react.default.createElement(_basic.default, {
+  }, /*#__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,
@@ -229,13 +236,14 @@ function PlaygroundAction(props) {
     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 = {
@@ -254,7 +262,8 @@ PlaygroundAction.propTypes = {
   timeout: _propTypes.default.number,
   successUrl: _propTypes.default.string,
   successTarget: _propTypes.default.oneOf(['_blank', '_self', 'frame']),
-  frameProps: _propTypes.default.object
+  frameProps: _propTypes.default.object,
+  webWalletUrl: _propTypes.default.string
 };
 PlaygroundAction.defaultProps = {
   autoClose: true,
@@ -267,14 +276,15 @@ PlaygroundAction.defaultProps = {
   buttonSize: 'large',
   // small | large | medium
   buttonRounded: false,
-  scanMessage: 'Scan the QRCode with your ABT Wallet',
-  confirmMessage: 'Confirm in your ABT Wallet',
+  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: {}
+  frameProps: {},
+  webWalletUrl: ''
 };
 
 var _default = (0, _styles.withTheme)(PlaygroundAction);

package/lib/Action/session.js

@@ -3,19 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withSession = exports.SessionConsumer = exports.SessionContext = exports.SessionProvider = void 0;
+exports.withSession = exports.SessionProvider = exports.SessionContext = exports.SessionConsumer = void 0;
 
-var _Session = _interopRequireDefault(require("@arcblock/did-react/lib/Session"));
+var _Session = require("@arcblock/did-connect/lib/Session");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable object-curly-newline */
 const {
   SessionProvider,
   SessionContext,
   SessionConsumer,
   withSession
-} = (0, _Session.default)('did.playground.token');
+} = (0, _Session.createAuthServiceSessionContext)();
 exports.withSession = withSession;
 exports.SessionConsumer = SessionConsumer;
 exports.SessionContext = SessionContext;

package/lib/index.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "PlaygroundAction", {
     return _Action.default;
   }
 });
-Object.defineProperty(exports, "SessionProvider", {
+Object.defineProperty(exports, "SessionConsumer", {
   enumerable: true,
   get: function get() {
-    return _session.SessionProvider;
+    return _session.SessionConsumer;
   }
 });
 Object.defineProperty(exports, "SessionContext", {
@@ -21,10 +21,10 @@ Object.defineProperty(exports, "SessionContext", {
     return _session.SessionContext;
   }
 });
-Object.defineProperty(exports, "SessionConsumer", {
+Object.defineProperty(exports, "SessionProvider", {
   enumerable: true,
   get: function get() {
-    return _session.SessionConsumer;
+    return _session.SessionProvider;
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-playground",
-  "version": "1.5.0",
+  "version": "1.6.60",
   "description": "React components that works with wallet-playground",
   "keywords": [
     "react",
@@ -13,11 +13,12 @@
   "main": "lib/index.js",
   "files": [
     "version",
-    "lib"
+    "lib",
+    "src"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ArcBlock/wallet-playground.git"
+    "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
     "lint": "eslint src tests",
@@ -33,14 +34,14 @@
     "url": "https://github.com/ArcBlock/wallet-playground/issues"
   },
   "dependencies": {
-    "@arcblock/did-react": "^0.78.2",
-    "@arcblock/react-hooks": "^0.78.0",
-    "@arcblock/ux": "^0.78.2",
-    "@material-ui/core": "^4.11.0",
-    "axios": "^0.19.2",
+    "@arcblock/did-connect": "^1.6.60",
+    "@arcblock/react-hooks": "^1.6.60",
+    "@arcblock/ux": "^1.6.60",
+    "@material-ui/core": "^4.12.3",
+    "axios": "^0.21.1",
     "core-js": "^3.6.4",
     "mustache": "^4.0.0",
-    "react-use": "^13.27.0",
+    "react-use": "^17.2.4",
     "styled-components": "^5.0.1"
   },
   "peerDependencies": {
@@ -56,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d35bda1e2a9838dd3832fefab8104c7fa319627e"
+  "gitHead": "99fe236447e0063ed32672d11f8668fd5688d387"
 }