@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-cb53c14b

package/es/lost-passport.js

@@ -0,0 +1,452 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { useState, useContext } from 'react';
+import styled from '@emotion/styled';
+import { useNavigate, Link } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import Box from '@mui/material/Box';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import ViewListIcon from '@mui/icons-material/ViewList';
+import GetAppIcon from '@mui/icons-material/GetApp';
+import CompleteIcon from '@mui/icons-material/Done';
+import Avatar from '@mui/material/Avatar';
+import Button from '@arcblock/ux/lib/Button';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import CardSelector from './card-selector';
+import DidAddress from './did-address';
+import wrapLocale from './wrap-locale';
+import usePassportId from './hooks/use-passport-id';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const isFromWallet = () => {
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  return searchParams.get('fromWallet') === '1';
+};
+
+// eslint-disable-next-line react/prop-types
+function ColorStepIcon({
+  icon,
+  active,
+  completed
+}) {
+  const icons = {
+    1: /*#__PURE__*/_jsx(ViewListIcon, {
+      className: "step-icon"
+    }),
+    2: /*#__PURE__*/_jsx(GetAppIcon, {
+      className: "step-icon"
+    }),
+    3: /*#__PURE__*/_jsx(CompleteIcon, {
+      className: "step-icon"
+    })
+  };
+  const classNames = ['step-icon-w'];
+  if (active) {
+    classNames.push('step-icon-w--active');
+  }
+  if (completed) {
+    classNames.push('step-icon-w--completed');
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames.join(' '),
+    children: icons[String(icon)]
+  });
+}
+
+// eslint-disable-next-line react/prop-types
+function LostPassport({
+  SessionContext,
+  webWalletUrl,
+  createPassportSvg,
+  passportColor
+}) {
+  const {
+    api,
+    session
+  } = useContext(SessionContext);
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [user, setUser] = useState(false);
+  const [passport, setPassport] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+  const [activeStep, setActiveStep] = useState(0);
+  const {
+    setPassportId
+  } = usePassportId();
+  const {
+    wallet: isWalletWebview
+  } = useBrowser();
+
+  // eslint-disable-next-line no-undef
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  const onNext = () => {
+    setActiveStep(activeStep + 1);
+  };
+  const onGetUser = result => {
+    setUser(result.user);
+  };
+  const onSelectPassport = () => {
+    onNext();
+  };
+  const onReceivePassport = result => {
+    if (result?.passportId) {
+      setPassportId(result.passportId);
+    }
+    setSuccess(true);
+    onNext();
+  };
+  const onUsePassport = () => {
+    if (isWalletWebview && isFromWallet()) {
+      import('dsbridge').then(jsBridge => {
+        jsBridge.call('arcClosePage');
+      });
+      return;
+    }
+    try {
+      session.logout();
+    } catch (err) {
+      // Do nothing
+    }
+    const redirect = searchParams.get('redirect');
+    if (redirect) {
+      navigate(redirect, {
+        replace: true
+      });
+      return;
+    }
+    if ((window.env?.apiPrefix || '').startsWith(WELLKNOWN_SERVICE_PATH_PREFIX)) {
+      navigate(`${WELLKNOWN_SERVICE_PATH_PREFIX}/login`, {
+        replace: true
+      });
+      return;
+    }
+    navigate('/', {
+      replace: true
+    });
+  };
+  const handleChange = event => {
+    setPassport(event.target.value);
+  };
+  const steps = [{
+    label: t('lostPassport.selectPassport'),
+    content: () => {
+      if (!user) {
+        return /*#__PURE__*/_jsx(DidConnect, {
+          popup: true,
+          open: true,
+          hideCloseButton: true,
+          className: "connect",
+          action: "lost-passport-list",
+          forceConnected: false,
+          autoConnect: false,
+          checkFn: api.get,
+          checkTimeout: 10 * 60 * 1000,
+          webWalletUrl: webWalletUrl,
+          onSuccess: onGetUser,
+          locale: locale,
+          messages: {
+            title: t('lostPassport.dialog.title'),
+            scan: t('lostPassport.dialog.scan'),
+            confirm: t('lostPassport.dialog.confirm'),
+            success: t('lostPassport.dialog.success')
+          }
+        });
+      }
+      return /*#__PURE__*/_jsxs(Box, {
+        className: "select-passport",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          my: 1,
+          display: "flex",
+          alignItems: "center",
+          className: "user-info",
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            src: user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsx(Box, {
+              className: "name",
+              children: user.fullName
+            }), /*#__PURE__*/_jsx(Box, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/_jsx(DidAddress, {
+                did: user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(CardSelector, {
+            width: 230,
+            height: 306,
+            cardSpace: 24,
+            list: user.passportTypes.map(x => {
+              return {
+                src: createPassportSvg({
+                  title: x.title,
+                  issuer: x.issuer.name,
+                  issuerDid: x.issuer.id,
+                  ownerDid: user.did,
+                  ownerName: user.fullName,
+                  ownerAvatarUrl: user.avatar,
+                  isDataUrl: true,
+                  preferredColor: passportColor || 'auto'
+                }),
+                name: x.title
+              };
+            }),
+            onSelect: index => handleChange({
+              target: {
+                value: user.passportTypes[index].name
+              }
+            }),
+            defaultIndex: 0
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          textAlign: "center",
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            onClick: () => onSelectPassport(),
+            disabled: !passport,
+            children: t('common.next')
+          })
+        })]
+      });
+    }
+  }, {
+    label: t('lostPassport.receivePassport'),
+    content: () => {
+      const extraParams = {
+        receiverDid: user.did,
+        passportName: passport,
+        teamDid: window?.blocklet?.did || ''
+      };
+      return /*#__PURE__*/_jsx(DidConnect, {
+        popup: true,
+        open: true,
+        hideCloseButton: true,
+        className: "connect",
+        action: "lost-passport-issue",
+        checkFn: api.get,
+        checkTimeout: 10 * 60 * 1000,
+        webWalletUrl: webWalletUrl,
+        onSuccess: onReceivePassport,
+        locale: locale,
+        messages: {
+          title: `${t('lostPassport.dialog.title')}`,
+          scan: t('lostPassport.dialog.scan'),
+          confirm: t('lostPassport.dialog.confirm'),
+          success: t('lostPassport.dialog.success')
+        },
+        extraParams: extraParams
+      });
+    }
+  }, {
+    label: t('common.complete'),
+    content: () => /*#__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(Button, {
+        style: {
+          marginTop: 40
+        },
+        variant: "contained",
+        color: "primary",
+        onClick: onUsePassport,
+        children: t('issuePassport.dialog.loginWithPassport')
+      })]
+    })
+  }];
+  return /*#__PURE__*/_jsx(Div, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "stepper",
+      children: [/*#__PURE__*/_jsx(Stepper, {
+        className: "stepper-progress",
+        alternativeLabel: true,
+        activeStep: activeStep,
+        children: steps.map(({
+          label
+        }) => /*#__PURE__*/_jsx(Step, {
+          children: /*#__PURE__*/_jsx(StepLabel, {
+            StepIconComponent: ColorStepIcon,
+            children: label
+          })
+        }, label))
+      }), /*#__PURE__*/_jsx("div", {
+        className: "stepper-content",
+        children: steps[activeStep].content()
+      }), !success && /*#__PURE__*/_jsx(Box, {
+        textAlign: "center",
+        fontSize: 12,
+        children: /*#__PURE__*/_jsx(Link, {
+          to: "/",
+          style: {
+            color: '#4598FA'
+          },
+          children: t('lostPassport.return')
+        })
+      })]
+    })
+  });
+}
+const Div = styled(Container)`
+  padding-top: 46px;
+  padding-bottom: 46px;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    display: block;
+  }
+  .header {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+
+  .stepper {
+    padding: 24px;
+    height: auto;
+    width: 100%;
+    min-height: 640px;
+    display: flex;
+    flex-direction: column;
+
+    .stepper-progress {
+      padding: 0;
+      flex: 0;
+      margin-bottom: 24px;
+
+      .MuiStepLabel-label.MuiStepLabel-alternativeLabel {
+        margin-top: 8px;
+      }
+
+      .MuiStepConnector-alternativeLabel {
+        top: 24px;
+      }
+
+      .MuiStepConnector-lineHorizontal {
+        height: 3px;
+        border: none;
+        background-color: #eaeaf0;
+        border-radius: 1px;
+      }
+
+      .step-icon-w {
+        background-color: ${props => props.theme.palette.grey[500]};
+        z-index: 1;
+        color: ${props => props.theme.palette.common.white};
+        width: 50px;
+        height: 50px;
+        display: flex;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+        .step-icon {
+          font-size: 30px;
+        }
+      }
+
+      .step-icon-w--active {
+        background-color: ${props => props.theme.palette.primary.main};
+      }
+
+      .step-icon-w--completed {
+        background-color: ${props => props.theme.palette.secondary.main};
+      }
+    }
+
+    .stepper-content {
+      padding: 0 64px;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 24px;
+
+      .stepper-icon {
+        margin-left: 40px;
+      }
+
+      .stepper-auth {
+        padding: 0;
+
+        .auth-title {
+          margin-bottom: 16px;
+        }
+      }
+
+      .stepper-tip {
+        text-align: center;
+        margin-bottom: 16px;
+      }
+      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+        padding: 0;
+      }
+    }
+
+    .stepper-actions {
+      flex: 0;
+      text-align: right;
+      padding: 0 64px;
+      display: none;
+      .step-button {
+        margin-right: 8px;
+      }
+    }
+
+    .select-passport {
+      width: 80%;
+      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+        width: 100%;
+      }
+    }
+
+    .user-info {
+      .name {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 25px;
+        color: #222222;
+      }
+    }
+  }
+
+  .connect {
+    background: #fafafa;
+  }
+`;
+export default wrapLocale(LostPassport);

