padding and format

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -13,14 +13,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
     if (item instanceof Array) {
       ret.children = item.map((item, index) => {
-            return {key: index, value: item}
+        return { key: index, value: item }
       })
       ret.self = 'Array'
       ret.isNode = true
       ret.isLeaf = false
     } else if (item instanceof Object) {
       ret.children = Object.keys(item).map((key) => {
-                return {key: key, value: item[key]}
+        return { key: key, value: item[key] }
       })
       ret.self = 'Object'
       ret.isNode = true
@@ -136,8 +136,8 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   const update = function (calldata) {
     let isEmpty = !calldata ? true : false
 
-        if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
-        else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
+    if (calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
+    else if (calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
 
     setState(prevState => {
       return {
@@ -166,17 +166,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
       )
     })
 
-        if (children && children.length > 0 ) {
+    if (children && children.length > 0) {
       return (
-                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
+        <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
           <TreeView id={`treeView${key}`} key={keyPath}>
-                        { children }
-                        { data.hasNext && <TreeViewItem id={`treeViewLoadMore`} data-id={`treeViewLoadMore`} className="cursor_pointer" label="Load more" onClick={() => { triggerEvent(loadMoreEvent, [data.cursor]) }} /> }
+            {children}
+            {data.hasNext && <TreeViewItem id={`treeViewLoadMore`} data-id={`treeViewLoadMore`} className="cursor_pointer" label="Load more" onClick={() => { triggerEvent(loadMoreEvent, [data.cursor]) }} />}
           </TreeView>
         </TreeViewItem>
       )
     } else {
-            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
+      return <TreeViewItem id={key.toString()} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
     }
   }
 
@@ -186,7 +186,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     <div className="border rounded px-1 mt-1 bg-light">
       <div className="py-0 px-1 title">
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
-                <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
+        <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span>
         <CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
       </div>
       <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
@@ -201,8 +201,8 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
             </TreeView>
           }
         </div>
-                <div className='dropdownrawcontent' hidden={true}>{ state.copiableContent }</div>
-                <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
+        <div className='dropdownrawcontent' hidden={true}>{state.copiableContent}</div>
+        <div className='message' style={{ display: state.message.display }}>{state.message.innerText}</div>
       </div>
     </div>
   )