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

package/es/invitation/invitation-receive.js

@@ -0,0 +1,138 @@
+import { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import DidButton from '@arcblock/did-connect/lib/Button';
+import { getWebWalletUrl } from '@arcblock/did-connect/lib/utils';
+import { formatDateTime } from '../util';
+import usePassportId from '../hooks/use-passport-id';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function InvitationReceive({
+  invitation,
+  checkFn,
+  onLogin,
+  onReceive
+}) {
+  const [open, setOpen] = useState(false);
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    getPassportId
+  } = usePassportId();
+  let componentId;
+  if (typeof window !== 'undefined') {
+    componentId = window?.blocklet?.componentId;
+  }
+  const extraParams = {
+    passportId: getPassportId(),
+    inviteId: invitation.inviteId,
+    // 生成 passport 信息需要 baseUrl 字段
+    baseUrl: window.location.origin,
+    componentId
+  };
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const onSuccess = useCallback((...args) => {
+    setOpen(false);
+    onLogin(...args);
+  }, [onLogin]);
+  const onClickReceive = useCallback(() => {
+    if (typeof onReceive === 'function') {
+      onReceive();
+      return;
+    }
+    setOpen(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Root, {
+      children: [/*#__PURE__*/_jsx(DidButton, {
+        size: "large",
+        variant: "contained",
+        className: "invite-receive__button",
+        "data-cy": "invite-receive-passport",
+        color: "primary",
+        onClick: onClickReceive,
+        children: t('invite.receive')
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "invite-receive__until",
+        children: [t('invite.validUntil'), formatDateTime(invitation.expireDate, locale)]
+      })]
+    }), /*#__PURE__*/_jsx(DidConnect, {
+      popup: true,
+      open: open,
+      className: "connect",
+      action: "invite",
+      checkFn: checkFn,
+      forceConnected: false,
+      autoConnect: false,
+      checkTimeout: 10 * 60 * 1000,
+      onSuccess: onSuccess,
+      onClose: onClose,
+      locale: locale,
+      webWalletUrl: getWebWalletUrl(),
+      messages: {
+        title: t('receive.dialog.title'),
+        scan: t('receive.dialog.scan'),
+        confirm: t('receive.dialog.confirm'),
+        success: t('receive.dialog.success')
+      },
+      extraParams: extraParams
+    })]
+  });
+}
+InvitationReceive.propTypes = {
+  invitation: PropTypes.object.isRequired,
+  checkFn: PropTypes.func.isRequired,
+  onLogin: PropTypes.func,
+  onReceive: PropTypes.func
+};
+InvitationReceive.defaultProps = {
+  onLogin: () => {},
+  onReceive: null
+};
+const Root = styled.div`
+  text-align: center;
+  .invite-receive__logo-wrapper {
+    display: inline-flex;
+    align-items: center;
+    color: #9397a1;
+    font-size: 14px;
+  }
+  .invite-receive__logo {
+    height: 16px;
+    margin-left: 8px;
+  }
+  .invite-receive__button {
+    width: 100%;
+    margin: 16px 0;
+    white-space: nowrap;
+  }
+  .invite-receive__until {
+    text-align: center;
+    font-size: 14px;
+  }
+  .invite-receive__description {
+    color: #999;
+    text-align: left;
+    list-style: decimal;
+    padding: 0;
+    padding-left: 1.2em;
+    margin: 40px 0;
+  }
+  .invite-receive__description-item {
+    list-style: decimal;
+  }
+  .invite-receive__link {
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+  }
+`;
+export default InvitationReceive;

package/es/invitation/invitation-success.js

