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

package/es/team/passports/trusted-factory.js

@@ -0,0 +1,343 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-nested-ternary */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import ms from 'ms';
+import { isValid } from '@arcblock/did';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputAdornment from '@mui/material/InputAdornment';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+import { MAIN_CHAIN_ENDPOINT } from '@abtnode/constant';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import useSetState from 'react-use/lib/useSetState';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { sleep, formatError } from '../../util';
+import getChainClient from '../../chain';
+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 TrustedFactory({
+  onCancel,
+  onSuccess,
+  data,
+  trustedFactories
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    roles,
+    teamDid
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [state, setState] = useSetState({
+    loading: false,
+    fetching: false,
+    fetched: [],
+    errored: [],
+    factoryAddress: data.factoryAddress || '',
+    remark: data.remark || '',
+    role: data.passport?.role || 'member',
+    ttlPolicy: data.passport?.ttlPolicy || 'never',
+    // eslint-disable-next-line no-unsafe-optional-chaining
+    ttl: ms(+data.passport?.ttl || 365 * 24 * 60 * 60 * 1000),
+    error: ''
+  });
+  const editIndex = trustedFactories.findIndex(x => x.factoryAddress === data.factoryAddress);
+  const configTrustedFactories = async () => {
+    if (state.loading) {
+      return;
+    }
+    const {
+      factoryAddress,
+      remark,
+      role,
+      ttlPolicy,
+      ttl
+    } = state;
+    const item = {
+      factoryAddress,
+      remark,
+      passport: {
+        role,
+        ttlPolicy,
+        ttl: ttlPolicy === 'never' ? 0 : ms(ttl)
+      }
+    };
+    const trustedList = [...trustedFactories];
+    if (editIndex === -1) {
+      trustedList.unshift(item);
+    } else {
+      trustedList[editIndex] = item;
+    }
+    try {
+      setState({
+        loading: true
+      });
+      await api.configTrustedFactories({
+        input: {
+          teamDid,
+          trustedFactories: trustedList
+        }
+      });
+      await sleep(800);
+      Toast.success(t('common.saveSuccess'));
+      onSuccess();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({
+        loading: false
+      });
+    }
+  };
+  useEffect(() => {
+    const fetched = state.fetched.find(x => x.address === state.factoryAddress);
+    const errored = state.errored.find(x => x.address === state.factoryAddress);
+    if (isValid(state.factoryAddress) && !state.fetching && !fetched && !errored) {
+      setState({
+        fetching: true
+      });
+      const client = getChainClient(MAIN_CHAIN_ENDPOINT);
+      client.getFactoryState({
+        address: state.factoryAddress
+      }).then(res => {
+        if (res.state) {
+          setState({
+            fetching: false,
+            fetched: [...state.fetched.filter(x => x.address !== state.factoryAddress), res.state],
+            remark: res.state.name
+          });
+        } else {
+          setState({
+            fetching: false,
+            errored: [...state.errored.filter(x => x.address !== state.factoryAddress), {
+              address: state.factoryAddress
+            }],
+            error: t('team.passport.factory404', state)
+          });
+        }
+      }).catch(err => {
+        console.error(err);
+        setState({
+          fetching: false,
+          error: formatError(err)
+        });
+      });
+    }
+  }, [state.factoryAddress, state.fetching]);
+  let tip = state.error;
+  const errored = state.factoryAddress ? state.errored.find(x => x.address === state.factoryAddress) : null;
+  if (!tip && errored) {
+    tip = t('team.passport.factory404', state);
+  }
+  const fetched = state.factoryAddress ? state.fetched.find(x => x.address === state.factoryAddress) : null;
+  if (!tip && fetched) {
+    tip = fetched.description;
+  }
+  if (!tip) {
+    tip = t('team.passport.factoryAddressTip');
+  }
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: t('team.passport.trustedFactories'),
+    open: true,
+    showCloseButton: false,
+    PaperProps: {
+      style: {
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    prepend: /*#__PURE__*/_jsx(IconButton, {
+      onClick: onCancel,
+      "data-cy": "close-trusted-factory",
+      size: "large",
+      children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+    }),
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: () => configTrustedFactories(),
+        color: "primary",
+        disabled: !state.factoryAddress || !state.remark || !state.role || state.loading || state.error || errored,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "save-trusted-factory",
+        children: [state.loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Div, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          error: !!state.error || !!errored,
+          "data-cy": "input-factory-address",
+          label: t('team.passport.factoryAddress'),
+          helperText: tip,
+          value: state.factoryAddress,
+          InputProps: {
+            endAdornment: state.fetching ? /*#__PURE__*/_jsx(InputAdornment, {
+              position: "end",
+              children: /*#__PURE__*/_jsx(Spinner, {
+                size: 16
+              })
+            }) : null
+          },
+          onChange: e => {
+            setState({
+              factoryAddress: e.target.value,
+              error: ''
+            });
+          }
+        }), /*#__PURE__*/_jsx(TextField, {
+          style: {
+            marginTop: 32
+          },
+          fullWidth: true,
+          "data-cy": "input-factory-remark",
+          label: t('common.remark'),
+          value: state.remark,
+          onChange: e => {
+            setState({
+              remark: e.target.value
+            });
+          }
+        }), /*#__PURE__*/_jsx(TextField, {
+          style: {
+            marginTop: 32
+          },
+          fullWidth: true,
+          "data-cy": "input-passport-role",
+          label: t('team.passport.role'),
+          select: true,
+          value: state.role,
+          onChange: e => {
+            setState({
+              role: e.target.value
+            });
+          },
+          variant: "outlined",
+          children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/_jsx(MenuItem, {
+            value: r.name,
+            "data-cy": `passport-role-select-option-${r.name}`,
+            children: /*#__PURE__*/_jsx("span", {
+              children: r.title || r.name
+            })
+          }, r.name))
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            marginTop: 32
+          },
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: t('team.passport.ttl')
+          }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
+            color: "primary",
+            size: "small",
+            value: state.ttlPolicy,
+            exclusive: true,
+            style: {
+              marginTop: 16
+            },
+            onChange: (e, value) => setState({
+              ttlPolicy: value
+            }),
+            "data-cy": "input-passport-ttl-since",
+            "aria-label": "Expire Policy",
+            children: [/*#__PURE__*/_jsx(ToggleButton, {
+              value: "never",
+              "data-cy": "input-passport-ttl-never",
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                title: t('team.passport.ttlNeverTip'),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  children: t('team.passport.ttlNever')
+                })
+              })
+            }), /*#__PURE__*/_jsx(ToggleButton, {
+              value: "mint",
+              "data-cy": "input-passport-ttl-mint",
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                title: t('team.passport.ttlMintTip'),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  children: t('team.passport.ttlMint')
+                })
+              })
+            }), /*#__PURE__*/_jsx(ToggleButton, {
+              value: "exchange",
+              "data-cy": "input-passport-ttl-exchange",
+              children: /*#__PURE__*/_jsx(Tooltip, {
+                title: t('team.passport.ttlExchangeTip'),
+                children: /*#__PURE__*/_jsx(Typography, {
+                  children: t('team.passport.ttlExchange')
+                })
+              })
+            })]
+          }), state.ttlPolicy !== 'never' && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(OutlinedInput, {
+              fullWidth: true,
+              type: "text",
+              style: {
+                marginTop: 16
+              },
+              "data-cy": "input-passport-ttl",
+              value: state.ttl,
+              onChange: e => {
+                setState({
+                  ttl: e.target.value
+                });
+              }
+            }), /*#__PURE__*/_jsx(FormHelperText, {
+              children: t('team.passport.ttlTip')
+            })]
+          })]
+        })]
+      })
+    })
+  });
+}
+TrustedFactory.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  trustedFactories: PropTypes.array,
+  data: PropTypes.object
+};
+TrustedFactory.defaultProps = {
+  data: {},
+  trustedFactories: []
+};
+const Div = styled.div`
+  .dialog-h1 {
+    font-size: 18px;
+  }
+
+  .list {
+    .MuiIconButton-root {
+      svg {
+        fill: #bfbfbf;
+      }
+    }
+  }
+`;

