Some minor improvements

packages/apps/tools/locales/en/common.json

@@ -166,5 +166,8 @@
   "Save Network": "Save Network",
   "Network label": "Network label",
   "Network ID": "Network ID",
-  "Network api": "Network api"
+  "Network api": "Network api",
+  "No code to be shown yet": "No code to be shown yet",
+  "Click on a module from the left panel to see its code in this panel.": "Click on a module from the left panel to see its code in this panel.",
+  "Select/open a module to see the outline of the contract/module": "Select/open a module to see the outline of the contract/module"
 }

packages/apps/tools/src/components/Global/ModuleExplorer/SidePanel/index.tsx

@@ -12,6 +12,7 @@ import {
   outlineStyle,
 } from './styles.css';
 
+import useTranslation from 'next-translate/useTranslation';
 import React, { useState, useTransition } from 'react';
 
 export interface ISidePanelProps {
@@ -32,6 +33,7 @@ const SidePanel = ({
   const [text, setText] = useState('');
   const [searchQuery, setSearchQuery] = useState<string>();
   const [isPending, startTransition] = useTransition();
+  const { t } = useTranslation('common');
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     setText(e.target.value);
@@ -46,8 +48,8 @@ const SidePanel = ({
         <TextField
           label="Search"
           inputProps={{
-            id: 'something',
-            placeholder: 'Module name',
+            id: 'module-explorer-search',
+            placeholder: t('Module name'),
             onChange,
             value: text,
           }}

packages/apps/tools/src/components/Global/ModuleExplorer/SidePanel/outline.tsx

@@ -4,14 +4,15 @@ import { Button, Heading, Text, Tree } from '@kadena/react-ui';
 
 import type { IChainModule } from '../types';
 
+import useTranslation from 'next-translate/useTranslation';
 import React from 'react';
 
 export interface IOutlineProps extends React.HTMLAttributes<HTMLDivElement> {
   selectedModule?: IChainModule;
   onInterfaceClick: (module: IChainModule) => void;
 }
 
-type Contract = ReturnType<typeof contractParser>[0][0]; // TODO: fix this because it's ugly/nasty
+type Contract = ReturnType<typeof contractParser>[0][0]; // TODO: Should we improve this because it's a bit hacky?
 
 const contractToTreeItems = (
   contract: Contract,
@@ -64,12 +65,12 @@ const contractToTreeItems = (
 
 const Outline = (props: IOutlineProps): React.JSX.Element => {
   const { selectedModule, onInterfaceClick } = props;
+  const { t } = useTranslation('common');
 
   let parsedContract: Contract;
   if (selectedModule) {
     const [, namespace] = selectedModule.moduleName.split('.');
-    const [parsedModules] = contractParser(selectedModule.code!, namespace);
-    parsedContract = parsedModules[0]; // TODO: improve this
+    [[parsedContract]] = contractParser(selectedModule.code!, namespace);
   }
 
   return (
@@ -91,7 +92,7 @@ const Outline = (props: IOutlineProps): React.JSX.Element => {
         />
       ) : (
         <Text>
-          Select/open a module to see the outline of the contract/module
+          {t('Select/open a module to see the outline of the contract/module')}
         </Text>
       )}
     </div>

packages/apps/tools/src/components/Global/ModuleExplorer/SidePanel/results.tsx

@@ -24,7 +24,7 @@ const truncateString = (str: string, maxChars: number): string => {
   return `${str.slice(0, maxChars)}...`;
 };
 
-const CHARCOUNT_BREAKING_POINT = 19; // This char count doesn't "break" the line into multiple lines
+const CHARCOUNT_BREAKING_POINT = 15;
 
 const resultsMapToTreeItems = (
   data: IResultsProps['data'],
@@ -48,9 +48,7 @@ const resultsMapToTreeItems = (
           title={chainId + (hash ? ` - ${hash}` : '')}
         >
           {chainId}
-          {`${
-            hash ? ` - ${truncateString(hash, CHARCOUNT_BREAKING_POINT)}` : ''
-          }`}
+          {hash ? ` - ${truncateString(hash, CHARCOUNT_BREAKING_POINT)}` : null}
         </Button>
       ),
     })),

packages/apps/tools/src/components/Global/ModuleExplorer/editor.tsx

@@ -3,6 +3,7 @@ import { Heading, Tabs } from '@kadena/react-ui';
 import type { IChainModule } from './types';
 
 import dynamic from 'next/dynamic';
+import useTranslation from 'next-translate/useTranslation';
 import React from 'react';
 
 const AceViewer = dynamic(import('@/components/Global/Ace'), {
@@ -18,12 +19,16 @@ const moduleToTabId = ({ moduleName, chainId }: IChainModule): string => {
 };
 
 const Editor = ({ openedModules }: IEditorProps): React.JSX.Element => {
+  const { t } = useTranslation('common');
+
   if (!openedModules.length) {
     return (
       <section>
-        <Heading variant="h4">No code to be shown yet</Heading>
+        <Heading variant="h4">{t('No code to be shown yet')}</Heading>
         <p>
-          Click on a module from the left panel to see its code in this panel.
+          {t(
+            'Click on a module from the left panel to see its code in this panel.',
+          )}
         </p>
       </section>
     );

packages/apps/tools/src/components/Global/ModuleExplorer/index.tsx

@@ -11,8 +11,8 @@ import React from 'react';
 export interface IModuleExplorerProps {
   modules: IChainModule[];
   openedModules: IEditorProps['openedModules'];
-  onModuleClick: (module: IChainModule) => void;
-  onInterfaceClick: (module: IChainModule) => void;
+  onModuleClick: ISidePanelProps['onResultClick'];
+  onInterfaceClick: ISidePanelProps['onInterfaceClick'];
   onModuleExpand: ISidePanelProps['onModuleExpand'];
 }
 

packages/apps/tools/src/pages/transactions/module-explorer/index.tsx

@@ -126,24 +126,19 @@ const replaceOldWithNew = (
   });
 };
 
-/**
+/*
  * In this function we'll add the `hash` property to the module, so that, in the list of modules,
  * you can see if there are any differences in the module on certain chains.
- *
- * @param x
- * @param network
- * @param networksData
- * @returns
  */
 export const enrichModule = async (
-  x: IModule,
+  module: IModule,
   network: Network,
   networksData: INetworkData[],
   queryClient: QueryClient,
 ) => {
-  const promises = x.chains.map((chain) => {
+  const promises = module.chains.map((chain) => {
     return getCompleteModule(
-      { moduleName: x.moduleName, chainId: chain },
+      { moduleName: module.moduleName, chainId: chain },
       network,
       networksData,
     );