@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/blocklet/storage/preview-nft.js

@@ -0,0 +1,286 @@
+import React from "react";
+import { useState } from 'react';
+import ReactPlaceholder from 'react-placeholder';
+import { string } from 'prop-types';
+import { Dialog, DialogContent, IconButton } from '@mui/material';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var EmptySpacesNFT = function EmptySpacesNFT(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsxs("g", {
+      filter: "url(#a)",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M56.97 2a12 12 0 0 0-8.485 3.515l-40.97 40.97A12 12 0 0 0 4 54.971V240c0 6.627 5.373 12 12 12h196c6.627 0 12-5.373 12-12V14c0-6.627-5.373-12-12-12H56.97z",
+        fill: "#DDD"
+      }), /*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M49.192 6.222l-40.97 40.97A11 11 0 0 0 5 54.971V240c0 6.075 4.925 11 11 11h196c6.075 0 11-4.925 11-11V14c0-6.075-4.925-11-11-11H56.97a11 11 0 0 0-7.778 3.222zm-.707-.707A12 12 0 0 1 56.971 2H212c6.627 0 12 5.373 12 12v226c0 6.627-5.373 12-12 12H16c-6.627 0-12-5.373-12-12V54.97a12 12 0 0 1 3.515-8.485l40.97-40.97z",
+        fill: "#000",
+        fillOpacity: ".08"
+      }), /*#__PURE__*/_jsx("mask", {
+        id: "b",
+        style: {
+          maskType: "alpha"
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "4",
+        y: "2",
+        width: "220",
+        height: "250",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M56.97 2a12 12 0 0 0-8.485 3.515l-40.97 40.97A12 12 0 0 0 4 54.971V240c0 6.627 5.373 12 12 12h196c6.627 0 12-5.373 12-12V14c0-6.627-5.373-12-12-12H56.97z",
+          fill: "#D9D9D9"
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        mask: "url(#b)",
+        children: [/*#__PURE__*/_jsx("path", {
+          opacity: ".5",
+          fill: "url(#c)",
+          d: "M4 2h220v128H4z"
+        }), /*#__PURE__*/_jsx("path", {
+          opacity: ".1",
+          fill: "url(#d)",
+          d: "M4 130h220v122H4z"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M33.045 169h-3.767v-11.636h3.887c1.14 0 2.12.233 2.937.698a4.61 4.61 0 0 1 1.881 1.995c.44.863.659 1.899.659 3.108 0 1.212-.222 2.254-.665 3.125a4.668 4.668 0 0 1-1.909 2.011c-.833.466-1.84.699-3.023.699zm-2.01-1.534h1.914c.886 0 1.623-.167 2.21-.5a3.152 3.152 0 0 0 1.318-1.46c.292-.64.438-1.421.438-2.341 0-.913-.146-1.688-.438-2.324a3.095 3.095 0 0 0-1.29-1.449c-.572-.33-1.282-.494-2.13-.494h-2.023v8.568zm11.546-10.102V169h-1.756v-11.636h1.756zM48.905 169h-3.767v-11.636h3.886c1.14 0 2.12.233 2.938.698a4.609 4.609 0 0 1 1.88 1.995c.44.863.66 1.899.66 3.108 0 1.212-.222 2.254-.665 3.125a4.667 4.667 0 0 1-1.91 2.011c-.833.466-1.84.699-3.022.699zm-2.011-1.534h1.914c.887 0 1.623-.167 2.21-.5a3.151 3.151 0 0 0 1.319-1.46c.291-.64.437-1.421.437-2.341 0-.913-.146-1.688-.437-2.324a3.095 3.095 0 0 0-1.29-1.449c-.572-.33-1.282-.494-2.13-.494h-2.023v8.568zm20.372-7.046a1.662 1.662 0 0 0-.75-1.25c-.44-.299-.993-.448-1.66-.448-.477 0-.89.075-1.238.227a1.91 1.91 0 0 0-.813.613c-.189.258-.284.552-.284.881 0 .277.065.515.194.716.132.201.304.369.516.506.216.132.447.244.694.335.246.087.483.159.71.216l1.136.295c.371.091.752.214 1.142.37.39.155.752.36 1.086.613.333.254.602.568.806.944.209.374.313.823.313 1.346 0 .659-.17 1.244-.511 1.756-.338.511-.828.915-1.472 1.21-.64.295-1.415.443-2.324.443-.871 0-1.625-.138-2.261-.415-.637-.276-1.135-.668-1.495-1.176-.36-.511-.558-1.117-.596-1.818h1.761c.034.421.17.771.41 1.051.242.277.55.483.925.62.38.132.794.198 1.245.198.496 0 .937-.077 1.324-.233.39-.159.697-.378.92-.659a1.56 1.56 0 0 0 .335-.994c0-.345-.098-.627-.295-.847a2.191 2.191 0 0 0-.79-.545 7.725 7.725 0 0 0-1.12-.381l-1.374-.375c-.932-.253-1.67-.627-2.216-1.119-.542-.492-.813-1.144-.813-1.955 0-.67.182-1.255.546-1.755.363-.5.856-.888 1.477-1.165.621-.28 1.322-.42 2.102-.42.788 0 1.483.138 2.085.414.607.277 1.084.658 1.432 1.142.349.481.53 1.034.546 1.659h-1.693zm3.813 11.853v-12h1.66v1.415h.142c.098-.182.24-.393.426-.631.185-.239.443-.447.772-.625.33-.182.766-.273 1.307-.273.705 0 1.334.178 1.887.534.553.356.987.869 1.3 1.54.319.67.478 1.477.478 2.42 0 .944-.157 1.752-.472 2.427-.314.67-.746 1.187-1.295 1.551-.55.36-1.176.539-1.88.539-.53 0-.965-.089-1.302-.267a2.457 2.457 0 0 1-.784-.625 4.667 4.667 0 0 1-.437-.636h-.103v4.631H71.08zm1.665-7.637c0 .614.09 1.152.267 1.614.178.462.436.824.773 1.085.337.258.75.387 1.239.387.507 0 .931-.135 1.273-.404.34-.273.598-.642.772-1.108.178-.466.267-.99.267-1.574 0-.575-.087-1.092-.261-1.551-.17-.458-.428-.82-.773-1.085-.34-.265-.767-.398-1.278-.398-.493 0-.91.127-1.25.381-.337.254-.593.608-.767 1.062-.175.455-.262.985-.262 1.591zm10.75 4.557a3.557 3.557 0 0 1-1.5-.307 2.523 2.523 0 0 1-1.062-.903c-.258-.394-.386-.877-.386-1.449 0-.492.094-.898.283-1.216.19-.318.446-.57.768-.756a4.036 4.036 0 0 1 1.08-.42c.397-.095.802-.167 1.215-.216l1.273-.148c.325-.041.562-.108.71-.198.148-.091.222-.239.222-.444v-.039c0-.497-.14-.881-.42-1.154-.277-.273-.69-.409-1.24-.409-.572 0-1.022.127-1.352.381-.325.25-.55.528-.676.835l-1.597-.364c.19-.53.466-.958.83-1.284.368-.329.79-.568 1.267-.716.477-.151.98-.227 1.506-.227.348 0 .718.042 1.108.125.394.08.761.227 1.102.443.345.216.627.525.847.926.22.398.33.915.33 1.552V169h-1.66v-1.193h-.068c-.11.22-.275.435-.495.648-.22.212-.501.388-.846.528s-.758.21-1.239.21zm.37-1.363c.47 0 .87-.093 1.204-.279.337-.185.593-.428.767-.727.178-.303.267-.627.267-.972v-1.125c-.06.061-.178.118-.352.171-.17.049-.365.093-.585.13-.22.034-.434.067-.642.097l-.523.068c-.33.042-.63.112-.903.21a1.553 1.553 0 0 0-.648.427c-.16.181-.239.424-.239.727 0 .42.156.738.466.954.31.212.707.319 1.188.319zm9.876 1.346c-.845 0-1.572-.191-2.182-.574a3.796 3.796 0 0 1-1.398-1.596c-.325-.678-.488-1.455-.488-2.33 0-.886.166-1.668.5-2.346a3.832 3.832 0 0 1 1.409-1.597c.606-.383 1.32-.574 2.142-.574.663 0 1.254.123 1.773.369.519.243.937.584 1.255 1.023.322.44.514.953.574 1.54h-1.653c-.091-.409-.3-.761-.625-1.057-.322-.295-.754-.443-1.296-.443a2.11 2.11 0 0 0-1.244.375c-.352.246-.627.598-.824 1.057-.197.454-.295.992-.295 1.613 0 .637.096 1.186.29 1.648.193.462.466.82.818 1.074.356.254.774.381 1.255.381.322 0 .614-.059.875-.177.266-.121.487-.293.665-.517.182-.223.309-.492.38-.806h1.654a3.211 3.211 0 0 1-.55 1.511 3.165 3.165 0 0 1-1.234 1.045c-.511.254-1.111.381-1.8.381zm9.163 0c-.859 0-1.6-.184-2.221-.551a3.732 3.732 0 0 1-1.432-1.563c-.333-.674-.5-1.464-.5-2.369 0-.894.167-1.682.5-2.363a3.887 3.887 0 0 1 1.409-1.597c.606-.383 1.314-.574 2.125-.574.493 0 .97.082 1.432.244.462.163.877.419 1.244.767.368.349.657.802.87 1.358.212.553.318 1.226.318 2.017v.603H99.71v-1.273h5.273c0-.447-.091-.843-.273-1.187a2.052 2.052 0 0 0-.767-.824c-.326-.201-.708-.302-1.148-.302a2.22 2.22 0 0 0-1.25.353 2.364 2.364 0 0 0-.818.909 2.626 2.626 0 0 0-.284 1.21v.994c0 .584.102 1.08.307 1.489.208.409.498.722.869.938.372.212.805.318 1.301.318a2.7 2.7 0 0 0 .881-.137c.265-.094.494-.234.688-.42.193-.186.341-.415.443-.688l1.608.29c-.129.474-.36.888-.693 1.244-.33.353-.745.627-1.245.824-.496.194-1.062.29-1.699.29z",
+          fill: "#fff"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M117.604 47.263L121.523 45h14.267v41.862h-14.267l-15.335-8.854V53.854l1.818-1.05 3.2 1.848-1.818 1.05V76.16l12.993 7.502h10.209V48.2h-10.209l-1.577.91-3.2-1.847z",
+          fill: "url(#e)"
+        }), /*#__PURE__*/_jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M119.402 76.16V55.701L106.409 48.2H96.2v35.462h10.209l1.582-.913 3.2 1.847-3.924 2.266H93V45h14.267l15.335 8.854v24.154l-1.813 1.046-3.2-1.847 1.813-1.047z",
+          fill: "url(#f)"
+        }), /*#__PURE__*/_jsxs("g", {
+          clipPath: "url(#g)",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          fill: "#fff",
+          children: [/*#__PURE__*/_jsx("path", {
+            d: "M50.928 216.089l1.034 2.852h-2.503l1.028-2.842a4.95 4.95 0 0 0 .107-.338 7.17 7.17 0 0 0 .111-.409c.075.297.15.542.223.737zm2.28 5.591h.796l-2.775-7.352h-1.043l-2.774 7.352h.795a.338.338 0 0 0 .223-.077.425.425 0 0 0 .127-.179l.615-1.705h3.07l.617 1.705a.399.399 0 0 0 .126.184.339.339 0 0 0 .223.072zm4.823-.963a2.023 2.023 0 0 1-.67.098h-1.455v-2.453h1.456c.5 0 .871.106 1.11.318.24.208.36.495.36.86 0 .184-.028.355-.083.512a1.005 1.005 0 0 1-.262.399 1.2 1.2 0 0 1-.456.266zm-2.125-3.128v-2.406h1.237c.498 0 .865.095 1.101.286.236.192.355.497.355.917 0 .369-.125.662-.374.881-.246.215-.623.322-1.13.322h-1.189zm2.358-3.128a4.106 4.106 0 0 0-1.12-.133h-2.27v7.352h2.507c.391 0 .74-.051 1.048-.154.307-.102.566-.247.776-.435.21-.188.37-.409.48-.665.11-.26.165-.547.165-.861 0-.904-.506-1.462-1.518-1.674.22-.075.41-.169.572-.281a1.79 1.79 0 0 0 .403-.379c.106-.144.186-.297.237-.461.052-.164.078-.335.078-.512a2.1 2.1 0 0 0-.146-.804 1.49 1.49 0 0 0-.441-.609 2.073 2.073 0 0 0-.771-.384zm7.535.778h-2.212v6.441h-1.028v-6.441h-2.222v-.911H65.8v.911zm2.439.564h-1.13v1.193h1.13v-1.193zm-1.13 2.983h1.13v1.193h-1.13v-1.193z",
+            fillOpacity: ".8"
+          }), /*#__PURE__*/_jsx("path", {
+            d: "M28.247 221.771V214h3.894c.99.072 1.765.944 1.765 1.998v3.77c0 1.106-.85 2.003-1.897 2.003h-3.762zM36.355 214h-1.011v7.783h1.01V214zm-7.097 6.704v-5.642h2.751c.49 0 .886.419.886.936v3.77c0 .517-.396.936-.886.936h-2.75zM37.775 214v7.771h3.762c1.047 0 1.897-.897 1.897-2.003v-3.77c0-1.054-.774-1.926-1.765-1.998h-3.894zm6.946 1.803h1.13v1.193h-1.13v-1.193zm1.13 2.983h-1.13v1.193h1.13v-1.193zm-7.065-3.724v5.642h2.75c.49 0 .887-.419.887-.936v-3.77c0-.517-.397-.936-.886-.936h-2.751z"
+          })]
+        }), /*#__PURE__*/_jsx("circle", {
+          cx: "191.32",
+          cy: "218",
+          r: "10",
+          fill: "url(#h)"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M192.064 213.333l.976-.564h3.554v10.427h-3.286a1 1 0 0 1-.5-.134l-3.588-2.071v-6.016l.453-.262.797.46-.453.262v5.096l3.237 1.868h2.543v-8.833h-2.543l-.393.227-.797-.46z",
+          fill: "#fff"
+        }), /*#__PURE__*/_jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M192.512 220.531v-5.096l-3.237-1.869h-2.543v8.833h2.543l.394-.227.797.46-.977.564h-3.554v-10.427h3.554l3.82 2.206v6.016l-.452.261-.797-.461.452-.26z",
+          fill: "#fff"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsxs("filter", {
+        id: "a",
+        x: "0",
+        y: "0",
+        width: "228",
+        height: "258",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB",
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "SourceAlpha",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "2"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          stdDeviation: "2"
+        }), /*#__PURE__*/_jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          values: "0 0 0 0 0.0631944 0 0 0 0 0.242785 0 0 0 0 0.403472 0 0 0 0.2 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_1410_22507"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_1410_22507",
+          result: "shape"
+        })]
+      }), /*#__PURE__*/_jsx("pattern", {
+        id: "c",
+        patternContentUnits: "objectBoundingBox",
+        width: "1",
+        height: "1",
+        children: /*#__PURE__*/_jsx("use", {
+          xlinkHref: "#i",
+          transform: "scale(.00455 .00781)"
+        })
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "d",
+        x1: "114",
+        y1: "130",
+        x2: "114",
+        y2: "252",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#101010"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#272727"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "e",
+        x1: "120.989",
+        y1: "45",
+        x2: "120.989",
+        y2: "86.862",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#fff",
+          stopOpacity: ".4"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#fff"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "f",
+        x1: "107.801",
+        y1: "45",
+        x2: "107.801",
+        y2: "86.862",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#fff"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#fff",
+          stopOpacity: ".4"
+        })]
+      }), /*#__PURE__*/_jsxs("radialGradient", {
+        id: "h",
+        cx: "0",
+        cy: "0",
+        r: "1",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "matrix(17 -8.76924 6.97565 13.52294 183.166 221)",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#016BED"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: ".699",
+          stopColor: "#4498FB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#9DFFE8"
+        })]
+      }), /*#__PURE__*/_jsx("clipPath", {
+        id: "g",
+        children: /*#__PURE__*/_jsx("path", {
+          fill: "#fff",
+          transform: "translate(28 214)",
+          d: "M0 0h40.32v8H0z"
+        })
+      }), /*#__PURE__*/_jsx("image", {
+        id: "i",
+        width: "220",
+        height: "128",
+        xlinkHref: "data:image/png;base64,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"
+      })]
+    })]
+  });
+};
+EmptySpacesNFT.defaultProps = {
+  width: "228",
+  height: "258",
+  viewBox: "0 0 228 258",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+};
+function PreviewSpaceNft({
+  src,
+  alt
+}) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ReactPlaceholder, {
+      ready: showEmptySpaceNFT,
+      customPlaceholder:
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      _jsx("img", {
+        style: {
+          cursor: 'pointer'
+        },
+        alt: alt,
+        src: src,
+        width: "58px",
+        height: "58px",
+        onError: () => setShowEmptySpaceNFT(true),
+        onClick: handleOpen
+      }),
+      children: /*#__PURE__*/_jsx(EmptySpacesNFT, {
+        style: {
+          cursor: 'pointer',
+          width: '58px',
+          height: '58px'
+        },
+        onClick: handleOpen
+      })
+    }), /*#__PURE__*/_jsx(Dialog, {
+      open: open,
+      onClose: handleClose,
+      "aria-labelledby": "preview-space-nft-display",
+      "aria-describedby": "preview space nft display",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /*#__PURE__*/_jsxs(DialogContent, {
+        style: {
+          padding: '8px 8px',
+          backgroundColor: 'rgba(0,0,0,0.8)'
+        },
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "close",
+          style: {
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            color: 'white'
+          },
+          children: /*#__PURE__*/_jsx(CloseOutlinedIcon, {})
+        }), showEmptySpaceNFT ? /*#__PURE__*/_jsx(EmptySpacesNFT, {
+          style: {
+            width: '100%',
+            height: '75vh'
+          }
+        }) : /*#__PURE__*/_jsx("img", {
+          src: src,
+          alt: "",
+          style: {
+            width: '100%',
+            height: '75vh',
+            objectFit: 'contain'
+          }
+        })]
+      })
+    })]
+  });
+}
+PreviewSpaceNft.propTypes = {
+  src: string.isRequired,
+  alt: string.isRequired
+};
+export default PreviewSpaceNft;

