diff --git a/ui/address/details/AddressNetWorth.pw.tsx b/ui/address/details/AddressNetWorth.pw.tsx index f0aea8c36b..f77d5dd29c 100644 --- a/ui/address/details/AddressNetWorth.pw.tsx +++ b/ui/address/details/AddressNetWorth.pw.tsx @@ -1,3 +1,4 @@ +import { Box } from '@chakra-ui/react'; import React from 'react'; import * as addressMock from 'mocks/address/address'; @@ -45,3 +46,18 @@ test('with multichain button external', async({ render, mockEnvs, mockAssetRespo await expect(component).toHaveScreenshot(); }); + +test('with multichain button internal small screen', async({ render, mockEnvs, mockAssetResponse }) => { + await mockEnvs([ + [ + 'NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG', + `{"name": "duck", "dapp_id": "duck", "url_template": "https://duck.url/{address}", "logo": "${ ICON_URL }"}` ], + ]); + await mockAssetResponse(ICON_URL, './playwright/mocks/image_svg.svg'); + + const component = await render( + , + ); + + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/address/details/AddressNetWorth.tsx b/ui/address/details/AddressNetWorth.tsx index 7bd5b35f0f..b143123526 100644 --- a/ui/address/details/AddressNetWorth.tsx +++ b/ui/address/details/AddressNetWorth.tsx @@ -1,4 +1,4 @@ -import { Image, Skeleton, Text } from '@chakra-ui/react'; +import { Image, Skeleton, Text, Flex } from '@chakra-ui/react'; import _capitalize from 'lodash/capitalize'; import React from 'react'; @@ -75,23 +75,25 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => { const dappId = multichainFeature.dappId; multichainItem = ( <> - - Multichain - { typeof dappId === 'string' ? ( - - { buttonContent } - - ) : ( - - { buttonContent } - - ) } + + + Multichain + { typeof dappId === 'string' ? ( + + { buttonContent } + + ) : ( + + { buttonContent } + + ) } + ); } catch (error) {} @@ -99,7 +101,7 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => { } return ( - + { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` } diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png index ddd969b310..02737a6484 100644 Binary files a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_dark-color-mode_with-multichain-button-internal-dark-mode-1.png differ diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png index 6c62958f15..756e9cbee4 100644 Binary files a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-external-1.png differ diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png index bec513bbdc..7c74b6692d 100644 Binary files a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-dark-mode-1.png differ diff --git a/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png new file mode 100644 index 0000000000..ca1f59c46f Binary files /dev/null and b/ui/address/details/__screenshots__/AddressNetWorth.pw.tsx_default_with-multichain-button-internal-small-screen-1.png differ