1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/multichain/account-details/account-details-display.js
Dhruv 7c2f7671b0
ButtonSecondary to TS (#20411)
* ButtonSecondary to TS

* updating components and addressing errors

* lint and snapshot updates

* using Boolean conversion for className

* removing ValidButtonTag type

* fix text color when link

---------

Co-authored-by: garrettbear <gwhisten@gmail.com>
2023-08-14 15:13:15 -07:00

104 lines
3.0 KiB
JavaScript

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import QrView from '../../ui/qr-code';
import EditableLabel from '../../ui/editable-label/editable-label';
import { setAccountLabel } from '../../../store/actions';
import {
getCurrentChainId,
getHardwareWalletType,
getMetaMaskKeyrings,
} from '../../../selectors';
import { isAbleToExportAccount } from '../../../helpers/utils/util';
import {
ButtonSecondarySize,
ButtonSecondary,
Box,
} from '../../component-library';
import {
AlignItems,
Display,
FlexDirection,
TextVariant,
} from '../../../helpers/constants/design-system';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { useI18nContext } from '../../../hooks/useI18nContext';
export const AccountDetailsDisplay = ({
accounts,
accountName,
address,
onExportClick,
}) => {
const dispatch = useDispatch();
const trackEvent = useContext(MetaMetricsContext);
const t = useI18nContext();
const keyrings = useSelector(getMetaMaskKeyrings);
const keyring = keyrings.find((kr) => kr.accounts.includes(address));
const exportPrivateKeyFeatureEnabled = isAbleToExportAccount(keyring?.type);
const chainId = useSelector(getCurrentChainId);
const deviceName = useSelector(getHardwareWalletType);
return (
<Box
display={Display.Flex}
alignItems={AlignItems.center}
flexDirection={FlexDirection.Column}
>
<EditableLabel
defaultValue={accountName}
onSubmit={(label) => {
dispatch(setAccountLabel(address, label));
trackEvent({
category: MetaMetricsEventCategory.Accounts,
event: MetaMetricsEventName.AccountRenamed,
properties: {
location: 'Account Details Modal',
chain_id: chainId,
account_hardware_type: deviceName,
},
});
}}
accounts={accounts}
/>
<QrView Qr={{ data: address }} />
{exportPrivateKeyFeatureEnabled ? (
<ButtonSecondary
block
size={ButtonSecondarySize.Lg}
variant={TextVariant.bodyMd}
onClick={() => {
trackEvent({
category: MetaMetricsEventCategory.Accounts,
event: MetaMetricsEventName.KeyExportSelected,
properties: {
key_type: MetaMetricsEventKeyType.Pkey,
location: 'Account Details Modal',
},
});
onExportClick();
}}
>
{t('showPrivateKey')}
</ButtonSecondary>
) : null}
</Box>
);
};
AccountDetailsDisplay.propTypes = {
accounts: PropTypes.array.isRequired,
accountName: PropTypes.string.isRequired,
address: PropTypes.string.isRequired,
onExportClick: PropTypes.func.isRequired,
};