@abtnode/ux 1.16.16-beta-cfa95fa6 → 1.16.17-beta-7ec31a60

package/es/blocklet/publish/create-project.js

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import Button from '@arcblock/ux/lib/Button';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import Toast from '@arcblock/ux/lib/Toast';
+import DidAddress from '../../did-address';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useSessionContext } from '../../contexts/session';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Types = [{
+  label: {
+    en: 'Resource',
+    zh: '资源'
+  },
+  value: 'resource'
+}, {
+  label: {
+    en: 'Application',
+    zh: '应用'
+  },
+  value: 'pack',
+  disabled: true
+}];
+export default function CreateProject({
+  ...rest
+}) {
+  const navigate = useNavigate();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [blockletTitle, setBlockletTitle] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [type, setType] = useState('resource'); // resource, pack
+  const {
+    api: sessionApi
+  } = useSessionContext();
+  const {
+    api
+  } = useNodeContext();
+  const [blockletDid, setBlockletDid] = useState();
+  const [openConnect, setOpenConnect] = useState(false);
+  const handleCreateBlockletDidError = err => {
+    Toast.error(err.message);
+    setOpenConnect(false);
+  };
+  const handleCreateBlockletDidSuccess = result => {
+    const did = result?.blockletWallet?.address;
+    if (!did) {
+      Toast.error('Empty Blocklet DID');
+    } else {
+      setBlockletDid(did);
+    }
+    setOpenConnect(false);
+  };
+  const onCreate = () => {
+    setLoading(true);
+    api.createProject({
+      input: {
+        did: blocklet.meta.did,
+        blockletTitle: blockletTitle || '',
+        blockletDid,
+        type
+      }
+    }).then(() => {
+      setLoading(false);
+      navigate('../', {
+        replace: true
+      });
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  return /*#__PURE__*/_jsxs(Main, {
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
+      className: "breadcrumbs",
+      "aria-label": "breadcrumb",
+      children: [/*#__PURE__*/_jsx(Link, {
+        to: "..",
+        children: t('common.publish')
+      }), /*#__PURE__*/_jsxs(Typography, {
+        color: "text.primary",
+        children: [t('common.create'), " Blocklet"]
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      style: {
+        maxWidth: 500
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mb: 3
+        },
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          variant: "h6",
+          sx: {
+            mr: 3
+          },
+          children: ["Blocklet DID:", ' ']
+        }), blockletDid ? /*#__PURE__*/_jsx(DidAddress, {
+          size: 14,
+          responsive: true,
+          did: blockletDid
+        }) : /*#__PURE__*/_jsx(Button, {
+          onClick: () => setOpenConnect(true),
+          children: t('blocklet.publish.createBlockletDid')
+        })]
+      }), openConnect && /*#__PURE__*/_jsx(DidConnect, {
+        open: true,
+        popup: true,
+        onClose: () => setOpenConnect(false),
+        action: "gen-blocklet-key-pair",
+        locale: locale,
+        checkFn: sessionApi.get,
+        saveConnect: false,
+        forceConnected: false,
+        checkTimeout: 5 * 60 * 1000,
+        onSuccess: handleCreateBlockletDidSuccess,
+        onError: handleCreateBlockletDidError,
+        extraParams: {
+          did: blocklet.meta.did
+        },
+        messages: {
+          title: t('blocklet.publish.connect.title'),
+          scan: t('blocklet.publish.connect.scan'),
+          confirm: t('blocklet.publish.connect.confirm'),
+          success: t('blocklet.publish.connect.success')
+        }
+      }), /*#__PURE__*/_jsx(TextField, {
+        label: `Blocklet ${t('common.title')}`,
+        autoComplete: "off",
+        variant: "outlined",
+        inputProps: {
+          'data-cy': 'export-blocklet-title'
+        },
+        fullWidth: true,
+        helperText: "",
+        value: blockletTitle || '',
+        onChange: e => {
+          setBlockletTitle(e.target.value);
+        }
+      }), /*#__PURE__*/_jsx(TextField, {
+        sx: {
+          my: 4
+        },
+        id: "blocklet-type",
+        select: true,
+        label: `Blocklet ${t('common.type')}`,
+        helperText: "",
+        fullWidth: true,
+        value: type,
+        onChange: e => setType(e.target.value),
+        children: Types.map(x => /*#__PURE__*/_jsx(MenuItem, {
+          value: x.value,
+          disabled: x.disabled,
+          children: x.label[locale] || x.label.en
+        }, x.value))
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      disabled: loading || !blockletDid || !blockletTitle,
+      onClick: onCreate,
+      children: t('common.create')
+    })]
+  });
+}
+CreateProject.propTypes = {};
+CreateProject.defaultProps = {};
+const Main = styled.div`
+  .breadcrumbs {
+    margin-bottom: 24px;
+  }
+`;