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

package/es/blocklet/oauth/federated.js

@@ -0,0 +1,81 @@
+/* eslint-disable react/no-unstable-nested-components */
+import Box from '@mui/material/Box';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useContext, useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import Button from '@arcblock/ux/lib/Button';
+import { Divider } from '@mui/material';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useBlockletContext } from '../../contexts/blocklet';
+import FederatedSiteList from './federated-site-list';
+import FederatedJoinDialog from './federated-join-dialog';
+import FederatedInviteDialog from './federated-invite-dialog';
+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 FederatedLogin() {
+  const federatedInviteRef = useRef(null);
+  const federatedJoinRef = useRef(null);
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const showInvite = useMemoizedFn(() => {
+    const link = blocklet.site?.domainAliases?.[0]?.href;
+    if (link) {
+      try {
+        const url = new URL(link);
+        federatedInviteRef.current?.open({
+          link: url.origin
+        });
+      } catch {
+        Toast.error(t('federated.failedToGetFederatedLoginLink'));
+      }
+    }
+  }, [blocklet.site?.domainAliases?.[0]?.href]);
+  const joinInvite = useMemoizedFn(() => {
+    federatedJoinRef.current?.open(() => {
+      refreshBlocklet();
+    });
+  }, [refreshBlocklet]);
+  if (blocklet.settings.federated?.sites.length > 0) {
+    const isMaster = blocklet.settings.federated?.config.isMaster !== false;
+    return /*#__PURE__*/_jsx(FederatedSiteList, {
+      mode: isMaster ? 'master' : 'member'
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "200px",
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        onClick: showInvite,
+        children: t('federated.inviteJoinFederatedLogin')
+      }), /*#__PURE__*/_jsx(Divider, {
+        sx: {
+          width: '150px',
+          color: 'rgba(0, 0, 0, 0.3)'
+        },
+        children: "OR"
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        onClick: joinInvite,
+        children: t('federated.joinFederatedLogin')
+      })]
+    }), /*#__PURE__*/_jsx(FederatedInviteDialog, {
+      ref: federatedInviteRef
+    }), /*#__PURE__*/_jsx(FederatedJoinDialog, {
+      ref: federatedJoinRef
+    })]
+  });
+}

package/es/blocklet/oauth/index.js

@@ -0,0 +1,69 @@
+import Empty from '@arcblock/ux/lib/Empty';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { Box } from '@mui/material';
+import { useCreation } from 'ahooks';
+import { useContext, useState } from 'react';
+import OAuthAuth0 from './auth0';
+import CommonSettings from './common-settings';
+import FederatedLogin from './federated';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function OAuth() {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const tabs = [{
+    label: /*#__PURE__*/_jsx(Box, {
+      textAlign: "center",
+      width: "100%",
+      children: t('oauth.commonSettings')
+    }),
+    value: 'settings'
+  }, {
+    label: /*#__PURE__*/_jsx(Box, {
+      textAlign: "center",
+      width: "100%",
+      children: t('oauth.federated')
+    }),
+    value: 'federated'
+  }, {
+    label: /*#__PURE__*/_jsx(Box, {
+      textAlign: "center",
+      width: "100%",
+      children: "Auth0"
+    }),
+    value: 'auth0'
+  }, {
+    label: /*#__PURE__*/_jsx(Box, {
+      textAlign: "center",
+      width: "100%",
+      children: t('oauth.moreLogin')
+    }),
+    value: 'more'
+  }];
+  const [currentTab, setCurrentTab] = useState(tabs[0].value);
+  const contents = useCreation(() => ({
+    auth0: /*#__PURE__*/_jsx(OAuthAuth0, {}),
+    federated: /*#__PURE__*/_jsx(FederatedLogin, {}),
+    more: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(Empty, {
+        children: t('oauth.comingSoon')
+      })
+    }),
+    settings: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(CommonSettings, {})
+    })
+  }), [t]);
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      tabs: tabs,
+      current: currentTab,
+      onChange: setCurrentTab
+    }), /*#__PURE__*/_jsx(Box, {
+      marginTop: "10px",
+      children: contents[currentTab]
+    })]
+  });
+}
+export default OAuth;

package/es/blocklet/overview.js

