@arcblock/ux 2.9.91 → 2.10.0

package/es/WebWalletSWKeeper/index.js

@@ -1,117 +0,0 @@
-import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import useIdle from 'react-use/lib/useIdle';
-import { useLocalStorageState } from 'ahooks';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { detectWalletExtension } from '@arcblock/ux/lib/Util';
-import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
-
-// 默认最大空闲时间: 30min
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30;
-// 可使用 localStorage.setItem('wallet_sw_keeper_disabled', 1) 来禁用嵌入 wallet iframe
-const STORAGE_KEY_DISABLED = 'wallet_sw_keeper_disabled';
-// iframe id, 如果存在多个 WebWalletSWKeeper 组件实例, 共享此 id, 保证只有一个 iframe
-let id;
-const injectIframe = webWalletUrl => {
-  const iframe = document.createElement('iframe');
-  iframe.title = 'abt wallet';
-  iframe.id = id;
-  iframe.style.width = 0;
-  iframe.style.height = 0;
-  iframe.style.border = 0;
-  // https://stackoverflow.com/questions/27858989/iframe-with-0-height-creates-a-gap
-  iframe.style.display = 'block';
-  // fix: 页面自动滚动到底部问题 (https://github.com/blocklet/abt-wallet/issues/1160)
-  //      top: 0 可能不是必须的, 但测试中发现, 如果不设置, 在某些特殊情况下似乎也会导致页面自动滚动到底部
-  iframe.style.position = 'absolute';
-  iframe.style.top = 0;
-  iframe.src = `${webWalletUrl}?action=iframe`;
-  document.body.appendChild(iframe);
-};
-const removeIframe = () => {
-  const iframe = document.getElementById(id);
-  if (iframe) {
-    document.body.removeChild(iframe);
-  }
-};
-const cleanup = () => {
-  removeIframe();
-  id = null;
-};
-const enable = webWalletUrl => {
-  if (!id) {
-    id = `web_wallet_sw_keeper_${Date.now()}`;
-    injectIframe(webWalletUrl);
-  }
-};
-
-// 该组件通过嵌入一个 web wallet iframe 帮助 web wallet service worker 延最大空闲时间
-function WebWalletSWKeeper({
-  webWalletUrl,
-  maxIdleTime
-}) {
-  // 渲染前先记录是否已经存在一个 WebWalletSWKeeper 实例
-  const instanceExists = useRef(!!id);
-  const isIdle = useIdle(maxIdleTime);
-  // 如果已经存在一个 WebWalletSWKeeper 实例, cleanup 的时机应该由该实例控制
-  const _cleanup = () => {
-    if (!instanceExists.current) {
-      cleanup();
-    }
-  };
-  // 用户操作空闲时间超过 maxIdleTime 时禁用, 活跃时启用
-  useEffect(() => {
-    if (isIdle) {
-      _cleanup();
-    } else {
-      enable(webWalletUrl);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isIdle]);
-  // 组件销毁时自动清理
-  useEffect(() => () => _cleanup(), []);
-  return null;
-}
-WebWalletSWKeeper.propTypes = {
-  webWalletUrl: PropTypes.string.isRequired,
-  maxIdleTime: PropTypes.number
-};
-WebWalletSWKeeper.defaultProps = {
-  maxIdleTime: DEFAULT_MAX_IDLE_TIME
-};
-export default WebWalletSWKeeper;
-export const withWebWalletSWKeeper = Component => {
-  // eslint-disable-next-line react/prop-types
-  return function WithWebWalletSWKeeperComponent({
-    webWalletUrl,
-    maxIdleTime,
-    ...rest
-  }) {
-    const browser = useBrowser();
-    // eslint-disable-next-line no-param-reassign
-    webWalletUrl = webWalletUrl || getWebWalletUrl();
-    const [disabled] = useLocalStorageState(STORAGE_KEY_DISABLED, {
-      defaultValue: 1
-    });
-    const extension = detectWalletExtension();
-    const isSameProtocol = checkSameProtocol(webWalletUrl);
-    const isWalletWebview = browser.wallet;
-    // 以下几种情况不会嵌入 wallet iframe :
-    // - 通过设置 localStorage#wallet_sw_keeper_disabled = 1 明确禁止 (开发调试过程中可以使用, 避免控制台打印一堆日志影响调试)
-    // - 检查到 wallet 浏览器插件
-    // - webWalletUrl 与当前页面 url 的 protocol 不同
-    // - wallet webview
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!disabled && !extension && isSameProtocol && !isWalletWebview && /*#__PURE__*/_jsx(WebWalletSWKeeper, {
-        webWalletUrl: webWalletUrl,
-        maxIdleTime: maxIdleTime
-      }), /*#__PURE__*/_jsx(Component, {
-        webWalletUrl: webWalletUrl,
-        ...rest
-      })]
-    });
-  };
-};

