Merge pull request #1989 from blockscout/multichain-mobile-fix

fix multichain button for mobile

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(
+ <Box w="300px"><AddressNetWorth addressData={ addressMock.token } addressHash={ ADDRESS_HASH }/></Box>,
+ );
+
+ await expect(component).toHaveScreenshot();
+});

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,31 +75,33 @@ const AddressNetWorth = ({ addressData, isLoading, addressHash }: Props) => {
  const dappId = multichainFeature.dappId;
  multichainItem = (
  <>
- <TextSeparator mx={ 3 } color="gray.500"/>
- <Text mr={ 2 }>Multichain</Text>
- { typeof dappId === 'string' ? (
- <LinkInternal
- href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
- { ...linkProps }
- >
- { buttonContent }
- </LinkInternal>
- ) : (
- <LinkExternal
- href={ portfolioUrl.toString() }
- { ...linkProps }
- >
- { buttonContent }
- </LinkExternal>
- ) }
+ <TextSeparator mx={ 0 } color="gray.500"/>
+ <Flex alignItems="center" gap={ 2 }>
+ <Text>Multichain</Text>
+ { typeof dappId === 'string' ? (
+ <LinkInternal
+ href={ route({ pathname: '/apps/[id]', query: { id: dappId, url: portfolioUrl.toString() } }) }
+ { ...linkProps }
+ >
+ { buttonContent }
+ </LinkInternal>
+ ) : (
+ <LinkExternal
+ href={ portfolioUrl.toString() }
+ { ...linkProps }
+ >
+ { buttonContent }
+ </LinkExternal>
+ ) }
+ </Flex>
  </>
  );
  } catch (error) {}
 
  }
 
  return (
- <Skeleton display="flex" alignItems="center" isLoaded={ !isLoading && !(addressData?.has_tokens && isPending) }>
+ <Skeleton display="flex" alignItems="center" flexWrap="wrap" isLoaded={ !isLoading && !(addressData?.has_tokens && isPending) } gap={ 2 }>
  <Text>
  { (isError || !addressData?.exchange_rate) ? 'N/A' : `${ prefix }$${ totalUsd.toFormat(2) }` }
  </Text>