package/es/nav-logo.js

@@ -0,0 +1,219 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+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 default function LogoContainer({
+  logo,
+  name,
+  subname,
+  previousData,
+  ...rest
+}) {
+  let logoEle = /*#__PURE__*/_jsx(LogoImg, {
+    logo: logo
+  });
+  let nameEle = name;
+  let subnameEle = subname;
+  if (previousData.logo) {
+    logoEle = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(LogoImg, {
+        logo: logo,
+        className: "left-fade-in-ele"
+      }), /*#__PURE__*/_jsx(LogoImg, {
+        logo: previousData.logo,
+        className: "postion-abs left-fade-out-ele"
+      })]
+    });
+  }
+  if (previousData.name && previousData.name !== name) {
+    nameEle = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: name
+      }), /*#__PURE__*/_jsx("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.name
+      })]
+    });
+  }
+  if (previousData.subname && previousData.subname !== subname) {
+    subnameEle = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: subname
+      }), /*#__PURE__*/_jsx("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.subname
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Container, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "logo-inner",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "logo-img-content",
+        children: logoEle
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `logo-info ${!name && !subname ? 'zero-left' : ''}`,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "logo-name",
+          children: nameEle
+        }), /*#__PURE__*/_jsx("div", {
+          className: "logo-subname",
+          children: subnameEle
+        })]
+      })]
+    })
+  });
+}
+LogoContainer.propTypes = {
+  logo: PropTypes.element.isRequired,
+  name: PropTypes.string,
+  subname: PropTypes.string,
+  previousData: PropTypes.object
+};
+LogoContainer.defaultProps = {
+  name: '',
+  subname: '',
+  previousData: {
+    logo: '',
+    name: '',
+    subname: ''
+  }
+};
+
+// eslint-disable-next-line react/prop-types
+function LogoImg({
+  logo,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(LogoImgDiv, {
+    ...rest,
+    children: logo
+  });
+}
+const LogoImgDiv = styled.div`
+  display: block;
+  > * {
+    display: block;
+  }
+`;
+const Container = styled.div`
+  position: relative;
+  display: block;
+
+  .logo-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    .logo-img-content {
+      position: relative;
+      display: block;
+    }
+    .logo-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 10px;
+      letter-spacing: 0.1px;
+      &.zero-left {
+        margin-left: 0%;
+      }
+      .logo-name {
+        position: relative;
+        line-height: 16px;
+        font-size: 16px;
+        color: #121319;
+      }
+      .logo-subname {
+        position: relative;
+        line-height: 13px;
+        font-size: 13px;
+        color: #7d8085;
+      }
+    }
+  }
+
+  .postion-abs {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+  }
+
+  .right-fade-out-ele {
+    animation: right-fade-out ease 0.5s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+  }
+
+  .right-fade-in-ele {
+    animation: right-fade-in ease 0.5s;
+    animation-delay: 2s;
+    animation-fill-mode: both;
+  }
+
+  @keyframes right-fade-out {
+    0% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate(8px, 0);
+    }
+  }
+
+  @keyframes right-fade-in {
+    0% {
+      opacity: 0;
+      transform: translate(8px, 0);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+
+  .left-fade-out-ele {
+    animation: left-fade-out ease 0.5s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+  }
+
+  .left-fade-in-ele {
+    animation: left-fade-in ease 0.5s;
+    animation-delay: 2s;
+    animation-fill-mode: both;
+  }
+
+  @keyframes left-fade-out {
+    0% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate(-8px, 0);
+    }
+  }
+
+  @keyframes left-fade-in {
+    0% {
+      opacity: 0;
+      transform: translate(-8px, 0);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+`;

package/es/passport-tag.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import CloseIcon from '@mui/icons-material/Close';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function PassportTag(props) {
+  const {
+    passport,
+    onDelete,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsxs(Tag, {
+    ...rest,
+    children: [passport.title || passport.name, ' ', !!onDelete && /*#__PURE__*/_jsx(CloseIcon, {
+      "data-cy": "delete-issuance",
+      className: "delete",
+      onClick: onDelete
+    })]
+  });
+}
+PassportTag.propTypes = {
+  passport: PropTypes.object.isRequired,
+  onDelete: PropTypes.func
+};
+PassportTag.defaultProps = {
+  onDelete: null
+};
+const Tag = styled.span`
+  display: inline-flex;
+  padding: 2px 8px;
+  background: ${props => props.theme.palette.primary.main};
+  border-radius: 100vw;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 22px;
+  color: #fff;
+  align-items: center;
+  .delete {
+    font-size: 1em;
+    margin-left: 6px;
+    cursor: pointer;
+  }
+`;