@arcblock/ux 2.6.8 → 2.7.0

package/es/Util/wallet.js

@@ -0,0 +1,32 @@
+/* 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 => {
+  const {
+    protocol
+  } = window.location;
+  let walletProtocol = '';
+  try {
+    walletProtocol = new URL(webWalletUrl).protocol;
+  } catch (error) {
+    walletProtocol = '';
+  }
+  return protocol === walletProtocol;
+};

package/es/Video/index.js

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Player from 'react-player';
+import CircularProgress from '@mui/material/CircularProgress';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  string,
+  number,
+  array,
+  oneOfType,
+  object
+} = PropTypes;
+export default function Video(props) {
+  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 /*#__PURE__*/_jsxs(Placeholder, {
+      style: {
+        width,
+        height
+      },
+      children: [/*#__PURE__*/_jsx("iframe", {
+        title: url,
+        style: styles,
+        src: url,
+        onLoad: () => setLoaded(true),
+        allowFullScreen: true
+      }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
+        className: "loading-indicator",
+        color: "primary"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Placeholder, {
+    style: {
+      width,
+      height
+    },
+    children: [/*#__PURE__*/_jsx(Player, {
+      style: styles,
+      ...newProps,
+      onReady: () => setLoaded(true)
+    }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
+      className: "loading-indicator",
+      color: "primary"
+    })]
+  });
+}
+Video.propTypes = {
+  url: oneOfType([string, array, object]).isRequired,
+  width: oneOfType([string, number]),
+  height: oneOfType([string, number]),
+  style: oneOfType([string, object])
+};
+Video.defaultProps = {
+  width: 640,
+  height: 400,
+  style: {}
+};
+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/es/Wallet/Action.js

@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import logo from './images/abtwallet.png';
+import { mergeProps } from '../Util';
+import colors from '../Colors';
+import Button from '../Button';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function WalletAction(props) {
+  const newProps = mergeProps(props, WalletAction, ['style']);
+  const {
+    action,
+    size,
+    textLayout,
+    style = {},
+    ...rest
+  } = newProps;
+  const styles = Object.assign({}, style, {
+    border: 'none',
+    padding: 0
+  });
+  return /*#__PURE__*/_jsx(Button, {
+    style: styles,
+    ...rest,
+    variant: "outlined",
+    children: /*#__PURE__*/_jsxs(Content, {
+      size: size,
+      color: styles.color,
+      children: [/*#__PURE__*/_jsx("img", {
+        src: logo,
+        className: "wallet-action__logo",
+        alt: "DID Wallet"
+      }), textLayout === 'vertical' && /*#__PURE__*/_jsxs(Typography, {
+        className: "wallet-action__text",
+        component: "div",
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "wallet-action__action",
+          children: [action, " with"]
+        }), /*#__PURE__*/_jsx("span", {
+          className: "wallet-action__title",
+          children: "DID Wallet"
+        })]
+      }), textLayout === 'horizontal' && /*#__PURE__*/_jsxs("span", {
+        className: "wallet-action__title",
+        style: {
+          padding: 8
+        },
+        children: [action, " with DID Wallet"]
+      })]
+    })
+  });
+}
+WalletAction.propTypes = {
+  action: PropTypes.string,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small']),
+  textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+WalletAction.defaultProps = {
+  action: 'Login',
+  textLayout: 'vertical',
+  size: 'medium',
+  style: {}
+};
+const sizes = {
+  logo: {
+    small: 32,
+    medium: 44,
+    large: 56,
+    xlarge: 88
+  },
+  font: {
+    small: 9,
+    medium: 11,
+    large: 13,
+    xlarge: 18
+  }
+};
+const Content = styled('div')`
+  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/es/Wallet/Download.js

@@ -0,0 +1,331 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+var AppStoreIcon = function AppStoreIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Appstore"
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.198 3.792v42.064a3.594 3.594 0 0 0 3.595 3.594h164.414a3.594 3.594 0 0 0 3.595-3.594V3.792a3.594 3.594 0 0 0-3.595-3.594H3.793A3.594 3.594 0 0 0 .198 3.792z",
+        fill: "#000",
+        fillRule: "nonzero"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M65.788 38.665h2.924l-6.402-17.73H59.35l-6.402 17.73h2.826l1.634-4.706h6.759l1.622 4.706zm-5.1-14.512h.21l2.567 7.496h-5.357l2.58-7.496zm15.778.91c-1.818 0-3.391.91-4.202 2.433h-.197v-2.212h-2.543v17.719h2.642v-6.365h.209c.7 1.413 2.211 2.248 4.116 2.248 3.38 0 5.53-2.666 5.53-6.918 0-4.251-2.15-6.905-5.555-6.905zm-.75 11.452c-2.21 0-3.6-1.745-3.6-4.534 0-2.802 1.39-4.547 3.613-4.547 2.237 0 3.576 1.708 3.576 4.534 0 2.839-1.34 4.547-3.588 4.547zm14.452-11.452c-1.819 0-3.391.91-4.202 2.433h-.197v-2.212h-2.544v17.719h2.642v-6.365h.21c.7 1.413 2.211 2.248 4.116 2.248 3.379 0 5.529-2.666 5.529-6.918 0-4.251-2.15-6.905-5.554-6.905zm-.75 11.452c-2.211 0-3.6-1.745-3.6-4.534 0-2.802 1.389-4.547 3.613-4.547 2.236 0 3.575 1.708 3.575 4.534 0 2.839-1.339 4.547-3.588 4.547zm11.896-2.617c.197 3.17 2.839 5.197 6.771 5.197 4.202 0 6.832-2.125 6.832-5.517 0-2.666-1.5-4.14-5.136-4.989l-1.954-.479c-2.31-.54-3.244-1.266-3.244-2.531 0-1.598 1.45-2.642 3.625-2.642 2.064 0 3.49 1.02 3.748 2.654h2.678c-.16-2.986-2.789-5.087-6.39-5.087-3.87 0-6.45 2.101-6.45 5.26 0 2.604 1.462 4.152 4.669 4.902l2.286.553c2.346.553 3.379 1.364 3.379 2.716 0 1.572-1.622 2.715-3.834 2.715-2.372 0-4.018-1.069-4.252-2.752h-2.728zm15.877-11.858v3.305h-2.2v2.224h2.2v7.557c0 2.58 1.167 3.613 4.104 3.613.516 0 .995-.061 1.413-.135v-2.2c-.368.037-.577.062-.983.062-1.315 0-1.892-.615-1.892-2.015v-6.882h2.998v-2.224h-2.998V22.04h-2.642zm12.19 14.536c-2.298 0-3.588-1.683-3.588-4.608 0-2.9 1.29-4.595 3.588-4.595 2.286 0 3.588 1.696 3.588 4.595 0 2.913-1.302 4.608-3.588 4.608zm0 2.347c3.908 0 6.304-2.617 6.304-6.955 0-4.313-2.409-6.942-6.304-6.942-3.907 0-6.316 2.63-6.316 6.942 0 4.338 2.396 6.955 6.316 6.955zm7.509-.258h2.642v-7.9c0-1.88 1.413-3.146 3.403-3.146.443 0 1.254.086 1.463.16v-2.606c-.283-.073-.787-.11-1.168-.11-1.745 0-3.22.958-3.6 2.273h-.197v-2.052h-2.543v13.381zm13.456-11.39c1.953 0 3.231 1.363 3.293 3.465h-6.759c.148-2.09 1.512-3.465 3.466-3.465zm3.28 7.778c-.491 1.044-1.585 1.622-3.182 1.622-2.114 0-3.478-1.487-3.564-3.834v-.148h9.45v-.921c0-4.203-2.249-6.746-5.972-6.746-3.773 0-6.169 2.715-6.169 6.992 0 4.276 2.347 6.905 6.181 6.905 3.06 0 5.198-1.474 5.8-3.87h-2.544zM55.423 7.094v8.443h3.048c2.516 0 3.973-1.55 3.973-4.248 0-2.656-1.468-4.195-3.973-4.195h-3.048zm1.31 1.193h1.592c1.75 0 2.785 1.112 2.785 3.02 0 1.936-1.018 3.037-2.785 3.037h-1.592V8.287zm10.323 6.255c-1.094 0-1.708-.801-1.708-2.194 0-1.38.614-2.188 1.708-2.188 1.089 0 1.709.807 1.709 2.188 0 1.387-.62 2.194-1.709 2.194zm0 1.118c1.861 0 3.002-1.246 3.002-3.312 0-2.054-1.147-3.306-3.002-3.306-1.86 0-3.007 1.252-3.007 3.306 0 2.066 1.14 3.312 3.007 3.312zM79.92 9.165H78.66l-1.136 4.863h-.099l-1.31-4.863H74.91l-1.31 4.863h-.094l-1.141-4.863h-1.276l1.755 6.372h1.294l1.31-4.693h.1l1.316 4.693h1.305l1.75-6.372zm1.598 6.372h1.258V11.81c0-.995.62-1.615 1.633-1.615.936 0 1.392.509 1.392 1.533v3.81h1.258v-4.126c0-1.515-.801-2.37-2.223-2.37-.96 0-1.703.427-2.013 1.135h-.094V9.165h-1.21v6.372zm7.667 0h1.258V6.678h-1.258v8.86zm6.133-.995c-1.094 0-1.709-.801-1.709-2.194 0-1.38.615-2.188 1.709-2.188 1.088 0 1.708.807 1.708 2.188 0 1.387-.62 2.194-1.708 2.194zm0 1.118c1.86 0 3.002-1.246 3.002-3.312 0-2.054-1.147-3.306-3.002-3.306-1.86 0-3.008 1.252-3.008 3.306 0 2.066 1.141 3.312 3.008 3.312zm6.894-1.077c-.685 0-1.182-.333-1.182-.907 0-.561.398-.86 1.276-.918l1.556-.1v.533c0 .79-.702 1.392-1.65 1.392zm-.322 1.06c.837 0 1.533-.363 1.913-1.001h.1v.895h1.211v-4.353c0-1.346-.9-2.142-2.498-2.142-1.446 0-2.475.702-2.604 1.797h1.217c.14-.451.626-.708 1.328-.708.86 0 1.305.38 1.305 1.053v.55l-1.726.1c-1.516.093-2.37.754-2.37 1.901 0 1.164.895 1.908 2.124 1.908zm7.643 0c.878 0 1.62-.416 2.001-1.112h.1v1.006h1.205V6.678h-1.258v3.5h-.094c-.345-.703-1.082-1.118-1.954-1.118-1.609 0-2.645 1.275-2.645 3.288 0 2.019 1.024 3.295 2.645 3.295zm.357-5.454c1.053 0 1.714.837 1.714 2.165 0 1.334-.655 2.16-1.714 2.16-1.065 0-1.703-.814-1.703-2.166 0-1.34.644-2.159 1.703-2.159zm11.4 4.353c-1.094 0-1.708-.801-1.708-2.194 0-1.38.614-2.188 1.709-2.188 1.088 0 1.708.807 1.708 2.188 0 1.387-.62 2.194-1.708 2.194zm0 1.118c1.861 0 3.002-1.246 3.002-3.312 0-2.054-1.146-3.306-3.001-3.306-1.861 0-3.008 1.252-3.008 3.306 0 2.066 1.141 3.312 3.008 3.312zm4.812-.123h1.258V11.81c0-.995.62-1.615 1.632-1.615.936 0 1.393.509 1.393 1.533v3.81h1.258v-4.126c0-1.515-.802-2.37-2.224-2.37-.96 0-1.702.427-2.013 1.135h-.093V9.165H126.1v6.372zM137.73 7.62v1.574h-1.048v1.06h1.048v3.598c0 1.229.555 1.72 1.954 1.72.246 0 .474-.029.673-.064V14.46c-.176.017-.275.029-.468.029-.626 0-.901-.293-.901-.96v-3.277h1.427V9.194h-1.427V7.62h-1.258zm4.477 7.917h1.258v-3.721c0-.966.638-1.615 1.668-1.615.947 0 1.421.515 1.421 1.533v3.803h1.258v-4.113c0-1.516-.819-2.376-2.252-2.376-.96 0-1.697.427-2.007 1.141h-.1V6.68h-1.246v8.858zm10.294-5.424c.93 0 1.538.65 1.568 1.65h-3.219c.07-.995.72-1.65 1.65-1.65zm1.562 3.704c-.234.497-.755.772-1.516.772-1.006 0-1.656-.708-1.697-1.825v-.07h4.5v-.44c0-2-1.07-3.212-2.844-3.212-1.796 0-2.937 1.293-2.937 3.33 0 2.036 1.118 3.288 2.943 3.288 1.457 0 2.475-.702 2.762-1.843h-1.211z",
+        fill: "#FFF"
+      }), /*#__PURE__*/_jsx("g", {
+        fill: "#FFF",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M37.747 25.07c-.038-4.285 3.51-6.37 3.672-6.468-2.01-2.93-5.124-3.33-6.218-3.361-2.616-.276-5.153 1.565-6.486 1.565-1.359 0-3.41-1.539-5.622-1.493-2.846.043-5.508 1.691-6.968 4.25-3.013 5.216-.766 12.883 2.121 17.1 1.444 2.066 3.132 4.37 5.34 4.29 2.161-.088 2.969-1.378 5.576-1.378 2.584 0 3.342 1.377 5.595 1.324 2.319-.034 3.779-2.073 5.173-4.158 1.669-2.365 2.339-4.698 2.365-4.818-.053-.017-4.502-1.715-4.548-6.852M33.492 12.467c1.162-1.454 1.958-3.431 1.737-5.438-1.682.075-3.786 1.164-4.998 2.585-1.071 1.253-2.029 3.306-1.781 5.237 1.89.141 3.83-.953 5.042-2.384"
+        })
+      })]
+    })]
+  });
+};
+AppStoreIcon.defaultProps = {
+  width: "172",
+  height: "50",
+  viewBox: "0 0 172 50",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var GooglePlayIcon = function GooglePlayIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Playstore"
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsxs("linearGradient", {
+        x1: "50%",
+        y1: "0%",
+        x2: "50%",
+        y2: "38.913%",
+        id: "b",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#FBDA09",
+          offset: "0%"
+        }), /*#__PURE__*/_jsx("stop", {
+          stopColor: "#FFBC00",
+          offset: "100%"
+        })]
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M28.354 14.689c1.77 1.006 1.77 2.638 0 3.645L3.228 32.625C1.458 33.632.023 32.8.023 30.763V2.26C.023.225 1.458-.609 3.228.398l25.126 14.29z",
+        id: "a"
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        x1: "0%",
+        y1: "58.476%",
+        x2: "69.306%",
+        y2: "39.083%",
+        id: "c",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#01E2FF",
+          offset: "0%"
+        }), /*#__PURE__*/_jsx("stop", {
+          stopColor: "#01C4FF",
+          offset: "100%"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        x1: "20.281%",
+        y1: "20.102%",
+        x2: "83.82%",
+        y2: "83.621%",
+        id: "e",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#28D781",
+          offset: "0%"
+        }), /*#__PURE__*/_jsx("stop", {
+          stopColor: "#02F076",
+          offset: "100%"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        x1: "74.488%",
+        y1: "17.43%",
+        x2: "10.108%",
+        y2: "91.184%",
+        id: "f",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#F2414E",
+          offset: "0%"
+        }), /*#__PURE__*/_jsx("stop", {
+          stopColor: "#E02554",
+          offset: "100%"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.17 4.852V44.54a4.681 4.681 0 0 0 4.682 4.681h162.296a4.682 4.682 0 0 0 4.682-4.681V4.85a4.681 4.681 0 0 0-4.682-4.68H4.852A4.682 4.682 0 0 0 .17 4.85z",
+        fill: "#000",
+        fillRule: "nonzero"
+      }), /*#__PURE__*/_jsx("g", {
+        fill: "#FFF",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M91.207 16.084a4.213 4.213 0 1 1 0-8.425 4.213 4.213 0 0 1 0 8.425zm0-1.287a2.925 2.925 0 1 0 0-5.85 2.925 2.925 0 0 0 0 5.85zM62.656 12.34v2.574h3.393v.936h-4.68V8.01h4.68v.936h-3.393v2.457h3.042v.937h-3.042zM70.613 8.946v6.904h-1.288V8.946h-1.989V8.01h5.266v.936h-1.99zM82.08 8.946v6.904h-1.287V8.946h-1.99V8.01h5.266v.936H82.08zM76.346 8.01h1.287v7.84h-1.287zM97.233 8.01h-.76v7.84h1.287V9.731l3.744 6.119h1.288V8.01h-1.288v5.737l-3.51-5.737h-.76zM59.376 8.916c-.686-.723-1.69-1.14-2.883-1.14a4.133 4.133 0 0 0-4.135 4.13 4.135 4.135 0 0 0 4.135 4.13c2.322.022 4.258-1.614 3.871-4.454v-.042h-1.03c.009.119.012.241.01.366.002 2.029-1.168 2.98-2.816 2.98a2.982 2.982 0 0 1-2.983-2.98 2.982 2.982 0 0 1 2.983-2.98c.824 0 1.539.282 2.042.796l.806-.806z"
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        fill: "#FFF",
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M125.375 22.052h6.634s3.82.65 3.82 5.035-3.82 5.035-3.82 5.035h-6.634v-10.07zm1.287 2.436v5.404h4.504s2.05 0 2.05-2.702-2.05-2.702-2.05-2.702h-4.504z"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M124.79 22.052h2.34v16.382h-2.34zM137.193 22.052h2.34v16.382h-2.34zM148.208 37.262c-.645.532-1.675 1.033-3.303 1.135-3.729.232-3.73-3.17-3.73-3.4 0-.23-.185-3.004 2.782-3.445 2.1-.313 3.571.208 4.251.538v-.481c-.167-.637-.684-1.809-2.235-1.809-2.131 0-2.602 1.152-2.602 1.152l-1.949-1.152s1.09-2.249 4.364-2.249c4.07 0 4.763 2.808 4.763 3.753V38.428h-2.341v-1.166zm-.167-3.508s-4.509-1.216-4.666 1.317c-.156 2.533 4.326 1.317 4.726-.479 0-.57-.06-.838-.06-.838zM154.94 37.812l-2.183 5.185h2.34l6.331-15.038h-2.34l-2.978 7.074-3.002-7.13h-2.34l4.172 9.91zM119.55 31.732l-7.4 3.059s.477 1.692 2.703 1.703c1.742.009 2.726-1.545 2.726-1.545l1.878 1.272s-1.516 2.451-4.62 2.451c-3.813 0-5.493-3.335-5.493-5.5 0-2.087 1.334-5.62 5.257-5.62 3.924 0 4.95 4.18 4.95 4.18zm-2.815-.867s-.931-1.417-2.36-1.155c-3.02.552-2.64 3.196-2.64 3.196l5-2.04zM105.834 22.052h2.476V38.4h-2.476zM101.872 27.907l2.288.02V38.24c0 2.636-1.569 5.418-5.262 5.418-3.694 0-4.887-3.273-4.887-3.273l2.102-.884s.64 2.017 2.894 2.017c2.566 0 2.865-2.334 2.865-3.133v-1.12s-.888 1.39-3.093 1.39c-2.39 0-5.232-2.049-5.232-5.54 0-3.493 2.676-5.49 5.26-5.563 2.07-.058 3.065 1.374 3.065 1.374v-1.02zm-2.897 8.653c1.669 0 3.022-1.53 3.022-3.415 0-1.886-1.353-3.415-3.022-3.415-1.67 0-3.022 1.529-3.022 3.415 0 1.886 1.353 3.415 3.022 3.415zM86.949 38.668a5.564 5.564 0 0 1-5.571-5.558 5.564 5.564 0 0 1 5.57-5.559 5.564 5.564 0 0 1 5.571 5.559 5.564 5.564 0 0 1-5.57 5.558zm-.037-2.18c1.73 0 3.132-1.512 3.132-3.378s-1.402-3.379-3.132-3.379c-1.73 0-3.131 1.513-3.131 3.379s1.402 3.378 3.131 3.378zM74.896 38.668a5.564 5.564 0 0 1-5.57-5.558 5.564 5.564 0 0 1 5.57-5.559 5.564 5.564 0 0 1 5.57 5.559 5.564 5.564 0 0 1-5.57 5.558zm-.036-2.18c1.73 0 3.131-1.512 3.131-3.378S76.59 29.73 74.86 29.73c-1.73 0-3.131 1.513-3.131 3.379s1.401 3.378 3.13 3.378z"
+        }), /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("path", {
+            d: "M60.512 29.314h7.355l-.073 2.325h-7.282z"
+          }), /*#__PURE__*/_jsx("path", {
+            d: "M66.42 23.843c-1.432-1.508-3.526-2.376-6.017-2.376-4.766 0-8.63 3.854-8.63 8.61 0 4.754 3.864 8.602 8.63 8.61 4.845.043 8.886-3.366 8.078-9.287v-.086h-2.149c.018.247.024.501.018.762.005 4.23-2.436 6.212-5.875 6.212-3.438 0-6.226-2.78-6.226-6.212 0-3.43 2.788-6.212 6.226-6.212 1.72 0 3.212.587 4.261 1.658l1.683-1.679z"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("g", {
+        transform: "translate(11.755 8.127)",
+        children: [/*#__PURE__*/_jsx("mask", {
+          id: "d",
+          fill: "#fff",
+          children: /*#__PURE__*/_jsx("use", {
+            xlinkHref: "#a"
+          })
+        }), /*#__PURE__*/_jsx("use", {
+          fill: "url(#b)",
+          xlinkHref: "#a"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: "url(#c)",
+          mask: "url(#d)",
+          d: "M0-.012l16.357 16.258-16.568 16.9z"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: "url(#e)",
+          mask: "url(#d)",
+          d: "M-3.364-3.358l19.72 19.609 5.862-5.593z"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: "url(#f)",
+          mask: "url(#d)",
+          d: "M16.358 16.247l8.975 9.046L-1.48 34.34z"
+        })]
+      })]
+    })]
+  });
+};
+GooglePlayIcon.defaultProps = {
+  width: "172",
+  height: "50",
+  viewBox: "0 0 172 50",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+};
+var AndroidDownloadIcon = function AndroidDownloadIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "android"
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M172 44.328c0 3.133-2.794 5.672-6.24 5.672H6.24c-1.654 0-3.242-.598-4.412-1.661C.658 47.275 0 45.832 0 44.329V5.671C0 2.539 2.794 0 6.24 0h159.52c3.446 0 6.24 2.54 6.24 5.672v38.656",
+        fill: "#100F0D",
+        fillRule: "nonzero"
+      }), /*#__PURE__*/_jsx("text", {
+        fill: "#FFF",
+        fontFamily: "Arial-BoldMT, Arial",
+        fontSize: "23.441",
+        fontWeight: "bold",
+        children: /*#__PURE__*/_jsx("tspan", {
+          x: "63.624",
+          y: "42.135",
+          children: "Android"
+        })
+      }), /*#__PURE__*/_jsx("text", {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        fontFamily: "ArialMT, Arial",
+        fontSize: "11.721",
+        children: /*#__PURE__*/_jsx("tspan", {
+          x: "64",
+          y: "19",
+          children: "Download for"
+        })
+      }), /*#__PURE__*/_jsx("g", {
+        fill: "#9FC732",
+        fillRule: "nonzero",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M40.48 18.031H20.153a.818.818 0 0 0-.818.817v17.01c0 .45.366.816.818.816h3.625v5.732c0 1.33 1.08 2.409 2.413 2.409a2.411 2.411 0 0 0 2.414-2.409v-5.732h3.376v5.732c0 1.33 1.08 2.409 2.413 2.409a2.41 2.41 0 0 0 2.414-2.409v-5.732h3.674a.82.82 0 0 0 .819-.817V18.848a.818.818 0 0 0-.82-.817m-24.588-.004a2.411 2.411 0 0 0-2.413 2.408v9.782a2.41 2.41 0 0 0 2.413 2.408 2.41 2.41 0 0 0 2.414-2.408v-9.782a2.41 2.41 0 0 0-2.414-2.408M44.877 17.66c-1.33 0-2.41 1.091-2.41 2.436v9.895c0 1.345 1.08 2.436 2.41 2.436s2.41-1.09 2.41-2.436v-9.895c0-1.345-1.08-2.436-2.41-2.436m-19.441-6.768a.924.924 0 0 1 .813.464.945.945 0 0 1 0 .945.924.924 0 0 1-.813.464.932.932 0 0 1-.913-.936c0-.512.406-.93.913-.937zm10.96.937a.939.939 0 0 1-.454.836.918.918 0 0 1-.944 0 .939.939 0 0 1-.454-.836.931.931 0 0 1 .926-.906c.5 0 .91.4.926.906zm-15.902 4.628h19.918c.52 0 .907-.483.8-.998a11.12 11.12 0 0 0-5.37-7.395l1.702-3.106a.44.44 0 0 0-.168-.592.426.426 0 0 0-.585.17l-1.716 3.129a10.856 10.856 0 0 0-4.622-1.027 10.854 10.854 0 0 0-4.622 1.027l-1.716-3.13a.428.428 0 0 0-.58-.16.438.438 0 0 0-.173.582l1.702 3.107a11.123 11.123 0 0 0-5.37 7.395.825.825 0 0 0 .8.998"
+        })
+      })]
+    })]
+  });
+};
+AndroidDownloadIcon.defaultProps = {
+  width: "172",
+  height: "50",
+  viewBox: "0 0 172 50",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import Button from '../Button';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function WalletDownload(props) {
+  const browser = useBrowser();
+  const newProps = mergeProps(props, WalletDownload, ['style']);
+  const {
+    title,
+    children,
+    iosLink,
+    androidLink,
+    androidDownLoadUrl,
+    locale,
+    ...rest
+  } = newProps;
+  const isAndroid = browser.mobile.android.phone || browser.mobile.android.tablet;
+  const isIOS = browser.mobile.apple.phone || browser.mobile.apple.tablet;
+  return /*#__PURE__*/_jsxs(Container, {
+    ...rest,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "download-text",
+      children: [!!title && /*#__PURE__*/_jsx(Typography, {
+        className: "download-title",
+        component: "div",
+        children: title
+      }), children && /*#__PURE__*/_jsx(Typography, {
+        className: "download-extra",
+        component: "div",
+        children: children
+      })]
+    }), !browser.mobile.any && /*#__PURE__*/_jsxs("div", {
+      className: "download-store-list",
+      children: [/*#__PURE__*/_jsx(Button, {
+        className: "download-link",
+        component: "a",
+        href: iosLink,
+        children: /*#__PURE__*/_jsx(AppStoreIcon, {})
+      }), locale === 'zh' && /*#__PURE__*/_jsx(Button, {
+        component: "a",
+        className: "download-link",
+        href: androidDownLoadUrl,
+        children: /*#__PURE__*/_jsx(AndroidDownloadIcon, {})
+      }), locale === 'en' && /*#__PURE__*/_jsx(Button, {
+        component: "a",
+        className: "download-link",
+        href: androidLink,
+        children: /*#__PURE__*/_jsx(GooglePlayIcon, {})
+      })]
+    }), isAndroid && /*#__PURE__*/_jsxs("div", {
+      className: "download-store-list",
+      children: [locale === 'zh' && /*#__PURE__*/_jsx(Button, {
+        component: "a",
+        href: androidDownLoadUrl,
+        variant: "outlined",
+        color: "primary",
+        children: "\u672C\u5730\u4E0B\u8F7D"
+      }), locale === 'en' && /*#__PURE__*/_jsx(Button, {
+        component: "a",
+        href: androidLink,
+        variant: "outlined",
+        color: "primary",
+        children: "Download"
+      })]
+    }), isIOS && /*#__PURE__*/_jsx("div", {
+      className: "download-store-list",
+      children: /*#__PURE__*/_jsx(Button, {
+        component: "a",
+        href: iosLink,
+        variant: "outlined",
+        color: "primary",
+        children: "Download"
+      })
+    })]
+  });
+}
+WalletDownload.propTypes = {
+  title: PropTypes.string,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  storeLayout: PropTypes.oneOf(['vertical', 'horizontal']),
+  style: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  iosLink: PropTypes.string,
+  androidLink: PropTypes.string,
+  androidDownLoadUrl: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh'])
+};
+WalletDownload.defaultProps = {
+  title: 'Download DID Wallet',
+  layout: 'vertical',
+  storeLayout: 'horizontal',
+  iosLink: 'https://itunes.apple.com/app/id1460083542',
+  androidLink: 'https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product',
+  androidDownLoadUrl: 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk',
+  style: {},
+  locale: 'zh'
+};
+const Container = styled('div')`
+  display: flex;
+  flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+  align-items: center;
+
+  .download-title {
+    margin-right: ${props => props.layout === 'vertical' ? '0' : '16px'};
+    margin-bottom: ${props => props.layout === 'vertical' ? '16px' : '0'};
+  }
+
+  .download-store-list {
+    display: flex;
+    flex-direction: ${props => props.storeLayout === 'vertical' ? 'column' : 'row'};
+    justify-content: space-between;
+    align-items: center;
+
+    .download-link {
+      padding: 0;
+      margin: 0;
+
+      margin-right: ${props => props.storeLayout === 'vertical' ? '0' : '16px'};
+      margin-bottom: ${props => props.storeLayout === 'vertical' ? '16px' : '0'};
+
+      &:last-of-type {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+`;

package/es/Wallet/Open.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import Fab from '@mui/material/Fab';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function OpenInWallet({
+  locale,
+  link
+}) {
+  const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
+  const browser = useBrowser();
+  if (browser.mobile.any && !browser.wallet && !browser.wechat) {
+    const deepLink = `abt://abtwallet.io/i?action=requestOpenUrl&url=${encodeURIComponent(link)}`;
+    return /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      href: deepLink,
+      variant: "extended",
+      color: "primary",
+      rounded: true,
+      target: "_blank",
+      className: "open-in-wallet-button",
+      children: buttonText
+    });
+  }
+  return null;
+}
+OpenInWallet.propTypes = {
+  locale: PropTypes.oneOf(['en', 'zh']),
+  link: PropTypes.string.isRequired
+};
+OpenInWallet.defaultProps = {
+  locale: 'zh'
+};
+const Button = styled(Fab)`
+  && {
+    font-size: 12px;
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translateX(-50%);
+    min-width: 120px;
+    z-index: ${props => props.theme.zIndex.tooltip};
+  }
+`;

