@blocklet/payment-react/lib/components/payment-beneficiaries.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PaymentBeneficiaries;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _util = require("@ocap/util");
var _context = require("@arcblock/ux/lib/Locale/context");
var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
var _util2 = require("../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PaymentBeneficiaries({
  data,
  currency,
  totalAmount = "0"
}) {
  const {
    t,
    locale
  } = (0, _context.useLocaleContext)();
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    spacing: 2,
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "subtitle2",
      sx: {
        color: "text.secondary"
      },
      children: t("benefits.title", {
        count: data.length
      })
    }), data.map(item => {
      const amount = item.amount || (totalAmount ? new _util.BN(totalAmount).mul(new _util.BN(Number(item.percent))).div(new _util.BN(100)).toString() : "0");
      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        sx: {
          alignItems: "center",
          justifyContent: "space-between",
          px: 0.5,
          borderRadius: 1,
          bgcolor: "background.paper",
          "&:hover": {
            bgcolor: "action.hover"
          }
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "row",
          spacing: 1.5,
          sx: {
            alignItems: "center",
            width: {
              xs: "100%",
              sm: "auto"
            }
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
            src: item.avatar,
            alt: item.name,
            sx: {
              width: 32,
              height: 32
            },
            variant: item.type === "dapp" ? "square" : "circular"
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              variant: "subtitle2",
              onClick: () => {
                if (item.url) {
                  window.open((0, _util2.formatLinkWithLocale)(item.url, locale), "_blank");
                }
              },
              sx: {
                cursor: item.url ? "pointer" : "default",
                "&:hover": {
                  color: item.url ? "text.link" : "inherit"
                }
              },
              children: item.name
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
              did: item.address,
              compact: true,
              responsive: false,
              sx: {
                whiteSpace: "nowrap",
                fontSize: "0.875rem !important"
              },
              copyable: false
            })]
          })]
        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          sx: {
            alignItems: "flex-end",
            width: {
              xs: "100%",
              sm: "auto"
            },
            mt: {
              xs: 1,
              sm: 0
            }
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
            variant: "subtitle2",
            children: [(0, _util2.formatBNStr)(amount, currency.decimal, currency?.maximum_precision ?? 6), " ", currency.symbol]
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
            variant: "caption",
            sx: {
              color: "text.secondary",
              fontSize: "0.875rem"
            },
            children: [Number(item.percent), "%"]
          })]
        })]
      }, item.address);
    })]
  });
}