@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/blocklet/preferences/index.js

@@ -0,0 +1,305 @@
+import React, { useState, useContext } from 'react'; // eslint-disable-line
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Iframe from 'react-iframe';
+import joinUrl from 'url-join';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { Grid, Box } from '@mui/material';
+import GeneralIcon from '@mui/icons-material/TuneRounded';
+import KeyIcon from '@mui/icons-material/Key';
+import LoginIcon from '@mui/icons-material/Login';
+import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useSearchParams } from 'react-router-dom';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import BlockletBundleAvatar from '../bundle-avatar';
+import BlockletAppAvatar from '../app-avatar';
+import BlockletConfiguration from '../configuration';
+import BlockletNotification from '../notification';
+import Access from '../access/index';
+import { useNodeContext } from '../../contexts/node';
+import OAuth from '../oauth';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const addComponentTabs = ({
+  tabs,
+  blocklet,
+  ancestors = [],
+  depth = 1,
+  t
+}) => {
+  const key = [...ancestors.map(x => x.meta.did), blocklet.meta.did].join('/');
+  const isContainer = !ancestors?.length;
+  tabs.push({
+    label: /*#__PURE__*/_jsxs(Box, {
+      pl: Math.max(1, depth - 1) * 2,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [isContainer ? /*#__PURE__*/_jsx(BlockletAppAvatar, {
+        size: 24,
+        blocklet: blocklet
+      }) : /*#__PURE__*/_jsx(BlockletBundleAvatar, {
+        size: 24,
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: isContainer ? t('blocklet.component.container') : getDisplayName(blocklet, true)
+        })
+      })]
+    }, key),
+    value: key
+  });
+  if (blocklet.children.length > 0) {
+    blocklet.children.forEach(x => {
+      addComponentTabs({
+        tabs,
+        blocklet: x,
+        ancestors: [...ancestors, blocklet],
+        depth: depth + 1,
+        t
+      });
+    });
+  }
+};
+export default function BlockletPreferences({
+  blocklet,
+  onUpdate,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    info,
+    inService
+  } = useNodeContext();
+  const [expandPref, setExpandPref] = useState(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const current = searchParams.get('tab') || 'general';
+  const tabs = [{
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      "data-cy": "configuration-tab-general",
+      children: [/*#__PURE__*/_jsx(GeneralIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.general')
+        })
+      })]
+    }, "general"),
+    value: 'general'
+  }, {
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      "data-cy": "configuration-tab-access",
+      children: [/*#__PURE__*/_jsx(KeyIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.access')
+        })
+      })]
+    }, "access"),
+    value: 'access'
+  }, {
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      "data-cy": "configuration-tab-oauth",
+      children: [/*#__PURE__*/_jsx(LoginIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.login')
+        })
+      })]
+    }, "oauth"),
+    value: 'oauth'
+  }, {
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      "data-cy": "configuration-tab-notification",
+      children: [/*#__PURE__*/_jsx(NotificationsNoneIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.notification')
+        })
+      })]
+    }, "notification"),
+    value: 'notification'
+  }, {
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      "data-cy": "configuration-tab-preference",
+      children: [/*#__PURE__*/_jsx(Box, {
+        ml: -2,
+        style: {
+          transform: 'translateY(2px)'
+        },
+        children: expandPref ? /*#__PURE__*/_jsx(ExpandMoreIcon, {
+          fontSize: "inherit"
+        }) : /*#__PURE__*/_jsx(ChevronRightIcon, {
+          fontSize: "inherit"
+        })
+      }), /*#__PURE__*/_jsx(SettingsOutlinedIcon, {
+        sx: {
+          fontSize: 24
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            color: '#222'
+          },
+          children: t('common.preferences')
+        })
+      })]
+    }, "preference"),
+    value: 'preference'
+  }];
+  if (expandPref) {
+    addComponentTabs({
+      tabs,
+      blocklet,
+      t
+    });
+  }
+  const onTabChange = x => {
+    if (x === 'preference') {
+      setExpandPref(!expandPref);
+    } else {
+      setSearchParams(prev => {
+        if (x === 'general') {
+          prev.delete('tab');
+        } else {
+          prev.set('tab', x);
+        }
+        return prev;
+      });
+    }
+  };
+  let content = null;
+  if (current === 'general') {
+    content = /*#__PURE__*/_jsx(BlockletConfiguration, {
+      blocklet: blocklet,
+      onUpdate: onUpdate
+    });
+  } else if (current === 'access') {
+    content = /*#__PURE__*/_jsx(Access, {});
+  } else if (current === 'oauth') {
+    content = /*#__PURE__*/_jsx(OAuth, {});
+  } else if (current === 'notification') {
+    content = /*#__PURE__*/_jsx(BlockletNotification, {});
+  } else {
+    // eslint-disable-next-line no-nested-ternary
+    const pathPrefix = inService ? WELLKNOWN_SERVICE_PATH_PREFIX : process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
+    const urlSearchParams = new URLSearchParams();
+    if (!inService) {
+      urlSearchParams.set('authKey', '__sst');
+    }
+    urlSearchParams.set('schemaKey', joinUrl(window.location.origin, pathPrefix, `/api/preferences?id=${encodeURIComponent(current)}`));
+    content = /*#__PURE__*/_jsx(Iframe, {
+      url: `${joinUrl(window.location.origin, pathPrefix, '/hosted/form-collector/')}?${urlSearchParams.toString()}`,
+      width: "100%",
+      height: "100%",
+      frameBorder: 0,
+      styles: {
+        border: 0
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx(Div, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      spacing: 4,
+      columns: 24,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        sm: 7,
+        md: 5,
+        children: /*#__PURE__*/_jsx(Tabs, {
+          tabs: tabs,
+          current: current,
+          orientation: "vertical",
+          onChange: onTabChange,
+          sx: {
+            borderRight: 1,
+            height: '100%',
+            borderColor: 'divider'
+          }
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        sm: 17,
+        md: 19,
+        children: /*#__PURE__*/_jsx(Box, {
+          style: {
+            minHeight: '66vh',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden'
+          },
+          children: content
+        })
+      })]
+    })
+  });
+}
+BlockletPreferences.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func
+};
+BlockletPreferences.defaultProps = {
+  onUpdate: () => {}
+};
+const Div = styled.div`
+  .MuiTab-root {
+    text-align: left;
+    align-items: flex-start;
+    font-weight: normal;
+  }
+  .Mui-selected {
+    font-weight: bold;
+  }
+`;

