feat: add nano contracts list

src/App.js

@@ -35,6 +35,7 @@ import WebSocketHandler from './WebSocketHandler';
 import NanoContractDetail from './screens/nano/NanoContractDetail';
 import BlueprintDetail from './screens/nano/BlueprintDetail';
 import BlueprintList from './screens/nano/BlueprintList';
+import NanoContractsList from './screens/nano/NanoContractsList';
 import {
   apiLoadErrorUpdate,
   dashboardUpdate,
@@ -169,6 +170,10 @@ function Root() {
             element={<NavigationRoute internalScreen={BlueprintDetail} />}
           />
           <Route path="/blueprints/" element={<NavigationRoute internalScreen={BlueprintList} />} />
+          <Route
+            path="/nano_contracts/"
+            element={<NavigationRoute internalScreen={NanoContractsList} />}
+          />
           <Route path="" element={<NavigationRoute internalScreen={DashboardTx} />} />
         </Routes>
       </BrowserRouter>

src/api/nanoApi.js

@@ -172,6 +172,44 @@ const nanoApi = {
         );
       });
   },
+
+  /**
+   * Get list of nano contract creation txs
+   *
+   * @param {number | null} count Number of elements to get the list
+   * @param {string | null} after ID of the blueprint to get as reference for after pagination
+   * @param {string | null} before ID of the blueprint to get as reference for before pagination
+   * @param {string | null} search ID of the blueprint or nano contract creation to filter in the API
+   * @param {string | null} order Order of the sorting ('asc' or 'desc')
+   *
+   * For more details, see full node api docs
+   */
+  getNanoContractCreationList(count, after, before, search, order) {
+    const data = {};
+    if (count) {
+      data.count = count;
+    }
+    if (after) {
+      data.after = after;
+    }
+    if (before) {
+      data.before = before;
+    }
+    if (search) {
+      data.search = search;
+    }
+    if (order) {
+      data.order = order;
+    }
+    return requestExplorerServiceV1
+      .get(`node_api/nc_creation_list`, { params: data })
+      .then(res => res.data)
+      .catch(err => {
+        throw new Error(
+          err?.data?.message || err?.message || `Unknown error on get nano contract creation list`
+        );
+      });
+  },
 };
 
 export default nanoApi;

src/components/Navigation.js

@@ -38,7 +38,12 @@ function Navigation() {
   const txSearchRef = useRef(null);
   const isTokensBaseEnabled = useFlag(`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`);
   const isTokensBalanceEnabled = useFlag(`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`);
-  const theme = useSelector(state => state.theme);
+  const { serverInfo, theme } = useSelector(state => {
+    return {
+      serverInfo: state.serverInfo,
+      theme: state.theme,
+    };
+  });
   const newUiEnabled = useNewUiEnabled();
   const [showSearchInput, setShowSearchInput] = useState(false);
   const [showSidebar, setShowSidebar] = useState(false);
@@ -147,24 +152,29 @@ function Navigation() {
                   </div>
                 </ul>
               )}
-              <li className="nav-item dropdown">
-                <span
-                  className="nav-link dropdown-toggle custom-dropdown-toggle"
-                  id="navbarDropdown"
-                  role="button"
-                  data-bs-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  Nano
-                  <ArrorDownNavItem className="dropdown-icon" />
-                </span>
-                <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <NavLink to="/blueprints/?type=built-in" exact className="nav-link">
-                    Blueprints List
-                  </NavLink>
-                </div>
-              </li>
+              {serverInfo.nano_contracts_enabled && (
+                <li className="nav-item dropdown">
+                  <span
+                    className="nav-link dropdown-toggle custom-dropdown-toggle"
+                    id="navbarDropdown"
+                    role="button"
+                    data-bs-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                  >
+                    Nano
+                    <ArrorDownNavItem className="dropdown-icon" />
+                  </span>
+                  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <NavLink to="/nano_contracts/" className="nav-link">
+                      Nano Contracts List
+                    </NavLink>
+                    <NavLink to="/blueprints/?type=built-in" className="nav-link">
+                      Blueprints List
+                    </NavLink>
+                  </div>
+                </li>
+              )}
               <li className="nav-item">
                 <NavLink
                   to="/network"

src/components/Sidebar.js

@@ -24,7 +24,12 @@ function Sidebar({ close, open }) {
   const isTokensBaseEnabled = useFlag(`${UNLEASH_TOKENS_BASE_FEATURE_FLAG}.rollout`);
   const isTokensBalanceEnabled = useFlag(`${UNLEASH_TOKEN_BALANCES_FEATURE_FLAG}.rollout`);
   const showTokensTab = isTokensBalanceEnabled || isTokensBaseEnabled;
-  const theme = useSelector(state => state.theme);
+  const { serverInfo, theme } = useSelector(state => {
+    return {
+      serverInfo: state.serverInfo,
+      theme: state.theme,
+    };
+  });
   const sidebarRef = useRef(null);
   const [tokensOpen, setTokensOpen] = useState(false);
   const [nanoOpen, setNanoOpen] = useState(false);
@@ -96,26 +101,31 @@ function Sidebar({ close, open }) {
                   )}
                 </span>
               )}