package/es/team/passports/trusted-issuer.js

@@ -0,0 +1,296 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import cloneDeep from 'lodash/cloneDeep';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import DeleteIcon from '@arcblock/icons/lib/DeleteIcon';
+import Empty from '@arcblock/ux/lib/Empty';
+import { ROLES } from '@abtnode/constant';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { sleep, formatError } from '../../util';
+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 LongArrow = function LongArrow(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M64.707 8.707a1 1 0 0 0 0-1.414L58.343.929a1 1 0 1 0-1.414 1.414L62.586 8l-5.657 5.657a1 1 0 0 0 1.414 1.414l6.364-6.364zM0 9h64V7H0v2z",
+      fill: "#666"
+    })
+  });
+};
+LongArrow.defaultProps = {
+  width: "65",
+  height: "16",
+  viewBox: "0 0 65 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const canSave = (issuerDid, mappings) => {
+  if (!issuerDid) {
+    return false;
+  }
+  return !mappings.some(x => !x.from.passport || !x.to.role);
+};
+export default function TrustedIssuer({
+  onCancel,
+  onSuccess,
+  data,
+  trustedPassports
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    roles,
+    teamDid
+  } = useTeamContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [issuerDid, setIssuerDid] = useState(data.issuerDid || '');
+  const [remark, setRemark] = useState(data.remark || '');
+  const [mappings, setMappings] = useState(cloneDeep(data.mappings) || []);
+  const editIndex = trustedPassports.findIndex(x => x.issuerDid === data.issuerDid);
+  const configTrustedPassports = async () => {
+    if (loading) {
+      return;
+    }
+    const item = {
+      issuerDid,
+      remark,
+      mappings
+    };
+    const trustedList = [...trustedPassports];
+    if (editIndex === -1) {
+      trustedList.unshift(item);
+    } else {
+      trustedList[editIndex] = item;
+    }
+    try {
+      setLoading(true);
+      await api.configTrustedPassports({
+        input: {
+          teamDid,
+          trustedPassports: trustedList
+        }
+      });
+      await sleep(800);
+      setLoading(false);
+      Toast.success(t('common.saveSuccess'));
+      onSuccess();
+    } catch (err) {
+      setLoading(false);
+      Toast.error(formatError(err));
+    }
+  };
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: t('team.passport.trustedIssuers'),
+    open: true,
+    showCloseButton: false,
+    PaperProps: {
+      style: {
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    prepend: /*#__PURE__*/_jsx(IconButton, {
+      onClick: onCancel,
+      "data-cy": "trusted-issuer-close",
+      size: "large",
+      children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+    }),
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onCancel,
+        color: "inherit",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: () => configTrustedPassports(),
+        color: "primary",
+        disabled: !canSave(issuerDid, mappings) || !remark || loading,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "save-mapping",
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.save')]
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Div, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "dialog-content",
+        children: [/*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          "data-cy": "input-issuer-did",
+          placeholder: t('team.passport.issuerDid'),
+          value: issuerDid,
+          onChange: event => {
+            setIssuerDid(event.target.value);
+          }
+        }), /*#__PURE__*/_jsx(TextField, {
+          style: {
+            marginTop: 16
+          },
+          fullWidth: true,
+          "data-cy": "input-issuer-remark",
+          placeholder: t('common.remark'),
+          value: remark,
+          onChange: event => {
+            setRemark(event.target.value);
+          }
+        }), /*#__PURE__*/_jsxs(Box, {
+          mt: "30px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Box, {
+            className: "dialog-h1",
+            children: t('team.passport.mappingRule')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(Button, {
+              variant: "outlined",
+              color: "primary",
+              "data-cy": "add-mapping",
+              onClick: () => {
+                setMappings(d => {
+                  const res = [...d];
+                  res.unshift({
+                    from: {
+                      passport: ''
+                    },
+                    to: {
+                      role: ROLES.GUEST
+                    }
+                  });
+                  return res;
+                });
+              },
+              children: t('team.add')
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          className: "list",
+          mt: -0.5,
+          children: [mappings.map((item, index) => /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            my: 3,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              flexGrow: 1,
+              children: [/*#__PURE__*/_jsx(Box, {
+                flexGrow: 1,
+                flexBasis: 1,
+                children: /*#__PURE__*/_jsx(TextField, {
+                  fullWidth: true,
+                  size: "small",
+                  "data-cy": `input-${index}-from`,
+                  placeholder: "Issuer\u2019s Passport Name/ID",
+                  value: item.from.passport,
+                  onChange: event => {
+                    const {
+                      value
+                    } = event.target;
+                    setMappings(d => {
+                      const res = [...d];
+                      res[index].from.passport = value;
+                      return res;
+                    });
+                  }
+                })
+              }), /*#__PURE__*/_jsx(Box, {
+                flexShrink: 0,
+                mx: 4,
+                children: /*#__PURE__*/_jsx(LongArrow, {})
+              }), /*#__PURE__*/_jsx(Box, {
+                flexGrow: 1,
+                flexBasis: 1,
+                children: /*#__PURE__*/_jsx(TextField, {
+                  fullWidth: true,
+                  size: "small",
+                  select: true,
+                  value: item.to.role,
+                  onChange: e => {
+                    setMappings(d => {
+                      const res = [...d];
+                      res[index].to.role = e.target.value;
+                      return res;
+                    });
+                  },
+                  variant: "outlined",
+                  children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/_jsx(MenuItem, {
+                    value: r.name,
+                    "data-cy": `passport-mapping-select-option-${r.name}`,
+                    children: /*#__PURE__*/_jsx("span", {
+                      children: r.title || r.name
+                    })
+                  }, r.name))
+                })
+              })]
+            }), /*#__PURE__*/_jsx(Box, {
+              flexShrink: 0,
+              ml: 4,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: () => {
+                  setMappings(d => {
+                    const res = [...d];
+                    res.splice(index, 1);
+                    return res;
+                  });
+                },
+                size: "large",
+                children: /*#__PURE__*/_jsx(DeleteIcon, {})
+              })
+            })]
+          }, `mapping-${index}`)), !mappings.length && /*#__PURE__*/_jsx(Box, {
+            my: 2,
+            color: "text.secondary",
+            fontSize: "16px",
+            children: /*#__PURE__*/_jsx(Empty, {
+              children: t('common.empty')
+            })
+          })]
+        })]
+      })
+    })
+  });
+}
+TrustedIssuer.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  trustedPassports: PropTypes.array,
+  data: PropTypes.object
+};
+TrustedIssuer.defaultProps = {
+  data: {},
+  trustedPassports: []
+};
+const Div = styled.div`
+  .dialog-h1 {
+    font-size: 18px;
+  }
+
+  .list {
+    .MuiIconButton-root {
+      svg {
+        fill: #bfbfbf;
+      }
+    }
+  }
+`;