packages/components/containers/payments/bitcoin/BitcoinDetails.tsx

   1 import type { HTMLAttributes } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Copy from '@proton/components/components/button/Copy';
   6 import useNotifications from '@proton/components/hooks/useNotifications';
   7 import clsx from '@proton/utils/clsx';
   8
   9 export interface Props {
  10     amount: number;
  11     address: string;
  12 }
  13
  14 const BitcoinDetailsLine = ({
  15     label,
  16     value,
  17     fieldClassName: className,
  18     ...rest
  19 }: {
  20     label: string;
  21     value: string;
  22     fieldClassName?: string;
  23 } & HTMLAttributes<HTMLElement>) => {
  24     const { createNotification } = useNotifications();
  25     return (
  26         <>
  27             <div className="text-rg text-semibold mb-1">{label}</div>
  28             <div className={clsx('rounded bg-weak py-1 px-3 flex justify-space-between items-center', className)}>
  29                 <span className="text-break" {...rest}>
  30                     {value}
  31                 </span>
  32                 <Copy
  33                     value={`${value}`}
  34                     shape="ghost"
  35                     size="small"
  36                     onCopy={() => {
  37                         createNotification({
  38                             text: c('Success').t`Copied to clipboard`,
  39                         });
  40                     }}
  41                 />
  42             </div>
  43         </>
  44     );
  45 };
  46
  47 const BitcoinDetails = ({ amount, address }: Props) => {
  48     return (
  49         <div>
  50             {amount ? (
  51                 <BitcoinDetailsLine label={c('Label').t`BTC amount`} value={`${amount}`} fieldClassName="mb-4" />
  52             ) : null}
  53             <BitcoinDetailsLine label={c('Label').t`BTC address`} value={address} data-testid="btc-address" />
  54         </div>
  55     );
  56 };
  57
  58 export default BitcoinDetails;