@blocklet/payment-react 1.17.12 → 1.18.1

package/src/components/payment-beneficiaries.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/indent */
+import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { BN, fromUnitToToken } from '@ocap/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+export interface TBeneficiary {
+  name: string;
+  address: string;
+  avatar?: string;
+  percent: number;
+  amount?: string;
+  url?: string;
+  type?: 'user' | 'dapp';
+}
+
+interface BenefitsProps {
+  data: TBeneficiary[];
+  currency: {
+    symbol: string;
+    decimal: number;
+  };
+  totalAmount?: string;
+}
+
+PaymentBeneficiaries.defaultProps = {
+  totalAmount: '0',
+};
+
+export default function PaymentBeneficiaries({ data, currency, totalAmount }: BenefitsProps) {
+  const { t } = useLocaleContext();
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle2" color="text.secondary">
+        {t('benefits.title', { count: data.length })}
+      </Typography>
+
+      {data.map((item) => {
+        const amount =
+          item.amount ||
+          (totalAmount
+            ? new BN(totalAmount)
+                .mul(new BN(Number(item.percent)))
+                .div(new BN(100))
+                .toString()
+            : '0');
+        return (
+          <Stack
+            key={item.address}
+            direction={{ xs: 'column', sm: 'row' }}
+            alignItems="center"
+            justifyContent="space-between"
+            sx={{
+              px: 0.5,
+              borderRadius: 1,
+              bgcolor: 'background.paper',
+              '&:hover': {
+                bgcolor: 'action.hover',
+              },
+            }}>
+            <Stack direction="row" spacing={1.5} alignItems="center" sx={{ width: { xs: '100%', sm: 'auto' } }}>
+              <Avatar src={item.avatar} alt={item.name} sx={{ width: 32, height: 32 }} variant="square" />
+              <Box>
+                <Typography
+                  variant="subtitle2"
+                  onClick={() => {
+                    if (item.url) {
+                      window.open(item.url, '_blank');
+                    }
+                  }}
+                  sx={{
+                    cursor: item.url ? 'pointer' : 'default',
+                    '&:hover': {
+                      color: item.url ? 'text.link' : 'inherit',
+                    },
+                  }}>
+                  {item.name}
+                </Typography>
+                <Typography variant="caption" color="text.secondary" sx={{ cursor: 'pointer' }}>
+                  {item.address}
+                </Typography>
+              </Box>
+            </Stack>
+
+            <Stack alignItems="flex-end" sx={{ width: { xs: '100%', sm: 'auto' }, mt: { xs: 1, sm: 0 } }}>
+              <Typography variant="subtitle2">
+                {fromUnitToToken(amount, currency.decimal)} {currency.symbol}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {Number(item.percent)}%
+              </Typography>
+            </Stack>
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/index.ts

@@ -29,6 +29,7 @@ import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
+import PaymentBeneficiaries from './components/payment-beneficiaries';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -75,4 +76,5 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
+  PaymentBeneficiaries,
 };

package/src/locales/en.tsx

@@ -33,6 +33,8 @@ export default flat({
     upload: 'Upload',
     change: 'Change',
     cancel: 'Cancel',
+    close: 'Close',
+    back: 'Back',
     every: 'every',
     per: 'per {interval}',
     slash: '/ {interval}',
@@ -129,6 +131,13 @@ export default flat({
         select: 'Select Amount',
         summary: '{total} supporters {totalAmount} {symbol}',
         empty: 'No supporters yet',
+        gaveTips: '{count} people gave tips',
+        tipAmount: 'Tip Amount',
+        benefits: {
+          one: '{name} will receive all tips',
+          multiple: 'Tips will be distributed to {count} beneficiaries',
+          view: 'Click to view details',
+        },
       },
       cardPay: '{action} with card',
       empty: 'No thing to pay',
@@ -363,4 +372,7 @@ export default flat({
   empty: {
     records: 'No matching records found',
   },
+  benefits: {
+    title: '{count} Beneficiaries',
+  },
 });

package/src/locales/zh.tsx

@@ -33,6 +33,8 @@ export default flat({
     change: '更换',
     confirm: '确认',
     cancel: '取消',
+    close: '关闭',
+    back: '返回',
     every: '每',
     per: '每{interval}',
     slash: '每{interval}',
@@ -128,6 +130,13 @@ export default flat({
         select: '选择金额',
         summary: '共有 {total} 人支持 {totalAmount} {symbol}',
         empty: '❤️ 支持一下',
+        gaveTips: '已有 {count} 人打赏',
+        tipAmount: '打赏金额',
+        benefits: {
+          one: '{name} 将获得全部打赏',
+          multiple: '打赏将按比例分配给 {count} 位受益人',
+          view: '点击查看详情',
+        },
       },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',
@@ -353,4 +362,7 @@ export default flat({
   empty: {
     records: '没有找到匹配的记录',
   },
+  benefits: {
+    title: '{count} 位受益人',
+  },
 });