@@ -0,0 +1,293 @@
+import Button from '@arcblock/ux/lib/Button';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import { encode as encodeBase32 } from '@abtnode/util/lib/base32';
+import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
+import Empty from '@arcblock/ux/lib/Empty';
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tag from '@arcblock/ux/lib/Tag';
+import { getDisplayName, getWhoCanAccess } from '@blocklet/meta/lib/util';
+import Spinner from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import { useBlockletContext } from '../contexts/blocklet';
+import { useNodeContext } from '../contexts/node';
+import DidAddress from '../did-address';
+import { formatToDatetime, getExplorerLink, sortDomains } from '../util';
+import DomainStatus from './router/domain-status';
+import BlockletStatus from './status';
+import { DomainType } from './types';
+import { isServerless } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const WalletType = {
+  arcblock: 'ArcBlock',
+  ethereum: 'Ethereum'
+};
+function DomainLink({
+  domain,
+  children
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    href,
+    accessibility
+  } = domain;
+  if (!accessibility || accessibility.loading) {
+    return /*#__PURE__*/_jsxs(LinkDiv, {
+      children: [children, /*#__PURE__*/_jsx(Tooltip, {
+        title: t('blocklet.router.checkUrlAccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/_jsx("span", {
+          className: "status",
+          children: /*#__PURE__*/_jsx(Spinner, {
+            size: 12
+          })
+        })
+      })]
+    });
+  }
+  if (!accessibility.accessible) {
+    return /*#__PURE__*/_jsx(LinkDiv, {
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: t('blocklet.router.urlInaccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/_jsx("span", {
+          children: children
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(LinkDiv, {
+    children: /*#__PURE__*/_jsx("a", {
+      href: href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    })
+  });
+}
+DomainLink.propTypes = {
+  domain: DomainType.isRequired,
+  children: PropTypes.any.isRequired
+};
+const LinkDiv = styled.span`
+  &,
+  & > * {
+    color: #222;
+    font-size: 18px;
+  }
+
+  .status {
+    margin-left: 8px;
+  }
+`;
+export default function BlockletOverview() {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    info: nodeInfo,
+    inService
+  } = useNodeContext();
+  const [showAllDomains, setShowAllDomains] = useState(false);
+  const [showAllDIDs, setShowAllDIDs] = useState(false);
+  const {
+    blocklet,
+    loadingRuntimeInfo
+  } = useBlockletContext();
+  const {
+    appDid,
+    appPid,
+    migratedFrom = []
+  } = blocklet;
+  const chainType = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_CHAIN_TYPE')?.value;
+  const infoRows = [appDid ? {
+    name: t('blocklet.appId'),
+    value: /*#__PURE__*/_jsx(DidAddress, {
+      did: appDid
+    })
+  } : null, appPid ? {
+    name: t('blocklet.appPid'),
+    value: /*#__PURE__*/_jsx(DidAddress, {
+      did: appPid
+    })
+  } : null, migratedFrom?.length > 1 ? {
+    name: t('blocklet.alsoKnownAs'),
+    value: /*#__PURE__*/_jsxs("div", {
+      children: [(showAllDIDs ? migratedFrom.slice(1) : migratedFrom.slice(1, 2)).map(x => /*#__PURE__*/_jsx(DidAddress, {
+        did: x.appDid
+      })), migratedFrom.length > 2 && /*#__PURE__*/_jsx(Button, {
+        style: {
+          marginLeft: '18px'
+        },
+        endIcon: showAllDIDs ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {}),
+        onClick: () => setShowAllDIDs(!showAllDIDs),
+        children: showAllDIDs ? t('common.collapseAll') : t('blocklet.router.showAllDIDs')
+      })]
+    })
+  } : null, {
+    name: t('common.name'),
+    value: getDisplayName(blocklet, true)
+  }, {
+    name: t('common.status'),
+    value: /*#__PURE__*/_jsx(BlockletStatus, {
+      status: blocklet.status,
+      source: blocklet.source
+    })
+  }, isServerless(blocklet) ? {
+    name: 'NFT',
+    value: /*#__PURE__*/_jsx(DidAddress, {
+      external: true,
+      href: getExplorerLink(blocklet?.controller?.chainHost, blocklet?.controller?.nftId, 'asset'),
+      did: blocklet?.controller?.nftId
+    })
+  } : null, {
+    name: t('blocklet.installedAt'),
+    value: formatToDatetime(blocklet.installedAt, locale)
+  }, {
+    name: t('blocklet.overview.accessControl'),
+    value: t(`team.whoCanAccess.${getWhoCanAccess(blocklet)}.title`)
+  }, {
+    name: t('common.owner'),
+    value: blocklet.settings?.owner ? /*#__PURE__*/_jsx(DidAddress, {
+      did: blocklet.settings.owner.did
+    }) : '--'
+  }, {
+    name: t('blocklet.config.walletType.name'),
+    value: WalletType[chainType || 'arcblock'] || chainType
+  }, blocklet.externalSkSource ? {
+    name: t('blocklet.skSource'),
+    value: blocklet.externalSkSource
+  } : null].filter(Boolean);
+  if (inService) {
+    infoRows.push({
+      name: t('common.serverDid'),
+      value: /*#__PURE__*/_jsx(DidAddress, {
+        did: nodeInfo.did
+      })
+    }, {
+      name: t('common.serverVersion'),
+      value: /*#__PURE__*/_jsx(Tag, {
+        children: nodeInfo.version
+      })
+    });
+  }
+  const renderRows = rows => rows.map(row => {
+    return /*#__PURE__*/_jsx(InfoRow, {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 120,
+      name: row.name,
+      nameFormatter: () => row.name,
+      children: row.value
+    }, row.name);
+  });
+  const domains = sortDomains(blocklet.site?.domainAliases);
+  const displayDomains = [];
+  const hiddenDomains = [];
+  const pidBase32 = encodeBase32(blocklet.appPid);
+  domains.forEach(domain => {
+    const value = domain.value || '';
+    if (isDidDomain(value) && !value.startsWith(pidBase32)) {
+      hiddenDomains.push(domain);
+    } else {
+      displayDomains.push(domain);
+    }
+  });
+  return /*#__PURE__*/_jsxs(Div, {
+    component: "div",
+    children: [/*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: /*#__PURE__*/_jsx(Box, {
+        className: "title first",
+        mb: 0,
+        children: t('common.domain')
+      })
+    }), blocklet.status !== 'running' && /*#__PURE__*/_jsx(Box, {
+      mt: -2,
+      mb: 1.5,
+      children: /*#__PURE__*/_jsx(Alert, {
+        severity: "warning",
+        children: t('blocklet.router.noRunning')
+      })
+    }), (showAllDomains ? domains : displayDomains).map((domain, index) => /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      mt: index ? 3 : 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/_jsx(DomainStatus, {
+          domain: domain,
+          filters: ['domain']
+        }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
+          ml: 2,
+          mr: 0.5,
+          children: /*#__PURE__*/_jsx(DomainLink, {
+            domain: domain,
+            target: "_blank",
+            children: domain.value
+          })
+        }), /*#__PURE__*/_jsx(DomainStatus, {
+          domain: domain,
+          filters: ['http']
+        }, `${domain.value}-http`), /*#__PURE__*/_jsx("span", {
+          style: {
+            marginLeft: 12
+          }
+        })]
+      })
+    }, domain.value)), hiddenDomains.length > 0 && /*#__PURE__*/_jsx("div", {
+      style: {
+        marginLeft: '20px',
+        marginTop: '12px'
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        endIcon: showAllDomains ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {}),
+        onClick: () => setShowAllDomains(!showAllDomains),
+        children: showAllDomains ? t('common.collapseAll') : t('blocklet.router.showAllDomains')
+      })
+    }), !domains.length && (loadingRuntimeInfo ? /*#__PURE__*/_jsx(Spinner, {
+      size: 16
+    }) : /*#__PURE__*/_jsx(Empty, {
+      children: t('common.empty')
+    })), /*#__PURE__*/_jsx("div", {
+      className: "title",
+      children: /*#__PURE__*/_jsx("span", {
+        children: t('common.basicInfo')
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "basicInfo",
+      children: renderRows(infoRows)
+    })]
+  });
+}
+BlockletOverview.propTypes = {};
+const Div = styled(Typography)`
+  .title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-top: ${props => props.theme.spacing(5)};
+    margin-bottom: ${props => props.theme.spacing(3)};
+    &.first {
+      margin-top: 0;
+    }
+  }
+`;