package/es/WechatPrompt/index.js

@@ -1,88 +0,0 @@
-import Typography from '@mui/material/Typography';
-import Dialog from '@mui/material/Dialog';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import IosImage from './images/ios.png';
-import AndroidImage from './images/android.png';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function WechatPrompt() {
-  const browser = useBrowser();
-  if (!browser.mobile.any) {
-    return null;
-  }
-  if (!browser.wechat) {
-    return null;
-  }
-  if (browser.android) {
-    return /*#__PURE__*/_jsx(Dialog, {
-      open: true,
-      fullScreen: true,
-      children: /*#__PURE__*/_jsxs(Container, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          className: "wechat-title",
-          children: "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "wechat-tip",
-          children: [/*#__PURE__*/_jsx(Typography, {
-            className: "wechat-tip-text",
-            children: "2. \u70B9\u51FB\u201C\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"
-          }), /*#__PURE__*/_jsx("img", {
-            className: "wechat-tip-img",
-            src: AndroidImage,
-            alt: "Open in Android Browser"
-          })]
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Dialog, {
-    open: true,
-    fullScreen: true,
-    children: /*#__PURE__*/_jsxs(Container, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        className: "wechat-title",
-        children: "1. \u8F7B\u89E6\u53F3\u4E0A\u65B9\u83DC\u5355"
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "wechat-tip",
-        children: [/*#__PURE__*/_jsx(Typography, {
-          className: "wechat-tip-text",
-          children: "2. \u70B9\u51FB\u201C\u5728Safari\u4E2D\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"
-        }), /*#__PURE__*/_jsx("img", {
-          className: "wechat-tip-img",
-          src: IosImage,
-          alt: "Open in Safari"
-        })]
-      })]
-    })
-  });
-}
-const Container = styled('div')`
-  .wechat-title {
-    height: 80px;
-    line-height: 80px;
-    text-align: center;
-    font-size: 20px;
-    color: #fff;
-    background-color: #9cdbd8;
-  }
-
-  .wechat-tip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .wechat-tip-text {
-      font-size: 20px;
-      padding: 10px 10px;
-      overflow: auto;
-      word-break: break-word;
-      text-align: center;
-    }
-
-    .wechat-tip-img {
-      width: 90%;
-      object-fit: cover;
-    }
-  }
-`;

package/es/index.js

@@ -1,38 +0,0 @@
-import ActionButton from './ActionButton';
-import ActivityIndicator from './ActivityIndicator';
-import Address from './Address';
-import Alert from './Alert';
-import AnimationWaiter from './AnimationWaiter';
-import Async from './Async';
-import Avatar from './Avatar';
-import Badge from './Badge';
-import Button from './Button';
-import ClickToCopy from './ClickToCopy';
-import CodeBlock from './CodeBlock';
-import ContactForm from './ContactForm';
-import CountDown from './CountDown';
-import Earth from './Earth';
-import Footer from './Footer';
-import Icon from './Icon';
-import LocaleSelector from './Locale/selector';
-import Logo from './Logo';
-import RelativeTime from './RelativeTime';
-import SessionManager from './SessionManager';
-import Datatable from './Datatable';
-import Dialog from './Dialog';
-import DidLogo from './DidLogo';
-import Tabs from './Tabs';
-import Tag from './Tag';
-import TextCollapse from './TextCollapse';
-import Theme from './Theme';
-import Toast from './Toast';
-import Util from './Util';
-import Video from './Video';
-import WebWalletSWKeeper from './WebWalletSWKeeper';
-import WalletAction from './Wallet/Action';
-import WalletDownload from './Wallet/Download';
-import WechatPrompt from './WechatPrompt';
-import withTheme from './withTheme';
-import withTracker from './withTracker';
-import Img from './Img';
-export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img };

package/es/withTheme/index.js

