1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Merge branch 'develop' into master-sync

This commit is contained in:
Peter 2023-03-29 18:46:02 +01:00 committed by GitHub
commit 3c22a3b8a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 173 additions and 24 deletions

View File

@ -6,10 +6,10 @@
// subset of files to check against these targets.
module.exports = {
global: {
lines: 65,
lines: 65.5,
branches: 53.5,
statements: 64,
functions: 57.4,
statements: 64.75,
functions: 58,
},
transforms: {
branches: 100,

View File

@ -44,17 +44,17 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
class="box institutional-feature__content box--flex-direction-row"
>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--padding-bottom-3 box--flex-direction-row"
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
>
DeFi raises AML/CFT risk for institutions, given the decentralised pools and pseudonymous counterparties.
</p>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--padding-bottom-3 box--flex-direction-row"
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
>
Codefi Compliance is the only product capable of running AML/CFT analysis on DeFi pools. This allows you to identify and avoid pools and counterparties that fail your risk setting.
</p>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--padding-bottom-3 box--flex-direction-row"
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
>
Steps to enable AML/CFT Compliance:
</p>

View File

@ -0,0 +1,64 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ICON_NAMES, ButtonBase } from '../../component-library';
import {
BackgroundColor,
TextVariant,
TextColor,
Size,
BorderRadius,
AlignItems,
} from '../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { shortenAddress } from '../../../helpers/utils/util';
import Tooltip from '../../ui/tooltip/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
export const AddressCopyButton = ({
address,
shorten = false,
wrap = false,
}) => {
const displayAddress = shorten ? shortenAddress(address) : address;
const [copied, handleCopy] = useCopyToClipboard();
const t = useI18nContext();
return (
<Tooltip position="bottom" title={copied ? t('copiedExclamation') : null}>
<ButtonBase
backgroundColor={BackgroundColor.primaryMuted}
onClick={() => handleCopy(address)}
paddingRight={4}
paddingLeft={4}
size={Size.SM}
variant={TextVariant.bodyXs}
color={TextColor.primaryDefault}
endIconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
className={classnames('multichain-address-copy-button', {
'multichain-address-copy-button__address--wrap': wrap,
})}
borderRadius={BorderRadius.pill}
alignItems={AlignItems.center}
data-testid="address-copy-button-text"
>
{displayAddress}
</ButtonBase>
</Tooltip>
);
};
AddressCopyButton.propTypes = {
/**
* Address to be copied
*/
address: PropTypes.string.isRequired,
/**
* Represents if the address should be shortened
*/
shorten: PropTypes.bool,
/**
* Represents if the element should wrap to multiple lines
*/
wrap: PropTypes.bool,
};

View File

@ -0,0 +1,36 @@
import React from 'react';
import { AddressCopyButton } from '.';
export default {
title: 'Components/Multichain/AddressCopyButton',
component: AddressCopyButton,
argTypes: {
address: {
control: 'text',
},
shorten: {
control: 'boolean',
},
wrap: {
control: 'boolean',
},
},
args: {
address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
},
};
export const DefaultStory = (args) => <AddressCopyButton {...args} />;
DefaultStory.storyName = 'Default';
export const ShortenedStory = (args) => <AddressCopyButton {...args} />;
ShortenedStory.storyName = 'Shortened';
ShortenedStory.args = { shorten: true };
export const WrappedStory = (args) => (
<div style={{ width: '200px' }}>
<AddressCopyButton {...args} />
</div>
);
WrappedStory.storyName = 'Wrapped';
WrappedStory.args = { wrap: true };

View File

@ -0,0 +1,31 @@
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { AddressCopyButton } from '.';
const SAMPLE_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
describe('AccountListItem', () => {
it('renders the full address by default', () => {
render(<AddressCopyButton address={SAMPLE_ADDRESS} />);
expect(
document.querySelector('[data-testid="address-copy-button-text"]')
.textContent,
).toStrictEqual(SAMPLE_ADDRESS);
});
it('renders a shortened address when it should', () => {
render(<AddressCopyButton address={SAMPLE_ADDRESS} shorten />);
expect(
document.querySelector('[data-testid="address-copy-button-text"]')
.textContent,
).toStrictEqual('0x0dc...e7bc');
});
it('changes icon when clicked', () => {
render(<AddressCopyButton address={SAMPLE_ADDRESS} />);
fireEvent.click(document.querySelector('button'));
expect(document.querySelector('.mm-icon').style.maskImage).toContain(
'copy-success.svg',
);
});
});

View File

@ -0,0 +1 @@
export { AddressCopyButton } from './address-copy-button';

View File

@ -0,0 +1,7 @@
.multichain-address-copy-button {
&__address--wrap {
word-break: break-word;
min-height: 32px;
height: auto;
}
}

View File

@ -5,3 +5,4 @@ export { DetectedTokensBanner } from './detected-token-banner';
export { GlobalMenu } from './global-menu';
export { MultichainImportTokenLink } from './multichain-import-token-link';
export { MultichainTokenListItem } from './multichain-token-list-item';
export { AddressCopyButton } from './address-copy-button';

View File

@ -4,6 +4,7 @@
* This will help improve specificity and reduce the chance of
* unintended overrides.
**/
@import 'address-copy-button/index';
@import 'account-list-item/index';
@import 'account-list-menu/index';
@import 'multichain-token-list-item/multichain-token-list-item';

View File

@ -8,6 +8,8 @@ import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils
import Tooltip from '../tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
import { AddressCopyButton } from '../../multichain/address-copy-button';
import Box from '../box/box';
export default connect(mapStateToProps)(QrCodeView);
@ -56,25 +58,31 @@ function QrCodeView(props) {
__html: qrImage.createTableTag(4),
}}
/>
<Tooltip
wrapperClassName="qr-code__address-container__tooltip-wrapper"
position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<div
className="qr-code__address-container"
onClick={() => {
handleCopy(toChecksumHexAddress(data));
}}
{process.env.MULTICHAIN ? (
<Box marginLeft={2} marginRight={2}>
<AddressCopyButton wrap address={toChecksumHexAddress(data)} />
</Box>
) : (
<Tooltip
wrapperClassName="qr-code__address-container__tooltip-wrapper"
position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<div className="qr-code__address">{toChecksumHexAddress(data)}</div>
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.SM}
marginInlineStart={3}
/>
</div>
</Tooltip>
<div
className="qr-code__address-container"
onClick={() => {
handleCopy(toChecksumHexAddress(data));
}}
>
<div className="qr-code__address">{toChecksumHexAddress(data)}</div>
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.SM}
marginInlineStart={3}
/>
</div>
</Tooltip>
)}
</div>
);
}