@blocklet/launcher-workflow 2.1.108 → 2.2.0

package/es/components/checkbox.js

@@ -0,0 +1,94 @@
+import React from "react";
+import styled from '@emotion/styled';
+import Tooltip from '@mui/material/Tooltip';
+import PropTypes from 'prop-types';
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Z",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m5.474 10.646 2.586 2.586 6.465-6.465",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.233 6.06a1 1 0 0 1 0 1.415L8.768 13.94a1 1 0 0 1-1.415 0l-2.586-2.586a1 1 0 1 1 1.415-1.415l1.878 1.88 5.758-5.759a1 1 0 0 1 1.415 0Z",
+      fill: "#fff"
+    })]
+  });
+};
+CheckedIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var UncheckedIcon = function UncheckedIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M19.5 10a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 .5 10 9.5 9.5 0 0 1 10 .5a9.5 9.5 0 0 1 9.5 9.5Z",
+      stroke: "#DDD"
+    })
+  });
+};
+UncheckedIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import { useLocaleContext } from '../contexts/locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function CheckBox({
+  label,
+  checked,
+  showHint,
+  ...rest
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  return /*#__PURE__*/_jsxs(Container, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      open: showHint,
+      title: t('common.agreementHint'),
+      arrow: true,
+      placement: "top-start",
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: checked ? /*#__PURE__*/_jsx(CheckedIcon, {}) : /*#__PURE__*/_jsx(UncheckedIcon, {})
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "label",
+      children: label
+    })]
+  });
+}
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  .label {
+    margin-left: 8px;
+  }
+`;
+CheckBox.propTypes = {
+  showHint: PropTypes.bool,
+  checked: PropTypes.bool,
+  label: PropTypes.any
+};
+CheckBox.defaultProps = {
+  checked: false,
+  showHint: false,
+  label: ''
+};

package/es/components/confirm.js

@@ -0,0 +1,95 @@
+import { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash.get';
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { LocaleContext } from '../contexts/locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const translations = {
+  en: {
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  zh: {
+    confirm: '同意',
+    cancel: '取消'
+  }
+};
+export default function ConfirmDialog({
+  title,
+  description,
+  cancel,
+  confirm,
+  color,
+  params: initialParams,
+  onCancel,
+  onConfirm,
+  locale
+}) {
+  const {
+    locale: innerLocale
+  } = useContext(LocaleContext) || {
+    locale
+  };
+  const [params, setParams] = useState(initialParams);
+  const theme = useTheme();
+  const isBreakpointsDownSm = useMediaQuery(theme.breakpoints.down('md'));
+  const onCallback = cb => {
+    if (typeof cb === 'function') {
+      cb(params);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: true,
+    fullScreen: isBreakpointsDownSm,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: typeof title === 'function' ? title() : title
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsx(DialogContentText, {
+        children: typeof description === 'function' ? description(params, setParams) : description
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      style: {
+        padding: '8px 24px 24px'
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => onCallback(onCancel),
+        children: cancel || get(translations, `${innerLocale}.cancel`)
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: () => onCallback(onConfirm),
+        color: color,
+        variant: "contained",
+        autoFocus: true,
+        children: confirm || get(translations, `${innerLocale}.confirm`)
+      })]
+    })]
+  });
+}
+ConfirmDialog.propTypes = {
+  title: PropTypes.any.isRequired,
+  description: PropTypes.any.isRequired,
+  // can be a function that renders different content based on params
+  cancel: PropTypes.string,
+  color: PropTypes.string,
+  confirm: PropTypes.string,
+  params: PropTypes.object,
+  // This object holds states managed in the dialog
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func.isRequired,
+  locale: PropTypes.oneOf(['en', 'zh'])
+};
+ConfirmDialog.defaultProps = {
+  onCancel: () => {},
+  cancel: '',
+  confirm: '',
+  color: 'error',
+  params: {},
+  locale: 'en'
+};

package/es/components/in-progress-session.js

@@ -0,0 +1,96 @@
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { getContinueLaunchURL } from '@blocklet/launcher-util/es/util';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import { useState } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import joinURL from 'url-join';
+import { useLocaleContext } from '../contexts/locale';
+import useRequest from '../contexts/request';
+import { useWorkflowContext } from '../contexts/workflow';
+
+// 不考虑 localstorage 的过期时间
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const IGNORE_LAUNCH_SESSION_KEY = 'launcher-ignore-launch-session';
+export default function InProgressSession() {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    create
+  } = useRequest();
+  const {
+    routerPrefix,
+    baseURL
+  } = useWorkflowContext();
+  const [open, setOpen] = useState(false);
+  const api = create();
+  const state = useAsync(async () => {
+    const {
+      data
+    } = await api.get(joinURL(routerPrefix, '/launches/in-progress'));
+    if (data.launch) {
+      if (localStorage.getItem(IGNORE_LAUNCH_SESSION_KEY) === data.launch._id) {
+        return null;
+      }
+      setOpen(true);
+    }
+    return data.launch;
+  });
+  if (state.loading || !state.value) {
+    return '';
+  }
+  if (state.error) {
+    console.error('load in progress session failed', state.error);
+    return '';
+  }
+  const handleClose = () => {
+    setOpen(false);
+    localStorage.setItem(IGNORE_LAUNCH_SESSION_KEY, state.value._id);
+  };
+  let continueBaseURL = '';
+  try {
+    continueBaseURL = getContinueLaunchURL({
+      baseURL: joinURL(window.location.origin, baseURL),
+      launch: state.value
+    });
+  } catch (error) {
+    console.error('get continue url error:', error);
+  }
+  return /*#__PURE__*/_jsx(Dialog, {
+    open: open,
+    showCloseButton: true,
+    PaperProps: {
+      style: {
+        maxWidth: 700,
+        minWidth: 400,
+        minHeight: 200
+      }
+    },
+    title: t('purchase.inProgress.title'),
+    onClose: () => handleClose(null),
+    actions: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        size: "small",
+        onClick: handleClose,
+        children: t('purchase.inProgress.notRemind')
+      }), /*#__PURE__*/_jsx(Button, {
+        component: Link,
+        autoFocus: true,
+        variant: "contained",
+        color: "primary",
+        size: "small",
+        href: continueBaseURL,
+        children: t('purchase.inProgress.continue')
+      })]
+    }),
+    children: t('purchase.inProgress.content', {
+      blockletName: state.value?.blockletMeta?.title
+    })
+  });
+}

package/es/components/launch-dedicated.js

@@ -0,0 +1,290 @@
+import { useContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import get from 'lodash.get';
+import useInterval from 'react-use/lib/useInterval';
+import throttle from 'lodash.throttle';
+import styled from '@emotion/styled';
+import Button from '@arcblock/ux/lib/Button';
+import Spinner from '@mui/material/CircularProgress';
+import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
+import { INSTANCE_STATUS } from '@blocklet/launcher-util/es/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+import PageHeader from '@blocklet/launcher-layout/lib/page-header';
+import LaunchResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+import ProgressMessage from '@blocklet/launcher-ux/lib/progress-message';
+import { getAPIResponseError, getLaunchBlockletUrl, loadURL } from '../util';
+import useQuery from '../hooks/query';
+import useRequest from '../contexts/request';
+import { LocaleContext } from '../contexts/locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS = {
+  waiting: 0,
+  // 未使用
+  launching: 1,
+  // 初始状态
+  success: 2,
+  error: 10,
+  notFoundError: 11,
+  launchFailedError: 12
+};
+export default function LaunchDedicated({
+  type
+}) {
+  const query = useQuery();
+  const blockletMetaUrl = query.get('blocklet_meta_url');
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [launchState, setLaunchState] = useState({
+    appUrl: '',
+    status: STATUS.waiting
+  });
+  const {
+    nftId
+  } = useParams();
+  const {
+    api
+  } = useRequest();
+  const [progressStepIndex, setProgressStepIndex] = useState(0);
+  const [isDone, setIsDone] = useState(false);
+  const navigate = useNavigate();
+  let createServerTime = sessionStorage.getItem(`launcher-create-server-${nftId}-time`);
+  if (!createServerTime) {
+    createServerTime = Date.now();
+    sessionStorage.setItem(`launcher-create-server-${nftId}-time`, createServerTime);
+  }
+  const handleInstance = instance => {
+    if (instance.status >= INSTANCE_STATUS.running) {
+      const url = getLaunchBlockletUrl({
+        serverUrl: instance.serverUrl,
+        blockletMetaUrl,
+        locale,
+        chainHost: window.blocklet?.CHAIN_HOST,
+        from: query.get('from')
+      });
+      setIsDone(true);
+      setTimeout(() => {
+        setLaunchState(pre => ({
+          ...pre,
+          status: STATUS.success,
+          appUrl: url
+        }));
+        loadURL(url).finally(() => {
+          setTimeout(() => {
+            window.location.href = url;
+          }, 1000);
+        });
+      }, 1000);
+    }
+  };
+  const launch = async () => {
+    try {
+      setLaunchState(pre => ({
+        ...pre,
+        status: STATUS.launching
+      }));
+      const {
+        data: {
+          instance
+        }
+      } = await api.post('/instances/launch', {
+        nftId
+      }, {
+        params: {
+          launchType: query.get('launchType')
+        }
+      });
+      handleInstance(instance);
+    } catch (err) {
+      const errDesc = getAPIResponseError(err);
+      if (errDesc === 'Unauthorized') {
+        // TODO: 如果没有授权，要求用户提供 NFT
+        Toast.error(t('launchPrepare.error.loginFirst'));
+      } else {
+        Toast.error(errDesc);
+      }
+    }
+  };
+  const getInstanceStatus = async () => {
+    try {
+      const {
+        data: {
+          instance
+        }
+      } = await api.get(`/public/instances/${nftId}/status`);
+      handleInstance(instance);
+    } catch (error) {
+      sessionStorage.removeItem(`launcher-create-server-${nftId}-time`);
+      if (get(error, 'response.status') === 404 && launchState.status !== STATUS.launching) {
+        setLaunchState(state => ({
+          ...state,
+          status: STATUS.notFoundError
+        }));
+        throw error;
+      }
+      setLaunchState(state => ({
+        ...state,
+        status: STATUS.error
+      }));
+      console.warn('load instance status error', error);
+      throw error;
+    }
+  };
+  const poll = throttle(getInstanceStatus, 5000);
+  useInterval(poll, launchState.status === STATUS.launching && nftId ? 5000 : null);
+  const successful = launchState.status === STATUS.success;
+  const progressSteps = [t('launch.waiting.starting'), t('launch.waiting.securing'), t('launch.waiting.prepare'), t('launch.waiting.waiting'), t('launch.waiting.done')];
+  const messageDuration = 40000;
+  const fixStepIndex = () => {
+    // 防止用户刷新后message进度重新开始，修正 message 展示的信息
+    const nowTime = Date.now();
+    const creatingTime = nowTime - createServerTime;
+    let step = Math.floor(creatingTime / messageDuration);
+    if (step > 0) {
+      if (step >= progressSteps.length - 1) {
+        step = progressSteps.length - 2;
+      }
+    }
+    setProgressStepIndex(step);
+  };
+  useEffect(() => {
+    fixStepIndex();
+    const timer = setInterval(() => {
+      fixStepIndex();
+    }, 1000);
+    launch();
+    return () => clearInterval(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsx(PageHeader, {
+      title: t('launch.pageTitle'),
+      className: `launch-page-header ${successful ? 'header-hide' : ''}`,
+      disableBack: true
+    }), launchState.status === STATUS.waiting && /*#__PURE__*/_jsx("div", {
+      className: "center",
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    }), launchState.status === STATUS.launching && /*#__PURE__*/_jsx(WaiterContainer, {
+      children: /*#__PURE__*/_jsx(AnimationWaiter, {
+        message: /*#__PURE__*/_jsx("div", {
+          style: {
+            textAlign: 'center'
+          },
+          children: /*#__PURE__*/_jsx(ProgressMessage, {
+            steps: progressSteps,
+            stepIndex: isDone ? 4 : progressStepIndex,
+            autoGrowth: isDone ? 500 : 20000
+          })
+        }),
+        increaseSpeed: 0.3,
+        messageLoop: false,
+        maybeDuration: 180000,
+        messageDuration: messageDuration
+      })
+    }), successful && /*#__PURE__*/_jsx(LaunchResultMessage, {
+      variant: successful ? 'success' : 'loading',
+      title: successful ? t('launch.launched') : '',
+      subTitle: !successful ? t('launch.waitingForLaunching') : '',
+      footer: successful ? /*#__PURE__*/_jsxs(LinkEle, {
+        href: launchState.appUrl,
+        rel: "noreferrer",
+        children: [/*#__PURE__*/_jsx(Spinner, {
+          size: 16,
+          style: {
+            marginRight: 14
+          }
+        }), " ", t('common.redirecting')]
+      }) : ''
+    }), [STATUS.error, STATUS.launchFailedError].includes(launchState.status) && /*#__PURE__*/_jsx(LaunchResultMessage, {
+      variant: "error",
+      title: t(`${type}.error.launchFailed`),
+      subTitle: type === 'launch' ? t('launch.error.launchFailedDescription') : '',
+      footer: type === 'launch' && /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        variant: "contained",
+        className: "button",
+        onClick: () => navigate(0),
+        children: t('common.retry')
+      })
+    }), launchState.status === STATUS.notFoundError && /*#__PURE__*/_jsx(LaunchResultMessage, {
+      variant: "error",
+      title: t(`${type}.error.notFound`),
+      subTitle: type === 'launch' ? t('launch.error.notFoundDescription') : '',
+      footer: type === 'launch' && /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        variant: "contained",
+        className: "button",
+        onClick: launch,
+        children: t('common.launch')
+      })
+    })]
+  });
+}
+const LinkEle = styled.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 36px;
+  color: ${props => props.theme.palette.primary.main};
+`;
+const WaiterContainer = styled.div`
+  color: #1dc1c7;
+`;
+const Content = styled.div`
+  margin: auto;
+  height: 100%;
+
+  .link {
+    color: ${props => props.theme.palette.primary.main};
+  }
+
+  .link:hover {
+    text-decoration: underline !important;
+  }
+
+  .status {
+    color: ${props => props.theme.palette.primary.main};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .status-spinner {
+      color: inherit !important;
+    }
+
+    .status-text {
+      display: inline-block;
+      padding: 0 20px;
+      max-width: 420px;
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+
+  .button {
+    min-width: 150px;
+    margin-bottom: 100px;
+  }
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .launch-page-header {
+    transition: all ease 0.3s;
+    &.header-hide {
+      opacity: 0;
+    }
+  }
+`;
+LaunchDedicated.propTypes = {
+  type: PropTypes.oneOf(['launch', 'start'])
+};
+LaunchDedicated.defaultProps = {
+  type: 'launch'
+};

