@arcblock/ux 3.4.14 → 3.5.0

package/src/SessionUser/index.tsx

@@ -1,68 +0,0 @@
-import noop from 'lodash/noop';
-import { useCreation } from 'ahooks';
-import { ReactNode } from 'react';
-
-import LoggedIn from './components/logged-in';
-import UnLogin from './components/un-login';
-import type { Locale, Session } from '../type';
-import { PROFILE_URL } from '../Util/constant';
-
-export interface SessionUserProps {
-  session: Session;
-  onBindWallet?: () => void;
-  locale?: Locale;
-  size?: number;
-  popperType?: 'hover' | 'click';
-  profileUrl?: string;
-  renderUserButton?: (props: {
-    isBlocklet: boolean;
-    session: Session;
-    locale: Locale;
-    size: number;
-    popperType: 'hover' | 'click';
-    profileUrl?: string;
-    dashboardUrl?: string;
-    mode?: any;
-    avatar: string;
-    isInviteEnabled: boolean;
-    handleSwitchPassport: () => void;
-    handleSwitchAccount: () => void;
-    handleSwitchProfile: () => void;
-    handleBindWallet: () => void;
-    handleOpenInvite: () => void;
-    handleLogout: () => void;
-  }) => ReactNode;
-}
-
-export default function SessionUser({
-  session,
-  onBindWallet = noop,
-  locale = 'en',
-  size = 24,
-  popperType = 'click',
-  profileUrl = PROFILE_URL,
-  renderUserButton = undefined,
-}: SessionUserProps) {
-  const isBlocklet = useCreation(() => {
-    return !!globalThis?.blocklet;
-  }, []);
-
-  const mode = globalThis?.blocklet?.SESSION_USER_MODE;
-
-  if (session.user) {
-    return (
-      <LoggedIn
-        isBlocklet={isBlocklet}
-        session={session}
-        onBindWallet={onBindWallet}
-        locale={locale}
-        size={size}
-        popperType={popperType}
-        profileUrl={profileUrl}
-        mode={mode}
-        renderUserButton={renderUserButton}
-      />
-    );
-  }
-  return <UnLogin session={session} locale={locale} size={size} />;
-}

package/src/SessionUser/libs/translation.ts

@@ -1,30 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import type { Translations } from '../../type';
-
-export const translations: Translations = {
-  en: {
-    connectDIDWallet: 'Connect your DID Wallet for enhanced security',
-    switch: 'Switch',
-    profile: 'Profile',
-    invite: 'Invite friends',
-    inviteCopied:
-      'Your invite link has been copied to the clipboard. Send it to your friends to complete the invitation',
-    dashboard: 'Dashboard',
-    logout: 'Sign Out',
-    addAnotherAccount: 'Add another account',
-    disconnected: 'Disconnected',
-    useQuickLogin: 'Use {name} account to login',
-  },
-  zh: {
-    connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
-    switch: '切换',
-    profile: '个人中心',
-    invite: '邀请好友',
-    inviteCopied: '你的专属链接已经复制到剪贴板，发送给朋友即可完成邀请',
-    dashboard: '控制台',
-    logout: '退出登录',
-    addAnotherAccount: '添加账户',
-    disconnected: '未连接',
-    useQuickLogin: '使用 {name} 账号登录',
-  },
-};

package/src/SessionUser/libs/utils.ts

