@arcblock/ux 3.4.14 → 3.5.0

package/src/Util/logger.ts

@@ -1,44 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import debug from 'debug';
-
-export const createDebug = debug;
-
-let debugInitialized = false;
-
-const initializeDebug = () => {
-  if (debugInitialized) {
-    return;
-  }
-  debugInitialized = true;
-
-  if (window.blocklet?.ENABLE_DEBUG_TMP === 'false') {
-    debug.disable();
-  } else if (window.blocklet?.ENABLE_DEBUG_TMP) {
-    debug.enable(window.blocklet?.ENABLE_DEBUG_TMP);
-  }
-};
-
-export const createLogger = (namespace: string) => {
-  initializeDebug();
-
-  return new Proxy(window.console, {
-    get(target, prop: keyof Console) {
-      return (...args: any[]) => {
-        try {
-          if (['log', 'debug', 'info', 'warn', 'error'].includes(prop)) {
-            // @ts-ignore
-            return target[prop](namespace, ...args);
-          }
-          if (target[prop] instanceof Function) {
-            // @ts-ignore
-            return target[prop](...args);
-          }
-          return target[prop];
-        } catch (err) {
-          console.error(`Logger error in ${namespace}:`, err);
-          return undefined;
-        }
-      };
-    },
-  });
-};

package/src/Util/passport.ts

@@ -1,127 +0,0 @@
-import { getNftBGColor, DEFAULT_COLORS, getNftBGColorFromDid, getSvg } from '@arcblock/nft-display';
-
-export const getPassportColor = (preferredColor: string, did: string) => {
-  let color;
-  if (preferredColor === 'default') {
-    color = DEFAULT_COLORS['app-passport'];
-  } else if (preferredColor === 'auto') {
-    color = getNftBGColorFromDid(did);
-  } else {
-    color = getNftBGColor(preferredColor);
-  }
-
-  return color;
-};
-
-export const getTextColor = (background: string) => {
-  const r = parseInt(background.slice(1, 3), 16);
-  const g = parseInt(background.slice(3, 5), 16);
-  const b = parseInt(background.slice(5, 7), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? '#111' : '#EEE';
-};
-
-export const createPassportSvg = ({
-  issuer = '',
-  title = '',
-  issuerDid = '',
-  issuerAvatarUrl = '',
-  ownerDid = '',
-  ownerAvatarUrl = '',
-  preferredColor = 'default',
-  revoked = false,
-  isDataUrl = false,
-  width = '100%',
-  height = '100%',
-}) => {
-  const color = getPassportColor(preferredColor, issuerDid);
-
-  const svgXML = getSvg({
-    width,
-    height,
-
-    tag: revoked ? 'revoked' : '',
-    tagVariant: revoked ? 'error' : 'info',
-
-    color,
-
-    did: ownerDid,
-    variant: 'app-passport',
-    verifiable: true,
-
-    issuer: {
-      name: issuer,
-      icon: issuerAvatarUrl,
-    },
-
-    header: {
-      name: title,
-      icon: ownerAvatarUrl,
-    },
-
-    // FIXME: @wangshijun this should be dynamic
-    extra: {
-      key: 'Exp',
-      value: '2123-01-01',
-    },
-  });
-
-  if (isDataUrl) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
-  }
-
-  return svgXML;
-};
-
-export const createKycSvg = ({
-  issuer = '',
-  title = '',
-  issuerDid = '',
-  issuerAvatarUrl = '',
-  ownerDid = '',
-  ownerName = '',
-  ownerAvatarUrl = '',
-  preferredColor = 'default',
-  type = 'email',
-  revoked = false,
-  isDataUrl = false,
-  width = '100%',
-  height = '100%',
-}) => {
-  const color = getPassportColor(preferredColor, issuerDid);
-
-  const svgXML = getSvg({
-    width,
-    height,
-
-    tag: revoked ? 'revoked' : '',
-    tagVariant: revoked ? 'error' : 'info',
-
-    color,
-
-    did: ownerDid,
-    variant: 'app-kyc',
-    verifiable: true,
-
-    issuer: {
-      name: issuer,
-      icon: issuerAvatarUrl,
-    },
-
-    header: {
-      name: ownerName,
-      icon: ownerAvatarUrl,
-    },
-
-    extra: {
-      key: type,
-      value: title,
-    },
-  });
-
-  if (isDataUrl) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
-  }
-
-  return svgXML;
-};

