m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Wrap balance and portfolio button (#18109)

Browse Source
This commit is contained in:
micaelae 2023-03-13 08:50:12 -07:00 committed by GitHub
parent 000dbb976c
commit a69cb0284d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/app/wallet-overview/eth-overview.js
View File

@ -75,6 +75,7 @@ const EthOverview = ({ className }) => {
<div className="eth-overview__primary-container">
{balance ? (
<UserPreferencedCurrencyDisplay
style={{ display: 'contents' }}
className={classnames('eth-overview__primary-balance', {
'eth-overview__cached-balance': balanceIsCached,
})}

61
ui/components/app/wallet-overview/eth-overview.test.js
View File

@ -32,10 +32,16 @@ describe('EthOverview', () => {
type: 'test',
chainId: CHAIN_IDS.MAINNET,
},
cachedBalances: {},
cachedBalances: {
'0x1': {
'0x1': '0x1F4',
},
},
preferences: {
useNativeCurrencyAsPrimaryCurrency: true,
},
useCurrencyRateCheck: true,
conversionRate: 2,
identities: {
'0x1': {
address: '0x1',
@ -66,6 +72,8 @@ describe('EthOverview', () => {
const ETH_OVERVIEW_BUY = 'eth-overview-buy';
const ETH_OVERVIEW_BRIDGE = 'eth-overview-bridge';
const ETH_OVERVIEW_PORTFOLIO = 'home__portfolio-site';
const ETH_OVERVIEW_PRIMARY_CURRENCY = 'eth-overview__primary-currency';
const ETH_OVERVIEW_SECONDARY_CURRENCY = 'eth-overview__secondary-currency';
afterEach(() => {
store.clearActions();
@ -86,6 +94,57 @@ describe('EthOverview', () => {
openTabSpy.mockClear();
});
it('should show the primary balance', async () => {
const { queryByTestId, queryByText } = renderWithProvider(
<EthOverview />,
store,
);
const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
expect(primaryBalance).toBeInTheDocument();
expect(primaryBalance).toHaveTextContent('0ETH');
expect(queryByText('*')).not.toBeInTheDocument();
});
it('should show the cached primary balance', async () => {
const mockedStoreWithCachedBalance = {
metamask: {
...mockStore.metamask,
accounts: {
'0x1': {
address: '0x1',
},
},
cachedBalances: {
'0x1': {
'0x1': '0x24da51d247e8b8',
},
},
},
};
const mockedStore = configureMockStore([thunk])(
mockedStoreWithCachedBalance,
);
const { queryByTestId, queryByText } = renderWithProvider(
<EthOverview />,
mockedStore,
);
const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
expect(primaryBalance).toBeInTheDocument();
expect(primaryBalance).toHaveTextContent('0.0104ETH');
expect(queryByText('*')).toBeInTheDocument();
});
it('should show the secondary balance', async () => {
const { queryByTestId } = renderWithProvider(<EthOverview />, store);
const secondaryBalance = queryByTestId(ETH_OVERVIEW_SECONDARY_CURRENCY);
expect(secondaryBalance).toBeInTheDocument();
expect(secondaryBalance).toHaveTextContent('0');
});
it('should always show the Bridge button', () => {
const { queryByTestId } = renderWithProvider(<EthOverview />, store);
const bridgeButton = queryByTestId(ETH_OVERVIEW_BRIDGE);

14
ui/components/app/wallet-overview/index.scss
View File

@ -46,20 +46,20 @@
align-items: center;
margin: 16px 0;
padding: 0 16px;
max-width: 100%;
max-width: 326px;
}
&__primary-container {
display: flex;
position: relative;
max-width: inherit;
justify-content: center;
flex-wrap: wrap;
}
&__primary-balance {
@include H2;
color: var(--color-text-default);
width: 100%;
justify-content: center;
}
&__cached-star {
@ -67,10 +67,8 @@
}
&__portfolio-button {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: calc(100% + 2px);
height: inherit;
padding-inline-start: 16px;
}
&__cached-balance,