-              <li className="nav-item item-sidebar">
-                <span onClick={() => setNanoOpen(!nanoOpen)}>
-                  Nano{' '}
-                  <ArrorDownNavItem
-                    style={{ marginLeft: '5px', rotate: toolsOpen ? '180deg' : '0deg' }}
-                    className="dropdown-icon"
-                  />
-                </span>
-                {nanoOpen && (
-                  <div>
-                    <ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
-                      <li>
-                        <NavLink to="/blueprints/?type=built-in" exact className="nav-link">
-                          Blueprints List
-                        </NavLink>
-                      </li>
-                    </ul>
-                  </div>
-                )}
-              </li>
+              {serverInfo.nano_contracts_enabled && (
+                <li className="nav-item item-sidebar">
+                  <span onClick={() => setNanoOpen(!nanoOpen)}>
+                    Nano{' '}
+                    <ArrorDownNavItem
+                      style={{ marginLeft: '5px', rotate: toolsOpen ? '180deg' : '0deg' }}
+                      className="dropdown-icon"
+                    />
+                  </span>
+                  {nanoOpen && (
+                    <div>
+                      <ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
+                        <li>
+                          <NavLink to="/nano_contracts/" exact className="nav-link">
+                            Nano Conctracts List
+                          </NavLink>
+                          <NavLink to="/blueprints/?type=built-in" exact className="nav-link">
+                            Blueprints List
+                          </NavLink>
+                        </li>
+                      </ul>
+                    </div>
+                  )}
+                </li>
+              )}
               <li className="nav-item item-sidebar">
                 <NavLink
                   to="/network"

src/components/nano/NanoContractsTable.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import SortableTable from '../SortableTable';
+import EllipsiCell from '../EllipsiCell';
+import dateFormatter from '../../utils/date';
+
+// XXX We should use function component with SortableTable as a component
+// but renderTableHead and renderTableBody are implemented and not
+// expected as a props, so it demands a bigger refactor
+class NanoContractsTable extends SortableTable {
+  renderTableHead() {
+    return (
+      <tr>
+        <th className="d-lg-table-cell">NANO CONTRACT ID</th>
+        <th className="d-lg-table-cell">BLUEPRINT</th>
+        <th className="d-lg-table-cell">LAST TRANSACTION</th>
+        <th className="d-lg-table-cell">TOTAL TRANSACTIONS</th>
+        <th
+          className="d-lg-table-cell sortable"
+          onClick={e => this.props.tableHeaderClicked(e, 'created_at')}
+        >
+          CREATED AT {this.getArrow('created_at')}
+        </th>
+      </tr>
+    );
+  }
+
+  renderTableBody() {
+    return this.props.data.map(nano => {
+      return (
+        <tr
+          key={nano.nano_contract_id}
+          onClick={_e => this.props.handleClickRow(nano.nano_contract_id)}
+        >
+          <td className="d-lg-table-cell pe-3">
+            {this.props.isMobile ? (
+              <EllipsiCell id={nano.nano_contract_id} countBefore={10} countAfter={10} />
+            ) : (
+              nano.nano_contract_id
+            )}
+          </td>
+          <td className="d-lg-table-cell pe-3">{nano.blueprint_name}</td>
+          <td className="d-lg-table-cell pe-3">
+            {dateFormatter.parseTimestampNewUi(nano.last_tx_timestamp)}
+          </td>
+          <td className="d-lg-table-cell pe-3">{nano.total_txs}</td>
+          <td className="d-lg-table-cell pe-3">
+            {dateFormatter.parseTimestampNewUi(nano.created_at)}
+          </td>
+        </tr>
+      );
+    });
+  }
+}
+
+NanoContractsTable.propTypes = SortableTable.propTypes;
+
+export default NanoContractsTable;

src/constants.js

@@ -116,6 +116,9 @@ export const NANO_CONTRACT_TX_HISTORY_COUNT = 5;
 // Number of elements in the blueprint list table
 export const BLUEPRINT_LIST_COUNT = 10;
 
+// Number of elements in the nano contracts list table
+export const NANO_CONTRACTS_LIST_COUNT = 10;
+
 export const COLORS = {
   danger: '#991300',
   success: '#44A32E',

src/newUi.scss

@@ -2266,7 +2266,7 @@ nav {
   text-transform: uppercase;
 }
 
-.table-stylized.blueprints-table {
+.table-stylized.blueprints-table, .table-stylized.nano-contracts-table {
   table-layout: auto;
 }
 
@@ -2690,6 +2690,14 @@ i.pointer {
   margin-bottom: 2rem;
 }
 
+.nano-creation-list .search {
+  width: 100%;
+}
+
+.search > .search-input.nano-list-search {
+  width: 100%;
+}
+
 .search-input {
   width: 400px;
   height: 100%;