@arcblock/did-connect-react 3.1.0

package/src/Connect/components/connect-status.jsx

@@ -0,0 +1,259 @@
+import { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Tooltip, Typography, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import closeRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
+import hourglassEmptyRoundedIcon from '@iconify-icons/material-symbols/hourglass-empty-rounded';
+import ruleSettingsRoundedIcon from '@iconify-icons/material-symbols/rule-settings-rounded';
+import LoadingMask from '@arcblock/ux/lib/LoadingMask';
+import Success from '@arcblock/ux/lib/Success';
+import noop from 'lodash/noop';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+
+import translations from '../assets/locale';
+import ActionButton from './action-button';
+import BackButton from './back-button';
+
+function BaseStatus({ icon = null, title = '', color = '', description = '', extraContent = null, actions = null }) {
+  const { palette } = useTheme();
+  const fgColor = color || palette.grey[700];
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 1.5,
+      }}>
+      {isValidElement(icon) ? (
+        icon
+      ) : (
+        <Box
+          sx={{
+            backgroundColor: fgColor,
+            borderRadius: '100%',
+            fontSize: 0,
+          }}>
+          <Icon
+            icon={icon}
+            fontSize={52}
+            style={{
+              transform: 'scale(0.7)',
+              color: palette.primary.contrastText,
+            }}
+          />
+        </Box>
+      )}
+
+      <Box sx={{ textAlign: 'center' }}>
+        <Typography
+          variant="h6"
+          sx={{
+            fontWeight: 500,
+            color: fgColor,
+          }}>
+          {title}
+        </Typography>
+        <Tooltip title={description} placement="top">
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+              overflow: 'hidden',
+              display: '-webkit-box',
+              '-webkit-box-orient': 'vertical',
+              '-webkit-line-clamp': '3',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}>
+            {description}
+          </Typography>
+        </Tooltip>
+      </Box>
+      {extraContent}
+      <Box>{actions}</Box>
+    </Box>
+  );
+}
+
+BaseStatus.propTypes = {
+  icon: PropTypes.any,
+  title: PropTypes.string,
+  color: PropTypes.string,
+  description: PropTypes.string,
+  extraContent: PropTypes.node,
+  actions: PropTypes.node,
+};
+
+function MfaCode({ title = '', mfaCode = 0 }) {
+  return (
+    <Box
+      className="status-mfa"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid',
+        borderColor: 'grey.200',
+        borderRadius: 1,
+        maxWidth: '360px',
+        backgroundColor: 'transparent',
+        p: 1,
+      }}>
+      <Box
+        className="status-mfa-tip"
+        sx={{
+          textAlign: 'center',
+          textWrap: 'balance',
+        }}>
+        {title}
+      </Box>
+      <Typography
+        className="status-mfa-code"
+        sx={{
+          mt: 1,
+          lineHeight: 1,
+          fontSize: '36px',
+          fontWeight: 700,
+          letterSpacing: 1,
+        }}>
+        {mfaCode}
+      </Typography>
+    </Box>
+  );
+}
+MfaCode.propTypes = {
+  title: PropTypes.string,
+  mfaCode: PropTypes.number,
+};
+
+/**
+ * Status (scanned/succeed/error/busy)
+ */
+export default function ConnectStatus({
+  status = '',
+  nextWorkflow = '',
+  mfaCode = 0,
+  onCancel = noop,
+  onRetry = noop,
+  onClose = noop,
+  messages,
+  locale = 'en',
+  isFullScreen = false,
+  loadingIcon = null,
+  chooseMethod = 'DID Wallet',
+  hideRetry = false,
+  hideBack = false,
+  ...rest
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { palette } = useTheme();
+  const closeButton = (
+    <ActionButton sx={{ color: 'text.secondary' }} onClick={onClose}>
+      {t('close')}
+    </ActionButton>
+  );
+
+  return (
+    <Box
+      {...rest}
+      sx={{
+        p: 2,
+        minHeight: 200,
+        ...rest.sx,
+      }}>
+      {status === 'scanned' && !nextWorkflow && (
+        <BaseStatus
+          icon={
+            <LoadingMask size={52} borderRadius={12}>
+              {loadingIcon || <ProviderIcon provider={LOGIN_PROVIDER.DID_WALLET} width="100%" height="100%" />}
+            </LoadingMask>
+          }
+          title={t('requestConnect')}
+          description={t('continueInWallet', { method: chooseMethod })}
+          extraContent={mfaCode > 0 && <MfaCode mfaCode={mfaCode} title={t('mfaCode')} />}
+          actions={hideBack ? closeButton : <BackButton onClick={onCancel} />}
+        />
+      )}
+      {status === 'scanned' && !!nextWorkflow && (
+        <BaseStatus
+          color={palette.secondary.main}
+          icon={hourglassEmptyRoundedIcon}
+          title={t('wait')}
+          description={t('waiting')}
+          extraContent={mfaCode > 0 && <MfaCode mfaCode={mfaCode} title={t('mfaCode')} />}
+          actions={hideBack ? closeButton : <BackButton onClick={onCancel} />}
+        />
+      )}
+      {status === 'succeed' && (
+        <BaseStatus
+          color="success.light"
+          icon={<Success size={52} borderWidth={3} />}
+          title={t('success')}
+          description={messages.success}
+          actions={isFullScreen ? null : closeButton}
+        />
+      )}
+      {status === 'error' && (
+        <BaseStatus
+          color={palette.error.main}
+          icon={closeRoundedIcon}
+          title={t('failed')}
+          description={messages.error || t('error')}
+          actions={
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              {hideBack ? closeButton : <BackButton onClick={onCancel} />}
+              {hideRetry ? null : (
+                <ActionButton
+                  onClick={onRetry}
+                  sx={{
+                    color: 'primary.main',
+                    borderColor: 'primary.light',
+                  }}>
+                  {t('retry')}
+                </ActionButton>
+              )}
+            </Box>
+          }
+        />
+      )}
+      {status === 'busy' && (
+        <BaseStatus
+          color="warning.main"
+          icon={ruleSettingsRoundedIcon}
+          title={t('busyTitle')}
+          description={messages.error || t('busyDesc')}
+          actions={hideBack ? closeButton : <BackButton onClick={onCancel} />}
+        />
+      )}
+    </Box>
+  );
+}
+
+ConnectStatus.propTypes = {
+  status: PropTypes.string,
+  nextWorkflow: PropTypes.string,
+  mfaCode: PropTypes.number,
+  onCancel: PropTypes.func,
+  onRetry: PropTypes.func,
+  onClose: PropTypes.func,
+  messages: PropTypes.shape({
+    confirm: PropTypes.string.isRequired,
+    success: PropTypes.any.isRequired,
+    error: PropTypes.any.isRequired,
+  }).isRequired,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  isFullScreen: PropTypes.bool,
+  loadingIcon: PropTypes.any,
+  chooseMethod: PropTypes.string,
+  hideRetry: PropTypes.bool,
+  hideBack: PropTypes.bool,
+};

package/src/Connect/components/did-connect-title.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { Icon } from '@iconify/react';
+import { Box, Tooltip, Typography } from '@mui/material';
+import infoOutlineRoundedIcon from '@iconify-icons/material-symbols/info-outline-rounded';
+import swapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
+import PropTypes from 'prop-types';
+import SwitchApp from './switch-app';
+
+export default function DIDConnectTitle({ title, description, extraContent = null, disableSwitchApp = false }) {
+  const [showSwitch, setShowSwitch] = useState(false);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.5,
+      }}>
+      <Typography
+        component="h1"
+        variant="h4"
+        sx={{
+          color: 'text.primary',
+          fontWeight: 700,
+          fontFamily: 'Lexend',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+        }}
+        onClick={(e) => {
+          if (disableSwitchApp) return;
+          // HACK: 连续点击三次才触发
+          if (e.detail > 2) {
+            setShowSwitch(true);
+          }
+        }}>
+        {title}
+        <SwitchApp
+          sx={{
+            fontSize: 0,
+            display: showSwitch ? 'block' : 'none',
+          }}>
+          <Icon
+            icon={swapHorizRoundedIcon}
+            style={{
+              fontSize: '14px',
+            }}
+          />
+        </SwitchApp>
+      </Typography>
+      <Typography
+        variant="body2"
+        sx={{
+          color: 'text.secondary',
+          fontFamily: 'Lexend',
+        }}>
+        {description}
+        {extraContent ? (
+          <Tooltip
+            title={extraContent}
+            arrow
+            slotProps={{
+              tooltip: {
+                sx: {
+                  '&>.MuiTypography-root': {
+                    color: 'primary.contrastText',
+                    fontFamily: 'Lexend',
+                  },
+                },
+              },
+              popper: {
+                modifiers: [
+                  {
+                    name: 'offset',
+                    options: {
+                      offset: [0, -8],
+                    },
+                  },
+                ],
+              },
+            }}>
+            <Box
+              component={Icon}
+              icon={infoOutlineRoundedIcon}
+              sx={{
+                fontSize: 14,
+                display: 'inline-block',
+                verticalAlign: 'middle',
+                ml: 0.5,
+                cursor: 'pointer',
+                transform: 'translateY(-1px)',
+              }}
+            />
+          </Tooltip>
+        ) : null}
+      </Typography>
+    </Box>
+  );
+}
+
+DIDConnectTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  extraContent: PropTypes.any,
+  disableSwitchApp: PropTypes.bool,
+};

