@arcblock/ux 3.4.14 → 3.5.0

package/lib/Util/constant.d.ts

@@ -48,3 +48,9 @@ export declare const OAUTH_PROVIDER: {
 };
 export declare const DID_CONNECT_SMALL_WIDTH = 380;
 export declare const DID_CONNECT_MEDIUM_WIDTH = 576;
+export declare const LAST_USED_LOGIN_METHOD = "last-used-login-method";
+export declare const WALLET_LOGIN_METHOD: {
+    MOBILE: string;
+    WEB: string;
+    SCAN: string;
+};

package/lib/Util/constant.js

@@ -1,4 +1,4 @@
-const e = 300, T = 1800, t = "/.well-known/service", I = "login_token", _ = "refresh_token", o = "/.well-known/service", A = "/api/did", n = `${t}/admin/overview`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, D = "did:abt:", L = {
+const e = 300, T = 1800, t = "/.well-known/service", _ = "login_token", I = "refresh_token", o = "/.well-known/service", n = "/api/did", s = `${t}/admin/overview`, A = `${t}/user`, O = `${t}/user/did-spaces`, L = `${t}/admin/navigation`, l = "did:abt:", D = {
   VALID: "valid",
   REVOKED: "revoked"
 }, E = {
@@ -11,7 +11,7 @@ const e = 300, T = 1800, t = "/.well-known/service", I = "login_token", _ = "ref
   NFT: "nft",
   PASSKEY: "passkey",
   TWITTER: "twitter"
-}, i = {
+}, R = {
   [E.EMAIL]: "Email",
   [E.AUTH0]: "Auth0",
   [E.APPLE]: "Apple",
@@ -22,32 +22,41 @@ const e = 300, T = 1800, t = "/.well-known/service", I = "login_token", _ = "ref
   [E.PASSKEY]: "Passkey",
   [E.TWITTER]: "X (Twitter)",
   federated: "Federated"
-}, a = 16, c = {
+}, a = 16, i = {
   email: "Email",
   auth0: "Auth0",
   apple: "Apple",
   github: "Github",
   google: "Google",
   twitter: "X (Twitter)"
-}, l = 380, P = 576;
+}, c = 380, S = 576, N = "last-used-login-method", P = {
+  MOBILE: "wallet",
+  // 移动端（WebView 内 / Deeplink 唤起）
+  WEB: "wallet-web",
+  // Web Wallet / 浏览器扩展
+  SCAN: "wallet-scan"
+  // 桌面浏览器扫码
+};
 export {
-  A as API_DID_PREFIX,
+  n as API_DID_PREFIX,
   t as BLOCKLET_SERVICE_PATH_PREFIX,
-  n as DASHBOARD_URL,
+  s as DASHBOARD_URL,
   e as DEFAULT_TIMEOUT,
   T as DEFAULT_WINDOW_TIMEOUT,
-  P as DID_CONNECT_MEDIUM_WIDTH,
-  l as DID_CONNECT_SMALL_WIDTH,
-  D as DID_PREFIX,
+  S as DID_CONNECT_MEDIUM_WIDTH,
+  c as DID_CONNECT_SMALL_WIDTH,
+  l as DID_PREFIX,
   O as DID_SPACE_URL,
+  N as LAST_USED_LOGIN_METHOD,
   E as LOGIN_PROVIDER,
   a as LOGIN_PROVIDER_ICON_SIZE,
-  i as LOGIN_PROVIDER_NAME,
-  R as NAVIGATION_URL,
-  c as OAUTH_PROVIDER,
-  L as PASSPORT_STATUS,
-  s as PROFILE_URL,
-  _ as REFRESH_TOKEN_STORAGE_KEY,
+  R as LOGIN_PROVIDER_NAME,
+  L as NAVIGATION_URL,
+  i as OAUTH_PROVIDER,
+  D as PASSPORT_STATUS,
+  A as PROFILE_URL,
+  I as REFRESH_TOKEN_STORAGE_KEY,
   o as RELAY_SOCKET_PREFIX,
-  I as SESSION_TOKEN_STORAGE_KEY
+  _ as SESSION_TOKEN_STORAGE_KEY,
+  P as WALLET_LOGIN_METHOD
 };

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.4.14", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
+const e = "3.5.0", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.4.14",
+  "version": "3.5.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -36,6 +36,9 @@
     "**/*.svg?react",
     "**/*.svg"
   ],
