handle aliased imports

types/api/contract.ts

@@ -30,7 +30,10 @@ export interface SmartContract {
   file_path: string;
   additional_sources: Array<{ file_path: string; source_code: string }>;
   external_libraries: Array<SmartContractExternalLibrary> | null;
-  compiler_settings: unknown;
+  compiler_settings?: {
+    evmVersion?: string;
+    remappings?: Array<string>;
+  };
   verified_twin_address_hash: string | null;
   minimal_proxy_address_hash: string | null;
 }

ui/address/contract/ContractCode.tsx

@@ -177,6 +177,7 @@ const ContractCode = ({ addressHash }: Props) => {
             isViper={ Boolean(data.is_vyper_contract) }
             filePath={ data.file_path }
             additionalSource={ data.additional_sources }
+            remappings={ data.compiler_settings?.remappings }
           />
         ) }
         { Boolean(data.compiler_settings) && (

ui/address/contract/ContractSourceCode.tsx

@@ -16,9 +16,10 @@ interface Props {
   isViper: boolean;
   filePath?: string;
   additionalSource?: SmartContract['additional_sources'];
+  remappings?: Array<string>;
 }
 
-const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource }: Props) => {
+const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource, remappings }: Props) => {
   const heading = (
     <Text fontWeight={ 500 }>
       <span>Contract source code</span>
@@ -56,7 +57,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
         { diagramLink }
         { copyToClipboard }
       </Flex>
-      <CodeEditor data={ editorData }/>
+      <CodeEditor data={ editorData } remappings={ remappings }/>
     </section>
   );
 };

ui/shared/monaco/CodeEditor.tsx

@@ -35,9 +35,10 @@ const EDITOR_HEIGHT = 500;
 
 interface Props {
   data: Array<File>;
+  remappings?: Array<string>;
 }
 
-const CodeEditor = ({ data }: Props) => {
+const CodeEditor = ({ data, remappings }: Props) => {
   const [ instance, setInstance ] = React.useState<Monaco | undefined>();
   const [ editor, setEditor ] = React.useState<monaco.editor.IStandaloneCodeEditor | undefined>();
   const [ index, setIndex ] = React.useState(0);
@@ -145,14 +146,14 @@ const CodeEditor = ({ data }: Props) => {
         .map((element: HTMLSpanElement) => element.innerText)
         .join('');
 
-      const fullPath = getFullPathOfImportedFile(data[index].file_path, path);
+      const fullPath = getFullPathOfImportedFile(data[index].file_path, path, remappings);
       const fileIndex = data.findIndex((file) => file.file_path === fullPath);
       if (fileIndex > -1) {
         event.stopPropagation();
         handleSelectFile(fileIndex);
       }
     }
-  }, [ data, handleSelectFile, index, isMetaPressed, isMobile ]);
+  }, [ data, handleSelectFile, index, isMetaPressed, isMobile, remappings ]);
 
   const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
     isMetaKey(event) && setIsMetaPressed(true);

ui/shared/monaco/utils/getFullPathOfImportedFile.test.ts

@@ -18,20 +18,32 @@ it('returns undefined if imported file is outside the base file folder', () => {
   expect(result).toBeUndefined();
 });
 
-it('returns unmodified path if it is already absolute', () => {
-  const result = getFullPathOfImportedFile(
-    '/index.sol',
-    '/abc/contract.sol',
-  );
-
-  expect(result).toBe('/abc/contract.sol');
+describe('returns unmodified path if it is already absolute', () => {
+  it('with prefix', () => {
+    const result = getFullPathOfImportedFile(
+      '/index.sol',
+      '/abc/contract.sol',
+    );
+
+    expect(result).toBe('/abc/contract.sol');
+  });
+
+  it('without prefix', () => {
+    const result = getFullPathOfImportedFile(
+      '/index.sol',
+      'abc/contract.sol',
+    );
+
+    expect(result).toBe('/abc/contract.sol');
+  });
 });
 
-it('returns undefined for external path', () => {
+it('correctly manages remappings', () => {
   const result = getFullPathOfImportedFile(
     '/index.sol',
-    'https://github.com/ethereum/dapp/contract.sol',
+    'node_modules/@openzeppelin/contracts/access/AccessControl.sol',
+    [ '@ensdomains/=node_modules/@ensdomains/', '@openzeppelin/=node_modules/@openzeppelin/' ],
   );
 
-  expect(result).toBeUndefined();
+  expect(result).toBe('/node_modules/@openzeppelin/contracts/access/AccessControl.sol');
 });

ui/shared/monaco/utils/getFullPathOfImportedFile.ts

 import stripLeadingSlash from 'lib/stripLeadingSlash';
 
-export default function getFullPathOfImportedFile(baseFilePath: string, importedFilePath: string) {
+export default function getFullPathOfImportedFile(baseFilePath: string, importedFilePath: string, remappings?: Array<string>) {
   if (importedFilePath[0] !== '.') {
-    return importedFilePath[0] === '/' ? importedFilePath : '/' + importedFilePath;
+    let result = importedFilePath;
+
+    if (remappings && remappings.length > 0) {
+      const [ alias, target ] = remappings.map((item) => item.split('=')).find(([ key ]) => importedFilePath.startsWith(key)) || [];
+      if (alias) {
+        result = importedFilePath.replace(alias, target);
+      }
+    }
+
+    return result[0] === '/' ? result : '/' + result;
   }
 
   const baseFileChunks = stripLeadingSlash(baseFilePath).split('/');