package/src/Util/security.ts

@@ -1,72 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-type GetSafeUrlOptions = {
-  returnRaw?: boolean;
-  throwOnError?: Boolean;
-  // 为 null 时代表不检查 protocol
-  allowProtocols?: Array<string> | null;
-  // 为 null 时代表不检查 host
-  allowDomains?: Array<string> | null;
-};
-
-class CustomError extends Error {}
-
-export function getSafeUrl(
-  // 只允许 / 开头， ./ 开头和带有 protocol 的 URL
-  url: string,
-  {
-    throwOnError = true,
-    returnRaw = false,
-    // 根据 URL 的规范，protocol 以 : 结尾
-    allowProtocols = ['https:', 'http:'],
-    // host 中可能会携带端口号，需要使用 hostname 来获取干净的域名
-    allowDomains = undefined,
-  }: GetSafeUrlOptions = {}
-) {
-  if (allowDomains === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    allowDomains = window.blocklet?.domainAliases || [];
-    (allowDomains as unknown as Array<String>).push(window.location.href);
-  }
-  try {
-    let base;
-    if (url.startsWith('/')) {
-      base = window.location.origin;
-    } else if (url.startsWith('./')) {
-      base = window.location.href;
-    }
-
-    const urlInstance = new URL(url, base);
-    const allowHostName = allowDomains
-      ? (allowDomains as Array<string>).map((host) => {
-          try {
-            return new URL(host).hostname;
-          } catch {
-            // HACK: 如果传入的 allowDomains 不包含协议，则尝试为它添加协议头
-            return new URL(`https://${host}`).hostname;
-          }
-        })
-      : (allowDomains as unknown as null);
-
-    if (allowProtocols !== null && !allowProtocols.includes(urlInstance.protocol)) {
-      console.error(`Invalid protocol: ${urlInstance.protocol}`);
-      if (throwOnError) throw new CustomError(`Invalid protocol: ${urlInstance.protocol}`);
-      return null;
-    }
-    if (allowHostName !== null && !allowHostName.includes(urlInstance.hostname)) {
-      console.error(`Invalid host: ${urlInstance.hostname}`);
-      if (throwOnError) throw new CustomError(`Invalid host: ${urlInstance.hostname}`);
-      return null;
-    }
-
-    return returnRaw ? url : urlInstance.href;
-  } catch (error) {
-    if (error instanceof CustomError) {
-      if (throwOnError) throw error;
-      return null;
-    }
-    console.error(`Failed to convert url: ${url}`);
-    if (throwOnError) throw new Error(`Failed to convert url: ${url}`);
-    return null;
-  }
-}

package/src/Util/style.ts

@@ -1,17 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import type { SxProps } from '@mui/material';
-
-export const mergeSx = (...sxList: Array<SxProps | undefined | null>) => {
-  const mergedSx = sxList.reduce((acc, sx) => {
-    if (!sx) {
-      return acc;
-    }
-
-    if (Array.isArray(sx)) {
-      return acc.concat(sx);
-    }
-
-    return acc.concat([sx]);
-  }, [] as SxProps[]);
-  return mergedSx as SxProps;
-};

package/src/Util/wallet.ts

@@ -1,35 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const providerName = 'wallet_url';
-
-/**
- * 获取 web wallet url, 常用于为 did connect 组件传递 webWalletUrl 参数,
- * 更明确的说, 这里获取的应该是 **default web wallet url**,
- * 如果用户使用自定义的 web wallet url, 不应该使用该方法, 应该显式的将自定义的 web wallet url 传递给 did connect 组件
- * (参考: https://github.com/blocklet/ocap-playground/issues/98)
- *
- * 获取优先级:
- * - localStorage  使用 provider 注册
- * - window.env.webWalletUrl
- * - window.blocklet.webWalletUrl
- * - production web wallet url
- */
-export const getWebWalletUrl = () => {
-  return (
-    window.localStorage.getItem(providerName) ||
-    window.env?.webWalletUrl ||
-    window.blocklet?.webWalletUrl ||
-    'https://web.abtwallet.io/'
-  );
-};
-
-// 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
-export const checkSameProtocol = (webWalletUrl: string) => {
-  const { protocol } = window.location;
-  let walletProtocol = '';
-  try {
-    walletProtocol = new URL(webWalletUrl).protocol;
-  } catch (error) {
-    walletProtocol = '';
-  }
-  return protocol === walletProtocol;
-};