+  "files": [
+    "lib"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -74,16 +77,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "d663390d3c6a9b2d8d71790c770dd0025ae309de",
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237",
   "dependencies": {
-    "@arcblock/bridge": "3.4.14",
-    "@arcblock/did": "^1.28.8",
+    "@arcblock/bridge": "3.5.0",
+    "@arcblock/did": "^1.29.4",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.4.14",
-    "@arcblock/nft-display": "3.4.14",
-    "@arcblock/react-hooks": "3.4.14",
+    "@arcblock/icons": "3.5.0",
+    "@arcblock/nft-display": "3.5.0",
+    "@arcblock/react-hooks": "3.5.0",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.14",
+    "@blocklet/theme": "3.5.0",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -91,7 +94,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.28.8",
+    "@ocap/mcrypto": "^1.29.4",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

package/src/ActionButton/ActionButton.stories.jsx

@@ -1,61 +0,0 @@
-import { createTheme, ThemeProvider } from '../Theme';
-import ActionButton from '.';
-
-export default {
-  title: 'Deprecated/ActionButton',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentColor() {
-  return (
-    <ThemeProvider theme={createTheme()}>
-      <div>
-        <ActionButton href="/" theme="inherit">
-          Default Button
-        </ActionButton>
-        <ActionButton href="/" theme="primary">
-          Primary Button
-        </ActionButton>
-        <ActionButton href="/" theme="secondary">
-          Secondary Button
-        </ActionButton>
-        <ActionButton href="/" theme="reverse">
-          Reverse Button
-        </ActionButton>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-WithDifferentColor.storyName = 'with different color';
-
-export function WithDifferentVariant() {
-  return (
-    <ThemeProvider theme={createTheme()}>
-      <div>
-        <ActionButton href="/" variant="text">
-          Text Button
-        </ActionButton>
-        <ActionButton href="/" variant="outlined">
-          Outlined Button
-        </ActionButton>
-        <ActionButton href="/" variant="contained">
-          Contained Button
-        </ActionButton>
-
-        <div style={{ background: '#222', padding: 12, marginTop: 24 }}>
-          <ActionButton href="/" variant="contained" theme="reverse">
-            Contained Reverse Button
-          </ActionButton>
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-WithDifferentVariant.storyName = 'with different variant';

package/src/ActionButton/index.jsx

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-
-import Button from '../Button';
-import { mergeProps } from '../Util';
-import { withDeprecated } from '../Util/deprecate';
-
-/**
- * Action button component
- * @typedef {{
- *  href: string;
- *  children?: import('react').ReactNode;
- *  gradient?: string;
- *  color?: string;
- *  icon?: string;
- *  border?: string;
- *  text?: string;
- *  theme?: string;
- *  variant?: string;
- *  size?: string;
- *  width?: string;
- * }} ActionButtonProps
- */
-
-/**
- * Action button component
- * @param {ActionButtonProps} props
- * @returns {JSX.Element}
- */
-function ActionButton({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.gradient)) {
-    props.gradient = '';
-  }
-  if (isUndefined(props.icon)) {
-    props.icon = '';
-  }
-  if (isUndefined(props.text)) {
-    props.text = '';
-  }
-  if (isUndefined(props.color)) {
-    props.color = '';
-  }
-  if (isUndefined(props.border)) {
-    props.border = '';
-  }
-  if (isUndefined(props.width)) {
-    props.width = '';
-  }
-  if (isUndefined(props.theme)) {
-    props.theme = 'inherit';
-  }
-  if (isUndefined(props.variant)) {
-    props.variant = 'outlined';
-  }
-  if (isUndefined(props.size)) {
-    props.size = 'large';
-  }
-  /** @type {ActionButtonProps & {}} */
-  const newProps = mergeProps(props, ActionButton);
-  const { href, icon, size, color, theme, variant, gradient, children, text, ...rest } = newProps;
-
-  /** @type {import('react').CSSProperties} */
-  const styles = {};
-  if (gradient) {
-    styles.backgroundImage = gradient;
-    styles.borderColor = 'transparent';
-  }
-  const attrs = ['color', 'border', 'width'];
-  attrs.forEach((x) => {
-    if (newProps[x]) {
-      styles[x] = newProps[x];
-    }
-  });
-
-  return (
-    <Button
-      color={theme}
-      href={href}
-      target="_blank"
-      variant={variant}
-      style={styles}
-      size={size}
-      className="action-button"
-      {...rest}>
-      {!!icon && <i className={icon} />}
-      {text || children}
-    </Button>
-  );
-}
-
-ActionButton.propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  gradient: PropTypes.string,
-  color: PropTypes.string,
-  icon: PropTypes.string,
-  border: PropTypes.string,
-  text: PropTypes.string,
-  theme: PropTypes.string,
-  variant: PropTypes.string,
-  size: PropTypes.string,
-  width: PropTypes.string,
-};
-
-export default withDeprecated(ActionButton, { name: 'ActionButton' });

package/src/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,9 +0,0 @@
-import ActivityIndicator from '.';
-
-export { default as Basic } from './demo/basic';
-export { default as WithCustomMessages } from './demo/with-custom-messages';
-
-export default {
-  title: 'Feedback/ActivityIndicator',
-  component: ActivityIndicator,
-};

package/src/ActivityIndicator/index.jsx

@@ -1,140 +0,0 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { green, blue } from '@mui/material/colors';
-
-import Logo from '../Logo';
-import { styled, useTheme } from '../Theme';
-
-/**
- * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
- * @typedef {{
- *  interval?: number;
- *  messages: string[];
- * } & import('react').ComponentPropsWithoutRef<"div"> } ActivityIndicatorProps
- */
-
-/**
- * @description ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
- * @param {ActivityIndicatorProps} props
- * @returns {JSX.Element}
- */
-export default function ActivityIndicator({ messages = ['Loading data...'], interval = 3000, ...rest }) {
-  const [index, setIndex] = useState(0);
-  const { palette } = useTheme();
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setIndex((index + 1) % messages.length);
-    }, interval);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  });
-
-  return (
-    <Div {...rest}>
-      <div className="pm-loader-container">
-        <div className="pm-loader-text">
-          <p>{messages[index]}</p>
-        </div>
-        <div className="pm-loader-atoms">
-          <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
-          <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
-          <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
-          <Orbit size={100} orbitColor={palette.grey[900]} atomColor={palette.grey[900]} />
-        </div>
-      </div>
-    </Div>
-  );
-}
-
-ActivityIndicator.propTypes = {
-  interval: PropTypes.number,
-  messages: PropTypes.arrayOf(PropTypes.string.isRequired),
-};
-
-const Div = styled('div')`
-  && {
-    box-sizing: border-box;
-    padding: 20px;
-    width: 100%;
-    height: 100%;
-    min-height: 360px;
-    z-index: 100;
-    transition: opacity 0.5s linear;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .pm-loader-text {
-    color: ${({ theme }) => theme.palette.grey[900]};
-    font-size: 14px;
-    text-align: center;
-    position: relative;
-    height: 70px;
-    -webkit-user-select: none;
-  }
-
-  .pm-loader-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
-
-  .pm-loader-atoms {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-
-function Orbit({ size, orbitColor, atomColor, duration = 2, ...rest }) {
-  return (
-    <OrbitRoot $duration={duration} style={{ width: size, height: size, border: `1px solid ${orbitColor}` }} {...rest}>
-      <div style={{ background: atomColor }} />
-    </OrbitRoot>
-  );
-}
-
-Orbit.propTypes = {
-  size: PropTypes.number.isRequired,
-  orbitColor: PropTypes.string.isRequired,
-  atomColor: PropTypes.string.isRequired,
-  duration: PropTypes.number,
-};
-
-const OrbitRoot = styled('div')`
-  @keyframes orbit {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  position: absolute;
-  border-radius: 50%;
-  animation: orbit ${({ $duration }) => $duration}s infinite;
-  animation-timing-function: linear;
-  transform-origin: center;
-
-  > div {
-    position: absolute;
-    top: 50%;
-    width: 6px;
-    height: 6px;
-    transform: translateX(-50%);
-    border-radius: 50%;
-  }
-`;

package/src/Address/Address.stories.jsx

@@ -1,38 +0,0 @@
-import { styled } from '../Theme';
-
-export { default as WithDifferentSizes } from './demo/with-different-sizes';
-export { default as Copyable } from './demo/copyable';
-export { default as CompactMode } from './demo/compact-mode';
-export { default as WithInheritSize } from './demo/with-inherit-size';
-export { default as ResponsiveFontSize } from './demo/responsive-font-size';
-export { default as InlineElementBlockElement } from './demo/inline-element-block-element';
-export { default as DynamicTagname } from './demo/dynamic-tagname';
-export { default as NonResponsiveCompact } from './demo/non-responsive-compact';
-export { default as CopyTextI18N } from './demo/copy-text-i18n';
-export { default as PrependAppend } from './demo/prepend-append';
-
-export default {
-  title: 'DID/Address',
-  parameters: {},
-  decorators: [
-    (StoryFn) => (
-      <ResizableContainer>
-        <StoryFn />
-      </ResizableContainer>
-    ),
-  ],
-};
-
-const ResizableContainer = styled('div')`
-  width: 600px;
-  max-width: 100%;
-  padding: 16px;
-  border: 1px solid #ddd;
-  overflow: auto;
-  background: #fff;
-  resize: both;
-
-  > * + * {
-    margin-top: 16px;
-  }
-`;

package/src/Address/compact-text.jsx

@@ -1,76 +0,0 @@
-import { Children } from 'react';
-import PropTypes from 'prop-types';
-import { Box, Tooltip, tooltipClasses } from '@mui/material';
-import { styled } from '../Theme';
-import { CopyButton } from '../ClickToCopy';
-
-const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
-  [`& .${tooltipClasses.tooltip}`]: {
-    maxWidth: 360,
-    wordBreak: 'break-all',
-  },
-});
-
-// 递归, 将 text (string) 部分替换为 CompactText (保持元素结构)
-// eslint-disable-next-line react/prop-types
-function RecursiveWrapper({ children, ...rest }) {
-  const wrappedChildren = Children.map(children, (child) => {
-    if (typeof child === 'string') {
-      return <CompactText {...rest}>{child}</CompactText>;
-    }
-    if (child.props && child.props.children) {
-      return (
-        <child.type {...child.props}>
-          <RecursiveWrapper {...rest}>{child.props.children}</RecursiveWrapper>
-        </child.type>
-      );
-    }
-    return child;
-  });
-  return wrappedChildren;
-}
-
-/**
- * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
- */
-export default function CompactText({ startChars = 6, endChars = 6, children, showCopyButtonInTooltip = false }) {
-  if (typeof children !== 'string') {
-    return (
-      <RecursiveWrapper startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
-        {children}
-      </RecursiveWrapper>
-    );
-  }
-
-  // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
-  const tooltipContent = (
-    <Box
-      onClick={(e) => e.stopPropagation()}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        lineHeight: 1,
-      }}>
-      <Box>{children}</Box>
-      {showCopyButtonInTooltip && (
-        <CopyButton content={children} showTooltip={false} style={{ fontSize: 16, marginLeft: 4 }} />
-      )}
-    </Box>
-  );
-
-  return (
-    <StyledTooltip title={tooltipContent} placement="top">
-      <span>
-        {children.slice(0, startChars)}...{children.slice(children.length - endChars)}
-      </span>
-    </StyledTooltip>
-  );
-}
-
-CompactText.propTypes = {
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  children: PropTypes.node.isRequired,
-  // 在 tooltip 中完整地址后显示复制按钮
-  showCopyButtonInTooltip: PropTypes.bool,
-};