chore: Upgrade Bootstrap from v4 to v5 (#295)

HathorNetwork · Aug 21, 2024 · 15e2339 · 15e2339
1 parent 8437858
commit 15e2339
Show file tree

Hide file tree

Showing 24 changed files with 126 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "@hathor/wallet-lib": "1.8.0",
     "@unleash/proxy-client-react": "1.0.4",
     "axios": "1.7.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "5.3.3",
     "d3-selection": "3.0.0",
     "d3-zoom": "3.0.0",
     "font-awesome": "4.7.0",

diff --git a/src/components/AddressHistory.js b/src/components/AddressHistory.js
@@ -95,13 +95,13 @@ class AddressHistory extends SortableTable {
         if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
           statusElement = (
             <span>
-              Token creation <i className={`fa ml-3 fa-long-arrow-down`}></i>
+              Token creation <i className={`fa ms-3 fa-long-arrow-down`}></i>
             </span>
           );
         } else {
           statusElement = (
             <span>
-              Received <i className={`fa ml-3 fa-long-arrow-down`}></i>
+              Received <i className={`fa ms-3 fa-long-arrow-down`}></i>
             </span>
           );
         }
@@ -110,13 +110,13 @@ class AddressHistory extends SortableTable {
         if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
           statusElement = (
             <span>
-              Token deposit <i className={`fa ml-3 fa-long-arrow-up`}></i>
+              Token deposit <i className={`fa ms-3 fa-long-arrow-up`}></i>
             </span>
           );
         } else {
           statusElement = (
             <span>
-              Sent <i className={`fa ml-3 fa-long-arrow-up`}></i>
+              Sent <i className={`fa ms-3 fa-long-arrow-up`}></i>
             </span>
           );
         }
@@ -136,20 +136,20 @@ class AddressHistory extends SortableTable {
       }
       return (
         <tr key={tx.tx_id} className={trClass} onClick={e => this.props.onRowClicked(tx.tx_id)}>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {hathorLib.transactionUtils.getTxType(tx)}
           </td>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
           </td>
-          <td className="d-none d-lg-table-cell pr-3">
+          <td className="d-none d-lg-table-cell pe-3">
             {dateFormatter.parseTimestamp(tx.timestamp)}
           </td>
           <td className="state">{statusElement}</td>
           <td className="value">
             <span className="">{prettyValue}</span>
           </td>
-          <td className="d-lg-none d-table-cell pr-3" colSpan="3">
+          <td className="d-lg-none d-table-cell pe-3" colSpan="3">
             {hathorLib.transactionUtils.getTxType(tx)}
             <br />
             {hathorLib.helpersUtils.getShortHash(tx.tx_id)}

diff --git a/src/components/AddressHistoryLegacy.js b/src/components/AddressHistoryLegacy.js
@@ -99,7 +99,7 @@ class AddressHistory extends React.Component {
             <ul className="pagination">
               <li
                 ref="txPrevious"
-                className={!this.props.hasBefore ? 'page-item mr-3 disabled' : 'page-item mr-3'}
+                className={!this.props.hasBefore ? 'page-item me-3 disabled' : 'page-item me-3'}
               >
                 <Link
                   className="page-link"
@@ -173,13 +173,13 @@ class AddressHistory extends React.Component {
           if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
             statusElement = (
               <span>
-                Token creation <i className={`fa ml-3 fa-long-arrow-down`}></i>
+                Token creation <i className={`fa ms-3 fa-long-arrow-down`}></i>
               </span>
             );
           } else {
             statusElement = (
               <span>
-                Received <i className={`fa ml-3 fa-long-arrow-down`}></i>
+                Received <i className={`fa ms-3 fa-long-arrow-down`}></i>
               </span>
             );
           }
@@ -188,13 +188,13 @@ class AddressHistory extends React.Component {
           if (tx.version === hathorLib.constants.CREATE_TOKEN_TX_VERSION) {
             statusElement = (
               <span>
-                Token deposit <i className={`fa ml-3 fa-long-arrow-up`}></i>
+                Token deposit <i className={`fa ms-3 fa-long-arrow-up`}></i>
               </span>
             );
           } else {
             statusElement = (
               <span>
-                Sent <i className={`fa ml-3 fa-long-arrow-up`}></i>
+                Sent <i className={`fa ms-3 fa-long-arrow-up`}></i>
               </span>
             );
           }
@@ -213,21 +213,21 @@ class AddressHistory extends React.Component {
 
         return (
           <tr key={tx.tx_id} className={trClass} onClick={e => this.props.onRowClicked(tx.tx_id)}>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {hathorLib.transactionUtils.getTxType(tx)}
             </td>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {hathorLib.helpersUtils.getShortHash(tx.tx_id)}
             </td>
-            <td className="d-none d-lg-table-cell pr-3">
+            <td className="d-none d-lg-table-cell pe-3">
               {dateFormatter.parseTimestamp(tx.timestamp)}
             </td>
             <td className={tx.is_voided ? 'voided state' : 'state'}>{statusElement}</td>
             <td>{tx.is_voided && <span className="voided-element">Voided</span>}</td>
             <td className="value">
               <span className={tx.is_voided ? 'voided' : ''}>{prettyValue}</span>
             </td>
-            <td className="d-lg-none d-table-cell pr-3" colSpan="3">
+            <td className="d-lg-none d-table-cell pe-3" colSpan="3">
               {hathorLib.transactionUtils.getTxType(tx)}
               <br />
               {hathorLib.helpersUtils.getShortHash(tx.tx_id)}

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -58,7 +58,7 @@ function Navigation({ history }) {
 
   return (
     <div className="main-nav">
-      <nav className="navbar navbar-expand-lg navbar-dark pl-3 pl-lg-0">
+      <nav className="navbar navbar-expand-lg navbar-dark ps-3 ps-lg-0">
         <div className="d-flex flex-column align-items-center">
           <Link className="navbar-brand" to="/" href="/">
             <img src={logo} alt="" />
@@ -67,16 +67,16 @@ function Navigation({ history }) {
         <button
           className="navbar-toggler"
           type="button"
-          data-toggle="collapse"
-          data-target="#navbarSupportedContent"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span className="navbar-toggler-icon" />
         </button>
         <div className="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul className="navbar-nav mr-auto">
+          <ul className="navbar-nav me-auto">
             <li className="nav-item">
               <NavLink
                 to="/"
@@ -94,7 +94,7 @@ function Navigation({ history }) {
                   className="nav-link dropdown-toggle"
                   id="navbarDropdown"
                   role="button"
-                  data-toggle="dropdown"
+                  data-bs-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                 >
@@ -143,7 +143,7 @@ function Navigation({ history }) {
                 className="nav-link dropdown-toggle"
                 id="navbarDropdown"
                 role="button"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false"
               >
@@ -165,10 +165,10 @@ function Navigation({ history }) {
               </div>
             </li>
           </ul>
-          <div className="navbar-right d-flex flex-row align-items-center navigation-search">
+          <div className="d-flex flex-row align-items-center ms-auto navigation-search">
             <div className="d-flex flex-row align-items-center">
               <input
-                className="form-control mr-2"
+                className="form-control me-2"
                 type="search"
                 placeholder="Search tx or address"
                 aria-label="Search"

diff --git a/src/components/Network.js b/src/components/Network.js
@@ -329,7 +329,7 @@ class Network extends React.Component {
               Select a peer to check its network status.
             </span>
           </button>
-          <button className="btn btn-hathor ml-auto" onClick={this.loadData}>
+          <button className="btn btn-hathor ms-auto" onClick={this.loadData}>
             Reload data
           </button>
         </div>

diff --git a/src/components/SortableTable.js b/src/components/SortableTable.js
@@ -73,8 +73,8 @@ class SortableTable extends React.Component {
               ref="pagePrevious"
               className={
                 !this.props.hasBefore || this.props.calculatingPage
-                  ? 'page-item mr-3 disabled'
-                  : 'page-item mr-3'
+                  ? 'page-item me-3 disabled'
+                  : 'page-item me-3'
               }
             >
               <button onClick={e => this.props.onPreviousPageClicked(e)} className="page-link">

diff --git a/src/components/feature_activation/FeatureDataRow.js b/src/components/feature_activation/FeatureDataRow.js
@@ -16,10 +16,10 @@ class FeatureDataRow extends React.Component {
 
     return (
       <tr>
-        <td className="d-lg-table-cell pr-3">{bit}</td>
-        <td className="d-lg-table-cell pr-3">{prettySignal}</td>
-        <td className="d-lg-table-cell pr-3">{feature || '—'}</td>
-        <td className="d-lg-table-cell pr-3">{prettyState || '—'}</td>
+        <td className="d-lg-table-cell pe-3">{bit}</td>
+        <td className="d-lg-table-cell pe-3">{prettySignal}</td>
+        <td className="d-lg-table-cell pe-3">{feature || '—'}</td>
+        <td className="d-lg-table-cell pe-3">{prettyState || '—'}</td>
       </tr>
     );
   }

diff --git a/src/components/feature_activation/FeatureRow.js b/src/components/feature_activation/FeatureRow.js
@@ -17,21 +17,21 @@ class FeatureRow extends React.Component {
 
     return (
       <tr>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.name}</td>
-        <td className="d-lg-table-cell pr-3">{prettyState}</td>
-        <td className="d-lg-table-cell pr-3">{acceptance_percentage}</td>
-        <td className="d-lg-table-cell pr-3">{(this.props.feature.threshold * 100).toFixed(0)}%</td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">{this.props.feature.name}</td>
+        <td className="d-lg-table-cell pe-3">{prettyState}</td>
+        <td className="d-lg-table-cell pe-3">{acceptance_percentage}</td>
+        <td className="d-lg-table-cell pe-3">{(this.props.feature.threshold * 100).toFixed(0)}%</td>
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.start_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.minimum_activation_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.feature.timeout_height, 0)}
         </td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.lock_in_on_timeout.toString()}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.version}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.feature.lock_in_on_timeout.toString()}</td>
+        <td className="d-lg-table-cell pe-3">{this.props.feature.version}</td>
       </tr>
     );
   }

diff --git a/src/components/feature_activation/Features.js b/src/components/feature_activation/Features.js
@@ -129,7 +129,7 @@ class Features extends React.Component {
           <ul className="pagination">
             <li
               ref="featurePrevious"
-              className={`page-item mr-3 ${this.hasBefore() ? '' : 'disabled'}`}
+              className={`page-item me-3 ${this.hasBefore() ? '' : 'disabled'}`}
             >
               <Link
                 className="page-link"
@@ -209,7 +209,7 @@ class Features extends React.Component {
           <div className="f-flex flex-column align-items-start common-div bordered-wrapper mt-3 mt-lg-0 w-100 feature-column-descriptions">
             <div>
               <label>Column descriptions: </label>
-              <a href="true" className="ml-1" onClick={e => this.toggleColumnDescriptions(e)}>
+              <a href="true" className="ms-1" onClick={e => this.toggleColumnDescriptions(e)}>
                 {this.state.showColumnDescriptions ? 'Click to hide' : 'Click to show'}
               </a>
             </div>

diff --git a/src/components/token/TokenAlerts.js b/src/components/token/TokenAlerts.js
@@ -15,7 +15,7 @@ const TokenAlerts = props => {
 
     return (
       <div className="alert alert-danger backup-alert" role="alert">
-        <i className="fa fa-exclamation-triangle mr-2" title="Banned Token"></i>
+        <i className="fa fa-exclamation-triangle me-2" title="Banned Token"></i>
         {tokenBannedMessage}
       </div>
     );

diff --git a/src/components/token/TokenAutoCompleteField.js b/src/components/token/TokenAutoCompleteField.js
@@ -177,7 +177,7 @@ class TokenAutoCompleteField extends React.Component {
   _renderInputForm() {
     if (this.state.selectedItem) {
       return (
-        <div className="selectedItemWrapper mr-2 form-control">
+        <div className="selectedItemWrapper me-2 form-control">
           <div className="autocomplete-selected-item">
             <span>
               {this.state.selectedItem.name} ({this.state.selectedItem.symbol}) -{' '}
@@ -195,7 +195,7 @@ class TokenAutoCompleteField extends React.Component {
 
     return (
       <input
-        className="form-control mr-2 autocomplete-input"
+        className="form-control me-2 autocomplete-input"
         type="search"
         value={this.state.searchText}
         onKeyUp={this.onSearchTextKeyUp}

diff --git a/src/components/token/TokenBalanceRow.js b/src/components/token/TokenBalanceRow.js
@@ -28,14 +28,14 @@ class TokenBalanceRow extends React.Component {
   render() {
     return (
       <tr onClick={e => this.onRowClicked(this.props.address)}>
-        <td className="d-lg-table-cell pr-3">{this.props.address}</td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">{this.props.address}</td>
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.total, this.props.decimalPlaces)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.unlocked, this.props.decimalPlaces)}
         </td>
-        <td className="d-lg-table-cell pr-3">
+        <td className="d-lg-table-cell pe-3">
           {numberUtils.prettyValue(this.props.locked, this.props.decimalPlaces)}
         </td>
       </tr>

diff --git a/src/components/token/TokenConfig.js b/src/components/token/TokenConfig.js
@@ -71,7 +71,7 @@ const TokenConfig = props => {
             {getShortConfigurationString()}
             <CopyToClipboard text={configurationString} onCopy={copied}>
               <i
-                className="fa fa-lg fa-clone pointer ml-1 float-right"
+                className="fa fa-lg fa-clone pointer ms-1 float-right"
                 title="Copy to clipboard"
               ></i>
             </CopyToClipboard>
@@ -85,7 +85,7 @@ const TokenConfig = props => {
             href="true"
           >
             Download
-            <i className="fa fa-download ml-1 float-right" title="Download QRCode"></i>
+            <i className="fa fa-download ms-1 float-right" title="Download QRCode"></i>
           </a>
         </p>
       </div>