add code view snippet for ABI and Compiler Settings

blockscout · Nov 20, 2024 · 438c7de · 438c7de
1 parent 9757795
commit 438c7de
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 7 deletions.
diff --git a/nextjs/csp/policies/monaco.ts b/nextjs/csp/policies/monaco.ts
@@ -11,6 +11,8 @@ export function monaco(): CspDev.DirectiveDescriptor {
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.nls.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/basic-languages/solidity/solidity.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/basic-languages/elixir/elixir.js',
+      'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/language/json/jsonMode.js',
+      'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/language/json/jsonWorker.js',
       'https://cdn.jsdelivr.net/npm/[email protected]/min/vs/base/worker/workerMain.js',
     ],
     'style-src': [

diff --git a/ui/address/contract/useContractDetailsTabs.tsx b/ui/address/contract/useContractDetailsTabs.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
+import CodeViewSnippet from 'ui/shared/CodeViewSnippet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
@@ -97,10 +98,11 @@ export default function useContractDetailsTabs({ data, isLoading, addressHash, s
         id: 'contract_compiler' as const,
         title: 'Compiler',
         component: (
-          <RawDataSnippet
-            data={ JSON.stringify(data.compiler_settings, undefined, 4) }
+          <CodeViewSnippet
+            data={ JSON.stringify(data.compiler_settings, undefined, 2) }
+            language="json"
             title="Compiler Settings"
-            textareaMaxHeight="600px"
+            copyData={ JSON.stringify(data.compiler_settings) }
             isLoading={ isLoading }
           />
         ),
@@ -110,10 +112,11 @@ export default function useContractDetailsTabs({ data, isLoading, addressHash, s
         id: 'contract_abi' as const,
         title: 'ABI',
         component: (
-          <RawDataSnippet
-            data={ JSON.stringify(data.abi, undefined, 4) }
+          <CodeViewSnippet
+            data={ JSON.stringify(data.abi, undefined, 2) }
+            language="json"
             title="Contract ABI"
-            textareaMaxHeight="600px"
+            copyData={ JSON.stringify(data.abi) }
             isLoading={ isLoading }
           />
         ),

diff --git a/ui/shared/CodeViewSnippet.tsx b/ui/shared/CodeViewSnippet.tsx
@@ -0,0 +1,37 @@
+import { Box, chakra, Flex, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import CodeEditor from 'ui/shared/monaco/CodeEditor';
+
+interface Props {
+  data: string;
+  copyData?: string;
+  language: string;
+  title?: string;
+  className?: string;
+  rightSlot?: React.ReactNode;
+  isLoading?: boolean;
+}
+
+const CodeViewSnippet = ({ data, copyData, language, title, className, rightSlot, isLoading }: Props) => {
+
+  const editorData = React.useMemo(() => {
+    return [ { file_path: 'index', source_code: data } ];
+  }, [ data ]);
+
+  return (
+    <Box className={ className } as="section" title={ title }>
+      { (title || rightSlot) && (
+        <Flex justifyContent={ title ? 'space-between' : 'flex-end' } alignItems="center" mb={ 3 }>
+          { title && <Skeleton fontWeight={ 500 } isLoaded={ !isLoading }>{ title }</Skeleton> }
+          { rightSlot }
+          <CopyToClipboard text={ copyData ?? data } isLoading={ isLoading }/>
+        </Flex>
+      ) }
+      { isLoading ? <Skeleton height="500px" w="100%"/> : <CodeEditor data={ editorData } language={ language }/> }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(CodeViewSnippet));
diff --git a/ui/shared/monaco/CodeEditor.tsx b/ui/shared/monaco/CodeEditor.tsx
@@ -62,7 +62,18 @@ const CodeEditor = ({ data, remappings, libraries, language, mainFile, contractN
 
   const editorWidth = containerRect ? containerRect.width - (isMobile ? 0 : SIDE_BAR_WIDTH) : 0;
 
-  const editorLanguage = language === 'vyper' ? 'elixir' : 'sol';
+  const editorLanguage = (() => {
+    switch (language) {
+      case 'vyper':
+        return 'elixir';
+      case 'json':
+        return 'json';
+      case 'solidity':
+        return 'sol';
+      default:
+        return 'javascript';
+    }
+  })();
 
   React.useEffect(() => {
     instance?.editor.setTheme(colorMode === 'light' ? 'blockscout-light' : 'blockscout-dark');