package/es/blocklet/page-group.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import Tag from '../tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BlockletPageGroup({
+  group,
+  ...rest
+}) {
+  if (group) {
+    return /*#__PURE__*/_jsx(Tag, {
+      type: "reverse",
+      ...rest,
+      children: group
+    });
+  }
+  return null;
+}
+BlockletPageGroup.propTypes = {
+  group: PropTypes.string.isRequired
+};

package/es/blocklet/preferences/app-sk.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import useSetState from 'react-use/lib/useSetState';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import Box from '@mui/material/Box';
+import { APP_STRUCT_VERSION } from '@abtnode/constant';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { isInProgress } from '@blocklet/meta/lib/util';
+import Toast from '@arcblock/ux/lib/Toast';
+import FormTextInput from '../../form/form-text-input';
+import Confirm from '../../confirm';
+import { useSessionContext } from '../../contexts/session';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { isRunning } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AppSk({
+  initialValue,
+  onChange,
+  disabled,
+  loading
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useSessionContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [state, setState] = useSetState({
+    newAppSk: '',
+    isConnectOpen: false
+  });
+  const onAppSkChange = value => {
+    setState({
+      newAppSk: value
+    });
+    return false;
+  };
+  const onConfirm = async v => {
+    try {
+      await onChange(v);
+    } finally {
+      setState({
+        newAppSk: ''
+      });
+    }
+  };
+  const onClose = () => setState({
+    isConnectOpen: false
+  });
+  const triggers = blocklet.structVersion === APP_STRUCT_VERSION ? [{
+    key: 'rotate-with-did-wallet',
+    title: 'Migrate with DID Wallet',
+    handler: () => {
+      if (isRunning(blocklet.status)) {
+        Toast.error(t('blocklet.error.isRunning'));
+        return;
+      }
+      if (isInProgress(blocklet.status)) {
+        Toast.error(t('blocklet.error.isInProgress'));
+        return;
+      }
+      setState({
+        isConnectOpen: true
+      });
+    }
+  }] : [];
+  return [/*#__PURE__*/_jsx(FormTextInput, {
+    disabled: disabled,
+    loading: loading,
+    initialValue: initialValue,
+    onSubmit: onAppSkChange,
+    triggers: triggers,
+    secure: true
+  }), state.newAppSk && /*#__PURE__*/_jsx(Confirm, {
+    title: t('blocklet.config.appSkTitle'),
+    description: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: t('blocklet.config.appSkChangeTip')
+      }), /*#__PURE__*/_jsx(Box, {
+        fontWeight: "bold",
+        mt: 2,
+        children: t('blocklet.config.appDidChangeTip')
+      }), /*#__PURE__*/_jsxs(UL, {
+        children: [/*#__PURE__*/_jsx("li", {
+          children: t('blocklet.config.appDidChangeTipL1')
+        }), /*#__PURE__*/_jsx("li", {
+          children: t('blocklet.config.appDidChangeTipL2')
+        })]
+      })]
+    }),
+    confirm: t('confirm'),
+    cancel: t('cancel'),
+    onConfirm: () => onConfirm(state.newAppSk),
+    onCancel: () => setState({
+      newAppSk: ''
+    })
+  }), /*#__PURE__*/_jsx(DidConnect, {
+    popup: true,
+    open: state.isConnectOpen,
+    forceConnected: false,
+    saveConnect: false,
+    action: "rotate-key-pair",
+    checkFn: api.get,
+    checkTimeout: 5 * 60 * 1000,
+    onSuccess: onClose,
+    extraParams: {
+      appDid: blocklet.appDid
+    },
+    messages: {
+      title: t('setup.keyPair.title'),
+      scan: t('setup.keyPair.scan'),
+      confirm: t('setup.keyPair.confirm'),
+      success: t('setup.keyPair.success')
+    },
+    onClose: onClose
+  })];
+}
+AppSk.propTypes = {
+  initialValue: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool
+};
+AppSk.defaultProps = {
+  initialValue: 'default',
+  onChange: () => {},
+  disabled: false,
+  loading: false
+};
+const UL = styled('ul')`
+  padding-left: 16px;
+  li {
+    margin-top: 8px;
+    list-style: disk;
+    font-weight: bold;
+  }
+`;