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

   1 import type { HTMLAttributes } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Href } from '@proton/atoms';
   6 import useConfig from '@proton/components/hooks/useConfig';
   7 import { APPS } from '@proton/shared/lib/constants';
   8 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
   9
  10 type Props = HTMLAttributes<HTMLDivElement>;
  11
  12 const BitcoinInfoMessage = ({ ...rest }: Props) => {
  13     const { APP_NAME } = useConfig();
  14
  15     return (
  16         <div className="mb-6" {...rest} data-testid="bitcoin-info-message">
  17             <p className="mb-0">
  18                 {c('Info')
  19                     .t`Submit a deposit using the following address or scan the QR code. Your deposit will be reflected in your account after confirmation.`}
  20             </p>
  21             <Href
  22                 href={
  23                     APP_NAME === APPS.PROTONVPN_SETTINGS
  24                         ? 'https://protonvpn.com/support/vpn-bitcoin-payments/'
  25                         : getKnowledgeBaseUrl('/pay-with-bitcoin')
  26                 }
  27             >{c('Link').t`How to pay with Bitcoin?`}</Href>
  28         </div>
  29     );
  30 };
  31
  32 export default BitcoinInfoMessage;