package/es/Wallet/images/android_download.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="172px" height="50px" viewBox="0 0 172 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>android</title>
+    <desc>Created with Sketch.</desc>
+    <g id="android" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M172,44.3280578 C172,47.460585 169.20589,50 165.759181,50 L6.24081931,50 C4.58565112,50 2.99827431,49.4024221 1.82789366,48.3387266 C0.657513004,47.2750311 0,45.8323504 0,44.3280578 L0,5.67194218 C0,2.53941501 2.79410998,0 6.24081931,0 L165.759181,0 C169.20589,0 172,2.53941501 172,5.67194218 L172,44.3280578" id="bg" fill="#100F0D" fill-rule="nonzero"></path>
+        <text id="Android" fill="#FFFFFF" font-family="Arial-BoldMT, Arial" font-size="23.4412266" font-weight="bold">
+            <tspan x="63.6237138" y="42.1351959">Android</tspan>
+        </text>
+        <text id="Download-for" fill="#FFFFFF" fill-rule="nonzero" font-family="ArialMT, Arial" font-size="11.7206133" font-weight="normal">
+            <tspan x="64" y="19">Download for</tspan>
+        </text>
+        <g id="Android" transform="translate(13.478705, 3.102215)" fill="#9FC732" fill-rule="nonzero">
+            <g id="shapeB" transform="translate(14.000000, 28.229131) scale(-1, 1) rotate(-180.000000) translate(-14.000000, -28.229131) translate(0.000000, 14.729131)">
+                <path d="M27.0021559,26.7999654 L6.67361202,26.7999654 C6.22172319,26.7999654 5.85537086,26.4342314 5.85537086,25.9833492 L5.85537086,8.97407348 C5.85537086,8.52300474 6.22153629,8.15719149 6.67361202,8.15686385 L10.2979028,8.15686385 L10.2979028,2.42512051 C10.2979028,1.09475625 11.3786473,0.0164193655 12.711387,0.0164193655 C14.0445233,0.0164193655 15.1250695,1.09475625 15.1250695,2.42512051 L15.1250695,8.15686385 L18.5009338,8.15686385 L18.5009338,2.42512051 C18.5009338,1.09475625 19.5816783,0.0164193655 20.914418,0.0164193655 C22.2475543,0.0164193655 23.3279023,1.09475625 23.3279023,2.42512051 L23.3279023,8.15686385 L27.0021559,8.15686385 C27.2193934,8.15681136 27.4277485,8.24289313 27.5813587,8.39616104 C27.7349688,8.54942896 27.8211902,8.75731992 27.8211902,8.97407348 L27.8211902,25.9833492 C27.8211902,26.4344951 27.4543091,26.7999654 27.0021559,26.7999654 M2.41368249,26.8043175 C1.08094274,26.8043175 0,25.7257828 0,24.396012 L0,14.6142245 C0,13.2846515 1.08054621,12.2065124 2.41368249,12.2065124 C3.74622398,12.2065124 4.82696846,13.2846515 4.82696846,14.6142245 L4.82696846,24.396012 C4.82696846,25.7259806 3.74642224,26.8043175 2.41368249,26.8043175" id="形状"></path>
+            </g>
+            <g id="shapeA" transform="translate(20.153322, 14.922487) scale(-1, 1) rotate(-180.000000) translate(-20.153322, -14.922487) translate(6.153322, 0.422487)">
+                <path d="M25.2453809,14.8645837 C23.9142872,14.8645837 22.835755,13.7735501 22.835755,12.428369 L22.835755,2.53322312 C22.835755,1.18824212 23.9142872,0.0976088161 25.2453809,0.0976088161 C26.5758807,0.0976088161 27.6548088,1.18824212 27.6548088,2.53322312 L27.6548088,12.428369 C27.6548088,13.7737503 26.5758807,14.8645837 25.2453809,14.8645837 M5.80349633,21.6325137 C6.13763097,21.6374522 6.44849574,21.460055 6.61698905,21.1682882 C6.78548236,20.8765215 6.78548236,20.5156183 6.61698905,20.2238515 C6.44849574,19.9320848 6.13763097,19.7546876 5.80349633,19.7596261 C5.29723671,19.7671087 4.89071419,20.1841693 4.89071419,20.6960699 C4.89071419,21.2079705 5.29723671,21.6250311 5.80349633,21.6325137 L5.80349633,21.6325137 Z M16.7639886,20.6959698 C16.7750405,20.3542555 16.6010357,20.033606 16.3100354,19.8594415 C16.0190351,19.6852771 15.657287,19.6852771 15.3662867,19.8594415 C15.0752864,20.033606 14.9012817,20.3542555 14.9123335,20.6959698 C14.928668,21.2010236 15.3383524,21.6019059 15.8381611,21.6019059 C16.3379697,21.6019059 16.7476541,21.2010236 16.7639886,20.6959698 Z M0.862120431,16.0672821 L20.7800318,16.0672821 C21.2992078,16.0672821 21.6869569,16.5509629 21.5798756,17.0654617 C20.9213553,20.239905 18.9224386,22.9154586 16.2093828,24.4611562 L17.9119951,27.5667596 C17.9674152,27.6677193 17.9808653,27.7868122 17.9493827,27.8978044 C17.9179001,28.0087966 17.8440674,28.1025826 17.7441486,28.1585032 C17.6443377,28.2146597 17.5265257,28.2283484 17.4167169,28.1965478 C17.306908,28.1647472 17.2141307,28.0900719 17.1588633,27.9890047 L15.4433854,24.8597877 C13.9950906,25.5385247 12.4175937,25.8891002 10.821274,25.8869841 C9.22481328,25.8892295 7.6471602,25.5386493 6.19876682,24.8597877 L4.48289309,27.989405 C4.36428298,28.1925314 4.10726669,28.2632426 3.9032069,28.1488902 C3.69914712,28.0345378 3.62224629,27.7767039 3.72976129,27.5673599 L5.43237357,24.4611562 C2.71991151,22.9154586 0.720203086,20.239905 0.0616828527,17.0654617 C-0.0452005035,16.551163 0.342548561,16.0672821 0.862120431,16.0672821" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>