package/es/components/launch-serverless.js

@@ -0,0 +1,113 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import useAsync from 'react-use/lib/useAsync';
+import PageHeader from '@blocklet/launcher-layout/lib/page-header';
+import formatError from '@blocklet/launcher-util/es/format-error';
+import LaunchResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+import Button from '@blocklet/launcher-ux/lib/button';
+import { useLocaleContext } from '../contexts/locale';
+import useRequest from '../contexts/request';
+import { getLaunchBlockletUrl } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function LaunchServerless({
+  nftId
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const [searchParams] = useSearchParams();
+  const sessionId = searchParams.get('sessionId');
+  const state = useAsync(async () => {
+    const {
+      data: {
+        instance
+      }
+    } = await api.post(`/serverless/${nftId}/allocate?sessionId=${sessionId}`);
+    setTimeout(() => {
+      window.location = getLaunchBlockletUrl({
+        serverUrl: instance.serverUrl,
+        blockletMetaUrl: searchParams.get('blocklet_meta_url'),
+        locale,
+        launchType: 'serverless',
+        nftId,
+        sessionId,
+        chainHost: window.blocklet?.CHAIN_HOST,
+        from: searchParams.get('from')
+      });
+    }, 1000);
+    return instance;
+  });
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsx(PageHeader, {
+      title: t('launch.pageTitle')
+    }), /*#__PURE__*/_jsx("div", {
+      className: "page-body",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "content",
+        children: [state.loading && /*#__PURE__*/_jsx(LaunchResultMessage, {
+          variant: "loading",
+          title: t('prepare.serverless.allocate'),
+          subTitle: t('prepare.serverless.preparing')
+        }), state.error && /*#__PURE__*/_jsx(LaunchResultMessage, {
+          variant: "error",
+          title: t('prepare.serverless.allocate'),
+          subTitle: t('prepare.serverless.prepareFailed', {
+            error: formatError(state.error)
+          }),
+          footer: /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            style: {
+              marginTop: '8px'
+            },
+            onClick: () => window.location.reload(),
+            children: t('common.retry')
+          })
+        }), state.value && /*#__PURE__*/_jsx(LaunchResultMessage, {
+          variant: "success",
+          title: t('prepare.serverless.allocated'),
+          subTitle: t('prepare.serverless.prepared')
+        })]
+      })
+    })]
+  });
+}
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .page-logo {
+    display: flex;
+    justify-content: center;
+    margin-top: 62px;
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: 48px;
+    }
+  }
+
+  .page-body {
+    margin-top: 128px;
+
+    .content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+
+      .loading-description {
+        margin-top: 8px;
+      }
+    }
+  }
+`;
+LaunchServerless.propTypes = {
+  nftId: PropTypes.string.isRequired
+};