@@ -1,39 +0,0 @@
-import { $TSFixMe, User } from '../../type';
-
-export const getSourceAppPid = (user: User) => user?.sourceAppPid;
-
-export const getCurrentAppPid = (user: User) => user?.sourceAppPid || window?.blocklet?.appPid;
-
-export function getPermanentDid(user: User) {
-  return user?.did;
-}
-
-export function getConnectedAccounts(user: User) {
-  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
-}
-
-export function getSourceProvider(user: User) {
-  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
-}
-
-export function getSourceProviders(user: User) {
-  const connectedAccounts = getConnectedAccounts(user);
-  return connectedAccounts.map((item: $TSFixMe) => item.provider);
-}
-
-export function getConnectedDids(user: User) {
-  const connectedAccounts = getConnectedAccounts(user);
-  const didList = connectedAccounts.map((item: $TSFixMe) => item.did);
-  return didList;
-}
-
-export function getWallet(user: User) {
-  const connectedAccounts = getConnectedAccounts(user);
-  const walletAccount = connectedAccounts.find((item: $TSFixMe) => item.provider === 'wallet');
-  return walletAccount;
-}
-
-export function getWalletDid(user: User) {
-  const walletAccount = getWallet(user);
-  return walletAccount?.did;
-}

package/src/SharedBridge/index.tsx

@@ -1,126 +0,0 @@
-import { Box } from '@mui/material';
-import type { SxProps } from '@mui/material';
-import { memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
-import { withQuery } from 'ufo';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-
-import { mergeSx } from '../Util/style';
-import { callIframe, getCallbackAction } from '../Util/iframe';
-
-function SharedBridge({
-  ref = undefined,
-  src,
-  onClick,
-  onLoad = noop,
-  sx = {},
-  ...rest
-}: {
-  src: string;
-  onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
-  onLoad?: () => void;
-  sx?: SxProps;
-} & {
-  ref?: React.Ref<unknown>;
-}) {
-  const targetIframeRef = useRef<HTMLIFrameElement>(null);
-  const refId = useId();
-  const dataId = `shared-bridge_${refId}`;
-  const currentState = useReactive<{
-    hasInited?: boolean;
-    open: boolean;
-    hasStorageAccess: boolean;
-    origin: string;
-    host: string;
-    containerEl: HTMLDivElement | null;
-  }>({
-    hasInited: undefined,
-    open: false,
-    hasStorageAccess: false,
-    containerEl: null,
-    get origin() {
-      try {
-        return new URL(src).origin;
-      } catch (error) {
-        return src;
-      }
-    },
-    get host() {
-      try {
-        return new URL(src).host;
-      } catch (error) {
-        return src;
-      }
-    },
-  });
-
-  useEffect(() => {
-    async function handleMessage(event: MessageEvent) {
-      const { data } = event;
-      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
-        currentState.open = false;
-
-        if (!data.value) {
-          onClick(data);
-          return;
-        }
-
-        const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
-        onClick({ ...data, visitorId });
-      } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
-        currentState.open = true;
-      }
-    }
-
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClick, dataId, targetIframeRef?.current]);
-
-  const handleLoad = useMemoizedFn(() => {
-    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
-      currentState.hasStorageAccess = value;
-      currentState.hasInited = true;
-    });
-    // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
-    setTimeout(() => {
-      if (currentState.hasInited === undefined) {
-        currentState.hasInited = false;
-      }
-    }, 1000);
-    onLoad();
-  });
-
-  useImperativeHandle(ref, () => ({
-    callIframe(action: string) {
-      return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
-    },
-  }));
-  return (
-    <Box
-      {...rest}
-      component="iframe"
-      ref={targetIframeRef}
-      onLoad={handleLoad}
-      data-id={dataId}
-      src={withQuery(src, { id: dataId })}
-      sx={mergeSx(
-        {
-          border: 0,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          cursor: 'pointer',
-          backgroundColor: 'transparent',
-        },
-        sx
-      )}
-    />
-  );
-}
-
-export default memo(SharedBridge);

package/src/SocialShare/index.tsx

