@blocklet/payment-react 1.18.56 → 1.19.1

package/src/components/blockchain/tx.tsx

@@ -6,12 +6,12 @@ import { styled } from '@mui/system';
 
 import { getTxLink } from '../../libs/util';
 
-TxLink.defaultProps = {
-  mode: 'dashboard',
-  align: 'left',
-};
-
-export default function TxLink(props: {
+export default function TxLink({
+  details,
+  method,
+  mode = 'dashboard',
+  align = 'left',
+}: {
   details: PaymentDetails;
   method: TPaymentMethod;
   mode?: 'customer' | 'dashboard';
@@ -19,15 +19,19 @@ export default function TxLink(props: {
 }) {
   const { t } = useLocaleContext();
 
-  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+  if (!details || (mode === 'customer' && method.type === 'stripe')) {
     return (
-      <Typography component="small" color="text.secondary">
+      <Typography
+        component="small"
+        sx={{
+          color: 'text.secondary',
+        }}>
         {t('common.none')}
       </Typography>
     );
   }
 
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(method, details);
 
   if (link && text) {
     return (
@@ -35,7 +39,7 @@ export default function TxLink(props: {
         <Root
           direction="row"
           alignItems="center"
-          justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
+          justifyContent={align === 'left' ? 'flex-start' : 'flex-end'}
           sx={{ color: 'text.link' }}
           spacing={1}>
           <Typography component="span" sx={{ color: 'text.link' }}>
@@ -48,7 +52,11 @@ export default function TxLink(props: {
   }
 
   return (
-    <Typography component="small" color="text.secondary">
+    <Typography
+      component="small"
+      sx={{
+        color: 'text.secondary',
+      }}>
       {t('common.none')}
     </Typography>
   );

package/src/components/confirm.tsx

@@ -8,10 +8,10 @@ export default function ConfirmDialog({
   onCancel,
   title,
   message,
-  confirm,
-  color,
-  cancel,
-  loading,
+  confirm = '',
+  color = 'error',
+  cancel = '',
+  loading = false,
 }: {
   onConfirm: EventHandler<any>;
   onCancel: EventHandler<any>;
@@ -40,10 +40,3 @@ export default function ConfirmDialog({
     </Confirm>
   );
 }
-
-ConfirmDialog.defaultProps = {
-  loading: false,
-  confirm: '',
-  cancel: '',
-  color: 'error',
-};