package/es/blocklet/purchase/common.js

@@ -0,0 +1,95 @@
+import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import IconPurchase from '@mui/icons-material/ShoppingCart';
+import IconVerify from '@mui/icons-material/VerifiedUser';
+import Button from '@arcblock/ux/lib/Button';
+import colors from '@arcblock/ux/lib/Colors';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const commonProps = {
+  meta: PropTypes.object.isRequired,
+  onCancel: PropTypes.func.isRequired
+};
+const useStyles = makeStyles(() => ({
+  dialogAuth: {
+    padding: '0 0 24px !important',
+    '& .auth-title': {
+      textAlign: 'center !important',
+      marginBottom: '4px !important'
+    },
+    '& .auth-tip--scan': {
+      textAlign: 'center !important'
+    }
+  },
+  iconRoot: {
+    minWidth: 48
+  }
+}));
+function CustomSelect({
+  action,
+  onSelect,
+  onNext
+}) {
+  const classes = useStyles();
+  const {
+    t
+  } = useLocaleContext();
+  const options = [{
+    action: 'purchase',
+    title: t('store.purchase.purchase.title'),
+    description: t('store.purchase.purchase.description')
+  }, {
+    action: 'verify',
+    title: t('store.purchase.verify.title'),
+    description: t('store.purchase.verify.description')
+  }];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(List, {
+      className: classes.tabPanel,
+      children: options.map(x => /*#__PURE__*/_jsxs(ListItem, {
+        button: true,
+        selected: action === x.action,
+        onClick: () => onSelect(x.action),
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          className: classes.iconRoot,
+          children: x.action === 'purchase' ? /*#__PURE__*/_jsx(IconPurchase, {
+            style: {
+              color: action === 'purchase' ? colors.primary.main : '#AAA',
+              fontSize: 32
+            }
+          }) : /*#__PURE__*/_jsx(IconVerify, {
+            style: {
+              color: action === 'verify' ? colors.primary.main : '#AAA',
+              fontSize: 32
+            }
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: x.title,
+          secondary: x.description
+        })]
+      }, x.action))
+    }), onNext && /*#__PURE__*/_jsx(Button, {
+      fullWidth: true,
+      disabled: !action,
+      variant: "contained",
+      color: "primary",
+      style: {
+        marginTop: 16
+      },
+      onClick: onNext,
+      children: t('common.next')
+    })]
+  });
+}
+CustomSelect.propTypes = {
+  action: PropTypes.oneOf(['both', 'purchase', 'verify']).isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired
+};
+export { useStyles, commonProps, CustomSelect };