@@ -1,194 +0,0 @@
-/**
- * 社交媒体共享组件
- */
-
-import { Menu, MenuItem, Box, useTheme } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import { Icon } from '@iconify/react';
-import {
-  FacebookIcon,
-  FacebookShareButton,
-  RedditIcon,
-  RedditShareButton,
-  TelegramIcon,
-  TelegramShareButton,
-  TwitterShareButton,
-  XIcon,
-  WeiboIcon,
-  WeiboShareButton,
-  LinkedinIcon,
-  LinkedinShareButton,
-} from 'react-share';
-import Toast from '../Toast';
-import { translate } from '../Locale/util';
-
-const shareButtonStyle = {
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  '& > button': {
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    justifyContent: 'flex-start',
-  },
-};
-
-export interface SharedProps {
-  title: string; // 分享标题
-  url: string; // 分享链接
-}
-
-const translations = {
-  en: {
-    copyLink: 'Copy Link',
-    x: 'X (Twitter)',
-    telegram: 'Telegram',
-    reddit: 'Reddit',
-    facebook: 'Facebook',
-    weiBo: 'Weibo',
-    linkedin: 'LinkedIn',
-    copySuccess: 'Link copied to clipboard',
-  },
-  zh: {
-    copyLink: '复制链接',
-    x: 'X (Twitter)',
-    telegram: 'Telegram',
-    reddit: 'Reddit',
-    facebook: 'Facebook',
-    weiBo: '微博',
-    linkedin: 'LinkedIn',
-    copySuccess: '链接已复制到剪贴板',
-  },
-};
-
-const buttonSx = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 1.5,
-  minWidth: 120,
-  lineHeight: '1!important',
-};
-
-const itemIconSx = (theme: any) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: 22,
-  height: 22,
-  border: 1,
-  borderColor: theme.palette.text.secondary,
-  borderRadius: 0.75,
-});
-
-export default function SocialShare({
-  anchorEl,
-  onClose,
-  sharedProps,
-  locale = 'en',
-}: {
-  anchorEl: HTMLElement | null;
-  onClose: () => void;
-  sharedProps: SharedProps;
-  locale?: string;
-}) {
-  const theme = useTheme();
-  const shareOpen = Boolean(anchorEl);
-
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const iconProps = {
-    bgStyle: { fill: theme.palette.background.paper },
-    iconFillColor: theme.palette.text.secondary,
-  };
-
-  const { title, url } = sharedProps;
-
-  const handleCopyLink = () => {
-    if (!url) {
-      return;
-    }
-    navigator.clipboard.writeText(url).then(() => {
-      Toast.success(t('copySuccess'));
-    });
-  };
-
-  return (
-    <Menu
-      id="basic-menu"
-      anchorEl={anchorEl}
-      open={shareOpen}
-      onClose={onClose}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'left',
-      }}
-      sx={{
-        '& .MuiPaper-root': {
-          marginTop: '-140px', // 向上移动菜单
-        },
-      }}
-      slotProps={{
-        paper: {
-          'aria-labelledby': 'basic-button',
-        },
-      }}>
-      <MenuItem
-        key="copy-to-clipboard"
-        onClick={() => {
-          handleCopyLink();
-          onClose();
-        }}
-        sx={shareButtonStyle}>
-        <Box sx={buttonSx}>
-          <Box sx={itemIconSx}>
-            <Icon icon="tabler:link" />
-          </Box>
-          <span>{t('copyLink')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-x" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={TwitterShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={XIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('x')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-telegram" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={TelegramShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={TelegramIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('telegram')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-reddit" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={RedditShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={RedditIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('reddit')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-weibo" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={WeiboShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={WeiboIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('weiBo')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-facebook" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={FacebookShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={FacebookIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('facebook')}</span>
-        </Box>
-      </MenuItem>
-      <MenuItem key="share-to-linkedin" onClick={onClose} sx={shareButtonStyle}>
-        <Box component={LinkedinShareButton} url={url} title={title} sx={buttonSx}>
-          <Box component={LinkedinIcon} sx={itemIconSx} round {...iconProps} />
-          <span>{t('linkedin')}</span>
-        </Box>
-      </MenuItem>
-    </Menu>
-  );
-}

package/src/Sparkline/Sparkline.stories.jsx

@@ -1,13 +0,0 @@
-export { default as Basic } from './demo/basic';
-
-export default {
-  title: 'Data-Display/Sparkline',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Line Graph',
-      },
-    },
-  },
-};