@@ -0,0 +1,93 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { getExplorerLink, patchJsxToLocale } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function InvitationSuccess({
+  invitation,
+  type
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const message = useMemo(() => {
+    return t('invite.success', {
+      dapp: '{{dapp}}'
+    });
+  }, [t]);
+  const accountLink = getExplorerLink(invitation.info.chainHost, invitation.inviter.did, 'account');
+  const user = type === 'receiver' ? invitation.receiver : invitation.inviter;
+  const messageList = patchJsxToLocale(message, {
+    name() {
+      return accountLink ? /*#__PURE__*/_jsx("a", {
+        target: "_blank",
+        href: accountLink,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: user.fullName
+      }, "name") : user.fullName;
+    },
+    dapp() {
+      return /*#__PURE__*/_jsx("a", {
+        target: "_blank",
+        href: invitation.info.url,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.info.name
+      }, "dapp");
+    }
+  });
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      pt: 1,
+      color: "success.main",
+      children: /*#__PURE__*/_jsx(CheckCircleIcon, {
+        style: {
+          fontSize: 80
+        }
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "invite-user__message",
+      children: messageList
+    })]
+  });
+}
+InvitationSuccess.propTypes = {
+  invitation: PropTypes.object.isRequired,
+  type: PropTypes.oneOf('inviter', 'receiver')
+};
+InvitationSuccess.defaultProps = {
+  type: 'inviter'
+};
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .invite-user__name {
+    font-weight: 700;
+    font-size: 16px;
+    margin: 8px 0 2px 0;
+  }
+  .invite-user__address {
+    font-size: 12px;
+  }
+  .invite-user__message {
+    margin-top: 20px;
+    font-weight: 700;
+    /* width: 90%; */
+    text-align: center;
+    font-size: 18px;
+  }
+  .invite-user__link {
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+  }
+`;
+export default InvitationSuccess;

package/es/invitation/invitation-user.js

@@ -0,0 +1,90 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import DidAvatar from '@arcblock/did-connect/lib/Avatar';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { getExplorerLink, patchJsxToLocale } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function InvitationUser({
+  invitation
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const roleName = useMemo(() => {
+    const role = invitation.role.title || invitation.role.name;
+    return role.toUpperCase();
+  }, [invitation.role.title, invitation.role.name]);
+  const message = useMemo(() => {
+    return t('invite.message', {
+      name: '{{name}}',
+      role: roleName,
+      dapp: '{{dapp}}'
+    });
+  }, [t, roleName]);
+  const accountLink = getExplorerLink(invitation.info.chainHost, invitation.inviter.did, 'account');
+  const messageList = patchJsxToLocale(message, {
+    name() {
+      return accountLink ? /*#__PURE__*/_jsx("a", {
+        target: "_blank",
+        href: accountLink,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.inviter.fullName
+      }, "name") : invitation.inviter.fullName;
+    },
+    dapp() {
+      return /*#__PURE__*/_jsx("a", {
+        target: "_blank",
+        href: invitation.info.url,
+        className: "invite-user__link",
+        rel: "noreferrer",
+        children: invitation.info.name
+      }, "dapp");
+    }
+  });
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [/*#__PURE__*/_jsx(DidAvatar, {
+      did: invitation.inviter.did,
+      src: encodeURI(invitation.inviter.avatar),
+      size: 80,
+      shape: "circle",
+      variant: "circle"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "invite-user__message",
+      children: messageList
+    })]
+  });
+}
+InvitationUser.propTypes = {
+  invitation: PropTypes.object.isRequired
+};
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .invite-user__name {
+    font-weight: 700;
+    font-size: 16px;
+    margin: 8px 0 2px 0;
+  }
+  .invite-user__address {
+    font-size: 12px;
+  }
+  .invite-user__message {
+    margin-top: 20px;
+    font-weight: 700;
+    /* width: 90%; */
+    text-align: center;
+    font-size: 18px;
+  }
+  .invite-user__link {
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+  }
+`;
+export default InvitationUser;

package/es/invitation/invitation.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { useRequest } from 'ahooks';
+import Spinner from '@mui/material/CircularProgress';
+import Result from '@arcblock/ux/lib/Result';
+import InvitationPassport from './invitation-passport';
+import InvitationReceive from './invitation-receive';
+import InvitationLogin from './invitation-login';
+import InvitationUser from './invitation-user';
+import InvitationSuccess from './invitation-success';
+import InvitationApp from './invitation-app';
+import wrapLocale from '../wrap-locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Invitation({
+  getDataFn,
+  passportColor,
+  createPassportSvg,
+  onLoginSuccess,
+  checkFn,
+  onReceive
+}) {
+  const state = useRequest(getDataFn);
+  if (state.loading) {
+    return /*#__PURE__*/_jsx(Spinner, {});
+  }
+  if (state.error) {
+    return /*#__PURE__*/_jsx(Result, {
+      status: "404",
+      title: state.error?.response?.data,
+      description: ""
+    });
+  }
+  const isSuccess = state.data.status === 'success';
+  const Section1 = isSuccess ? InvitationSuccess : InvitationUser;
+  const Section2 = isSuccess ? InvitationLogin : InvitationReceive;
+  return /*#__PURE__*/_jsxs(Root, {
+    className: "page-invite__wrapper",
+    children: [/*#__PURE__*/_jsx(InvitationApp, {
+      invitation: state.data
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "page-invite__card",
+      children: [/*#__PURE__*/_jsx(Section1, {
+        invitation: state.data
+      }), /*#__PURE__*/_jsx(InvitationPassport, {
+        invitation: state.data,
+        createPassportSvg: createPassportSvg,
+        passportColor: passportColor
+      }), /*#__PURE__*/_jsx(Section2, {
+        invitation: state.data,
+        onLogin: onLoginSuccess,
+        checkFn: checkFn,
+        onReceive: onReceive
+      })]
+    })]
+  });
+}
+Invitation.propTypes = {
+  getDataFn: PropTypes.func.isRequired,
+  checkFn: PropTypes.func.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  onLoginSuccess: PropTypes.func,
+  onReceive: PropTypes.func,
+  passportColor: PropTypes.string
+};
+Invitation.defaultProps = {
+  onLoginSuccess: () => {},
+  passportColor: 'auto',
+  onReceive: null
+};
+const Root = styled.div`
+  max-width: 460px;
+  max-height: 650px;
+  min-height: 450px;
+  width: 90%;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  .page-invite__card {
+    background-color: #fff;
+    border-radius: 4px;
+    flex: 1;
+    padding: 20px 30px;
+    margin-top: 10px;
+  }
+  .page-invite__app {
+    margin-top: 20px;
+  }
+`;
+export default wrapLocale(Invitation);