package/es/blocklet/transfer-owner.js

@@ -0,0 +1,198 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogContentText from '@mui/material/DialogContentText';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Connect from '@arcblock/did-connect/lib/Connect';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Alert from '@arcblock/ux/lib/Alert';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import ClickToCopy from '../click-to-copy';
+import { formatError, getTransferAppLink, formatToDatetime } from '../util';
+import { SessionContext } from '../contexts/session';
+import { useTeamContext } from '../contexts/team';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function TransferOwner({
+  onCancel,
+  onSuccess,
+  onError
+}) {
+  const {
+    api: sessionAPI
+  } = useContext(SessionContext);
+  const [loading, setLoading] = useState(false);
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [error, setError] = useState('');
+  const [openTransferOwner, setOpenTransferOwner] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+  const [result, setResult] = useState('');
+  const {
+    endpoint
+  } = useTeamContext();
+  const [confirmCopied, setConfirmCopied] = useState(false);
+  const onCreateSession = res => {
+    setError(null);
+    setLoading(true);
+    try {
+      setResult(res.result);
+      setActiveStep(steps.length - 1); // 跳转到最后一步
+    } catch (err) {
+      const errMsg = formatError(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleTransferOwner = () => {
+    setOpenTransferOwner(true);
+    setActiveStep(1);
+  };
+  const handleCancelTransferOwner = () => {
+    setOpenTransferOwner(false);
+    setActiveStep(0);
+  };
+  const steps = [{
+    body: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        children: t('team.transferApp.transferDialog.tips.progress')
+      }), /*#__PURE__*/_jsx(Typography, {
+        mt: 3,
+        mb: 2,
+        children: t('team.transferApp.transferDialog.tips.newOwnerPermissions')
+      })]
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('team.transferApp.transferDialog.createTransferLink'),
+    onCancel,
+    onConfirm: handleTransferOwner
+  }, {
+    body: () => {
+      return /*#__PURE__*/_jsx(Connect, {
+        action: "transfer-app-owner",
+        open: openTransferOwner,
+        locale: locale,
+        checkFn: sessionAPI.get,
+        onClose: handleCancelTransferOwner,
+        onSuccess: onCreateSession,
+        checkTimeout: 5 * 60 * 1000,
+        extraParams: {},
+        messages: {
+          title: t('team.transferApp.connectDialog.title'),
+          scan: t('team.transferApp.connectDialog.scan'),
+          confirm: t('team.transferApp.connectDialog.confirm'),
+          success: t('team.transferApp.connectDialog.success')
+        },
+        popup: true
+      });
+    }
+  }, {
+    body: () => {
+      const link = getTransferAppLink({
+        transferId: result.transferId,
+        endpoint
+      });
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: Bold,
+          dangerouslySetInnerHTML: {
+            __html: t('team.transferApp.transferDialog.createSuccessTip1')
+          }
+        }), /*#__PURE__*/_jsx(Box, {
+          component: Bold,
+          mt: 2,
+          children: /*#__PURE__*/_jsx(Bold, {
+            children: t('team.transferApp.transferDialog.createSuccessTip3')
+          })
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            component: Bold,
+            mt: 2,
+            children: /*#__PURE__*/_jsx(Bold, {
+              children: t('team.transferApp.transferDialog.createSuccessTip2', {
+                expireDate: formatToDatetime(result.expireDate, locale)
+              })
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            my: 1,
+            children: /*#__PURE__*/_jsx(ClickToCopy, {
+              children: link
+            })
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "end",
+            control: /*#__PURE__*/_jsx(Checkbox, {
+              checked: confirmCopied,
+              onChange: e => setConfirmCopied(e.target.checked)
+            }),
+            label: t('team.transferApp.transferDialog.iKnow'),
+            labelPlacement: "end"
+          })
+        })]
+      });
+    },
+    confirm: t('common.confirm'),
+    onConfirm: onSuccess
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/_jsxs(Dialog, {
+    title: /*#__PURE__*/_jsx(Bold, {
+      className: "title",
+      children: t('team.transferApp.transferDialog.title')
+    }),
+    fullWidth: true,
+    open: true,
+    showCloseButton: false,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [step.cancel && /*#__PURE__*/_jsx(Button, {
+        onClick: step.onCancel,
+        color: "inherit",
+        children: step.cancel
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: step.onConfirm,
+        color: "error",
+        disabled: loading || activeStep === steps.length - 1 && !confirmCopied,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), step.confirm]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(DialogContentText, {
+      component: "div",
+      children: typeof step.body === 'function' ? step.body() : step.body
+    }), !!error && /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+TransferOwner.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  onError: PropTypes.func
+};
+TransferOwner.defaultProps = {
+  onError: () => {}
+};
+const Bold = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  &.title {
+    font-size: 20px;
+  }
+`;

package/es/blocklet/types.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const DomainType = PropTypes.shape({
+  href: PropTypes.string,
+  accessibility: PropTypes.shape({
+    loading: PropTypes.bool,
+    accessible: PropTypes.bool
+  }),
+  domainStatus: PropTypes.shape({
+    isHttps: PropTypes.bool,
+    matchedCert: PropTypes.object
+  }),
+  dns: PropTypes.shape({
+    resolved: PropTypes.bool,
+    ip: PropTypes.string
+  })
+});

package/es/blocklet/util.js

@@ -0,0 +1,145 @@
+import sortBy from 'lodash/sortBy';
+import joinUrl from 'url-join';
+import isEmpty from 'lodash/isEmpty';
+import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
+import { forEachBlockletSync, replaceSlotToIp } from '@blocklet/meta/lib/util';
+import { BLOCKLET_APP_SPACE_ENDPOINTS } from '@blocklet/constant';
+import { SLOT_FOR_IP_DNS_SITE } from '@abtnode/constant';
+export const getServerUrl = (info, encodeURI = false) => {
+  const adminPath = process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
+  return encodeURI ? encodeURIComponent(joinUrl(window.location.origin, adminPath)) : joinUrl(window.location.origin, adminPath);
+};
+export const getLaunchAgreementUrl = (meta, info, storeUrl) => {
+  const serverUrl = getServerUrl(info);
+  const metaUrl = joinUrl(storeUrl, `/api/blocklets/${meta.did}/blocklet.json`);
+  const url = new URL(joinUrl(serverUrl, '/launch-blocklet/agreement'));
+  url.searchParams.set('blocklet_meta_url', metaUrl);
+  url.searchParams.set('from', window.location.href);
+  return url.href;
+};
+export const ensureDomainAliases = async (domainAliases, {
+  getIP
+} = {}) => {
+  if (!domainAliases || !domainAliases.length) {
+    return [];
+  }
+  if (!getIP) {
+    return domainAliases;
+  }
+  if (!domainAliases.some(x => x.value.includes(SLOT_FOR_IP_DNS_SITE))) {
+    return domainAliases;
+  }
+  const ip = await getIP();
+  if (!ip) {
+    return domainAliases;
+  }
+  return domainAliases.map(x => {
+    try {
+      x.value = replaceSlotToIp(x.value, ip);
+      return x;
+    } catch {
+      return x;
+    }
+  }).filter(Boolean);
+};
+
+/** @type {import('@abtnode/client').BlockletState} */
+export const getAppCapabilities = blocklet => {
+  const capabilities = {
+    didSpace: null
+  };
+  forEachBlockletSync(blocklet, b => {
+    if (capabilities.didSpace === BLOCKLET_APP_SPACE_ENDPOINTS.REQUIRED) {
+      return;
+    }
+    if (b?.meta?.capabilities?.didSpace) {
+      capabilities.didSpace = b.meta.capabilities.didSpace;
+    }
+  });
+  return capabilities;
+};
+
+/**
+ * @param {object} blocklet
+ * @param {{
+ *   fixRuntime:boolean|string // true, 'merge-old'
+ *   oldBlocklet: object
+ *   getIP: function
+ * }}
+ */
+export const fixBlocklet = async (blocklet, {
+  fixRuntime = true,
+  oldBlocklet,
+  getIP
+} = {}) => {
+  if (!blocklet.site) {
+    blocklet.site = {
+      domainAliases: [],
+      rules: []
+    };
+  }
+  blocklet.site.rules.forEach(rule => {
+    rule.from.pathPrefix = normalizePathPrefix(rule.from.pathPrefix || '/');
+  });
+  blocklet.site.rules = sortBy(blocklet.site.rules, i => i.from.pathPrefix);
+  if (fixRuntime === true) {
+    blocklet.site.domainAliases = await ensureDomainAliases(blocklet.site.domainAliases, {
+      getIP
+    });
+    if (blocklet.appRuntimeInfo) {
+      blocklet.appRuntimeInfo.startAt = new Date() - blocklet.appRuntimeInfo.uptime;
+    }
+    forEachBlockletSync(blocklet, b => {
+      if (b.runtimeInfo) {
+        b.runtimeInfo.startAt = new Date() - b.runtimeInfo.uptime;
+      }
+    });
+  } else if (fixRuntime === 'merge-old' && oldBlocklet) {
+    blocklet.site.domainAliases = oldBlocklet.site.domainAliases;
+    blocklet.appRuntimeInfo = oldBlocklet.appRuntimeInfo;
+    const oldComponents = {};
+    forEachBlockletSync(oldBlocklet, (component, {
+      id
+    }) => {
+      oldComponents[id] = component;
+    });
+    forEachBlockletSync(blocklet, (component, {
+      id
+    }) => {
+      const oldComponent = oldComponents[id];
+      if (oldComponent) {
+        component.runtimeInfo = oldComponent.runtimeInfo;
+        component.diskInfo = oldComponent.diskInfo;
+        component.engine = oldComponent.engine;
+      }
+    });
+  } else {
+    blocklet.site.domainAliases = [];
+  }
+  blocklet.capabilities = getAppCapabilities(blocklet);
+};
+const DEFAULT_WALLET_TYPE = 'arcblock';
+export const getWalletType = (raw, fromState = false) => {
+  let item;
+
+  // from state: migrating
+  if (fromState) {
+    item = (raw.configs || []).find(x => x.key === 'BLOCKLET_APP_CHAIN_TYPE');
+    if (item && item.value) {
+      return item.value;
+    }
+    item = (raw.environments || []).find(x => ['CHAIN_TYPE', 'BLOCKLET_APP_CHAIN_TYPE'].includes(x.key));
+    if (item && item.value) {
+      return item.value;
+    }
+    return DEFAULT_WALLET_TYPE;
+  }
+
+  // from meta: installing
+  item = (raw.environments || []).find(x => ['CHAIN_TYPE', 'BLOCKLET_APP_CHAIN_TYPE'].includes(x.name));
+  if (item && item.default) {
+    return item.default;
+  }
+  return DEFAULT_WALLET_TYPE;
+};
+export const isServerless = blocklet => !isEmpty(blocklet?.controller);