package/src/Sparkline/index.tsx

@@ -1,231 +0,0 @@
-// origin: https://github.com/fnando/sparkline
-function getY(max: number, height: number, diff: number, value: number) {
-  return parseFloat((height - (value * height) / max + diff).toFixed(2));
-}
-
-function removeChildren(svg: SVGElement) {
-  [...svg.querySelectorAll('*')].forEach((element) => svg.removeChild(element));
-}
-
-function defaultFetch(entry: { value: number }) {
-  return entry.value;
-}
-
-function buildElement(tag: string, attrs: Record<string, any>) {
-  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-
-  // eslint-disable-next-line no-restricted-syntax, guard-for-in
-  for (const name in attrs) {
-    element.setAttribute(name, attrs[name]);
-  }
-
-  return element;
-}
-
-export default function sparkline(
-  svg: SVGElement,
-  rawEntries: number[] | { value: number }[] = [],
-  options: {
-    fetch?: (entry: { value: number }) => number;
-    interactive?: boolean;
-    onmousemove?: (event: MouseEvent, currentDataPoint: { value: number; index: number; x: number; y: number }) => void;
-    onmouseout?: (event: MouseEvent) => void;
-    spotRadius?: number;
-    cursorWidth?: number;
-  } = {}
-) {
-  removeChildren(svg);
-
-  if (rawEntries.length <= 1) {
-    return;
-  }
-
-  let entries: { value: number }[] = [];
-  if (typeof rawEntries[0] === 'number') {
-    entries = (rawEntries as number[]).map((entry) => {
-      return { value: entry };
-    });
-  } else {
-    entries = rawEntries as typeof entries;
-  }
-
-  // This function will be called whenever the mouse moves
-  // over the SVG. You can use it to render something like a
-  // tooltip.
-  const { onmousemove } = options;
-
-  // This function will be called whenever the mouse leaves
-  // the SVG area. You can use it to hide the tooltip.
-  const { onmouseout } = options;
-
-  // Should we run in interactive mode? If yes, this will handle the
-  // cursor and spot position when moving the mouse.
-  const interactive = 'interactive' in options ? options.interactive : !!onmousemove;
-
-  // Define how big should be the spot area.
-  const spotRadius = options.spotRadius || 2;
-  const spotDiameter = spotRadius * 2;
-
-  // Define how wide should be the cursor area.
-  const cursorWidth = options.cursorWidth || 2;
-
-  // Get the stroke width; this is used to compute the
-  // rendering offset.
-  // @ts-expect-error
-  const strokeWidth = parseFloat(svg.attributes['stroke-width'].value);
-
-  // By default, data must be formatted as an array of numbers or
-  // an array of objects with the value key (like `[{value: 1}]`).
-  // You can set a custom function to return data for a different
-  // data structure.
-  const fetch = options.fetch || defaultFetch;
-
-  // Retrieve only values, easing the find for the maximum value.
-  const values = entries.map((entry) => fetch(entry));
-
-  // The rendering width will account for the spot size.
-  // @ts-expect-error
-  const width = parseFloat(svg.attributes.width.value) - spotDiameter * 2;
-
-  // Get the SVG element's full height.
-  // This is used
-  // @ts-expect-error
-  const fullHeight = parseFloat(svg.attributes.height.value);
-
-  // The rendering height accounts for stroke width and spot size.
-  const height = fullHeight - strokeWidth * 2 - spotDiameter;
-
-  // The maximum value. This is used to calculate the Y coord of
-  // each sparkline datapoint.
-  const max = Math.max(...values) === 0 ? 1 : Math.max(...values);
-
-  // Some arbitrary value to remove the cursor and spot out of
-  // the viewing canvas.
-  const offscreen = -1000;
-
-  // Cache the last item index.
-  const lastItemIndex = values.length - 1;
-
-  // Calculate the X coord base step.
-  const offset = width / lastItemIndex;
-
-  // Hold all datapoints, which is whatever we got as the entry plus
-  // x/y coords and the index.
-  const datapoints: { value: number; index: number; x: number; y: number }[] = [];
-
-  // Hold the line coordinates.
-  const pathY = getY(max, height, strokeWidth + spotRadius, values[0]);
-  let pathCoords = `M${spotDiameter} ${pathY}`;
-
-  values.forEach((value, index) => {
-    const x = index * offset + spotDiameter;
-    const y = getY(max, height, strokeWidth + spotRadius, value);
-
-    datapoints.push(
-      Object.assign({}, entries[index], {
-        index,
-        x,
-        y,
-      })
-    );
-
-    pathCoords += ` L ${x} ${y}`;
-  });
-
-  const path = buildElement('path', {
-    class: 'sparkline--line',
-    d: pathCoords,
-    fill: 'none',
-  });
-
-  const fillCoords = `${pathCoords} V ${fullHeight} L ${spotDiameter} ${fullHeight} Z`;
-
-  const fill = buildElement('path', {
-    class: 'sparkline--fill',
-    d: fillCoords,
-    stroke: 'none',
-  });
-
-  svg.appendChild(fill);
-  svg.appendChild(path);
-
-  if (!interactive) {
-    return;
-  }
-
-  const cursor = buildElement('line', {
-    class: 'sparkline--cursor',
-    x1: offscreen,
-    x2: offscreen,
-    y1: 0,
-    y2: fullHeight,
-    'stroke-width': cursorWidth,
-  });
-
-  const spot = buildElement('circle', {
-    class: 'sparkline--spot',
-    cx: offscreen,
-    cy: offscreen,
-    r: spotRadius,
-  });
-
-  svg.appendChild(cursor);
-  svg.appendChild(spot);
-
-  const interactionLayer = buildElement('rect', {
-    // @ts-expect-error
-    width: svg.attributes.width.value,
-    // @ts-expect-error
-    height: svg.attributes.height.value,
-    style: 'fill: transparent; stroke: transparent',
-    class: 'sparkline--interaction-layer',
-  });
-  svg.appendChild(interactionLayer);
-
-  interactionLayer.addEventListener('mouseout', (event) => {
-    cursor.setAttribute('x1', offscreen.toString());
-    cursor.setAttribute('x2', offscreen.toString());
-
-    spot.setAttribute('cx', offscreen.toString());
-
-    if (onmouseout) {
-      onmouseout(event);
-    }
-  });
-
-  interactionLayer.addEventListener('mousemove', (event) => {
-    const mouseX = event.offsetX;
-
-    let nextDataPoint = datapoints.find((entry) => {
-      return entry.x >= mouseX;
-    });
-
-    if (!nextDataPoint) {
-      nextDataPoint = datapoints[lastItemIndex];
-    }
-
-    const previousDataPoint = datapoints[datapoints.indexOf(nextDataPoint) - 1];
-    let currentDataPoint;
-    let halfway;
-
-    if (previousDataPoint) {
-      halfway = previousDataPoint.x + (nextDataPoint.x - previousDataPoint.x) / 2;
-      currentDataPoint = mouseX >= halfway ? nextDataPoint : previousDataPoint;
-    } else {
-      currentDataPoint = nextDataPoint;
-    }
-
-    const { x } = currentDataPoint;
-    const { y } = currentDataPoint;
-
-    spot.setAttribute('cx', x.toString());
-    spot.setAttribute('cy', y.toString());
-
-    cursor.setAttribute('x1', x.toString());
-    cursor.setAttribute('x2', x.toString());
-
-    if (onmousemove) {
-      onmousemove(event, currentDataPoint);
-    }
-  });
-}