mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Token Aggregators component for Tokens Detected page (#14157)
This commit is contained in:
parent
085c9753de
commit
68f07ce1f7
3
app/_locales/en/messages.json
generated
3
app/_locales/en/messages.json
generated
@ -1258,6 +1258,9 @@
|
||||
"message": "From: $1",
|
||||
"description": "$1 is the address to include in the From label. It is typically shortened first using shortenAddress"
|
||||
},
|
||||
"fromTokenLists": {
|
||||
"message": "From token lists: $1"
|
||||
},
|
||||
"functionApprove": {
|
||||
"message": "Function: Approve"
|
||||
},
|
||||
|
@ -85,3 +85,4 @@
|
||||
@import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index';
|
||||
@import 'currency-input/index';
|
||||
@import 'detected-token/detected-token-address/index';
|
||||
@import 'detected-token/detected-token-aggregators/index';
|
||||
|
@ -0,0 +1,50 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18nContext } from '../../../../contexts/i18n';
|
||||
|
||||
import Box from '../../../ui/box';
|
||||
import Button from '../../../ui/button';
|
||||
import Typography from '../../../ui/typography/typography';
|
||||
import {
|
||||
DISPLAY,
|
||||
FONT_WEIGHT,
|
||||
TYPOGRAPHY,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
|
||||
const DetectedTokenAggregators = ({ aggregatorsList }) => {
|
||||
const t = useContext(I18nContext);
|
||||
const numOfHiddenAggregators = parseInt(aggregatorsList.length, 10) - 2;
|
||||
const [displayMore, setDisplayMore] = useState(false);
|
||||
|
||||
return (
|
||||
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
|
||||
<Typography variant={TYPOGRAPHY.H7} fontWeight={FONT_WEIGHT.NORMAL}>
|
||||
{t('fromTokenLists', [
|
||||
numOfHiddenAggregators > 0 && !displayMore ? (
|
||||
<Typography variant={TYPOGRAPHY.H7} fontWeight={FONT_WEIGHT.NORMAL}>
|
||||
{`${aggregatorsList.slice(0, 2).join(', ')}`}
|
||||
<Button
|
||||
type="link"
|
||||
className="detected-token-aggregators__link"
|
||||
onClick={() => setDisplayMore(true)}
|
||||
key="detected-token-aggrgators-link"
|
||||
>
|
||||
{t('plusXMore', [numOfHiddenAggregators])}
|
||||
</Button>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant={TYPOGRAPHY.H7} fontWeight={FONT_WEIGHT.NORMAL}>
|
||||
{`${aggregatorsList.join(', ')}.`}
|
||||
</Typography>
|
||||
),
|
||||
])}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
DetectedTokenAggregators.propTypes = {
|
||||
aggregatorsList: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export default DetectedTokenAggregators;
|
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import { DISPLAY } from '../../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../../ui/box';
|
||||
import DetectedTokenAggregators from './detected-token-aggregators';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/DetectedToken/DetectedTokenAggregators',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
aggregatorsList: { control: 'array' },
|
||||
},
|
||||
args: {
|
||||
aggregatorsList1: [
|
||||
'Aave',
|
||||
'Bancor',
|
||||
'CMC',
|
||||
'Crypto.com',
|
||||
'CoinGecko',
|
||||
'1inch',
|
||||
'Paraswap',
|
||||
'PMM',
|
||||
'Synthetix',
|
||||
'Zapper',
|
||||
'Zerion',
|
||||
'0x',
|
||||
],
|
||||
aggregatorsList2: ['Aave', 'Bancor'],
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<Box display={DISPLAY.GRID}>
|
||||
<DetectedTokenAggregators aggregatorsList={args.aggregatorsList1} />
|
||||
<DetectedTokenAggregators aggregatorsList={args.aggregatorsList2} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const DefaultStory = Template.bind({});
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
renderWithProvider,
|
||||
screen,
|
||||
fireEvent,
|
||||
} from '../../../../../test/jest';
|
||||
import configureStore from '../../../../store/store';
|
||||
|
||||
import DetectedTokenAggregators from './detected-token-aggregators';
|
||||
|
||||
describe('DetectedTokenAggregators', () => {
|
||||
const args = {
|
||||
aggregatorsList: [
|
||||
'Aave',
|
||||
'Bancor',
|
||||
'CMC',
|
||||
'Crypto.com',
|
||||
'CoinGecko',
|
||||
'1inch',
|
||||
'Paraswap',
|
||||
'PMM',
|
||||
'Synthetix',
|
||||
'Zapper',
|
||||
'Zerion',
|
||||
'0x',
|
||||
],
|
||||
};
|
||||
|
||||
it('should render the detected token aggregators', async () => {
|
||||
const store = configureStore({});
|
||||
renderWithProvider(<DetectedTokenAggregators {...args} />, store);
|
||||
|
||||
expect(screen.getByText('From token lists:')).toBeInTheDocument();
|
||||
expect(screen.getByText('Aave, Bancor')).toBeInTheDocument();
|
||||
expect(screen.getByText('+ 10 more')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText('+ 10 more'));
|
||||
expect(
|
||||
screen.getByText(
|
||||
'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Synthetix, Zapper, Zerion, 0x.',
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
@ -0,0 +1,13 @@
|
||||
.detected-token-aggregators {
|
||||
.typography {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& &__link {
|
||||
@include H7;
|
||||
|
||||
padding: 0;
|
||||
display: inline;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user