package/src/Connect/components/download-tips.jsx

@@ -0,0 +1,55 @@
+import { Box, Tooltip } from '@mui/material';
+import { useCreation } from 'ahooks';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
+
+import { useStateContext } from '../contexts/state';
+
+export default function DownloadTips({ ...rest }) {
+  const { t, locale } = useStateContext();
+  const downloadUrl = useCreation(() => {
+    if (['zh', 'en'].includes) {
+      return `https://www.didwallet.io/${locale}`;
+    }
+    return 'https://www.didwallet.io/en';
+  }, [locale]);
+
+  const tips = t('downloadTips');
+
+  return (
+    <Tooltip
+      title={tips}
+      arrow
+      placement="top"
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, -8],
+              },
+            },
+          ],
+        },
+      }}>
+      <Box
+        component="a"
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener"
+        {...rest}
+        sx={mergeSx(
+          {
+            color: 'primary.main',
+            textDecoration: 'none',
+            '&:hover': {
+              textDecoration: 'dashed underline',
+            },
+          },
+          rest?.sx
+        )}>
+        DID Wallet
+      </Box>
+    </Tooltip>
+  );
+}

package/src/Connect/components/loading.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/require-default-props */
+import { Box, CircularProgress } from '@mui/material';
+import PropTypes from 'prop-types';
+
+// HACK: 默认的 size 是精心调整过的，不要随意更改
+export default function Loading({ size = 92.5, loadingSize = 30 }) {
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        minWidth: size,
+        minHeight: size,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <CircularProgress size={loadingSize} sx={{ color: 'secondary.main' }} />
+    </Box>
+  );
+}
+
+Loading.propTypes = {
+  size: PropTypes.number,
+  loadingSize: PropTypes.number,
+};