package/es/blocklet/purchase/component-purchase.js

@@ -0,0 +1,237 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+import joinUrl from 'url-join';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import PropTypes from 'prop-types';
+import pWaitFor from 'p-wait-for';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { getWebWalletUrl, extractStatusUrlFromNextWorkflow } from '../../util';
+import { api as $api, axios } from '../../util/api';
+import { commonProps, CustomSelect } from './common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function ComponentPurchase({
+  meta,
+  onCancel,
+  mode,
+  handlePaySuccess
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    info
+  } = useNodeContext();
+  const webWalletUrl = getWebWalletUrl(info);
+  const [nw, setNw] = useState(null);
+  const baseUrl = new URL(meta?.registryUrl).origin;
+  const name = getDisplayName({
+    meta
+  });
+  const handleConnectSuccess = async (result, decrypt) => {
+    const success = ({
+      downloadTokenList
+    }) => {
+      handlePaySuccess({
+        downloadTokenList
+      });
+    };
+    const failure = errorMessage => {
+      Toast.error(errorMessage);
+      onCancel(errorMessage);
+    };
+    function handleConnectSessionStatus(url) {
+      return pWaitFor(() => {
+        return $api.get(url).then(async ({
+          data
+        }) => {
+          const downloadTokenList = data?.downloadTokenList;
+          if (data.status === 'succeed') {
+            if (downloadTokenList && downloadTokenList.length) {
+              await success({
+                downloadTokenList
+              });
+            } else {
+              await failure(t('blocklet.component.missDownloadTokenTip'));
+              return true;
+            }
+            return true;
+          }
+          if (data.status === 'error') {
+            console.error('vc error: ', data);
+            await failure(data?.error);
+            return true;
+          }
+          return false;
+        });
+      }, {
+        interval: 1000
+      });
+    }
+    if (mode === 'purchase' && nw) {
+      const {
+        statusUrl
+      } = extractStatusUrlFromNextWorkflow(nw);
+      // poll status url, to get download token
+      await handleConnectSessionStatus(statusUrl);
+    } else {
+      await success({
+        downloadTokenList: result.downloadTokenList && decrypt(result.downloadTokenList)
+      });
+    }
+  };
+  useEffect(() => {
+    // only purchase mode has nw
+    if (mode === 'purchase') {
+      const nextWorkflowUrl = new URL(baseUrl);
+      nextWorkflowUrl.pathname = '/api/did/verify-purchase-blocklet/token';
+      nextWorkflowUrl.searchParams.set('serverDid', info.did);
+      nextWorkflowUrl.searchParams.set('blockletDid', meta?.did);
+      try {
+        $api.get(nextWorkflowUrl.href).then(({
+          data
+        }) => {
+          const url = `${data.url}`;
+          setNw(url);
+        });
+      } catch (error) {
+        console.error('get next workflow url error: ', error);
+      }
+    }
+    return () => {
+      setNw(null);
+    };
+  }, [mode]); // eslint-disable-line
+
+  // If nw does not exist, then connect should not be render
+  if (mode === 'purchase' && !nw) {
+    return '';
+  }
+  const modePropsMap = {
+    verify: {
+      action: 'verify-purchase-blocklet',
+      checkFn: axios.create({
+        baseURL: baseUrl
+      }).get,
+      extraParams: {
+        serverDid: info.did,
+        blockletDid: meta?.did
+      },
+      messages: {
+        title: t('store.purchase.verify.auth.title', {
+          name
+        }),
+        scan: t('store.purchase.verify.auth.scan'),
+        confirm: t('store.purchase.verify.auth.confirm'),
+        success: t('store.purchase.verify.auth.success')
+      }
+    },
+    purchase: {
+      action: 'acquire-asset',
+      checkFn: axios.create({
+        baseURL: joinUrl(baseUrl, '/store')
+      }).get,
+      extraParams: {
+        factory: meta.nftFactory,
+        nw
+      },
+      messages: {
+        title: t('store.purchase.auth.title', {
+          name
+        }),
+        scan: t('store.purchase.auth.scan'),
+        confirm: t('store.purchase.auth.confirm'),
+        success: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("p", {
+            children: t('store.purchase.auth.success')
+          }), /*#__PURE__*/_jsx("p", {
+            children: t('blocklet.component.purchaseComponentSecondCheckTip')
+          })]
+        })
+      }
+    }
+  };
+  return /*#__PURE__*/_jsx(DidConnect, {
+    open: true,
+    locale: locale,
+    popup: false,
+    saveConnect: false,
+    className: "connect",
+    baseUrl: baseUrl,
+    onSuccess: handleConnectSuccess,
+    cancelWhenScanned: onCancel,
+    onClose: onCancel,
+    checkTimeout: 60 * 5000,
+    webWalletUrl: webWalletUrl,
+    disableClose: true,
+    showDownload: false,
+    ...modePropsMap[mode]
+  });
+}
+ComponentPurchase.propTypes = {
+  ...commonProps,
+  handlePaySuccess: PropTypes.func,
+  mode: PropTypes.oneOf(['verify', 'purchase']).isRequired
+};
+ComponentPurchase.defaultProps = {
+  handlePaySuccess: () => {}
+};
+const ComponentPurchaseSelect = /*#__PURE__*/forwardRef(({
+  mode,
+  ...rest
+}, ref) => {
+  const [action, setAction] = useState(mode !== 'both' ? mode : 'verify');
+  const [step, setStep] = useState(mode !== 'both' ? 2 : 1);
+  const onSelect = act => {
+    if (act === action) {
+      return;
+    }
+    setAction(act);
+  };
+  const onNext = () => {
+    if (!action) {
+      return;
+    }
+    if (step === 2) {
+      return;
+    }
+    setStep(2);
+  };
+
+  // expose the func and activeStep
+  useImperativeHandle(ref, () => ({
+    onNext,
+    getCurrentStep: () => {
+      return step;
+    }
+  }));
+  if (step === 1) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        maxWidth: 520
+      },
+      children: /*#__PURE__*/_jsx(CustomSelect, {
+        action: action,
+        onNext: null,
+        onSelect: onSelect
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(ComponentPurchase, {
+    ...rest,
+    mode: action
+  });
+});
+ComponentPurchaseSelect.propTypes = {
+  mode: PropTypes.oneOf(['both', 'verify', 'purchase']).isRequired,
+  ref: PropTypes.any
+};
+ComponentPurchaseSelect.defaultProps = {
+  ref: {}
+};
+export default ComponentPurchaseSelect;

package/es/blocklet/purchase/index.js

@@ -0,0 +1,4 @@
+import ComponentPurchaseSelect from './component-purchase';
+
+// eslint-disable-next-line import/prefer-default-export
+export { ComponentPurchaseSelect };