@arcblock/did-connect-react 3.4.14 → 3.5.0

package/src/Connect/components/auto-height.jsx

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { useSize } from 'ahooks';
-import { useEffect, useRef, useState } from 'react';
-
-export default function AutoHeight({ children, initHeight = 0, slotProps = {} }) {
-  const [maxHeight, setMaxHeight] = useState(initHeight);
-
-  const contentRef = useRef(null);
-  const contentSize = useSize(contentRef);
-
-  useEffect(() => {
-    if (contentSize?.height) {
-      setMaxHeight(contentSize.height);
-    }
-  }, [contentSize?.height]);
-
-  return (
-    <Box
-      {...slotProps?.root}
-      sx={{
-        height: maxHeight,
-        overflow: 'hidden',
-        transition: 'height 0.2s ease-in-out',
-        ...slotProps?.root?.sx,
-      }}>
-      <Box {...slotProps?.container} ref={contentRef}>
-        {children}
-      </Box>
-    </Box>
-  );
-}
-
-AutoHeight.propTypes = {
-  initHeight: PropTypes.number,
-  children: PropTypes.node.isRequired,
-  slotProps: PropTypes.object,
-};

package/src/Connect/components/back-button.jsx

@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-
-import translations from '../assets/locale';
-import { useStateContext } from '../contexts/state';
-import ActionButton from './action-button';
-
-export default function BackButton({ onClick, ...rest }) {
-  const { locale } = useStateContext();
-  const translation = translations[locale] || translations.en;
-  return (
-    <ActionButton
-      onClick={onClick}
-      sx={{
-        color: 'text.secondary',
-      }}
-      {...rest}>
-      {translation.back}
-    </ActionButton>
-  );
-}
-
-BackButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-};

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

@@ -1,259 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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',
-          fontSize: 13,
-        }}>
-        {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

@@ -1,55 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/* 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,
-};