package/es/issue-passport.js

@@ -0,0 +1,142 @@
+/* eslint-disable react/jsx-one-expression-per-line, no-undef */
+import { useState, useContext } from 'react';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import Box from '@mui/material/Box';
+import Center from '@arcblock/ux/lib/Center';
+import Button from '@arcblock/ux/lib/Button';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import wrapLocale from './wrap-locale';
+import usePassportId from './hooks/use-passport-id';
+
+// eslint-disable-next-line react/prop-types
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function IssuePassport({
+  SessionContext,
+  webWalletUrl
+}) {
+  const {
+    api,
+    session
+  } = useContext(SessionContext);
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+  const {
+    setPassportId
+  } = usePassportId();
+  const onReceivePassport = result => {
+    if (result?.passportId) {
+      setPassportId(result.passportId);
+    }
+    setSuccess(true);
+  };
+  const extraParams = {};
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  const id = searchParams.get('id');
+  if (id) {
+    extraParams.id = id;
+  }
+  const onUsePassport = () => {
+    try {
+      session.logout();
+    } catch (err) {
+      // Do nothing
+    }
+    if ((window.env?.apiPrefix || '').startsWith(WELLKNOWN_SERVICE_PATH_PREFIX)) {
+      navigate(`${WELLKNOWN_SERVICE_PATH_PREFIX}/login`, {
+        replace: true
+      });
+      return;
+    }
+    navigate('/', {
+      replace: true
+    });
+  };
+  return /*#__PURE__*/_jsx(Div, {
+    children: success ? /*#__PURE__*/_jsx("div", {
+      className: "login",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "connect",
+        children: /*#__PURE__*/_jsxs(Box, {
+          textAlign: "center",
+          children: [/*#__PURE__*/_jsx(Box, {
+            mb: 3,
+            color: "success.main",
+            children: /*#__PURE__*/_jsx(CheckCircleIcon, {
+              style: {
+                fontSize: 60
+              }
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            component: "p",
+            variant: "body1",
+            className: "subheader",
+            children: t('issuePassport.dialog.success')
+          }), /*#__PURE__*/_jsx(Box, {
+            mt: 3,
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              onClick: onUsePassport,
+              children: t('issuePassport.dialog.loginWithPassport')
+            })
+          })]
+        })
+      })
+    }) : /*#__PURE__*/_jsx(DidConnect, {
+      className: "connect",
+      action: "issue-passport",
+      forceConnected: false,
+      autoConnect: false,
+      checkFn: api.get,
+      checkTimeout: 10 * 60 * 1000,
+      webWalletUrl: webWalletUrl,
+      onSuccess: onReceivePassport,
+      locale: locale,
+      messages: {
+        title: t('issuePassport.title'),
+        scan: t('issuePassport.description', {
+          name: window.env.appName
+        }),
+        confirm: t('issuePassport.dialog.confirm'),
+        success: t('issuePassport.dialog.success')
+      },
+      extraParams: extraParams
+    })
+  });
+}
+const Div = styled(Center)`
+  .header {
+    text-align: center;
+    margin-bottom: 8px;
+  }
+
+  .subheader {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+
+  .login {
+    padding: 24px;
+    height: auto;
+    min-height: 480px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .connect {
+    background: #fafafa;
+  }
+`;
+export default wrapLocale(IssuePassport);

package/es/launch-blocklet/content-layout.js

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ContentLayout({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Container, {
+    ...props,
+    children: children
+  });
+}
+ContentLayout.propTypes = {
+  children: PropTypes.any.isRequired
+};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .header {
+    text-align: center;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+    width: 100%;
+    min-height: 200px;
+    flex: 1;
+
+    ${props => props.theme.breakpoints.up('md')} {
+      padding: 24px;
+    }
+
+    ${props => props.theme.breakpoints.down('md')} {
+      padding: 0 16px 16px;
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+
+    ${props => props.theme.breakpoints.up('sm')} {
+      padding-bottom: 34px;
+    }
+
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: auto;
+      padding-bottom: 10px;
+    }
+  }
+`;

package/es/launch-blocklet/page-header.js

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  subTitle
+}) {
+  return /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "title",
+      children: title
+    }), /*#__PURE__*/_jsx("div", {
+      className: "sub-title",
+      children: subTitle
+    })]
+  });
+}
+const Content = styled.div`
+  text-align: center;
+
+  .title {
+    font-size: 24px;
+    font-weight: 400;
+    color: ${props => props.theme.palette.common.black};
+  }
+
+  .sub-title {
+    margin: 0 auto;
+    max-width: 90%;
+    font-size: 14px;
+    color: ${props => props.theme.palette.grey[600]};
+  }
+`;
+export default PageHeader;
+PageHeader.propTypes = {
+  title: PropTypes.string,
+  subTitle: PropTypes.string
+};
+PageHeader.defaultProps = {
+  title: '',
+  subTitle: ''
+};