@@ -1,69 +0,0 @@
-import { useEffect } from 'react';
-import { Global, css } from '@emotion/react';
-import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme, ThemeProvider } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function withTheme(Component, {
-  mode = 'light',
-  pageWidth = 'md',
-  palette,
-  typography
-} = {}) {
-  const theme = createTheme({
-    mode,
-    pageWidth,
-    palette,
-    typography
-  });
-  const globalStyles = css`
-    font-family: ${theme.typography.fontFamily};
-    color: ${theme.typography.color.main};
-
-    a,
-    a:hover,
-    a:active {
-      text-decoration: none;
-      color: ${theme.palette.primary.dark};
-    }
-
-    a:hover {
-      color: ${theme.palette.primary.main};
-    }
-
-    .section--latest-post {
-      p:last-of-type {
-        margin: 0;
-      }
-    }
-
-    .has-scrolled {
-      .section--footnotes {
-        position: static !important;
-        transition-property: background-color;
-        transition-duration: 600ms;
-        transition-timing-function: ease;
-        .footnote__title {
-          color: #fff;
-        }
-      }
-    }
-  `;
-  return function WithTheme(props) {
-    useEffect(() => {
-      const jssStyles = document.querySelector('#jss-server-side');
-      if (jssStyles && jssStyles.parentNode) {
-        jssStyles.parentNode.removeChild(jssStyles);
-      }
-    }, []);
-    return /*#__PURE__*/_jsxs(ThemeProvider, {
-      theme: theme,
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(Global, {
-        styles: globalStyles
-      }), /*#__PURE__*/_jsx(Component, {
-        ...props
-      })]
-    });
-  };
-}
-export default withTheme;

package/es/withTracker/README.md

@@ -1,34 +0,0 @@
-# withTracker
-
-Add arcblock analytics, google analytics and sentry error reporting to your application.
-
-## Usage
-
-### Installation
-
-```bash
-yarn add react-ga @arcblock/analytics-js @sentry/browser @arcblock/ux
-```
-
-### Configuration & Usage
-
-In your application entry file
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import withTracker from '@arcblock/ux/lib/withTracker';
-
-function App() {
-  return <p>My awesome application</p>;
-}
-
-const Wrapped = withTracker(App, {
-  appName: 'my-awesome-app',
-  appVersion: '0.1.0',
-  gaAccount: '',
-  sentryDSN: '',
-});
-
-ReactDOM.render(<Wrapped />, document.getElementById('root'));
-```

package/es/withTracker/error_boundary.js

@@ -1,34 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Component } from 'react';
-import * as Sentry from '@sentry/browser';
-import Alert from '../Alert';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null
-    };
-  }
-  componentDidCatch(error, info) {
-    this.setState({
-      error
-    });
-    Sentry.withScope(scope => {
-      scope.setExtras(info);
-      Sentry.captureException(error);
-    });
-  }
-  render() {
-    if (this.state.error) {
-      return /*#__PURE__*/_jsx(Alert, {
-        type: "error",
-        variant: "icon",
-        children: "Oops! We encountered an error, please try reload this application."
-      });
-    }
-
-    // eslint-disable-next-line react/prop-types
-    return this.props.children;
-  }
-}

package/es/withTracker/index.js

@@ -1,55 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import ReactGA from 'react-ga';
-import * as Sentry from '@sentry/browser';
-import { useMount, useDeepCompareEffect } from 'ahooks';
-import { useLocation } from 'react-router-dom';
-import ErrorBoundary from './error_boundary';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default ((WrappedComponent, options = {}) => {
-  const {
-    appVersion,
-    gaAccount,
-    sentryDSN
-  } = options;
-  if (gaAccount) {
-    ReactGA.initialize(gaAccount);
-  }
-  if (sentryDSN) {
-    Sentry.init({
-      dsn: sentryDSN,
-      release: appVersion || 'unknown',
-      environment: process.env.NODE_ENV || 'development'
-    });
-  }
-  const trackPage = page => {
-    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
-      return;
-    }
-    if (gaAccount) {
-      ReactGA.set({
-        page,
-        ...options
-      });
-      ReactGA.pageview(page);
-    }
-  };
-  return function TrackedComponent(props) {
-    const location = useLocation();
-    useMount(() => {
-      trackPage(location.pathname);
-    });
-    useDeepCompareEffect(() => {
-      trackPage(location.pathname);
-    }, [location.pathname]);
-    if (process.env.NODE_ENV === 'production') {
-      return /*#__PURE__*/_jsx(ErrorBoundary, {
-        children: /*#__PURE__*/_jsx(WrappedComponent, {
-          ...props
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(WrappedComponent, {
-      ...props
-    });
-  };
-});