chore: improve inputs and outputs lists (#388)

Author: obiyankenobi

src/assets/fonts/SFPRODISPLAYBOLD.OTF

@@ -29,11 +29,10 @@ export const DropDetails = ({ title, startOpen, onToggle, children }) => {
 
   return (
     <div className={`container-drop-div ${open ? 'container-drop-div-open' : ''}`}>
-      <div className="container-drop-header">
+      <div className="container-drop-header" onClick={click}>
         <div className="container-drop-header-title">{title}</div>
-        <div onClick={click}>
+        <div>
           <RowDown
-            className="drop-arrow-color"
             width="24px"
             height="24px"
             style={{ transform: `${!open ? 'rotate(180deg)' : ''}` }}

src/components/DropDetails.js

@@ -320,22 +320,17 @@ class TxData extends React.Component {
     };
 
     const renderInputs = inputs => {
-      return inputs.map(input => {
-        return (
-          <div key={`${input.tx_id}${input.index}`}>
-            <Link to={`/transaction/${input.tx_id}`}>{helpers.getShortHash(input.tx_id)}</Link> (
-            {input.index}){renderInputOrOutput(input, 0, false)}
-          </div>
-        );
-      });
+      const obj = inputs.map(input => (
+        <div key={`${input.tx_id}${input.index}`}>
+          <Link to={`/transaction/${input.tx_id}`}>{helpers.getShortHash(input.tx_id)}</Link> (
+          {input.index}){renderInputOrOutput(input, 0, false)}
+        </div>
+      ));
+      return renderListWithSpacer(obj);
     };
 
     const renderOutputToken = output => {
-      return (
-        <strong>
-          {this.getOutputToken(hathorLib.tokensUtils.getTokenIndexFromData(output.token_data))}
-        </strong>
-      );
+      return this.getOutputToken(hathorLib.tokensUtils.getTokenIndexFromData(output.token_data));
     };
 
     const outputValue = output => {
@@ -367,7 +362,7 @@ class TxData extends React.Component {
     const renderOutputLink = idx => {
       if (idx in this.props.spentOutputs) {
         return (
-          <span>
+          <span className="fw-bold">
             {' '}
             (<Link to={`/transaction/${this.props.spentOutputs[idx]}`}>Spent</Link>)
           </span>
@@ -379,11 +374,8 @@ class TxData extends React.Component {
     const renderInputOrOutput = (output, idx, isOutput) => {
       return (
         <div key={idx}>
-          <div>
-            <span style={this.props.newUiEnabled ? { fontWeight: '600' } : null}>
-              {outputValue(output)}
-            </span>{' '}
-            {renderOutputToken(output)}
+          <div className="fw-bold">
+            <span>{outputValue(output)}</span> {renderOutputToken(output)}
           </div>
           <div>
             {renderDecodedScript(output)}
@@ -394,9 +386,8 @@ class TxData extends React.Component {
     };
 
     const renderOutputs = outputs => {
-      return outputs.map((output, idx) => {
-        return renderInputOrOutput(output, idx, true);
-      });
+      const obj = outputs.map((output, idx) => renderInputOrOutput(output, idx, true));
+      return renderListWithSpacer(obj);
     };
 
     const renderDecodedScript = output => {
@@ -509,14 +500,23 @@ class TxData extends React.Component {
       ));
     };
 
-    const renderNewUiDivList = hashes => {
+    const renderTxListWithSpacer = hashes => {
+      const obj = hashes.map((h, key) => (
+        <Link className="fs-14" key={key} to={`/transaction/${h}`}>
+          {h}
+        </Link>
+      ));
+      return renderListWithSpacer(obj);
+    };
+
+    const renderListWithSpacer = children => {
       return (
         <table className="table-details">
           <tbody>
-            {hashes.map((h, index) => (
-              <tr className="tr-details" key={h}>
-                <td className={index === hashes.length - 1 ? 'tr-details-last-cell' : ''}>
-                  <Link to={`/transaction/${h}`}>{h}</Link>
+            {children.map((child, index) => (
+              <tr className="tr-details" key={index}>
+                <td className={index === children.length - 1 ? 'tr-details-last-cell' : ''}>
+                  {child}
                 </td>
               </tr>
             ))}
@@ -760,7 +760,6 @@ class TxData extends React.Component {
               {this.props.transaction.parents && this.props.transaction.parents.length ? (
                 <a className="arrow-graph" href="true">
                   <RowDown
-                    className="drop-arrow-color"
                     width="24px"
                     height="24px"
                     style={{
@@ -820,25 +819,22 @@ class TxData extends React.Component {
         }
         return <Link to={`/token_detail/${token.uid}`}>{token.uid}</Link>;
       };
-      const tokens = this.state.tokens.map(token => {
-        return (
-          <div key={token.uid}>
+      const obj = this.state.tokens.map(token => (
+        // TODO I don't think we have a TokenMarker here on Figma. Remove?
+        <div key={token.uid}>
+          <div>
             <TokenMarkers token={token} />
             <span>
-              {token.name} <strong>({token.symbol})</strong> | {renderTokenUID(token)}
+              {token.name} ({token.symbol})
             </span>
           </div>
-        );
-      });
-      return this.props.newUiEnabled ? (
-        <DropDetails title="Tokens">{tokens}</DropDetails>
-      ) : (
-        <div className="d-flex flex-column align-items-start mb-3 common-div bordered-wrapper">
-          <div>
-            <label>Tokens:</label>
-          </div>
-          {tokens}
+          <div>{renderTokenUID(token)}</div>
         </div>
+      ));
+      return (
+        <DropDetails startOpen title="Tokens">
+          {renderListWithSpacer(obj)}
+        </DropDetails>
       );
     };
 
@@ -1256,10 +1252,10 @@ class TxData extends React.Component {
             {this.state.tokens.length > 0 && renderTokenList()}
             <div className="tx-drop-container-div">
               <DropDetails title="Parents:">
-                {renderNewUiDivList(this.props.transaction.parents)}
+                {renderTxListWithSpacer(this.props.transaction.parents)}
               </DropDetails>
               <DropDetails title="Children:">
-                {renderNewUiDivList(this.props.meta.children)}
+                {renderTxListWithSpacer(this.props.meta.children)}
               </DropDetails>
             </div>
             {this.state.graphs.map((graph, index) => renderNewUiGraph(index))}

src/components/tx/TxData.js

@@ -98,6 +98,13 @@ $secondary-color-dark: #191c21;
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'San Francisco Pro';
+  src: url('./assets/fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
+  font-weight: bold;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'Mona Sans';
   src: url('./assets/fonts/Mona-Sans.woff2') format('woff2');
@@ -1128,17 +1135,19 @@ nav {
   border-bottom: none !important;
 }
 
+.fs-14 {
+  font-size: 14px !important;
+}
+
 .table-details td {
-  color: var(--purple-text);
-  padding: 20px 10px;
+  padding: 20px 0px;
   border-bottom: 1px solid var(--border-color);
   font-family: 'San Francisco Pro', sans-serif;
-  font-size: 12px;
+  font-size: 16px;
   text-align: left;
   white-space: wrap;
   word-break: break-word;
-  font-weight: 500;
-  line-height: 20px;
+  line-height: 24px;
   letter-spacing: 0.03em;
 }
 
@@ -1189,11 +1198,17 @@ nav {
   gap: 16px;
 }
 
+.drop-arrow-color {
+  color: var(--bold-text-color);
+  cursor: pointer;
+}
+
 .container-drop-header {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
+  cursor: pointer;
 }
 
 .container-drop-header-title {
@@ -2343,7 +2358,7 @@ nav {
   flex-direction: row;
   gap: 2px;
   align-items: center;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 20px;
   letter-spacing: 0.03em;
@@ -3416,11 +3431,6 @@ th.sortable {
   text-align: center;
 }
 
-.drop-arrow-color {
-  color: var(--bold-text-color);
-  cursor: pointer;
-}
-
 .custom-select-options ul li:hover {
   background-color: var(--secondary-color);
 }