Merge pull request #580 from blockscout/contract-layout-fixes

contract mobile layout fixes

mocks/contract/info.ts

@@ -32,7 +32,7 @@ export const withMultiplePaths: Partial<SmartContract> = {
   file_path: './simple_storage.sol',
   additional_sources: [
     {
-      file_path: 'contracts/1_Storage.sol',
+      file_path: '/contracts/protocol/libraries/logic/GenericLogic.sol',
       source_code: '// SPDX-License-Identifier: GPL-3.0 \n pragma solidity >=0.7.0 <0.9.0;      \n           contract Storage {\n //2112313123; \nuint256 number; \n function store(uint256 num) public {\nnumber = num;\n}\n function retrieve() public view returns (uint256)\n {\nreturn number;\n}\n}',
     },
   ],

mocks/contract/methods.ts

@@ -12,7 +12,7 @@ export const read: Array<SmartContractReadMethod> = [
       { internalType: 'address', name: '', type: 'address' },
     ],
     method_id: '70a08231',
-    name: 'balanceOf',
+    name: 'FLASHLOAN_PREMIUM_TOTAL',
     outputs: [
       { internalType: 'uint256', name: '', type: 'uint256', value: '' },
     ],
@@ -105,7 +105,7 @@ export const write: Array<SmartContractWriteMethod> = [
       { internalType: 'address', name: 'guy', type: 'address' },
       { internalType: 'uint256', name: 'wad', type: 'uint256' },
     ],
-    name: 'approve',
+    name: 'setReserveInterestRateStrategyAddress',
     outputs: [
       { internalType: 'bool', name: '', type: 'bool' },
     ],

ui/address/contract/ContractCode.pw.tsx

@@ -31,7 +31,7 @@ test('verified with changed byte code +@mobile +@dark-mode', async({ mount, page
   await expect(component).toHaveScreenshot();
 });
 
-test('verified with multiple sources', async({ mount, page }) => {
+test('verified with multiple sources +@mobile', async({ mount, page }) => {
   await page.route(CONTRACT_API_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(contractMock.withMultiplePaths),

ui/address/contract/ContractMethodsAccordion.tsx

@@ -39,9 +39,9 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderC
     <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
       { data.map((item, index) => {
         return (
-          <AccordionItem key={ index } as="section" _first={{ borderTopWidth: '0' }}>
+          <AccordionItem key={ index } as="section" _first={{ borderTopWidth: '0', '.chakra-accordion__button': { pr: '150px' } }}>
             <h2>
-              <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }}>
+              <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left">
                 <Box as="span" fontFamily="heading" fontWeight={ 500 } fontSize="lg" mr={ 1 }>
                   { index + 1 }. { item.type === 'fallback' || item.type === 'receive' ? item.type : item.name }
                 </Box>

ui/address/contract/ContractRead.pw.tsx

@@ -66,7 +66,7 @@ test('error result', async({ mount, page }) => {
   await component.getByPlaceholder(/address/i).type('address-hash');
   await component.getByText(/query/i).click();
 
-  const section = page.locator('section', { hasText: 'balanceOf' });
+  const section = page.locator('section', { hasText: 'FLASHLOAN_PREMIUM_TOTAL' });
 
   await expect(section).toHaveScreenshot();
 });

ui/address/contract/ContractSourceCode.tsx

@@ -59,9 +59,11 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
       <Flex flexDir="column" rowGap={ 3 }>
         { [ { file_path: filePath, source_code: data }, ...additionalSource ].map((item, index, array) => (
           <Box key={ index }>
-            <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
-              <chakra.span fontSize="sm">File { index + 1 } of { array.length }: { item.file_path }</chakra.span>
-              <CopyToClipboard text={ item.source_code }/>
+            <Flex justifyContent="space-between" alignItems="flex-end" mb={ 3 }>
+              <chakra.span fontSize="sm" wordBreak="break-all" lineHeight="20px">
+                File { index + 1 } of { array.length }: { item.file_path }
+              </chakra.span>
+              <CopyToClipboard text={ item.source_code } ml={ 4 }/>
             </Flex>
             <CodeEditor value={ item.source_code } id={ `source_code_${ index }` }/>
           </Box>