package/src/VerificationCode/index.tsx

@@ -1,83 +0,0 @@
-import { useEffect } from 'react';
-import { Box, TextField } from '@mui/material';
-import type { SxProps } from '@mui/material';
-import trim from 'lodash/trim';
-import noop from 'lodash/noop';
-import { mergeSx } from '../Util/style';
-
-export const VERIFY_CODE_LENGTH = 6;
-
-export default function VerificationCode({
-  length = VERIFY_CODE_LENGTH,
-  code,
-  onChange = noop,
-  onComplete = noop,
-  sx = {},
-}: {
-  length?: number;
-  code: string;
-  onChange?: (_code: string) => void;
-  onComplete?: (_code: string) => void;
-  sx?: SxProps;
-}) {
-  useEffect(() => {
-    if (code.length === length) {
-      onComplete?.(code);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [code, length]);
-  return (
-    <Box
-      sx={mergeSx(
-        {
-          width: '100%',
-          maxWidth: 360,
-          display: 'flex',
-          justifyContent: 'space-between',
-          gap: 1.5,
-        },
-        sx
-      )}>
-      {[...Array(length)].map((_, index) => (
-        <TextField
-          id={`code-input-${index}`}
-          // eslint-disable-next-line react/no-array-index-key
-          key={`code-input-${index}`}
-          value={trim(code[index]) || ''}
-          type="number"
-          onChange={(e) => {
-            const newCode = code.split('');
-            newCode[index] = e.target.value;
-            onChange?.(newCode.join(''));
-            if (e.target.value && index < 5) {
-              document.getElementById(`code-input-${index + 1}`)?.focus();
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Backspace' && !trim(code[index]) && index > 0) {
-              document.getElementById(`code-input-${index - 1}`)?.focus();
-            }
-          }}
-          required
-          autoComplete="off"
-          slotProps={{
-            htmlInput: {
-              maxLength: 1,
-              sx: {
-                textAlign: 'center',
-                fontSize: '1.5rem',
-                '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-                  WebkitAppearance: 'none',
-                  margin: 0,
-                },
-              },
-              autoComplete: 'off',
-              pattern: '[0-9]',
-              inputMode: 'numeric',
-            },
-          }}
-        />
-      ))}
-    </Box>
-  );
-}

package/src/Video/Video.stories.jsx

@@ -1,6 +0,0 @@
-export { default as Youtube } from './demo/youtube';
-export { default as Tentent } from './demo/tentent';
-
-export default {
-  title: 'Data Display/Video',
-};

package/src/Video/index.tsx

@@ -1,70 +0,0 @@
-import { useState } from 'react';
-import Player from 'react-player';
-import { CircularProgress } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-
-export interface VideoProps {
-  url: string;
-  width?: string | number;
-  height?: string | number;
-  style?: React.CSSProperties;
-}
-
-export default function Video(rawProps: VideoProps) {
-  const props = Object.assign({}, rawProps);
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.width)) {
-    props.width = 640;
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.height)) {
-    props.height = 400;
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.style)) {
-    props.style = {};
-  }
-  const newProps = mergeProps(props, Video, ['style']);
-  const { url, width, height, style } = newProps;
-  const [loaded, setLoaded] = useState(false);
-
-  const styles = Object.assign({ border: 'none' }, style, {
-    width,
-    height,
-    visibility: loaded ? 'visible' : 'hidden',
-  });
-
-  if (url.indexOf('v.qq.com') > 0) {
-    return (
-      <Placeholder style={{ width, height }}>
-        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen />
-        {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
-      </Placeholder>
-    );
-  }
-
-  return (
-    <Placeholder style={{ width, height }}>
-      <Player style={styles} {...newProps} onReady={() => setLoaded(true)} />
-      {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
-    </Placeholder>
-  );
-}
-
-const Placeholder = styled('div')`
-  background-color: #222222;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .loading-indicator {
-    position: absolute;
-    top: 45%;
-    left: 47%;
-    z-index: 2;
-  }
-`;

package/src/Wallet/Action.stories.jsx

@@ -1,8 +0,0 @@
-export { default as DifferentSizes } from './demo/action-different-sizes';
-export { default as DifferentAction } from './demo/action-different-action';
-export { default as TextLayout } from './demo/action-text-layout';
-export { default as CustomizeStyle } from './demo/action-customize-style';
-
-export default {
-  title: 'ArcBlock/Wallet/Action',
-};

package/src/Wallet/Action.tsx

@@ -1,118 +0,0 @@
-import { Typography } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-
-import logo from './images/abtwallet.png';
-import { mergeProps } from '../Util';
-import colors from '../Colors';
-import Button from '../Button';
-import { styled } from '../Theme';
-
-export interface WalletActionProps {
-  action?: string;
-  size?: 'xlarge' | 'large' | 'medium' | 'small';
-  textLayout?: 'vertical' | 'horizontal';
-  style?: React.CSSProperties;
-}
-
-export default function WalletAction(rawProps: WalletActionProps) {
-  const props = Object.assign({}, rawProps);
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.action)) {
-    props.action = 'Login';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.textLayout)) {
-    props.textLayout = 'vertical';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.size)) {
-    props.size = 'medium';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.style)) {
-    props.style = {};
-  }
-  const newProps = mergeProps(props, WalletAction, ['style']);
-  const { action, size, textLayout, style = {}, ...rest } = newProps;
-  const styles = Object.assign({}, style, { border: 'none', padding: 0 });
-
-  return (
-    <Button style={styles} {...rest} variant="outlined">
-      <Content size={size} color={styles.color}>
-        <img src={logo} className="wallet-action__logo" alt="DID Wallet" />
-        {textLayout === 'vertical' && (
-          <Typography className="wallet-action__text" component="div">
-            <span className="wallet-action__action">{action} with</span>
-            <span className="wallet-action__title">DID Wallet</span>
-          </Typography>
-        )}
-        {textLayout === 'horizontal' && (
-          <span className="wallet-action__title" style={{ padding: 8 }}>
-            {action} with DID Wallet
-          </span>
-        )}
-      </Content>
-    </Button>
-  );
-}
-
-const sizes = {
-  logo: {
-    small: 32,
-    medium: 44,
-    large: 56,
-    xlarge: 88,
-  },
-  font: {
-    small: 9,
-    medium: 11,
-    large: 13,
-    xlarge: 18,
-  },
-};
-
-type ContentProps = {
-  size: NonNullable<WalletActionProps['size']>;
-  color: string;
-};
-
-const Content = styled('div')<ContentProps>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    opacity: 0.9;
-  }
-
-  .wallet-action__logo {
-    width: auto;
-    height: auto;
-    max-width: ${(props) => sizes.logo[props.size]}px;
-    margin-left: 5px;
-  }
-
-  .wallet-action__text {
-    padding: 8px;
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-  }
-
-  .wallet-action__action {
-    font-size: ${(props) => sizes.font[props.size]}px;
-    text-transform: capitalize;
-    margin-bottom: 1px;
-    color: ${(props) => props.color || colors.primary.main};
-    letter-spacing: 1px;
-  }
-
-  .wallet-action__title {
-    font-size: ${(props) => sizes.font[props.size] * 1.5}px;
-    text-transform: capitalize;
-    color: ${(props) => props.color || colors.primary.main};
-    letter-spacing: 1px;
-  }
-`;

package/src/Wallet/Download.stories.jsx

@@ -1,9 +0,0 @@
-export { default as VerticalLayout } from './demo/download-vertical-layout';
-export { default as CustomTitle } from './demo/download-custom-title';
-export { default as HorizontalLayout1 } from './demo/download-horizontal-layout1';
-export { default as HorizontalLayout2 } from './demo/download-horizontal-layout2';
-export { default as HorizontalLayout3 } from './demo/download-horizontal-layout3';
-
-export default {
-  title: 'ArcBlock/Wallet/Download',
-};