65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import { openModal } from 'soapbox/actions/modals';
|
|
import CopyableInput from 'soapbox/components/copyable-input';
|
|
import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
|
|
|
import { getExplorerUrl } from '../utils/block-explorer';
|
|
import { getTitle } from '../utils/coin-db';
|
|
|
|
import CryptoIcon from './crypto-icon';
|
|
|
|
export interface ICryptoAddress {
|
|
address: string
|
|
ticker: string
|
|
note?: string
|
|
}
|
|
|
|
const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
|
|
const { address, ticker, note } = props;
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleModalClick = (e: React.MouseEvent<HTMLElement>): void => {
|
|
dispatch(openModal('CRYPTO_DONATE', props));
|
|
e.preventDefault();
|
|
};
|
|
|
|
const title = getTitle(ticker);
|
|
const explorerUrl = getExplorerUrl(ticker, address);
|
|
|
|
return (
|
|
<Stack>
|
|
<HStack alignItems='center' className='mb-1'>
|
|
<CryptoIcon
|
|
className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
|
|
ticker={ticker}
|
|
title={title}
|
|
/>
|
|
|
|
<Text weight='bold'>{title || ticker.toUpperCase()}</Text>
|
|
|
|
<HStack alignItems='center' className='ml-auto'>
|
|
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
|
|
<Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
|
|
</a>
|
|
|
|
{explorerUrl && (
|
|
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
|
|
<Icon src={require('@tabler/icons/external-link.svg')} size={20} />
|
|
</a>
|
|
)}
|
|
</HStack>
|
|
</HStack>
|
|
|
|
{note && (
|
|
<Text>{note}</Text>
|
|
)}
|
|
|
|
<CopyableInput value={address} />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default CryptoAddress;
|